/* =====================================================================
   LIYU JOBS — UI Polish Layer (v1.0)
   ---------------------------------------------------------------------
   Pure-visual enhancement layer loaded AFTER style.css.
   Safe by design: it ONLY refines appearance of existing components
   (cards, buttons, inputs, nav, hero, badges, modals) in both light
   and dark mode. It does not touch layout logic, selectors used by
   JS behaviour, or any functionality.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------ */
:root {
    --lp-green:        #1B5E20;
    --lp-green-light:  #2E7D32;
    --lp-green-soft:   rgba(27, 94, 32, 0.08);
    --lp-gold:         #D4A843;
    --lp-gold-light:   #E8C468;
    --lp-ink:          #0f172a;
    --lp-shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.05);
    --lp-shadow-sm:    0 2px 8px -2px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --lp-shadow-md:    0 12px 28px -12px rgba(15, 23, 42, 0.18), 0 4px 10px -6px rgba(15, 23, 42, 0.08);
    --lp-shadow-lg:    0 24px 48px -20px rgba(15, 23, 42, 0.22), 0 8px 16px -10px rgba(15, 23, 42, 0.10);
    --lp-shadow-green: 0 16px 36px -18px rgba(27, 94, 32, 0.45);
    --lp-ease:         cubic-bezier(0.22, 1, 0.36, 1);
    --lp-radius:       0.75rem;
}

html.dark {
    --lp-shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.45);
    --lp-shadow-md: 0 12px 28px -12px rgba(0, 0, 0, 0.55);
    --lp-shadow-lg: 0 24px 48px -20px rgba(0, 0, 0, 0.65);
}

/* ---------------------------------------------------------------------
   2. Base refinements — typography, selection, focus, scrollbar
   ------------------------------------------------------------------ */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga" 1, "kern" 1;
}

/* Branded text selection */
::selection {
    background: rgba(27, 94, 32, 0.85);
    color: #fff;
}
html.dark ::selection {
    background: rgba(212, 168, 67, 0.85);
    color: #17280f;
}

/* Accessible focus ring for keyboard users only */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--lp-gold);
    outline-offset: 2px;
    border-radius: 0.375rem;
}

/* Branded scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #b8c4bd, #94a89a);
    border-radius: 999px;
    border: 2px solid #f1f5f9;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--lp-green-light), var(--lp-green));
}
html.dark ::-webkit-scrollbar-track {
    background: #111827;
}
html.dark ::-webkit-scrollbar-thumb {
    background: #374151;
    border-color: #111827;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--lp-green-light);
}

/* Images: prevent layout jank and awkward upscale */
img {
    content-visibility: auto;
}

/* ---------------------------------------------------------------------
   3. Header & navigation
   ------------------------------------------------------------------ */

/* Sticky nav: soften once page is scrolled (class added by ui-polish.js) */
#mainNav {
    transition: box-shadow 0.35s var(--lp-ease), background-color 0.3s ease;
}
#mainNav.is-scrolled {
    box-shadow: 0 8px 30px -12px rgba(15, 23, 42, 0.18);
    backdrop-filter: saturate(1.4) blur(8px);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
}
html.dark #mainNav.is-scrolled {
    box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.6);
}

/* Brand lockup: Amharic tagline pill (static markup in header.php) */
#mainNav a[href$="/"] > div {
    line-height: 1.1;
}
#mainNav a[href$="/"] .brand-amharic {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    margin-top: 0.2em;
    padding: 0.1em 0.6em;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(212, 168, 67, 0.14), rgba(27, 94, 32, 0.12));
    border: 1px solid rgba(212, 168, 67, 0.25);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #4d7c0f;
    vertical-align: middle;
    white-space: nowrap;
    transition: transform 0.25s var(--lp-ease), box-shadow 0.25s ease;
}
html.dark #mainNav a[href$="/"] .brand-amharic {
    color: #d9f99d;
    background: linear-gradient(90deg, rgba(212, 168, 67, 0.2), rgba(27, 94, 32, 0.3));
    border-color: rgba(212, 168, 67, 0.35);
}
#mainNav a[href$="/"]:hover .brand-amharic {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(212, 168, 67, 0.5);
}

/* Nav links: smoother animated underline */
.nav-link::after {
    height: 2.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lp-green), var(--lp-gold));
    transition: width 0.35s var(--lp-ease);
}

/* Dropdown menus: gentle scale-in */
#mainNav .absolute.rounded-2xl {
    transform-origin: top center;
    animation: lpDropIn 0.22s var(--lp-ease) both;
}
@keyframes lpDropIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Top utility bar links */
body > div:first-of-type a {
    transition: transform 0.2s var(--lp-ease), color 0.2s ease, opacity 0.2s ease;
}
body > div:first-of-type a:hover {
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
   4. Hero & search
   ------------------------------------------------------------------ */

/* Badge chip in hero gets a soft glow pulse */
.public-hero .pulse-dot {
    box-shadow: 0 0 0 0 rgba(212, 168, 67, 0.7);
    animation: lpPulseDot 2.4s infinite;
}
@keyframes lpPulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(212, 168, 67, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0); }
}

