/* ==========================================================================
   Header & Navigation
   Matches: logo left · nav center · black CTA right
   ========================================================================== */

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
    --hdr-bg        : #f8f8f8;
    --hdr-border    : #f8f8f8;
    --hdr-pad-y     : 20px;       /* top & bottom padding for header        */
    --hdr-h-mob     : 64px;       /* mobile header height                   */
    --hdr-max-w     : 1440px;     /* max content width                      */
    --hdr-pad-x     : 50px;       /* horizontal padding (PSD left/right gap)*/

    --nav-size      : 16px;
    --nav-weight    : 400;
    --nav-color     : #000000;
    --nav-hover     : #F58220;    /* orange on hover                        */
    --nav-pad-x     : 18px;       /* horizontal padding per nav item        */

    --drop-bg       : #ffffff;
    --drop-radius   : 10px;
    --drop-shadow   : 0 8px 32px rgba(0,0,0,.10);
    --drop-size     : 14px;
    --drop-hover-bg : #f6f6f6;

    --cta-bg        : #000000;
    --cta-color     : #ffffff;
    --cta-hover-bg  : #222222;
    --cta-radius    : 6px;
    --cta-size      : 20px;
    --cta-weight    : 500;
    --cta-line-h    : 24px;
    --cta-pad-y     : 22px;       /* top/bottom — button height ≈ 68px      */
    --cta-pad-x     : 20px;       /* left/right — tight, just wraps text    */

    --drawer-w      : 320px;
    --ease          : 220ms ease;
}

/* ==========================================================================
   SITE HEADER
   ========================================================================== */
.site-header {
    background   : var(--hdr-bg);
    border-bottom: 1px solid var(--hdr-border);
    position     : relative;
    z-index      : 1000;
    transition   : box-shadow var(--ease);
}

.site-header.is-sticky {
    position: sticky;
    top     : 0;
}

/* Scrolled state — subtle shadow replaces border */
.site-header.is-sticky.scrolled {
    box-shadow       : 0 2px 20px rgba(0,0,0,.07);
    border-bottom-color: transparent;
}

/* Admin bar offset */
.admin-bar .site-header.is-sticky { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .site-header.is-sticky { top: 46px; }
}

/* ==========================================================================
   HEADER CONTAINER — 3 columns: logo | nav | cta
   ========================================================================== */
.header-container {
    display        : flex;
    align-items    : center;
    max-width      : var(--hdr-max-w);
    margin         : 0 auto;
    padding        : var(--hdr-pad-y) var(--hdr-pad-x);
    gap            : 0;                /* spacing controlled per-child */
}

/* ==========================================================================
   LOGO
   ========================================================================== */
.site-branding {
    flex-shrink: 0;
    margin-right: 52px;      /* gap between logo and nav — matches PSD */
}

.logo-link {
    display        : inline-flex;
    align-items    : center;
    text-decoration: none;
    line-height    : 1;
}

.logo-link:hover { text-decoration: none; opacity: .92; }

/* Local PNG logo */
.site-logo-img {
    height    : 72px;        /* matches PSD logo height including tagline */
    width     : auto;
    max-width : 250px;
    display   : block;
    object-fit: contain;
}

/* WordPress custom-logo via the_custom_logo() */
.site-branding .custom-logo-link {
    display    : inline-flex;
    align-items: center;
    line-height: 1;
}

.site-branding .custom-logo {
    height    : 62px;
    width     : auto;
    max-width : 230px;
    display   : block;
    object-fit: contain;
}

/* ==========================================================================
   PRIMARY NAVIGATION (desktop)
   ========================================================================== */
.main-navigation {
    flex           : 1;               /* fills the center space             */
    display        : flex;
    justify-content: center;
    min-width      : 0;
}

/* Top-level <ul> */
.nav-menu {
    display    : flex;
    align-items: center;
    list-style : none;
    margin     : 0;
    padding    : 0;
    gap        : 0;
}

/* Top-level <li> */
.nav-menu > li {
    position: relative;
    margin  : 0;
}

/* Top-level <a> */
.nav-menu > li > a {
    display        : inline-flex;
    align-items    : center;
    gap            : 4px;
    padding        : 6px var(--nav-pad-x);
    font-family    : "Poppins", sans-serif;
    font-size      : var(--nav-size);
    font-weight    : var(--nav-weight);
    color          : var(--nav-color);
    letter-spacing : 0px;
    text-align     : center;
    text-decoration: none;
    white-space    : nowrap;
    position       : relative;
    transition     : color var(--ease);
}

