/* ==========================================================================
   Site header — Figma DwVsiflHKOGd1W2Wvfdzp8 "Header OHIO" 3418:4677 (on home 4085:9924), updated 15/10 (item 108).
   Site-wide, scoped to body.ohio-hh (inc/v2/header-home.php) so it overrides header D's base rules (css/ohio-header.css).
   Layout and slots live in Flatsome's Header Builder (scripts/header-builder-write-v2.php): left HTML = hotline pill,
   logo centre, right = HTML 4 [ohio_lang_flags] · search · HTML 5 CTA; bottom = menu.
   Row 1: white 72px (+8px white gap), content 1280 (padding 320 at 1920). Row 2: #422666 68px, 7 items spread,
   Menu labels remain authored in WordPress; one line, nowrap (owner 29/10); desktop type 13/600 uppercase lives in css/ohio-style-guide-layer.css.
   ========================================================================== */
@media (min-width:850px){
  .ohio-hh #header .header-main .container,
  .ohio-hh #header .header-bottom .container{max-width:var(--ohio-container);padding-left:20px;padding-right:20px}
  .ohio-hh #header .header-wrapper{background:#fff;box-shadow:none}

  /* ---- row 1 ---- */
  .ohio-hh #header .header-main{height:76px;background:#fff;border:0}
  .ohio-hh #header .header-main .header-inner{height:64px;margin-bottom:8px}   /* frame 4724:15837: row 1 is 76 (content centre y 32), menu bar 76..144 */
  .ohio-hh #header #logo{width:108px!important;max-width:108px;margin:0 auto}
  .ohio-hh #header #logo img{width:108px;height:56px;max-height:none;object-fit:contain;padding:0}
  .ohio-hh #header .header-main .flex-left,.ohio-hh #header .header-main .flex-right{flex:1 1 0;min-width:0}
  .ohio-hh #header .header-main .header-nav{gap:16px;flex-wrap:nowrap;align-items:center}
  .ohio-hh #header .header-main .flex-right .header-nav{justify-content:flex-end}
  .ohio-hh #header .header-main .header-nav > li{margin:0;padding:0}

  /* hotline pill 239×63: padding 8/24/8/8, gap 12, radius 16, border #DED0EE, shadow 0 6 18 Tím 700/8 % */
  .ohio-hh #header .ohio-hh-hotline{display:inline-flex;align-items:center;gap:12px;box-sizing:border-box;height:63px;padding:0 36.5px 0 8px;
    border:1px solid var(--ohio-purple-200);border-radius:16px;background:#fff;box-shadow:var(--ohio-shadow-card);text-decoration:none;line-height:1}
  .ohio-hh .ohio-hh-hotline__badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:var(--ohio-cta)}
  .ohio-hh .ohio-hh-hotline__text{display:flex;flex-direction:column;gap:2px}
  .ohio-hh #header .ohio-hh-hotline__label{font:600 var(--fs-label)/var(--lh-label) var(--font-base);letter-spacing:.6px;   /* frame 11px; Style Guide minimum 12 */text-transform:none;color:var(--ohio-purple-600)}
  .ohio-hh #header .ohio-hh-hotline__num{font:700 var(--fs-h4)/var(--lh-h4) var(--font-base);letter-spacing:0;color:var(--ohio-purple-700);white-space:nowrap}
  .ohio-hh #header .ohio-hh-hotline:hover{border-color:var(--ohio-purple-300)}

  /* language box 86×39: border #ECEAF0 radius 10, padding 3, gap 2; items 38×31 radius 8, active #F7F3FB */
  .ohio-hh .ohio-lang{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--ohio-neutral-100);border-radius:10px;background:#fff}
  .ohio-hh .ohio-lang__item{display:inline-flex;align-items:center;justify-content:center;width:38px;height:31px;border-radius:8px}
  .ohio-hh .ohio-lang__item.is-active,.ohio-hh .ohio-lang__item:hover{background:var(--ohio-purple-50)}
  .ohio-hh .ohio-lang img{display:block;width:22px;height:15px;object-fit:cover}
  .ohio-hh #header .header-main .ohio-lang--toggle{display:none}

  /* search: Flatsome search icon → 40×40 white, border #DED0EE, radius 12, icon Tím 700 */
  .ohio-hh #header .header-main .header-search > a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;
    border:1px solid var(--ohio-purple-200);border-radius:12px;background:#fff;color:var(--ohio-purple-700)}
  .ohio-hh #header .header-main .header-search > a i{font-size:15px;top:0}

  /* CTA 206×48: radius 12, gradient #F1791F→#F28B21, shadow 0 6 16 #F1791F/28 %, padding 6/6/6/24, gap 12;
     label BVP 600 15 uppercase +0.6px; arrow tile 36×36 radius 8 white/20 % */
  .ohio-hh #header .ohio-hh-cta{display:inline-flex;align-items:center;gap:12px;box-sizing:border-box;height:48px;margin:0;padding:6px 6px 6px 24px;
    border:0!important;border-radius:12px;background:var(--ohio-grad-cta);box-shadow:var(--ohio-shadow-primary)!important;
    font:600 var(--fs-btn)/var(--lh-btn) var(--font-base)!important;letter-spacing:.6px;text-transform:uppercase;color:#fff!important;text-decoration:none;white-space:nowrap}
  .ohio-hh #header .ohio-hh-cta:hover{filter:brightness(.95)}
  .ohio-hh #header .ohio-hh-cta::before,.ohio-hh #header .ohio-hh-cta::after{content:none!important;display:none!important}   /* legacy .qh_tuvan pulse ring */
  .ohio-hh .ohio-hh-cta__arrow{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.2)}

  /* ---- row 2: purple menu bar ---- */
  .ohio-hh #header .header-bottom{background:var(--ohio-purple-700)!important;min-height:68px;border:0}
  .ohio-hh #header .header-bottom .flex-col,.ohio-hh #header .header-bottom .header-bottom-nav{width:100%}
  .ohio-hh #header .header-bottom .nav{display:flex;justify-content:space-between;align-items:center;width:100%;flex-wrap:nowrap;height:68px}
  /* items fill the bar's full height, so dropdown hover bridges (css/ohio-mega-menu.css) start at the bar's bottom edge */
  .ohio-hh #header .header-bottom .nav > li{margin:0;height:68px;display:flex;align-items:center}
  .ohio-hh #header .header-bottom .nav > li > a{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;padding:0;height:68px;
    font:500 var(--fs-menu)/var(--lh-menu) var(--font-base)!important;letter-spacing:0;text-transform:none;color:#fff!important;text-align:center;white-space:nowrap}
  /* Top-level labels never wrap (owner 29/10); chevron stays inline at a 6px gap. */
  .ohio-hh #header .header-bottom .nav > li:not(:first-child):not(:last-child) > a{white-space:nowrap;max-width:none;text-wrap:nowrap}
  .ohio-hh #header .header-bottom .nav > li > a:hover,
  .ohio-hh #header .header-bottom .nav > li.active > a,
  .ohio-hh #header .header-bottom .nav > li.current-menu-ancestor > a{color:var(--ohio-text-on-dark)!important}
  .ohio-hh #header .header-bottom .nav > li > a .icon-angle-down{display:inline-block;flex:0 0 auto;margin:0;font-size:var(--fs-menu);opacity:1}
  .ohio-hh #header .header-bottom .nav > li > a br{display:none}

  /* ---- sticky: same layout, Flatsome only toggles position ---- */
  .ohio-hh #header .header-wrapper.stuck .header-main{height:76px}
  .ohio-hh #header .header-wrapper.stuck .header-main .header-inner{height:64px}
}
@media (min-width:850px) and (max-width:1360px){
  /* narrower than the 1280 content: side gutters, hotline label goes, menu 12px */
  .ohio-hh #header .header-main .container,.ohio-hh #header .header-bottom .container{padding-left:20px;padding-right:20px}
  .ohio-hh #header .ohio-hh-hotline__label{display:none}
  .ohio-hh #header .ohio-hh-hotline{height:56px;padding-right:16px}
  .ohio-hh #header .ohio-hh-hotline__num{font-size:var(--fs-h4)}
  .ohio-hh #header .header-bottom .nav > li > a{font-size:var(--fs-menu)!important}
}
@media (min-width:850px) and (max-width:1100px){
  .ohio-hh .ohio-lang{display:none}
  .ohio-hh #header .ohio-hh-cta{padding-left:16px;font-size:var(--fs-btn)!important}
  .ohio-hh #header .header-bottom .nav > li > a .icon-angle-down{display:none}
}
@media (max-width:849px){
  /* mobile header (Figma "Header Mobile" 3630:6806): menu · logo · language toggle + search; the box is the 40×40 tile of
     css/ohio-mobile.css (.mobile-nav > li > a) */
  .ohio-hh #header .ohio-lang:not(.ohio-lang--toggle){display:none}
  .ohio-hh #header .ohio-lang--toggle img{display:block;width:22px;height:15px;object-fit:cover}
  .ohio-hh #header .mobile-nav > li:has(.ohio-lang--toggle){margin-right:8px}   /* frame 4823:23686: 8px between the language tile (x286) and the search tile (x334) */
}