/* Glass search panel: elegant focus-within glow */
.glass-panel {
    transition: box-shadow 0.4s var(--lp-ease), transform 0.4s var(--lp-ease);
}
.glass-panel:focus-within {
    box-shadow:
        0 0 0 2px rgba(212, 168, 67, 0.45),
        0 22px 60px -20px rgba(0, 0, 0, 0.55);
    transform: translateY(-2px);
}

/* Hero search inputs */
.public-hero input[type="search"] {
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Section kickers get a gold dash accent */
.section-kicker::before {
    content: "";
    display: inline-block;
    width: 1.75rem;
    height: 3px;
    margin-right: 0.6rem;
    vertical-align: middle;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lp-gold), var(--lp-green));
}

/* ---------------------------------------------------------------------
   5. Cards — job cards, list cards, soft cards
   ------------------------------------------------------------------ */

/* Featured v2 job card: richer lift + brand glow */
.job-card-v2 {
    will-change: transform;
}
.job-card-v2:hover {
    transform: translateY(-4px);
    box-shadow: var(--lp-shadow-md), var(--lp-shadow-green);
    border-color: rgba(27, 94, 32, 0.35);
}
.job-card-v2 .job-card-v2-logo img {
    transition: transform 0.45s var(--lp-ease);
}
.job-card-v2:hover .job-card-v2-logo img {
    transform: scale(1.08) rotate(-1deg);
}
.job-card-v2:hover h3 {
    color: var(--lp-green);
}
html.dark .job-card-v2:hover h3 {
    color: #86efac;
}

/* Quick actions become fully visible on card hover (touch unaffected) */
@media (hover: hover) {
    .job-card-v2 .job-card-v2-action-btn {
        transition: opacity 0.25s ease, transform 0.25s var(--lp-ease), background-color 0.2s ease, color 0.2s ease;
    }
    .job-card-v2:hover .job-card-v2-action-btn {
        transform: translateY(0);
    }
}
.job-card-v2-action-btn:hover {
    transform: scale(1.12);
    background: var(--lp-green);
    color: #fff;
    border-color: var(--lp-green);
}
.job-card-v2-action-btn.saved {
    background: var(--lp-gold);
    border-color: var(--lp-gold);
    color: #fff;
}

/* List & company cards: graceful hover */
.job-list-card,
.company-list-card {
    transition:
        border-color 0.3s ease,
        box-shadow 0.35s var(--lp-ease),
        transform 0.35s var(--lp-ease);
}
.job-list-card:hover,
.company-list-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lp-shadow-md);
    border-color: rgba(27, 94, 32, 0.4);
}

/* Soft card: gradient border sweep on hover */
.soft-card {
    transition: box-shadow 0.35s var(--lp-ease), border-color 0.3s ease, transform 0.35s var(--lp-ease);
}
.soft-card:hover {
    border-color: rgba(212, 168, 67, 0.55);
    box-shadow: var(--lp-shadow-md);
}

/* Logo tiles */
.logo-tile {
    transition: border-radius 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--lp-ease);
}
a:hover .logo-tile,
.job-list-card:hover .logo-tile,
.company-list-card:hover .logo-tile {
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.25);
    transform: scale(1.04);
}

/* Generic job/company card fallbacks */
.job-card:hover,
.company-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lp-shadow-md);
}

/* Stat / metric cards used on dashboards & home */
.stat-card, .metric-strip > div {
    transition: transform 0.3s var(--lp-ease), box-shadow 0.3s var(--lp-ease);
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lp-shadow-md);
}

/* ---------------------------------------------------------------------
   6. Buttons — sheen sweep + press feedback
   ------------------------------------------------------------------ */
.btn-primary,
.btn-secondary,
.pagination-btn {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.2s var(--lp-ease),
        box-shadow 0.3s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.btn-primary {
    background-image: linear-gradient(135deg, var(--lp-green) 0%, var(--lp-green-light) 100%);
    box-shadow: 0 4px 14px -6px rgba(27, 94, 32, 0.5);
}
.btn-primary:hover {
    box-shadow: 0 10px 24px -10px rgba(27, 94, 32, 0.65);
    transform: translateY(-1px);
}
.btn-primary:active,
.btn-secondary:active,
.pagination-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Sheen sweep pseudo-element (visual only) */
.btn-primary::after,
.btn-secondary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.28) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 0.6s var(--lp-ease);
    pointer-events: none;
}
.btn-primary:hover::after,
.btn-secondary:hover::after {
    transform: translateX(120%);
}

/* Click ripple (element injected by ui-polish.js) */
.lp-ripple {
    position: absolute;
    border-radius: 9999px;
    transform: scale(0);
    background: rgba(255, 255, 255, 0.45);
    animation: lpRipple 0.55s ease-out forwards;
    pointer-events: none;
}
@keyframes lpRipple {
    to { transform: scale(3.2); opacity: 0; }
}

/* Pagination modern */
.pagination-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--lp-shadow-sm);
}
.pagination-btn.active {
    background-image: linear-gradient(135deg, var(--lp-green), var(--lp-green-light));
    box-shadow: 0 6px 16px -8px rgba(27, 94, 32, 0.6);
}