/* Underline indicator */
.nav-menu > li > a::after {
    content         : '';
    position        : absolute;
    left            : var(--nav-pad-x);
    right           : var(--nav-pad-x);
    bottom          : -2px;
    height          : 2px;
    background      : var(--nav-hover);
    border-radius   : 2px;
    transform       : scaleX(0);
    transform-origin: left center;
    transition      : transform var(--ease);
}

.nav-menu > li > a:hover,
.nav-menu > li:focus-within > a,
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-menu-ancestor > a,
.nav-menu > li.current_page_item > a {
    color          : var(--nav-hover);
    text-decoration: none;
}

.nav-menu > li > a:hover::after,
.nav-menu > li:focus-within > a::after,
.nav-menu > li.current-menu-item > a::after,
.nav-menu > li.current-menu-ancestor > a::after {
    transform: scaleX(1);
}

/* ── Dropdown chevron ── */
.nav-menu li.menu-item-has-children > a .nav-chevron {
    display      : inline-block;
    width        : 8px;
    height       : 8px;
    border-right : 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform    : rotate(45deg) translateY(-2px);
    transition   : transform var(--ease);
    flex-shrink  : 0;
    margin-left  : 2px;
}

.nav-menu li.menu-item-has-children:hover > a .nav-chevron,
.nav-menu li.menu-item-has-children:focus-within > a .nav-chevron {
    transform: rotate(225deg) translateY(-2px);
}

/* ==========================================================================
   DROPDOWN SUB-MENUS
   ========================================================================== */
