/**
 * @file
 * Header chrome: utility bar, logo, nav bar, CTA, search overlay, mobile.
 *
 * Extracted from stuff/phi-menu-mockup-008-D-Home-Menu.html. If this file and
 * the mockup ever disagree, the mockup wins — re-extract rather than patching
 * here.
 *
 * Design tokens (--phi-*, --header-height, --ease, --container) all live in
 * global.css. Nothing is redeclared in this file.
 */

/* ---------------------------------------------------------------------------
 * ADMIN TOOLBAR CLEARANCE
 *
 * Everything in this header is position:fixed, so with the admin toolbar on
 * screen the two stacks landed on top of each other: the utility bar covered
 * the toolbar bar, and .main-header covered the admin_toolbar tray — which is
 * why the toolbar could not be hovered.
 *
 * Drupal publishes --drupal-displace-offset-top on the root element and keeps
 * it updated as the tray opens/closes and the orientation changes, so this is
 * pure CSS with no JS and no hardcoded 39/79px guesses.
 * ------------------------------------------------------------------------ */
:root { --admin-offset: var(--drupal-displace-offset-top, 0px); }

/* UTILITY BAR — this is the region-header-top region.
   Deliberately IN FLOW, not position:fixed: it scrolls away with the page and
   the main header docks to the top by itself. Place blocks in
   region-header-top and they inherit the .utility-link treatment below. */
.utility-bar {
    position: relative;
    min-height: var(--topbar-height);
    background: var(--phi-utility-dark);
    /* ONE size for every control in the strip — the Knowledge Center button,
       the search trigger, the language switcher and anything placed here
       later. They are read as a single row, so they had drifted to three
       different sizes; a token is what stops that happening again. It steps
       down once, below, rather than each control carrying its own breakpoint.
       rem not px, so the strip respects the browser's text-size setting
       (0.8125rem = 13px, 0.6875rem = 11px at the default root size). */
    --utility-font-size: 0.8125rem;
    font-size: var(--utility-font-size); color: rgba(255,255,255,0.8);
}
@media (max-width: 650px) {
    .utility-bar { --utility-font-size: 0.6875rem; }
}
.utility-bar .container {
    display: flex; align-items: center; justify-content: flex-end;
    min-height: var(--topbar-height);
}
.utility-links {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 4px; flex-wrap: wrap;
}

/* Any block placed in the Header Top region sits inline in the accent strip.
   Drupal's block/field wrappers are block-level and carry default margins,
   which otherwise stretch the 40px bar. */
.utility-bar .region-header-top > .block {
    display: flex;
    align-items: center;
    margin: 0;
}
.utility-bar .region-header-top > .block > .content,
.utility-bar .region-header-top > .block .field,
.utility-bar .region-header-top > .block .field__item {
    margin: 0;
    padding: 0;
}
.utility-bar .region-header-top > .block p:last-child {
    margin-bottom: 0;
}

/* Knowledge Center shortcut in the utility strip. Colour, radius and type come
   from .btn.btn-default (custom-classes.css) so it matches the Contact /
   Inquiry button; only the slimmer padding for the thin accent bar is set here.
   It is a content block in the Header Top region, and the search trigger is
   appended to that region after the blocks render — so it lands to its left
   without any repositioning. */
/* Region-scoped so it outranks `.btn.btn-default`'s own padding (0,2,0) in
   custom-classes.css, which loads later — otherwise the button keeps its
   full-size 9px/20px padding and stretches the 40px accent strip. Applies to
   any button block placed here, not just this one. */
.utility-bar .region-header-top a.btn,
.utility-bar .region-header-top a.utility-kc-btn {
    padding: 5px 14px;
    font-size: var(--utility-font-size);
    line-height: 1.4;
}
.utility-kc-btn {
    flex-shrink: 0;
    margin-right: 12px;
    border-bottom: none;
    white-space: nowrap;
}
.utility-kc-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
@media (max-width: 650px) {
    /* Size comes from --utility-font-size at the top of this file; only the
       button's own spacing tightens here. */
    .utility-kc-btn {
        margin-right: 8px;
        padding: 5px 10px;
    }
    .utility-kc-btn svg { width: 12px; height: 12px; }
}

/* ------------------------------------------------------------------------
   Responsive Menu module toggle (the site's mobile off-canvas trigger).
   Bar colour and the wrapper background are set in style.css, which loads
   after this file. Only the button chrome and the overhanging "Menu" label
   are handled here.
   ------------------------------------------------------------------------ */