/* ---------------------------------------------------------------------
   7. Forms & inputs
   ------------------------------------------------------------------ */
.form-input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}
.form-input:hover,
input[type="search"]:hover,
select:hover {
    border-color: rgba(27, 94, 32, 0.4);
}
.form-input:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: var(--lp-green-light) !important;
}

/* Checkbox / radio accent */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--lp-green);
}

/* Filter panel slight polish */
.filter-panel {
    box-shadow: var(--lp-shadow-xs);
    transition: box-shadow 0.3s ease;
}
.filter-panel:hover {
    box-shadow: var(--lp-shadow-sm);
}

/* ---------------------------------------------------------------------
   8. Pills, badges, tags
   ------------------------------------------------------------------ */
.info-pill,
.stat-pill {
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--lp-ease), color 0.25s ease;
}
.job-card-v2:hover .stat-pill,
.job-list-card:hover .info-pill {
    border-color: rgba(27, 94, 32, 0.25);
}

.badge-featured {
    background-image: linear-gradient(120deg, #B8922E, #E8C468);
    box-shadow: 0 2px 8px -3px rgba(212, 168, 67, 0.7);
}
.badge-urgent {
    background-image: linear-gradient(120deg, #dc2626, #f87171);
    box-shadow: 0 2px 8px -3px rgba(220, 38, 38, 0.6);
}

/* ---------------------------------------------------------------------
   9. Tables, modals, toasts, misc components
   ------------------------------------------------------------------ */

/* Table rows glide */
table tbody tr {
    transition: background-color 0.2s ease;
}

/* Modals: cinematic entrance when shown */
.modal-enter,
[id$="Modal"].flex {
    animation: lpModalIn 0.28s var(--lp-ease) both;
}
@keyframes lpModalIn {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Toasts: springy slide */
.toast-notification,
[data-toast] {
    animation: lpToastIn 0.35s var(--lp-ease) both;
}
@keyframes lpToastIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Skeleton shimmer upgrade */
.skeleton,
.skeleton-line {
    background: linear-gradient(90deg, #eef2f5 25%, #f8fafc 50%, #eef2f5 75%) !important;
    background-size: 200% 100% !important;
    animation: lpShimmer 1.4s infinite;
}
html.dark .skeleton,
html.dark .skeleton-line {
    background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%) !important;
    background-size: 200% 100% !important;
}
@keyframes lpShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Loading spinner brand colors */
.loading-spinner,
.spinner {
    border-top-color: var(--lp-gold) !important;
}

/* Footer polish: top border gradient line */
footer {
    position: relative;
}
footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lp-green), var(--lp-gold), var(--lp-green));
    opacity: 0.85;
    pointer-events: none;
}

/* Footer link micro-interaction */
footer a {
    transition: color 0.2s ease, transform 0.25s var(--lp-ease), opacity 0.2s ease;
}
footer a:hover {
    transform: translateX(2px);
}

/* Back-to-top: springy reveal + brand ring */
#backToTop {
    transition:
        opacity 0.3s ease,
        transform 0.3s var(--lp-ease),
        background-color 0.25s ease,
        box-shadow 0.3s ease;
    box-shadow: 0 10px 24px -10px rgba(27, 94, 32, 0.6);
}
#backToTop:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -12px rgba(27, 94, 32, 0.75);
}

/* Scroll progress bar slimming */
#scrollProgressBar {
    background-image: linear-gradient(90deg, var(--lp-green), var(--lp-gold)) !important;
}

/* Ethiopian flag bar: gentle sheen sweep */
.ethiopian-flag-bar {
    position: relative;
    overflow: hidden;
}
.ethiopian-flag-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: lpFlagSheen 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes lpFlagSheen {
    0%, 55%  { transform: translateX(-100%); }
    75%, 100% { transform: translateX(100%); }
}

/* ---------------------------------------------------------------------
   10. Scroll reveal (classes applied by ui-polish.js)
   ------------------------------------------------------------------ */
.lp-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--lp-ease), transform 0.6s var(--lp-ease);
    transition-delay: var(--lp-reveal-delay, 0ms);
}
.lp-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------------------------------------------------------------------
   11. Dark-mode fine-tuning
   ------------------------------------------------------------------ */
html.dark .job-card-v2:hover {
    border-color: rgba(212, 168, 67, 0.4);
}
html.dark .glass-panel:focus-within {
    box-shadow:
        0 0 0 2px rgba(212, 168, 67, 0.4),
        0 22px 60px -20px rgba(0, 0, 0, 0.7);
}
html.dark .job-card-v2-action-btn:hover {
    background: var(--lp-gold);
    border-color: var(--lp-gold);
}
html.dark footer::before {
    opacity: 0.55;
}

/* ---------------------------------------------------------------------
   12. Reduced motion — respect user preference
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .lp-reveal {
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------------------
   13. Small-screen comfort tweaks
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
    .job-card-v2:hover,
    .job-list-card:hover,
    .company-list-card:hover {
        transform: none; /* avoid layout shift feel on touch */
    }
    .public-shell {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}