/* =====================================================================
 * Evoba 2026 redesign — theme overlay
 * Loaded AFTER style.css so same-specificity rules win by source order.
 * Reskins the whole public site (type, colour, nav, footer, buttons)
 * with no markup or JS changes. Colours use oklch with a hex fallback
 * line first, so browsers without oklch still render a close colour.
 * ===================================================================== */

:root {
    /* New palette (hex fallback, then oklch) */
    --evoba-bg:          #fbfbfc;
    --evoba-bg:          oklch(0.992 0.002 250);
    --evoba-surface:     #ffffff;
    --evoba-surface-alt: #f7f8f9;
    --evoba-surface-alt: oklch(0.98 0.003 250);
    --evoba-ink:         #26282d;
    --evoba-ink:         oklch(0.2 0.01 260);
    --evoba-ink-soft:    #3c3f45;
    --evoba-ink-soft:    oklch(0.3 0.01 260);
    --evoba-muted:       #676a70;
    --evoba-muted:       oklch(0.46 0.008 260);
    --evoba-brand:       #12a150;
    --evoba-brand:       oklch(0.62 0.2 143);
    --evoba-brand-600:   #0e8f45;
    --evoba-brand-600:   oklch(0.56 0.19 145);
    --evoba-brand-tint:  rgba(18,161,80,0.10);
    --evoba-brand-tint:  oklch(0.68 0.2 143 / 0.10);
    --evoba-line:        rgba(38,40,45,0.12);
    --evoba-line:        oklch(0.2 0.01 260 / 0.12);
    --evoba-footer:      #1b1f2b;
    --evoba-footer:      oklch(0.17 0.02 260);

    /* Remap the existing design tokens so every component inherits the
       new look automatically. */
    --font-family:   'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --primary-color: var(--evoba-brand);
    --primary-dark:  var(--evoba-brand-600);
    --accent-color:  var(--evoba-brand);
    --success-color: var(--evoba-brand);
    --cta-color:     var(--evoba-brand);
    --cta-hover:     var(--evoba-brand-600);
    --text-dark:     var(--evoba-ink);
    --text-body:     var(--evoba-ink);
    --text-muted:    var(--evoba-muted);
    --bg-secondary:  var(--evoba-surface-alt);
    --border-color:  var(--evoba-line);
}

/* ---- Global type + surface ---- */
/* overflow-x:clip prevents horizontal scroll WITHOUT making html/body a scroll
   container — the old `overflow-x:hidden` did, which breaks `position:sticky`
   on the header. clip fixes the sticky nav. */
html, body { background-color: var(--evoba-bg); overflow-x: clip; }
body {
    font-family: var(--font-family);
    color: var(--evoba-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
button, input, select, textarea,
.btn, .nav__link, .nav__dropdown-link {
    font-family: var(--font-family);
}
h1, h2, h3 { letter-spacing: -0.03em; }

/* ---- Utility bar (added in header.php) ---- */
.evoba-utilbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px clamp(20px, 4vw, 40px);
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--evoba-muted); background: var(--evoba-surface);
    border-bottom: 1px solid var(--evoba-line);
}
.evoba-utilbar a { color: inherit; text-decoration: none; }
.evoba-utilbar__right { display: inline-flex; align-items: center; gap: 8px; }
.evoba-utilbar__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--evoba-brand); display: inline-block; }
@media (max-width: 820px) { .evoba-utilbar { display: none; } }

/* ---- Header / nav ----
   Mockup structure: utility bar (normal flow, scrolls away) sits ABOVE a
   STICKY nav (brand far-left, links + CTA grouped far-right). The old header
   was position:fixed, which overlapped/hid the utility bar. */
.header {
    position: sticky; top: 0;
    background: rgba(251, 251, 252, 0.88);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--evoba-line);
    box-shadow: none;
    /* main.js has a legacy "hide on scroll down" effect that sets an inline
       transform:translateY(-100%) — override it so the sticky nav stays put. */
    transform: none !important;
}
/* Full-bleed nav bar (the .nav also has .container, which was boxing it to
   1200px). Match the mockup: brand hard-left, links hard-right, 40px gutters —
   and it lines up with the full-width utility bar. */
.nav {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 15px clamp(20px, 4vw, 40px);
}
/* Push the link list + everything after it to the right, so the brand sits
   alone on the left and the links + Get Started button form one right group.
   Desktop only — below 768px the mobile drawer takes over. */
@media (min-width: 769px) {
    .nav__menu { margin-left: auto; }
    .nav__buttons { margin-left: 30px; }
}
.nav__link { color: var(--evoba-muted); font-weight: 500; }
.nav__link:hover, .nav__link.active { color: var(--evoba-ink); }
/* Remove the old underline accent — doesn't suit the new nav */
.nav__link::after, .nav__link:hover::after, .nav__link.active::after { display: none; }
.nav__dropdown-menu {
    border-radius: 14px; border: 1px solid var(--evoba-line);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12); padding: 8px;
}
.nav__dropdown-link { border-radius: 8px; color: var(--evoba-ink-soft); }
.nav__dropdown-link:hover { color: var(--evoba-brand); background: var(--evoba-brand-tint); }

/* ---- Buttons: pill shaped, new green, mockup sizing ---- */
.btn {
    border-radius: 100px; font-family: var(--font-family); font-weight: 600;
    padding: 13px 26px; font-size: 15px; border-width: 1.5px; gap: 8px;
}
.btn--large { padding: 16px 34px; font-size: 17px; }
.btn--primary { background: var(--evoba-brand); border-color: var(--evoba-brand); color: #fff; }
.btn--primary:hover { background: var(--evoba-brand-600); border-color: var(--evoba-brand-600); box-shadow: none; }
.btn--secondary { color: var(--evoba-brand); border: 1.5px solid var(--evoba-brand); background: transparent; }
.btn--secondary:hover { background: var(--evoba-brand-tint); color: var(--evoba-brand); border-color: var(--evoba-brand); box-shadow: none; }
/* Compact nav "Get Started" pill, like the mockup */
.nav__buttons .btn, .nav .btn { padding: 10px 20px; font-size: 14px; }

/* ---- Footer: dark, editorial ---- */
.footer { background: var(--evoba-footer); color: oklch(0.86 0.006 250); }
.footer__description, .footer__contact p, .footer__contact a, .footer__list a {
    color: #b6bccb; color: oklch(0.72 0.008 250);
}
.footer__title { color: #fff; }
.footer__list a:hover, .footer__contact a:hover { color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); color: #8b93a5; }
.footer__legal a { color: inherit; }
.footer__legal a:hover { color: #fff; }