.nav-menu .sub-menu {
    position     : absolute;
    top          : calc(100% + 4px);
    left         : 0;
    min-width    : 200px;
    background   : var(--drop-bg);
    border       : 1px solid #ebebeb;
    border-radius: var(--drop-radius);
    box-shadow   : var(--drop-shadow);
    list-style   : none;
    padding      : 6px;
    margin       : 0;
    /* hidden */
    opacity      : 0;
    visibility   : hidden;
    transform    : translateY(-6px);
    transition   : opacity var(--ease), transform var(--ease), visibility var(--ease);
    z-index      : 200;
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu,
.nav-menu li.is-open > .sub-menu {
    opacity   : 1;
    visibility: visible;
    transform : translateY(0);
}

.nav-menu .sub-menu li { margin: 0; }

.nav-menu .sub-menu a {
    display        : block;
    padding        : 10px 14px;
    font-size      : var(--drop-size);
    font-weight    : 400;
    color          : var(--nav-color);
    text-decoration: none;
    border-radius  : 6px;
    white-space    : nowrap;
    transition     : background var(--ease), color var(--ease);
}

.nav-menu .sub-menu a:hover {
    background     : var(--drop-hover-bg);
    color          : var(--nav-hover);
    text-decoration: none;
}

.nav-menu .sub-menu .current-menu-item > a { color: var(--nav-hover); }

/* Third-level */
.nav-menu .sub-menu .sub-menu {
    left  : 100%;
    top   : -6px;
    margin: 0 0 0 4px;
}

/* ==========================================================================
   HEADER ACTIONS (right column)
   ========================================================================== */
.header-actions {
    display    : flex;
    align-items: center;
    gap        : 12px;
    flex-shrink: 0;
    margin-left: 52px;   /* gap between nav and CTA — matches PSD */
}

/* ==========================================================================
   CTA BUTTON
   ========================================================================== */
.header-cta-btn {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    padding        : var(--cta-pad-y) var(--cta-pad-x);
    background     : var(--cta-bg);
    color          : var(--cta-color);
    font-family    : "Poppins", sans-serif;
    font-size      : var(--cta-size);
    font-weight    : var(--cta-weight);
    line-height    : var(--cta-line-h);
    text-align     : center;
    white-space    : nowrap;
    text-decoration: none;
    border-radius  : var(--cta-radius);
    border         : 2px solid var(--cta-bg);
    cursor         : pointer;
    transition     : background var(--ease), border-color var(--ease),
                     transform var(--ease), box-shadow var(--ease);
    letter-spacing : 0px;
}

.header-cta-btn:hover {
    background     : var(--cta-hover-bg);
    border-color   : var(--cta-hover-bg);
    color          : #fff;
    text-decoration: none;
    transform      : translateY(-1px);
    box-shadow     : 0 4px 18px rgba(0,0,0,.22);
}

.header-cta-btn:focus-visible {
    outline       : 3px solid var(--nav-hover);
    outline-offset: 3px;
}

/* ==========================================================================
   HAMBURGER TOGGLE (mobile only — hidden on desktop)
   ========================================================================== */
.mobile-menu-toggle {
    display : none;   /* shown via media query */
    align-items    : center;
    justify-content: center;
    width          : 40px;
    height         : 40px;
    background     : transparent;
    border         : 1.5px solid #d8d8d8;
    border-radius  : 7px;
    cursor         : pointer;
    flex-shrink    : 0;
    transition     : border-color var(--ease), background var(--ease);
}

.mobile-menu-toggle:hover {
    border-color: var(--nav-hover);
    background  : #fff8f2;
}

.hamburger {
    display       : flex;
    flex-direction: column;
    gap           : 5px;
    width         : 18px;
}

.bar {
    display      : block;
    width        : 100%;
    height       : 2px;
    background   : #1a1a1a;
    border-radius: 2px;
    transition   : transform var(--ease), opacity var(--ease);
    transform-origin: center;
}

.mobile-menu-toggle[aria-expanded="true"] .bar-1 {
    transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle[aria-expanded="true"] .bar-2 {
    opacity  : 0;
    transform: scaleX(0);
}
.mobile-menu-toggle[aria-expanded="true"] .bar-3 {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */
.mobile-drawer {
    position  : fixed;
    top       : 0;
    left      : -100%;           /* slides in from LEFT                     */
    width     : var(--drawer-w);
    max-width : 90vw;
    height    : 100%;
    height    : 100dvh;
    background: #fff;
    z-index   : 9100;
    overflow-y: auto;
    box-shadow: 6px 0 40px rgba(0,0,0,.12);   /* shadow on right side      */
    transition: left 300ms cubic-bezier(.4,0,.2,1);
}

.mobile-drawer.is-open { left: 0; }

/* Overlay */
.mobile-overlay {
    position  : fixed;
    inset     : 0;
    background: rgba(0,0,0,.45);
    z-index   : 9090;
    opacity   : 0;
    visibility: hidden;
    transition: opacity var(--ease), visibility var(--ease);
}

.mobile-overlay.is-visible {
    opacity   : 1;
    visibility: visible;
}

/* Drawer layout */
.mobile-drawer-inner {
    display       : flex;
    flex-direction: column;
    min-height    : 100%;
    padding-bottom: 32px;
}

/* Drawer header row */
.mobile-drawer-head {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 18px 20px;
    border-bottom  : 1px solid #f0f0f0;
}

.mobile-drawer-logo {
    height   : 46px;
    width    : auto;
    max-width: 180px;
    display  : block;
}

.mobile-drawer-close {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 36px;
    height         : 36px;
    border         : none;
    border-radius  : 50%;
    background     : #1a1a1a;
    color          : #ffffff;
    cursor         : pointer;
    flex-shrink    : 0;
    transition     : background var(--ease), transform var(--ease);
}

.mobile-drawer-close svg {
    stroke-width: 2.5;
}

.mobile-drawer-close:hover {
    background: #F58220;
    transform : rotate(90deg);
}

/* ── Mobile nav list ── */
.mobile-nav-wrap { flex: 1; overflow-y: auto; }

.mobile-nav-list {
    list-style: none;
    margin    : 0;
    padding   : 6px 0;
}

.mobile-nav-list li {
    margin     : 0;
    display    : flex;
    flex-wrap  : wrap;        /* sub-menu wraps onto its own row            */
    align-items: center;
}

.mobile-nav-list > li {
    border-bottom: 1px solid #f4f4f4;
}

.mobile-nav-list > li:last-child { border-bottom: none; }

/* <a> takes all available width; toggle sits inline on the right */
.mobile-nav-list a {
    flex           : 1;
    display        : flex;
    align-items    : center;
    padding        : 14px 20px;
    font-size      : 15px;
    font-weight    : 500;
    color          : #1a1a1a;
    text-decoration: none;
    transition     : color var(--ease), background var(--ease);
    min-width      : 0;
}

.mobile-nav-list a:hover,
.mobile-nav-list .current-menu-item > a {
    color          : var(--nav-hover);
    background     : #fdf7f2;
    text-decoration: none;
}

/* Sub-menu toggle button — inline on the right */
.mobile-sub-toggle {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 32px;
    height         : 32px;
    margin-right   : 16px;   /* breathing room from right edge             */
    border         : 1.5px solid #e0e0e0;
    border-radius  : 50%;    /* circle arrow button                        */
    background     : #f5f5f5;
    cursor         : pointer;
    color          : #444;
    flex-shrink    : 0;
    transition     : background var(--ease), border-color var(--ease),
                     color var(--ease);
}

.mobile-sub-toggle:hover {
    background  : var(--nav-hover);
    border-color: var(--nav-hover);
    color       : #ffffff;
}

.mobile-sub-toggle[aria-expanded="true"] {
    background  : #1a1a1a;
    border-color: #1a1a1a;
    color       : #ffffff;
}

.mobile-sub-toggle svg { transition: transform 260ms ease; }

.mobile-sub-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Mobile sub-menus — full width row below the <a> + toggle */
.mobile-nav-list .sub-menu {
    list-style : none;
    margin     : 0;
    padding    : 0;
    background : #fafafa;
    overflow   : hidden;
    display    : block;    /* height controlled via JS max-height */
    flex-basis : 100%;     /* wraps below on its own row          */
    width      : 100%;
    max-height : 0;
    transition : max-height 260ms ease;
    border-top : 1px solid #f0f0f0;
}

.mobile-nav-list .sub-menu a {
    padding    : 11px 20px 11px 36px;
    font-size  : 14px;
    font-weight: 400;
    color      : #444;
    border-bottom: 1px solid #efefef;
}

.mobile-nav-list .sub-menu li:last-child a { border-bottom: none; }

.mobile-nav-list .sub-menu .sub-menu a {
    padding-left: 52px;
    font-size   : 13px;
}

/* Mobile CTA */
.mobile-drawer-cta {
    padding: 20px 20px 0;
}

.mobile-cta-full {
    width          : 100%;
    display        : flex !important;
    justify-content: center;
    padding        : 14px 20px;
    font-size      : 15px;
    border-radius  : 8px;
}

/* Footer nav styles live in main.css (.footer-main-grid, .footer-nav-list) */

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/*
 * Breakpoint logic:
 *  > 1380px  — full desktop, default variables
 *  1280–1380 — tighten padding + gaps slightly
 *  1150–1279 — reduce logo, nav font, CTA padding
 *  1024–1149 — most compact desktop layout
 *  ≤ 1023px  — hamburger (nav hidden, drawer used)
 *  ≤ 600px   — small mobile
 */

/* 1280 – 1380px: first tightening step */
@media (max-width: 1380px) {
    .header-container  { padding: var(--hdr-pad-y) 32px; }
    .site-branding     { margin-right: 32px; }
    .header-actions    { margin-left: 24px; }
    .nav-menu > li > a { padding: 6px 14px; font-size: 15px; }
    .header-cta-btn    { padding: 16px 18px; font-size: 18px; }
}

/* 1150 – 1279px: second step — reduce logo + font */
@media (max-width: 1279px) {
    .header-container  { padding: var(--hdr-pad-y) 20px; }
    .site-branding     { margin-right: 20px; }
    .header-actions    { margin-left: 16px; }
    .nav-menu > li > a { padding: 6px 10px; font-size: 14px; }
    .site-logo-img,
    .site-branding .custom-logo { height: 60px; max-width: 210px; }
    .header-cta-btn    { padding: 14px 14px; font-size: 16px; }
}

/* 1024 – 1149px: most compact desktop */
@media (max-width: 1149px) {
    .header-container  { padding: var(--hdr-pad-y) 14px; }
    .site-branding     { margin-right: 12px; }
    .header-actions    { margin-left: 10px; }
    .nav-menu > li > a { padding: 6px 7px; font-size: 13px; }
    .site-logo-img,
    .site-branding .custom-logo { height: 54px; max-width: 180px; }
    .header-cta-btn    { padding: 10px 12px; font-size: 14px; }
}

/* ≤ 1023px: switch to hamburger — no desktop nav shown */
@media (max-width: 1023px) {
    .main-navigation                  { display: none; }
    .mobile-menu-toggle               { display: flex; }
    .header-actions .header-cta-btn   { display: none; }
    .header-actions                   { margin-left: auto; }
}

/* Small mobile */
@media (max-width: 600px) {
    .header-container {
        padding: 12px 16px;
    }
    .site-branding  { margin-right: 0; }
    .header-actions { margin-left: auto; gap: 8px; }
    .site-logo-img,
    .site-branding .custom-logo { height: 48px; max-width: 180px; }
}

/* Footer responsive handled in main.css */

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
.nav-menu a:focus-visible,
.mobile-nav-list a:focus-visible,
.header-cta-btn:focus-visible {
    outline       : 3px solid var(--nav-hover);
    outline-offset: 2px;
    border-radius : 4px;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-drawer, .mobile-overlay,
    .nav-menu .sub-menu, .bar,
    .header-cta-btn, .nav-menu > li > a::after,
    .mobile-sub-toggle svg {
        transition: none !important;
        animation : none !important;
    }
}