/* =========================================================
   EDIUSFA — 04-HEADER
   Header composite — utility bar + main header + mega-menu +
   search autocomplete + mobile searchbar
   -----------------------------------------------------------------
   Source of truth: ediusfa-homepage-final.html
   - First <style> block, lines 716–735 (composite)
   - Third <style> block, lines 1046–1094 (redesign additions)
   - Homepage-specific block, lines 801–810 (sticky + responsive)
   -----------------------------------------------------------------

   @package    EdiusFA
   @subpackage assets/css
   @since      0.1.0
   @version    0.1.0
   @FROZEN     (header is frozen — see ARCHITECTURE.md §3.3)
   ========================================================= */

/* =========================================================
   27 — HEADER (composite)
   ========================================================= */
.comp-util-bar{
  background:var(--bg-sunken); border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint);
  display:flex; align-items:center; justify-content:space-between; padding:9px 24px; flex-wrap:wrap; gap:8px;
}
.comp-rec{display:flex; align-items:center; gap:6px; color:var(--danger); font-weight:600;}
.comp-rec-dot{width:6px; height:6px; border-radius:50%; background:var(--danger); animation:dsPulse 1.6s infinite;}
.comp-util-right{display:flex; align-items:center; gap:16px;}
.comp-header{display:flex; align-items:center; gap:24px; padding:16px 24px; flex-wrap:wrap;}
.comp-logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; flex-shrink:0;}
.comp-logo-mark{
  width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg, var(--cyan), var(--amber));
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:12px; color:var(--ink-on-accent);
}
.comp-logo-sub{color:var(--ink-dim); font-weight:500; font-size:12px;}
.comp-header-search{flex:1; min-width:200px; max-width:360px;}
.comp-header-nav{display:flex; align-items:center; gap:24px;}
.comp-header-actions{display:flex; align-items:center; gap:10px;}

/* =========================================================
   HEADER — sticky + responsive (homepage-specific subset)
   ========================================================= */
.pdp-header{position:sticky; top:0; z-index:var(--z-header); background:var(--bg-sunken);}
.pdp-header{border-bottom:1px solid var(--line);}

.header-search-toggle{display:none;}
@media (max-width:760px){
  .comp-header-search, .comp-header-nav{display:none;}
  .header-search-toggle{display:flex;}
  .comp-header{padding:14px 16px;}
  .comp-mobile-searchbar{display:none; padding:0 16px 14px;}
  .comp-mobile-searchbar.is-open{display:block;}
}

/* =========================================================
   HEADER — REDESIGN ADDITIONS (third <style> block)
   mega-menu for categories + live search autocomplete
   ========================================================= */
.comp-header{position:relative;}
.comp-logo-mark{transition:transform var(--dur-fast) var(--ease);}
.comp-logo:hover .comp-logo-mark{transform:rotate(-6deg) scale(1.05);}

.nav-item-has-menu{position:relative;}
.nav-item-has-menu > a{display:flex; align-items:center; gap:5px;}
.nav-item-has-menu > a svg{transition:transform var(--dur-fast) var(--ease); color:var(--ink-faint);}
.nav-item-has-menu.is-open > a svg{transform:rotate(180deg); color:var(--cyan);}
.nav-item-has-menu.is-open > a{color:var(--cyan);}

.mega-menu{
  position:absolute; top:calc(100% + 14px); inset-inline-start:0; width:420px;
  background:var(--bg-elevated); border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:18px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index:60;
}
.nav-item-has-menu.is-open .mega-menu{opacity:1; visibility:visible; transform:translateY(0);}
.mega-menu-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.mega-menu-head span{font-size:12px; color:var(--ink-faint);}
.mega-menu-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.mega-menu-grid a{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px; border-radius:10px;
  background:var(--bg-elevated-2); border:1px solid var(--line); transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  text-align:center;
}
.mega-menu-grid a:hover{border-color:var(--cyan); transform:translateY(-2px);}
.mega-menu-grid .mm-emoji{font-size:20px;}
.mega-menu-grid .mm-name{font-size:11.5px; font-weight:700; color:var(--ink);}
.mega-menu-grid .mm-count{font-size:10px; color:var(--ink-faint); font-family:var(--font-mono);}
.mega-menu-foot{margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}

.header-search-suggest{
  position:absolute; top:calc(100% + 8px); inset-inline:0; background:var(--bg-elevated);
  border:1px solid var(--line-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  overflow:hidden; opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index:60;
}
.comp-header-search{position:relative;}
.comp-header-search.is-open .header-search-suggest{opacity:1; visibility:visible; transform:translateY(0);}