.responsive-menu-toggle-wrapper,
a.responsive-menu-toggle-icon,
a.responsive-menu-toggle-icon:hover,
a.responsive-menu-toggle-icon:focus {
    background: none;
    border: none;
    box-shadow: none;
    text-decoration: none;
}
.responsive-menu-toggle-icon span.label {
    display: none;
}

/* Only one mobile toggle. The theme's own .hamburger drives the mega-menu
   accordion; this site uses the Responsive Menu off-canvas instead, so the
   theme button is hidden rather than removed — delete this rule to bring the
   mega-menu accordion back. The `body` prefix outranks the
   `.nav-collapsed .hamburger { display: flex }` rule further down this file. */
body.nav-collapsed .hamburger { display: none; }
/* The region fills the flex row and aligns its blocks to the right, flush with
   the container gutter. It must NOT re-declare max-width/margin/padding —
   .container already owns those (see the removed rule in style.css). */
.utility-bar .region-header-top {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Blocks dropped into the region should not carry their own chrome. */
.utility-bar .block { margin: 0; }
.utility-bar h2, .utility-bar .block > h2 { display: none; }
/* line-height is set explicitly, and matches the 1.4 the Knowledge Center
   button gets above. Without it these inherit --bs-body-line-height (1.75rem =
   28px), which made the control 36px tall against the button's 31px and sat its
   label about a pixel below the others — the whole strip read as misaligned. */
.utility-link {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 4px;
    text-decoration: none; color: rgba(255,255,255,0.85);
    transition: all 0.2s ease; cursor: pointer;
    font-size: var(--utility-font-size); font-weight: 500; letter-spacing: 0.03em; line-height: 1.4;
}
.utility-link:hover { color: #fff; background: rgba(255,255,255,0.12); }
.utility-link svg { width: 13px; height: 13px; flex-shrink: 0; }
.utility-divider { width: 1px; height: 14px; background: rgba(255,255,255,0.2); margin: 0 2px; }

/* MAIN HEADER — transparent over hero, solid on scroll/mega-open */
/* Sits below the utility bar at rest, then docks to the top once the utility
   bar has scrolled past. --topbar-height is measured from the real region by
   mega-menu.js, so it follows however many blocks you place in there. */
.main-header {
    position: fixed;
    /* --header-top is the utility bar's measured bottom (see mega-menu.js).
       The calc() fallback is only used before JS runs. */
    top: var(--header-top, calc(var(--admin-offset) + var(--topbar-height)));
    left: 0; right: 0;
    height: var(--header-height);
    /* Solid dark at rest, white once scrolled (and while a mega menu is open,
       since the panel itself is white). The mockup's transparent-over-hero
       treatment is deliberately NOT used: it only worked on a page with a dark
       hero, and left the header invisible everywhere else. */
    background: var(--phi-header-dark);
    z-index: 1005;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.main-header > .container,
.main-header .header-page {
    display: flex; justify-content: space-between;
    height: 100%;
    /* stretch, not center: the nav must fill the full header height so the
       active underline lands on the header's bottom edge. Items that should
       stay optically centred (logo, hamburger) do so via their own rules. */
    align-items: stretch;
}
.main-header.scrolled {
    top: var(--admin-offset);
    background: var(--white);
    border-bottom-color: var(--phi-gray-200);
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.main-header.mega-open {
    background: var(--white);
    border-bottom-color: transparent;
}

/* NOTE: the previous `body:not(.path-frontpage)` block that forced interior
   headers white has been removed. It existed only to stop the transparent
   header disappearing on pages with no hero behind it. Now that the resting
   state is solid dark on every page, the two states below are the whole
   story and there is no per-page special casing. */

/* The header is fixed, so content after it needs reserving. This is an explicit
   spacer element rather than padding on <body>, because the utility bar is now
   in normal flow: body padding would have pushed the utility bar down too, and
   it would also have had to fight the INLINE padding-top core writes on <body>
   for the admin toolbar. With a spacer, core's toolbar padding is left alone
   and nothing needs !important.
   Applies to EVERY page including the front page: the header is opaque now, so
   nothing may sit underneath it. (The front page used to be exempt so its hero
   could show through a transparent header — that is what was hiding the top of
   the home page content behind the fixed header.) */
.header-spacer { height: var(--header-height); }

/* Sit UNDER the toolbar rather than over it, so admin_toolbar's hover menus
   open above the site header. Core: toolbar bar z-index 502, tray 501.
   Only applied when the toolbar is present — the public site keeps the
   original stacking. */
body.toolbar-fixed .main-header { z-index: 475; }
body.toolbar-fixed .search-overlay { z-index: 490; }
body.toolbar-fixed .mega-menu { z-index: 470; }
body.toolbar-fixed .mega-backdrop { z-index: 460; }

.logo-link, .main-header .region-nav-branding a { display: flex; align-items: center; text-decoration: none; }
.logo-link img, .main-header .region-nav-branding img { height: 44px; width: auto; }

/* Logo swap. The logo block already ships BOTH a colour and a white asset
   (img.logocolor / img.logowhite), so this switches between the two real
   files rather than applying a CSS invert filter to one of them — an invert
   on a multi-colour logo does not produce the white version.
   Replaces the old .is-sticky rules that used to live in style.css. */
.main-header img.logocolor { display: none; }
.main-header img.logowhite { display: block; }
.main-header.scrolled img.logocolor,
.main-header.mega-open img.logocolor { display: block; }
.main-header.scrolled img.logowhite,
.main-header.mega-open img.logowhite { display: none; }

/* NAV
   .nav-item / .nav-link / .nav-list are ALSO Bootstrap 5 class names, and
   bootstrap.min.css sits in the theme's `framework` library (css group
   `theme`), which Drupal loads AFTER this file's `component` group. Matching
   Bootstrap's specificity would therefore lose on source order. Every rule
   below is scoped under .main-header so it wins on specificity instead —
   the mockup's class names are kept exactly as-is. */
/* The active/hover underline has to land on the HEADER's bottom edge, so that
   it meets the top of the open dropdown. The menu block and its region sit
   between .header-page and .main-nav and were only as tall as their own text
   (28px inside a 76px header), so height:100% resolved against 28px and the
   bar floated ~19px short. Stretching the whole chain is what fixes it —
   .nav-link is then full header height and bottom:0 is the header's edge. */
/* Sized from the token, not a percentage. Neither height:100% nor
   align-self:stretch survived the .header-page > .region-header > .block
   chain (the percentage kept resolving against content, leaving the nav 45px
   inside a 76px bar), and --header-height is the same value the header itself
   is sized from, so the two cannot drift apart. */
.main-header .header-page > .region-header {
    height: 100%;
    display: flex; align-items: stretch; justify-content: flex-end;
}
/* ONLY the menu block (a <nav>) is stretched. A blanket `> *` here also forced
   the responsive_menu toggle block to display:flex, which made that normally
   hidden mobile control overlay the nav bar and swallow its hover events. */
.main-header .region-header > nav { height: 100%; display: flex; align-items: stretch; }
.main-header .region-header > .responsive-menu-toggle-wrapper { align-self: center; }
/* Keep the logo and hamburger optically centred rather than stretched. */
.main-header .header-page > .region-nav-branding { display: flex; align-items: center; }
.main-header .hamburger { align-self: center; }

.main-header .main-nav { display: flex; align-items: stretch; height: 100%; }
.main-header .nav-list {
    list-style: none; display: flex; align-items: stretch; height: 100%;
    margin: 0; padding: 0; gap: 2px; flex-wrap: nowrap;
}
.main-header .nav-item { height: 100%; display: flex; align-items: center; position: relative; }
.main-header .nav-link {
    display: flex; align-items: center; gap: 4px;
    padding: 0 16px; height: auto; align-self: stretch;
    text-decoration: none; color: rgba(255,255,255,0.9);
    font-family: var(--display-font);
    font-size: 15px; font-weight: 650; letter-spacing: 0.01em;
    transition: color 0.3s var(--ease); white-space: nowrap; position: relative;
}
.main-header.scrolled .nav-link,
.main-header.mega-open .nav-link { color: var(--phi-gray-800); }
.main-header .nav-link::after {
    content: ''; position: absolute;
    bottom: 0; left: 16px; right: 16px; height: 3px;
    background: var(--phi-orange); border-radius: 3px 3px 0 0;
    transform: scaleX(0); transition: transform 0.25s var(--ease);
}
.main-header .nav-item:hover .nav-link,
.main-header .nav-item.is-open .nav-link,
.main-header .nav-item.active .nav-link { color: var(--phi-orange) !important; }
/* `.rightarrow` in custom-classes.css styles ::after as a masked arrow, but in
   the header that same ::after IS the hover underline above. Both rules apply
   and the result is neither: the arrow gets the underline's scaleX(0) and
   vanishes, while the underline inherits the arrow's 0.85em height. The arrow
   is rendered as a real <svg> by menu--main.html.twig, so here the pseudo is
   put back to being purely the underline. */
.main-header .nav-link.rightarrow::after {
    width: auto;
    height: 3px;
    background-color: var(--phi-orange);
    -webkit-mask: none;
    mask: none;
    left: 16px;
    right: 16px;
}

.main-header .nav-item:hover .nav-link::after,
.main-header .nav-item.is-open .nav-link::after,
.main-header .nav-item.active .nav-link::after { transform: scaleX(1); }
.main-header .nav-link .chev { width: 10px; height: 10px; transition: transform 0.25s var(--ease); }
.main-header .nav-item:hover .nav-link .chev,
.main-header .nav-item.is-open .nav-link .chev { transform: rotate(180deg); }

/* Visible keyboard focus. Addition to the mockup — it had none, and the brief
   makes keyboard access non-optional. */
.nav-link:focus-visible,
.mega-rail-item:focus-visible,
.mega-panel a:focus-visible,
.menu-col a:focus-visible,
.utility-link:focus-visible {
    outline: 2px solid var(--phi-orange);
    outline-offset: 2px;
}

/* CTA — ghost on dark, solid on scroll.
   `.cta-btn` is the mockup's own class. `.cta-menu .nav-link` is the same
   treatment applied to a real menu item: put `cta-menu` in the item's CSS
   class field and it renders as this button. Both selectors share ONE set of
   declarations rather than a duplicate block, so the two cannot drift.
   The .main-header prefix on the menu variant is needed to outrank
   `.main-header .nav-link`. */
.cta-wrap { padding: 0 0 0 10px; height: 100%; display: flex; align-items: center; }
/* Each variant is matched TWICE: once with the class on the parent <li>
   (field_menu_item_class) and once with it on the anchor itself
   (link_attributes). Both authoring routes must produce the same button, and
   sharing one declaration block is what keeps them from drifting. */
.cta-btn,
.main-header .cta-menu .nav-link,
.main-header .white-btn .nav-link,
.main-header .green-btn .nav-link,
.main-header .btn-default .nav-link,
.main-header .nav-link.cta-menu,
.main-header .nav-link.white-btn,
.main-header .nav-link.green-btn,
.main-header .nav-link.btn-default {
    display: inline-flex; align-items: center; gap: 7px;
    background: transparent; color: var(--white) !important;
    border: 2px solid rgba(255,255,255,0.5);
    padding: 8px 18px; border-radius: 6px;
    font-family: var(--display-font);
    font-size: 0.875rem; font-weight: 700;
    /* An explicit line-height is needed because the theme sets
       --bs-body-line-height: 1.75rem, which gave this a 28px line box and a
       52px-tall button. But it must be `normal`, NOT a number below the font's
       own line box: 1.15 clipped Plus Jakarta Sans (ascent 17 + descent 4 at
       16px) and pushed the label several px above centre. Padding trimmed to
       8px so the button keeps its ~39px height. */
    line-height: normal;
    letter-spacing: 0.04em; text-transform: uppercase;
    text-decoration: none; transition: all 0.4s var(--ease); height: auto !important;
    /* The anchor is a flex item of the <li>, and a flex item with an auto cross
       size stretches to fill it — so `height: auto` alone still gave a button
       as tall as the whole nav bar. Centring it is what actually sizes it to
       its own content. */
    align-self: center;
}
.cta-btn:hover,
.main-header .cta-menu .nav-link:hover,
.main-header .white-btn .nav-link:hover,
.main-header .nav-link.cta-menu:hover,
.main-header .nav-link.white-btn:hover {
    background: var(--phi-orange); border-color: var(--phi-orange);
    color: var(--white) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(245, 120, 32, 0.35);
}
/* Ghost variants go solid once the header turns white, so they stay legible. */
.main-header.scrolled .cta-btn,
.main-header.mega-open .cta-btn,
.main-header.scrolled .cta-menu .nav-link,
.main-header.mega-open .cta-menu .nav-link,
.main-header.scrolled .white-btn .nav-link,
.main-header.mega-open .white-btn .nav-link,
.main-header.scrolled .nav-link.cta-menu,
.main-header.mega-open .nav-link.cta-menu,
.main-header.scrolled .nav-link.white-btn,
.main-header.mega-open .nav-link.white-btn {
    background: var(--phi-orange); color: var(--white) !important;
    border-color: var(--phi-orange);
}

/* Solid variants in the menu bar — unchanged by the header's state. */
.main-header .green-btn .nav-link,
.main-header .nav-link.green-btn {
    background: var(--phi-green); border-color: var(--phi-green);
    color: var(--white) !important;
}
.main-header .green-btn .nav-link:hover,
.main-header .nav-link.green-btn:hover {
    background: #00401c; border-color: #00401c;
    transform: translateY(-1px);
}
.main-header .btn-default .nav-link,
.main-header .nav-link.btn-default {
    background: var(--phi-orange); border-color: var(--phi-orange);
    color: var(--white) !important;
}
.main-header .btn-default .nav-link:hover,
.main-header .nav-link.btn-default:hover {
    background: var(--phi-orange-hover); border-color: var(--phi-orange-hover);
    transform: translateY(-1px);
}
.cta-btn::after { display: none !important; }
.cta-btn .chev { display: none; }
.cta-btn svg,
.main-header .cta-menu .nav-link svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Button, not a full-height nav item: centre it in the bar and suppress the
   orange underline the other items get. */
.main-header .nav-item.cta-menu,
.main-header .nav-item.white-btn,
.main-header .nav-item.green-btn,
.main-header .nav-item.btn-default { align-items: center; margin-left: 10px; }

.main-header .cta-menu .nav-link,
.main-header .white-btn .nav-link,
.main-header .green-btn .nav-link,
.main-header .btn-default .nav-link { align-self: center; }

/* A button variant has no hover underline — the whole button changes instead.
   Matched in both forms: class on the <li> (field_menu_item_class) and on the
   anchor (link_attributes). */
.main-header .cta-menu .nav-link::after,
.main-header .white-btn .nav-link::after,
.main-header .green-btn .nav-link::after,
.main-header .btn-default .nav-link::after,
.main-header .nav-link.cta-menu::after,
.main-header .nav-link.white-btn::after,
.main-header .nav-link.green-btn::after,
.main-header .nav-link.btn-default::after { display: none !important; }

.main-header .cta-menu .nav-link .chev,
.main-header .white-btn .nav-link .chev,
.main-header .green-btn .nav-link .chev,
.main-header .btn-default .nav-link .chev { display: none; }

.main-header .nav-item.cta-menu:hover .nav-link,
.main-header .nav-item.cta-menu.active .nav-link,
.main-header .nav-item.white-btn:hover .nav-link,
.main-header .nav-item.white-btn.active .nav-link,
.main-header .nav-item.green-btn:hover .nav-link,
.main-header .nav-item.green-btn.active .nav-link,
.main-header .nav-item.btn-default:hover .nav-link,
.main-header .nav-item.btn-default.active .nav-link { color: var(--white) !important; }

/* The nav-item carries the class, so the generic .rightarrow::after in
   custom-classes.css never matches the anchor. The arrow for menu items is
   rendered as a real <svg> by menu--main.html.twig instead. */

/* SEARCH BLOCK AS A UTILITY TRIGGER
   #block-phi-exposedformsearchpage-1-2 is a views exposed-filter block. In the
   utility bar it collapses to a "Search" link with an icon; mega-menu.js moves
   its real form into the overlay and injects the trigger button, so there is
   only ever ONE search form in the DOM (no duplicate field ids). */
/* Only the <form> itself is hidden. The exposed-filter BLOCK wrapper also
   carries .views-exposed-form, so matching that class hid the whole block —
   taking its contextual-links pencil with it when logged in. */
.utility-bar form { display: none; }

.utility-search-trigger {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 4px;
    border: none; background: none; cursor: pointer;
    color: rgba(255,255,255,0.85);
    font-family: inherit; font-size: var(--utility-font-size); font-weight: 500; letter-spacing: 0.03em;
    /* See .utility-link — a <button> inherits the 28px body line-height too. */
    line-height: 1.4;
    transition: all 0.2s ease;
}
.utility-search-trigger:hover { color: #fff; background: rgba(255,255,255,0.12); }
.utility-search-trigger svg { width: 13px; height: 13px; flex-shrink: 0; }

/* SEARCH OVERLAY */
.search-overlay {
    position: fixed; top: var(--admin-offset); left: 0; right: 0;
    height: calc(var(--total-header) + 50px);
    background: var(--white); z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 0 24px; box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    transform: translateY(-100%); transition: transform 0.35s var(--ease);
}
.search-overlay.open { transform: translateY(0); }
.search-inner { width: 100%; max-width: 780px; display: flex; align-items: center; gap: 14px; }
.search-inner > svg { width: 22px; height: 22px; color: var(--phi-orange); flex-shrink: 0; }
/* The relocated exposed form. Its own wrappers are flattened so it reads as
   the mockup's single big search line.

   NOTE the .form--inline rule: Drupal wraps the exposed form's children in
   `<div class="form--inline clearfix">`, so making only the <form> a flex
   container did nothing — the form has exactly ONE child. The field and the
   submit are inside that wrapper, and without this they stacked vertically. */
.search-form-slot { flex: 1; min-width: 0; }
.search-overlay form { display: flex; align-items: center; gap: 12px; width: 100%; }
.search-overlay .form--inline {
    display: flex; align-items: center; gap: 12px; width: 100%;
}
.search-overlay .form--inline > * { margin: 0; float: none; }
.search-overlay .form-item,
.search-overlay .js-form-item { flex: 1; margin: 0; min-width: 0; }
.search-overlay label { display: none; }
.search-overlay .form-actions { margin: 0; flex-shrink: 0; }

/* Submit button.
   global.css carries a legacy `input[value="Search"]` rule that turns ANY
   submit labelled "Search" into a small icon-only box with a #00a1d9 blue
   border — the old header search treatment. It uses !important on the
   background, so background-color/-image have to be forced back here rather
   than merely out-specified. Left in place globally because the /search page's
   own exposed form still relies on it. */
.search-overlay input[type="submit"],
.search-overlay .form-submit {
    width: auto;
    height: auto;
    padding: 9px 20px;
    border-radius: 6px;
    border: 2px solid var(--phi-orange);
    background-image: none !important;
    background-color: var(--phi-orange) !important;
    color: var(--white);
    font-family: var(--display-font);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s var(--ease);
}
.search-overlay input[type="submit"]:hover,
.search-overlay .form-submit:hover {
    background-color: var(--phi-orange-hover) !important;
    border-color: var(--phi-orange-hover);
}

.search-inner input[type="text"],
.search-inner input[type="search"],
.search-overlay input[type="text"],
.search-overlay input[type="search"] {
    width: 100%; border: none; border-bottom: 2px solid var(--phi-gray-200);
    padding: 12px 0; font-size: 22px; font-family: 'Inter', sans-serif;
    color: var(--phi-dark); outline: none; background: transparent;
    transition: border-color 0.2s ease; border-radius: 0; box-shadow: none;
}
.search-inner input:focus,
.search-overlay input[type="text"]:focus,
.search-overlay input[type="search"]:focus { border-bottom-color: var(--phi-orange); }
.search-inner input::placeholder,
.search-overlay input::placeholder { color: var(--phi-gray-400); }
.search-close {
    width: 38px; height: 38px; border-radius: 50%; border: none;
    background: var(--phi-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; flex-shrink: 0;
}
.search-close:hover { background: var(--phi-gray-200); }
.search-close svg { width: 16px; height: 16px; color: var(--phi-gray-600); }

/* MOBILE */
.hamburger {
    display: none; width: 40px; height: 40px; border: none; background: none;
    cursor: pointer; padding: 8px; flex-direction: column; justify-content: center; gap: 5px;
}
/* Orange bars, no button chrome, in every header state. */
.hamburger,
.hamburger:hover,
.hamburger:focus { background: none; border: none; box-shadow: none; outline: none; }
.hamburger span { display: block; width: 100%; height: 2px; background: var(--phi-orange); border-radius: 2px; transition: all 0.3s ease; }
.main-header.scrolled .hamburger span,
.main-header.mega-open .hamburger span { background: var(--phi-orange); }

.nav-collapsed .nav-list { display: none; }
.nav-collapsed .cta-wrap { display: none; }
.nav-collapsed .hamburger { display: flex; }

/* Accordion mode. The SAME tree is reused — no duplicate mobile markup. The
   mega menus stop being fixed overlays and stack inline under the bar. */
.nav-collapsed.nav-open .nav-list {
    display: block;
    position: fixed; top: var(--header-bottom, 116px); left: 0; right: 0; bottom: 0;
    background: var(--white); overflow-y: auto;
    padding: 8px 0; z-index: 1006;
}
.nav-collapsed.nav-open .nav-item {
    display: block; height: auto; width: 100%;
    border-bottom: 1px solid var(--phi-gray-200);
}
.nav-collapsed.nav-open .nav-link {
    color: var(--phi-gray-800); height: auto; padding: 14px 24px;
    justify-content: space-between;
}
.nav-collapsed.nav-open .nav-link::after { display: none; }
.nav-collapsed.nav-open .cta-wrap { display: flex; padding: 16px 24px; }