/*
 * Header Premium — Aligned to Design System
 * Warm greens + amber accent + grain texture
 * Mikal Germany Pest Control
 *
 * Uses established tokens from style.css:
 * --clr-primary, --clr-accent, --clr-surface-dark
 * --font-display (Cairo)
 * --font-body (Cairo)
 */

/* ============================================
   HEADER BASE
   ============================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background var(--duration-slow, 600ms) var(--ease-out-expo),
                box-shadow var(--duration-slow, 600ms) var(--ease-out-expo),
                border-color var(--duration-slow, 600ms) var(--ease-out-expo);
}

/* Grain texture overlay — matches hero and footer */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

/* Accent line — reveals on scroll */
.header-accent-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--clr-primary, #0a5c18) 0%,
        var(--clr-accent, #e8a817) 50%,
        var(--clr-primary, #0a5c18) 100%
    );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-normal, 350ms) var(--ease-out-expo);
    z-index: 1;
}

/* ============================================
   TRANSPARENT STATE (on hero)
   ============================================ */
.site-header--transparent {
    background: transparent;
}

.site-header--transparent .header-accent-line {
    transform: scaleX(0);
}

/* Nav links — transparent */
.site-header--transparent .header-nav-link,
.site-header--transparent .header-nav-list a {
    color: rgba(240, 245, 236, 0.85);
}

.site-header--transparent .header-nav-link:hover,
.site-header--transparent .header-nav-link--active,
.site-header--transparent .header-nav-list a:hover,
.site-header--transparent .header-nav-list .current-menu-item > a {
    color: #ffffff;
}

.site-header--transparent .header-nav-link:hover,
.site-header--transparent .header-nav-list a:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Brand — transparent */
.site-header--transparent .header-brand-text {
    color: #ffffff;
}

.site-header--transparent .header-brand-tagline {
    color: rgba(240, 245, 236, 0.65);
}

/* Phone — transparent */
.site-header--transparent .header-phone-link {
    color: #ffffff !important;
    background-color: transparent !important;
}

