/* =========================================================
   VEIC 2027 — HEADER STYLES (CORRECTED)
   File: assets/css/header.css
   -----------------------------------------------------------
   Default state (all pages): SOLID white header, dark text.
   Transparent-over-hero state: ONLY when the header has the
   class "veic-header-transparent" (added via PHP on the front
   page only) AND the page hasn't been scrolled yet.
   ========================================================= */

:root{
    --veic-primary: #0A2E73;
    --veic-secondary: #1E88E5;
    --veic-accent: #00C8FF;
    --veic-bg: #F5F8FD;
    --veic-text: #222222;
    --veic-white: #FFFFFF;
    --veic-topbar-height: 34px;
    --veic-header-height: 78px;
}

.veic-topbar,
.veic-mainheader,
.veic-topbar *,
.veic-mainheader *{
    box-sizing: border-box;
}

body{
    padding-top: calc(var(--veic-topbar-height) + var(--veic-header-height));
    font-family: 'Poppins', sans-serif;
}


/* =========================================================
   1. TOP INFO BAR (unchanged — always solid navy)
   ========================================================= */
.veic-topbar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--veic-topbar-height);
    background: var(--veic-primary);
    z-index: 1001;
    display: flex;
    align-items: center;
}

.veic-topbar-inner{
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.veic-topbar-left,
.veic-topbar-right{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 400;
    color: var(--veic-white);
    letter-spacing: 0.3px;
}

.veic-topbar-right{ gap: 20px; }

.veic-topbar .dashicons{
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--veic-accent);
}

.veic-topbar-left .veic-sep{
    color: rgba(255,255,255,0.3);
    margin: 0 6px;
}

.veic-topbar-right a{
    color: var(--veic-white);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.25s ease;
}

.veic-topbar-right a:hover{ color: var(--veic-accent); }

.veic-topbar-login{
    padding-left: 20px;
    border-left: 1px solid rgba(255,255,255,0.25);
}


/* =========================================================
   1b. TOP BAR SEARCH BOX (desktop)
   -----------------------------------------------------------
   Markup: veic_topbar_search_markup() in pages/search-results.php,
   called from veic_topbar_markup() in functions.php.

   The top bar is a FIXED 34px tall and already carries the date,
   the venue, an email address, a phone number and a login link —
   at 1400px there isn't room for a permanently open 200px input
   without the bar's text wrapping onto a second line and breaking
   that fixed height.

   So the box is collapsed to just its 26px magnifier button by
   default and slides open on hover or keyboard focus. Only the
   width animates (not display), so the input is always present in
   the DOM and remains reachable by Tab — :focus-within opens the
   box the moment it's tabbed into.
   ========================================================= */
.veic-topbar-search{
    position: relative;
    display: block;
    height: 24px;
    width: 20px;                       /* collapsed: exactly the icon's own width */
    overflow: hidden;
    box-sizing: border-box;
    flex: 0 0 auto;
    transition: width 0.3s ease;
}

.veic-topbar-search:hover,
.veic-topbar-search:focus-within{
    width: 200px;                      /* expanded */
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}

/* Stay open while a term is being shown back to the visitor on
   the results page — added by header.js (section 6). */
.veic-topbar-search.veic-topbar-search-open{
    width: 200px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}

/* The input and button are both positioned absolutely, pinned to the
   two ends of the box, instead of being laid out with flexbox. This
   is deliberate: relying on flex-shrink to squeeze the input out of
   the way of the button (the previous approach) put the button's
   rendered size at the mercy of the input's own intrinsic/UA-default
   width, which some browsers refused to shrink all the way to 0 —
   clipping or hiding the icon depending on the browser. Absolute
   positioning removes that dependency entirely: the button always
   renders at its full 20x24px in the same spot, regardless of what
   the input does. */
.veic-topbar-search-input{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0 22px 0 12px;             /* right clears the pinned button; left clears the rounded edge */
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    line-height: 1;
    color: var(--veic-white);
    opacity: 0;
    pointer-events: none;               /* collapsed: never intercepts the click meant for the button */
    transition: opacity 0.22s ease;
}

.veic-topbar-search:hover .veic-topbar-search-input,
.veic-topbar-search:focus-within .veic-topbar-search-input,
.veic-topbar-search.veic-topbar-search-open .veic-topbar-search-input{
    opacity: 1;
    pointer-events: auto;
}

.veic-topbar-search-input::placeholder{
    color: rgba(255, 255, 255, 0.65);
    opacity: 1;
}

.veic-topbar-search-input:focus{
    outline: 0;
    box-shadow: none;
}

/* Remove the browser's native "clear" X — it sits awkwardly this close
   to the custom submit button and fights it for space. */
.veic-topbar-search-input::-webkit-search-cancel-button,
.veic-topbar-search-input::-webkit-search-decoration{
    -webkit-appearance: none;
    appearance: none;
}