.site-header--transparent .header-phone-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* CTA — transparent ghost button */
.site-header--transparent .header-cta {
    background: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(232, 168, 23, 0.6);
    color: var(--clr-accent, #e8a817);
}

.site-header--transparent .header-cta:hover {
    background: var(--clr-accent, #e8a817);
    color: var(--clr-surface-dark, #0f1a0f);
    border-color: var(--clr-accent, #e8a817);
}

/* Mobile menu button — transparent */
.site-header--transparent .header-menu-btn {
    color: rgba(240, 245, 236, 0.85);
    background: rgba(255, 255, 255, 0.08);
}

.site-header--transparent .header-menu-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ============================================
   SCROLLED STATE — Warm Glass Morphism
   ============================================ */
.site-header--scrolled {
    background: rgba(250, 250, 245, 0.92);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
}

.site-header--scrolled .header-accent-line {
    transform: scaleX(1);
}

/* Nav links — scrolled */
.site-header--scrolled .header-nav-link,
.site-header--scrolled .header-nav-list a {
    color: var(--clr-text-secondary, #4a5548);
}

.site-header--scrolled .header-nav-link:hover,
.site-header--scrolled .header-nav-link--active,
.site-header--scrolled .header-nav-list a:hover,
.site-header--scrolled .header-nav-list .current-menu-item > a {
    color: var(--clr-primary, #0a5c18);
}

.site-header--scrolled .header-nav-link:hover,
.site-header--scrolled .header-nav-list a:hover {
    background: rgba(10, 92, 24, 0.06);
}

/* Brand — scrolled */
.site-header--scrolled .header-brand-text {
    color: var(--clr-text-primary, #1a1f1a);
}

.site-header--scrolled .header-brand-tagline {
    color: var(--clr-text-secondary, #4a5548);
}

/* Phone — scrolled */
.site-header--scrolled .header-phone-link {
    color: var(--clr-text-secondary, #4a5548);
}

.site-header--scrolled .header-phone-link:hover {
    color: var(--clr-primary, #0a5c18);
    background: rgba(10, 92, 24, 0.06);
}

/* CTA — scrolled solid button */
.site-header--scrolled .header-cta {
    background: var(--clr-primary, #0a5c18);
    color: #ffffff;
    border: 1px solid transparent;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.site-header--scrolled .header-cta:hover {
    background: var(--clr-primary-hover, #084d14);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
    transform: translateY(-1px);
}

/* Mobile menu button — scrolled */
.site-header--scrolled .header-menu-btn {
    color: var(--clr-text-primary, #1a1f1a);
    background: rgba(0, 0, 0, 0.04);
}

.site-header--scrolled .header-menu-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* ============================================
   HEADER INNER
   ============================================ */
.header-inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max-width, 1280px);
    margin: 0 auto;
    padding: 0 var(--margin-desktop, 80px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

/* ============================================
   BRAND
   ============================================ */
.header-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    flex-shrink: 0;
}

.header-brand-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
}

.header-brand-text {
    font-family: var(--font-display, 'Cairo', sans-serif);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    transition: color var(--duration-normal, 350ms) ease;
    line-height: 1.2;
}

.header-brand-tagline {
    font-family: var(--font-body, 'Cairo', sans-serif);
    font-size: 11px;
    font-weight: 400;
    opacity: 0.7;
    letter-spacing: 0.02em;
    display: block;
    margin-top: 1px;
    transition: color var(--duration-normal, 350ms) ease;
}

/* ============================================
   DESKTOP NAVIGATION
   ============================================ */
.header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-nav-list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav-list li {
    margin: 0;
    padding: 0;
}

.header-nav-link,
.header-nav-list a {
    position: relative;
    font-family: var(--font-body, 'Cairo', sans-serif);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: var(--radius-sm, 8px);
    transition: all var(--duration-normal, 350ms) var(--ease-out-expo);
    letter-spacing: 0.01em;
    display: block;
}

/* Desktop nav item — flex row so the label and the dropdown caret sit on ONE
   centred axis. With `display:block` the caret was an inline box on the text
   baseline: it grew the line box, made the two dropdown items 89px tall inside
   an 80px bar, and let two-word Arabic labels wrap to a second line. Scoped to
   the desktop list so the mobile overlay (.mobile-menu-nav) is untouched.
   Spacing is tightened (10px padding, 8px list gap) because eight items plus
   the brand and both action buttons do not fit inside the 1280px-capped
   .header-inner at the original 18px padding / 24px gap — that shortfall is
   what forced the labels to wrap in the first place. */
.header-nav-list > li > .header-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 10px;
    white-space: nowrap;
    line-height: 1.2;
}

/* Underline grows from center */
.header-nav-link::after,
.header-nav-list a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 20px;
    height: 2px;
    background: var(--clr-primary, #0a5c18);
    transition: transform var(--duration-normal, 350ms) var(--ease-out-expo);
    border-radius: 1px;
}

/* Active underline — amber accent */
.header-nav-link--active::after,
.header-nav-list .current-menu-item > a::after {
    background: var(--clr-accent, #e8a817);
}

.header-nav-link:hover::after,
.header-nav-link--active::after,
.header-nav-list a:hover::after,
.header-nav-list .current-menu-item > a::after {
    transform: translateX(-50%) scaleX(1);
}

.header-nav-link--active,
.header-nav-list .current-menu-item > a {
    font-weight: 700;
}

/* ============================================
   NAV DROPDOWN (services mega-list)
   ============================================ */
.header-nav-item.has-dropdown {
    position: relative;
}

/* Caret sits inline with the label and flips when the panel is open */
.header-nav-caret {
    line-height: 1;
    vertical-align: middle;
    transition: transform var(--duration-normal, 350ms) var(--ease-out-expo);
}

/* Dedicated icon selector. fonts.css defines the `.material-symbols-outlined`
   base (font-size:24px, display:inline-block) and is enqueued AFTER this file,
   so a bare `.header-nav-caret` rule lost the cascade at equal specificity and
   the caret rendered at 24px. This two-class selector wins regardless of the
   order the stylesheets happen to load in (or get combined in by a cache
   plugin). 16px keeps the icon inside the 15px/1.2 text line box, so every nav
   item resolves to exactly the same height. */
.header-nav-list .header-nav-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
    margin-inline-start: 0;
}
.has-dropdown:hover > .header-nav-link .header-nav-caret,
.has-dropdown:focus-within > .header-nav-link .header-nav-caret,
.has-dropdown.is-open > .header-nav-link .header-nav-caret {
    transform: rotate(180deg);
}

/* ── Desktop: floating panel under the parent ── */
.header-nav-list .header-dropdown {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 240px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--clr-surface-card, #ffffff);
    border: 1px solid var(--clr-outline-variant, #c2c9bd);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.08));
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--duration-normal, 350ms) var(--ease-out-expo),
                transform var(--duration-normal, 350ms) var(--ease-out-expo),
                visibility var(--duration-normal, 350ms);
    z-index: 100;
}

/* Invisible bridge so the cursor can cross the gap without the panel closing */
.header-nav-list .header-dropdown::before {
    content: '';
    position: absolute;
    top: -10px;
    inset-inline: 0;
    height: 10px;
}

.header-nav-list .has-dropdown:hover > .header-dropdown,
.header-nav-list .has-dropdown:focus-within > .header-dropdown,
.header-nav-list .has-dropdown.is-open > .header-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-nav-list .header-dropdown li {
    margin: 0;
}
.header-nav-list .header-dropdown-link {
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius-sm, 6px);
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--clr-text-primary, #1a1f1a) !important; /* override header transparent/scrolled link colors on the white panel */
    transition: background 200ms ease, color 200ms ease;
}
.header-nav-list .header-dropdown-link::after { display: none; } /* no center underline inside the panel */
.header-nav-list .header-dropdown-link:hover,
.header-nav-list .header-dropdown-link:focus {
    background: var(--clr-primary-light, #e8f5e9);
    color: var(--clr-primary, #0a5c18) !important;
}

/* ── Mobile (inside the overlay menu): inline accordion ── */
.mobile-menu-nav .header-nav-caret {
    font-size: 1.5rem;
    margin-inline-start: 4px;
}
.mobile-menu-nav .header-dropdown {
    list-style: none;
    margin: 4px 0 10px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--duration-normal, 350ms) var(--ease-out-expo),
                opacity var(--duration-normal, 350ms) ease;
}
.mobile-menu-nav .has-dropdown.is-open > .header-dropdown {
    max-height: 640px;
    opacity: 1;
}
.mobile-menu-nav .header-dropdown-link {
    display: inline-block;
    font-size: 19px;
    font-weight: 600;
    padding: 8px 24px;
    color: rgba(240, 245, 236, 0.7);
}
.mobile-menu-nav .header-dropdown-link:hover,
.mobile-menu-nav .header-dropdown-link:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* ============================================
   ACTIONS
   ============================================ */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-phone-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body, 'Cairo', sans-serif);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--radius-sm, 8px);
    transition: all var(--duration-normal, 350ms) var(--ease-out-expo);
    direction: ltr;
}

.header-phone-link .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
}

/* The eight-item nav, the brand and both action buttons do not fit inside the
   1280px-capped .header-inner while the phone number is spelled out (it is
   144px wide). Collapse the chip to its icon on the desktop bar — it stays a
   tel: link with an aria-label, and the number itself is still spelled out in
   the mobile bar, the mobile menu and the footer. Below 1025px the whole chip
   is already hidden in favour of the fixed bottom bar. */
.header-phone-number {
    display: none;
}

.header-phone-link {
    padding: 8px 10px;
}

.header-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body, 'Cairo', sans-serif);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: var(--radius-md, 12px);
    transition: all var(--duration-normal, 350ms) var(--ease-out-expo);
    white-space: nowrap;
}

.header-cta:hover {
    transform: translateY(-1px);
}

.header-cta .material-symbols-outlined {
    font-size: 18px;
}

/* ============================================
   MOBILE MENU BUTTON
   ============================================ */
.header-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    transition: all var(--duration-normal, 350ms) var(--ease-out-expo);
}

.header-menu-btn .material-symbols-outlined {
    font-size: 24px;
}

/* ============================================
   MOBILE MENU OVERLAY
   ============================================ */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: var(--clr-surface-dark, #0f1a0f);
    z-index: 999;
    display: flex;
    flex-direction: column;
    /* Top-aligned, not centered: the nav + always-open services submenu + CTAs
       are nearly viewport-tall, so centering pushed the first link up under the
       fixed header. Anchoring to the top and reserving header + gap clearance
       keeps the first item clear of the logo/close bar. */
    justify-content: flex-start;
    align-items: center;
    /* Clear the fixed header (logo, 81px) and the overlay's close button, then
       leave a comfortable gap before the first link. */
    padding-top: calc(var(--site-header-h, 81px) + 2rem);
    padding-bottom: 2.5rem;
    /* Scroll instead of clip when the menu is taller than short screens. */
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-slow, 600ms) var(--ease-out-expo);
}

/* Grain texture — matches hero */
.mobile-menu::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

/* Subtle topographic pattern — matches footer */
.mobile-menu::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.02;
    background-image:
        repeating-radial-gradient(
            circle at 20% 50%,
            transparent 0,
            transparent 60px,
            rgba(237, 245, 232, 0.5) 60px,
            rgba(237, 245, 232, 0.5) 61px,
            transparent 61px
        ),
        repeating-radial-gradient(
            circle at 80% 20%,
            transparent 0,
            transparent 80px,
            rgba(237, 245, 232, 0.4) 80px,
            rgba(237, 245, 232, 0.4) 81px,
            transparent 81px
        );
    pointer-events: none;
    z-index: 0;
}

.mobile-menu--open {
    opacity: 1;
    visibility: visible;
}

/* Close button */
.mobile-menu-close {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: var(--radius-md, 12px);
    color: var(--clr-text-on-dark, #f0f5ec);
    cursor: pointer;
    transition: all var(--duration-normal, 350ms) ease;
    z-index: 1;
}

.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Navigation list */
.mobile-menu-nav {
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

.mobile-menu-nav li {
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--duration-slow, 600ms) var(--ease-out-expo);
}

.mobile-menu--open .mobile-menu-nav li {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays */
.mobile-menu--open .mobile-menu-nav li:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu--open .mobile-menu-nav li:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu--open .mobile-menu-nav li:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu--open .mobile-menu-nav li:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu--open .mobile-menu-nav li:nth-child(5) { transition-delay: 0.3s; }

.mobile-menu-nav a {
    font-family: var(--font-display, 'Cairo', sans-serif);
    font-size: 32px;
    font-weight: 700;
    color: rgba(240, 245, 236, 0.85);
    text-decoration: none;
    padding: 12px 32px;
    border-radius: var(--radius-lg, 16px);
    transition: all var(--duration-normal, 350ms) ease;
    display: inline-block;
}

.mobile-menu-nav a:hover,
.mobile-menu-nav .current-menu-item > a {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* Active state — amber accent dot */
.mobile-menu-nav a::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: var(--clr-accent, #e8a817);
    border-radius: 50%;
    margin: 8px auto 0;
    opacity: 0;
    transform: scale(0);
    transition: all var(--duration-normal, 350ms) var(--ease-out-expo);
}

.mobile-menu-nav .current-menu-item > a::after {
    opacity: 1;
    transform: scale(1);
}

/* CTA buttons in mobile menu */
.mobile-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 40px;
    width: 280px;
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--duration-slow, 600ms) var(--ease-out-expo) 0.35s;
    position: relative;
    z-index: 1;
}

.mobile-menu--open .mobile-menu-actions {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-body, 'Cairo', sans-serif);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: var(--radius-md, 12px);
    transition: all var(--duration-normal, 350ms) var(--ease-out-expo);
}

.mobile-menu-cta--primary {
    background: var(--clr-accent, #e8a817);
    color: var(--clr-surface-dark, #0f1a0f);
}

.mobile-menu-cta--primary:hover {
    background: var(--clr-accent-hover, #d49a0e);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 24px rgba(0, 0, 0, 0.07));
}

.mobile-menu-cta--secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--clr-text-on-dark, #f0f5ec);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.mobile-menu-cta--secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ============================================
   ACTIVE MENU ITEM — WordPress
   ============================================ */
.site-header--scrolled .current-menu-item > a {
    color: var(--clr-primary, #0a5c18) !important;
}

.site-header--transparent .current-menu-item > a {
    color: #ffffff !important;
}

#mobile-menu .current-menu-item > a,
.mobile-menu-nav .current-menu-item > a {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* ============================================
   RESPONSIVE — TABLET & MOBILE
   ============================================ */
@media (max-width: 1024px) {
    .header-nav,
    .header-phone-link {
        display: none;
    }

    .header-menu-btn {
        display: flex;
    }

    .header-inner {
        padding: 0 var(--margin-mobile, 20px);
        height: 72px;
    }

    /* Mobile logo — "mounted credential" tile.
       The logo.webp ships with a light rounded panel baked in, which blends
       into the near-white glass bar. Crisp rounded corners + a hairline frame
       + a soft lift make it read as an official seal pinned to the navbar
       rather than a washed-out floating image. Frame is tuned per header
       state so the edge stays legible on both the light and hero bars. */
    .header-brand-logo {
        height: 44px;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(15, 26, 15, 0.10);
        transition: box-shadow var(--duration-normal, 350ms) var(--ease-out-expo);
    }

    /* Hairline sits just inside the rounded edge (negative offset traces the
       radius) and adds no layout width, so nothing shifts. */
    .site-header--scrolled .header-brand-logo {
        outline: 1px solid rgba(10, 92, 24, 0.12);
        outline-offset: -1px;
    }

    .site-header--transparent .header-brand-logo {
        outline: 1px solid rgba(255, 255, 255, 0.32);
        outline-offset: -1px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
    }

    /* Tactile press — the logo is a link home; give it a light tap response. */
    .header-brand {
        transition: transform var(--duration-normal, 350ms) var(--ease-out-expo);
    }

    .header-brand:active {
        transform: scale(0.97);
    }

    .header-brand-text {
        font-size: 17px;
    }

    .header-brand-tagline {
        display: none;
    }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    .header-brand,
    .header-brand-logo {
        transition: none;
    }
    .header-brand:active {
        transform: none;
    }
}

@media (min-width: 1025px) {
    .mobile-menu {
        display: none !important;
    }
}

/* ============================================
   BODY LOCK — prevent scroll when menu open
   ============================================ */
body.menu-open {
    overflow: hidden;
}

/* ============================================
   REDUCED MOTION — Accessibility
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .site-header,
    .header-accent-line,
    .header-nav-link,
    .header-nav-list a,
    .header-cta,
    .header-phone-link,
    .header-menu-btn,
    .mobile-menu,
    .mobile-menu-nav li,
    .mobile-menu-actions,
    .mobile-menu-close,
    .mobile-menu-nav a,
    .mobile-menu-cta {
        transition-duration: 0.01ms !important;
    }
}