.veic-topbar-search-btn{
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    z-index: 2;                         /* always sits above/reachable over the input */
}

.veic-topbar-search-btn:hover,
.veic-topbar-search-btn:focus{
    background: transparent;
}

/* No bespoke sizing/colour here on purpose — this inherits the exact
   same 14px + var(--veic-accent) look as the email/phone icons from
   the shared ".veic-topbar .dashicons" rule above, so the search icon
   matches them instead of having its own distinct style/hover colour. */

/* Below ~1100px the top bar's own text is already close to filling
   the width, so the search box is hidden rather than allowed to
   squeeze the contact details. Search is still reachable on those
   widths from the results page's own search box. */
@media (max-width: 1100px){
    .veic-topbar-search{
        display: none;
    }
}


/* =========================================================
   2. MAIN HEADER — DEFAULT STATE (SOLID, all pages)
   ========================================================= */
.veic-mainheader{
    position: fixed;
    top: var(--veic-topbar-height);
    left: 0;
    width: 100%;
    height: var(--veic-header-height);
    background: var(--veic-white);
    box-shadow: 0 2px 14px rgba(10, 46, 115, 0.08);
    z-index: 1000;
    transition: background 0.35s ease, box-shadow 0.35s ease, height 0.3s ease;
    display: flex;
    align-items: center;
}

.veic-mainheader.scrolled{
    height: 68px;
}

.veic-mainheader-inner{
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}


/* -------- Logo: dark version shown by default -------- */
.veic-logo a{
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.veic-logo-img{
    height: 48px;
    width: auto;
    transition: opacity 0.3s ease;
}

.veic-mainheader.scrolled .veic-logo-img{ height: 42px; }

/* Default: show dark logo, hide light logo */
.veic-logo-img.logo-light{ display: none; }
.veic-logo-img.logo-dark{ display: block; }

.veic-logo-text{
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.veic-logo-text strong{
    font-size: 20px;
    font-weight: 700;
    color: var(--veic-primary);
    transition: color 0.3s ease;
}

.veic-logo-text small{
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--veic-secondary);
}


/* -------- Navigation Menu: dark text shown by default -------- */
.veic-nav{
    flex: 1;
    display: flex;
    justify-content: center;
}

.veic-menu{
    display: flex;
    align-items: center;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.veic-menu li{ position: relative; }

.veic-menu li a{
    display: block;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--veic-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.veic-menu li a:hover,
.veic-menu li.current-menu-item > a{
    color: var(--veic-secondary);
}

/* Dropdown indicator */
.veic-menu li.menu-item-has-children > a::after{
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 6px;
    vertical-align: middle;
    transition: transform 0.25s ease;
}

.veic-menu li.menu-item-has-children:hover > a::after{
    transform: rotate(225deg);
}

/* Dropdown panel */
.veic-menu .sub-menu{
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--veic-white);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(10, 46, 115, 0.12);
    list-style: none;
    margin: 10px 0 0;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 1002;
}

.veic-menu li.menu-item-has-children:hover > .sub-menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.veic-menu .sub-menu li a{
    color: var(--veic-text) !important;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 400;
}

.veic-menu .sub-menu li a:hover{
    background: var(--veic-bg);
    color: var(--veic-secondary) !important;
}


/* -------- CTA Button: solid navy by default -------- */
.veic-header-cta{
    display: flex;
    align-items: center;
}

.veic-btn-register{
    display: inline-block;
    background: var(--veic-primary);
    color: var(--veic-white);
    font-size: 14px;
    font-weight: 600;
    padding: 11px 26px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.3s ease, transform 0.2s ease;
}

.veic-btn-register:hover{
    background: var(--veic-secondary);
    transform: translateY(-1px);
    color: var(--veic-white);
}


/* -------- Mobile Hamburger Toggle: dark by default -------- */
.veic-mobile-toggle{
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.veic-mobile-toggle span{
    display: block;
    width: 100%;
    height: 2px;
    background: var(--veic-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.veic-mobile-toggle.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.veic-mobile-toggle.active span:nth-child(2){ opacity: 0; }
.veic-mobile-toggle.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }


/* =========================================================
   3. TRANSPARENT-OVER-HERO STATE
   Applies ONLY when header has class "veic-header-transparent"
   (added via PHP only on is_front_page()) AND has NOT scrolled.
   ========================================================= */
.veic-mainheader.veic-header-transparent:not(.scrolled){
    background: transparent;
    box-shadow: none;
}

.veic-mainheader.veic-header-transparent:not(.scrolled) .veic-logo-img.logo-light{
    display: block;
}
.veic-mainheader.veic-header-transparent:not(.scrolled) .veic-logo-img.logo-dark{
    display: none;
}

.veic-mainheader.veic-header-transparent:not(.scrolled) .veic-logo-text strong{
    color: var(--veic-white);
}
.veic-mainheader.veic-header-transparent:not(.scrolled) .veic-logo-text small{
    color: var(--veic-accent);
}

.veic-mainheader.veic-header-transparent:not(.scrolled) .veic-menu > li > a{
    color: var(--veic-white);
}
.veic-mainheader.veic-header-transparent:not(.scrolled) .veic-menu > li > a:hover,
.veic-mainheader.veic-header-transparent:not(.scrolled) .veic-menu li.current-menu-item > a{
    color: var(--veic-accent);
}

/* Sub-menu items stay dark-on-white even in transparent state (dropdown panel is always solid) */
.veic-mainheader.veic-header-transparent:not(.scrolled) .veic-menu .sub-menu li a{
    color: var(--veic-text) !important;
}

.veic-mainheader.veic-header-transparent:not(.scrolled) .veic-btn-register{
    background: var(--veic-accent);
    color: var(--veic-primary);
}
.veic-mainheader.veic-header-transparent:not(.scrolled) .veic-btn-register:hover{
    background: var(--veic-white);
    color: var(--veic-primary);
}

.veic-mainheader.veic-header-transparent:not(.scrolled) .veic-mobile-toggle span{
    background: var(--veic-white);
}


/* =========================================================
   4. RESPONSIVE BREAKPOINTS
   ========================================================= */

@media (max-width: 991px){
    .veic-topbar-login{
        display: none;
    }

    .veic-nav{
        position: fixed;
        top: calc(var(--veic-topbar-height) + var(--veic-header-height));
        left: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        background: var(--veic-white);
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);
        transition: max-height 0.35s ease;
        justify-content: flex-start;
    }

    .veic-nav.veic-nav-open{
        max-height: 80vh;
        overflow-y: auto;
    }

    .veic-menu{
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
        padding: 10px 20px 20px;
    }

    .veic-menu li{
        width: 100%;
        border-bottom: 1px solid #eef1f6;
    }

    /* Mobile dropdown nav is always solid white with dark text,
       regardless of transparent/scrolled state on the trigger button */
    .veic-mainheader.veic-header-transparent:not(.scrolled) .veic-menu > li > a{
        color: var(--veic-text) !important;
    }

    .veic-menu li a{
        color: var(--veic-text) !important;
        padding: 14px 0;
        width: 100%;
    }

    .veic-menu .sub-menu{
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        display: none;
        margin: 0;
        padding-left: 16px;
        background: var(--veic-bg);
    }

    .veic-menu li.menu-item-has-children.veic-submenu-open > .sub-menu{
        display: block;
    }

    .veic-mobile-toggle{ display: flex; }

    .veic-mainheader.veic-header-transparent:not(.scrolled) .veic-mobile-toggle span{
        background: var(--veic-white);
    }
}

@media (max-width: 768px){
    :root{
        --veic-topbar-height: 30px;
        --veic-header-height: 66px;
    }

    /* Safety net: the topbar has a fixed height above, so if its
       content is ever wider than the viewport it must clip, not
       wrap onto a second line — a wrapped line would push down
       and visually collide with the fixed main header underneath. */
    .veic-topbar-inner{ overflow: hidden; }
    .veic-topbar-left,
    .veic-topbar-right{
        flex-wrap: nowrap;
        overflow: hidden;
        white-space: nowrap;
    }
    .veic-topbar-left{ min-width: 0; }
    .veic-topbar-left span{ white-space: nowrap; }

    .veic-topbar-left span:nth-child(4),
    .veic-topbar-left .veic-sep,
    .veic-topbar-left span:nth-child(5){
        display: none;
    }

    .veic-topbar-right{
        gap: 14px;
        font-size: 11px;
    }
    .veic-topbar-right a{ gap: 4px; }
    .veic-topbar .dashicons{ font-size: 12px; width: 12px; height: 12px; }

    .veic-logo-img{ height: 38px; }
    .veic-logo-text small{ display: none; }

    .veic-btn-register{
        padding: 9px 18px;
        font-size: 13px;
    }
}

@media (max-width: 480px){
    /* Very narrow phones: the date/location block no longer fits
       alongside email + phone on one line, which is what was
       causing the topbar to wrap and overlap the logo/nav below.
       Drop it and keep email + phone (with icons) — tightened
       down so both still fit on a single line. */
    .veic-topbar-left{ display: none; }
    .veic-topbar-right{ gap: 10px; font-size: 10.5px; }
    .veic-topbar-right a{ gap: 3px; }
    .veic-topbar .dashicons{ font-size: 11px; width: 11px; height: 11px; }

    .veic-logo-text strong{ font-size: 16px; }
    .veic-header-cta .veic-btn-register{ padding: 8px 14px; font-size: 12px; }
}