/* HiddenHelp v66 FINAL HEADER LOCK
   Do not edit logo/smiley SVG. Purpose: on every desktop/laptop/tablet viewport,
   keep the locked HiddenHelp wordmark + smiley and the hero writing on ONE horizontal row,
   with the nav centred underneath. Mobile keeps the proven dropdown layout. */

.hh-sitewide-header.topbar,
.topbar.hh-sitewide-header,
header[aria-label="HiddenHelp header"]{
  box-sizing:border-box!important;
  width:min(1180px, calc(100% - 28px))!important;
  max-width:1180px!important;
  margin:12px auto 18px!important;
  background:rgba(255,255,255,.90)!important;
  border:2px solid rgba(126,87,139,.16)!important;
  border-radius:28px!important;
  box-shadow:0 18px 50px rgba(126,87,139,.10)!important;
  overflow:hidden!important;
}

/* Desktop, laptop and desktop-mode tablet: single horizontal header row. */
@media (min-width:761px){
  .hh-sitewide-header.topbar,
  .topbar.hh-sitewide-header,
  header[aria-label="HiddenHelp header"]{
    display:grid!important;
    grid-template-columns:minmax(280px, max-content) minmax(260px, 500px)!important;
    grid-template-areas:
      "brand copy"
      "nav nav"!important;
    justify-content:center!important;
    align-items:center!important;
    column-gap:clamp(18px,3vw,42px)!important;
    row-gap:14px!important;
    padding:clamp(18px,2.1vw,26px) clamp(18px,2.5vw,30px) clamp(18px,2vw,24px)!important;
    text-align:left!important;
  }

  .hh-sitewide-header .hh-brand,
  .topbar.hh-sitewide-header .hh-brand,
  header[aria-label="HiddenHelp header"] .hh-brand,
  .hh-sitewide-header .brand,
  .topbar.hh-sitewide-header .brand,
  header[aria-label="HiddenHelp header"] .brand{
    grid-area:brand!important;
    justify-self:end!important;
    align-self:center!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:clamp(8px,1.2vw,14px)!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    text-decoration:none!important;
    overflow:visible!important;
  }

  .hh-wordmark-lock{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 1 auto!important;
    width:clamp(260px, 32vw, 500px)!important;
    max-width:calc(100vw - 430px)!important;
    min-width:0!important;
    line-height:1!important;
    overflow:visible!important;
  }
  .hh-wordmark-lock-svg{
    display:block!important;
    width:100%!important;
    height:auto!important;
    overflow:visible!important;
  }

  .hh-sitewide-header .hh-smiley-mark,
  .topbar.hh-sitewide-header .hh-smiley-mark,
  header[aria-label="HiddenHelp header"] .hh-smiley-mark{
    display:inline-flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:center!important;
    width:clamp(42px, 4.5vw, 64px)!important;
    height:clamp(42px, 4.5vw, 64px)!important;
    margin:0!important;
  }
  .hh-sitewide-header .hh-smiley-svg,
  .topbar.hh-sitewide-header .hh-smiley-svg,
  header[aria-label="HiddenHelp header"] .hh-smiley-svg{
    width:100%!important;height:100%!important;display:block!important;
  }

  .hh-sitewide-header .hh-header-copy,
  .topbar.hh-sitewide-header .hh-header-copy,
  header[aria-label="HiddenHelp header"] .hh-header-copy{
    grid-area:copy!important;
    justify-self:start!important;
    align-self:center!important;
    width:min(100%,500px)!important;
    max-width:500px!important;
    min-width:0!important;
    margin:0!important;
    text-align:left!important;
    overflow:visible!important;
  }
  .hh-sitewide-header .strap,
  .topbar.hh-sitewide-header .strap,
  header[aria-label="HiddenHelp header"] .strap{
    display:block!important;
    margin:0!important;
    text-align:left!important;
    max-width:32ch!important;
    color:#231829!important;
    font-weight:950!important;
    font-size:clamp(1.08rem,1.75vw,1.55rem)!important;
    line-height:1.09!important;
    letter-spacing:-.035em!important;
  }
  .hh-sitewide-header .sub,
  .topbar.hh-sitewide-header .sub,
  header[aria-label="HiddenHelp header"] .sub{
    display:block!important;
    margin:7px 0 0!important;
    text-align:left!important;
    max-width:48ch!important;
    color:#6f6576!important;
    font-weight:760!important;
    font-size:clamp(.88rem,1.08vw,1.03rem)!important;
    line-height:1.34!important;
  }

  .hh-sitewide-header .hh-desktop-nav,
  .topbar.hh-sitewide-header .hh-desktop-nav,
  header[aria-label="HiddenHelp header"] .hh-desktop-nav,
  .hh-sitewide-header nav[aria-label="Main navigation"],
  .topbar.hh-sitewide-header nav[aria-label="Main navigation"],
  header[aria-label="HiddenHelp header"] nav[aria-label="Main navigation"]{
    grid-area:nav!important;
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    align-items:center!important;
    gap:9px!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
  }
  .hh-sitewide-header .hh-desktop-nav a,
  .topbar.hh-sitewide-header .hh-desktop-nav a,
  header[aria-label="HiddenHelp header"] .hh-desktop-nav a,
  .hh-sitewide-header nav[aria-label="Main navigation"] a,
  .topbar.hh-sitewide-header nav[aria-label="Main navigation"] a,
  header[aria-label="HiddenHelp header"] nav[aria-label="Main navigation"] a{
    flex:0 1 auto!important;
    white-space:nowrap!important;
    min-width:0!important;
    min-height:40px!important;
    padding:9px 15px!important;
    border-radius:999px!important;
    font-size:clamp(.82rem,.9vw,.94rem)!important;
    line-height:1.05!important;
    font-weight:950!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
  }
  .hh-sitewide-header .hh-mobile-menu,
  .topbar.hh-sitewide-header .hh-mobile-menu,
  header[aria-label="HiddenHelp header"] .hh-mobile-menu{display:none!important;}
}

/* Tight laptop / desktop-mode phone: keep the row horizontal by reducing logo + copy, never stacking. */
@media (min-width:761px) and (max-width:960px){
  .hh-sitewide-header.topbar,
  .topbar.hh-sitewide-header,
  header[aria-label="HiddenHelp header"]{
    grid-template-columns:minmax(230px, max-content) minmax(220px, 1fr)!important;
    column-gap:18px!important;
    row-gap:12px!important;
    padding:18px 20px!important;
  }
  .hh-wordmark-lock{width:clamp(230px, 34vw, 330px)!important;max-width:42vw!important;}
  .hh-sitewide-header .hh-smiley-mark,
  .topbar.hh-sitewide-header .hh-smiley-mark,
  header[aria-label="HiddenHelp header"] .hh-smiley-mark{width:44px!important;height:44px!important;}
  .hh-sitewide-header .strap,
  .topbar.hh-sitewide-header .strap,
  header[aria-label="HiddenHelp header"] .strap{font-size:clamp(.98rem,2vw,1.18rem)!important;max-width:30ch!important;}
  .hh-sitewide-header .sub,
  .topbar.hh-sitewide-header .sub,
  header[aria-label="HiddenHelp header"] .sub{font-size:.86rem!important;max-width:44ch!important;}
  .hh-sitewide-header .hh-desktop-nav a,
  .topbar.hh-sitewide-header .hh-desktop-nav a,
  header[aria-label="HiddenHelp header"] .hh-desktop-nav a,
  .hh-sitewide-header nav[aria-label="Main navigation"] a,
  .topbar.hh-sitewide-header nav[aria-label="Main navigation"] a,
  header[aria-label="HiddenHelp header"] nav[aria-label="Main navigation"] a{padding:8px 12px!important;font-size:.82rem!important;min-height:38px!important;}
}

/* Mobile: preserve the proven centred logo + dropdown pattern. */
@media (max-width:760px){
  .hh-sitewide-header.topbar,
  .topbar.hh-sitewide-header,
  header[aria-label="HiddenHelp header"]{
    width:calc(100% - 24px)!important;
    max-width:calc(100% - 24px)!important;
    margin:10px auto 18px!important;
    padding:16px 14px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"brand" "copy" "nav"!important;
    justify-items:center!important;
    align-items:center!important;
    gap:12px!important;
    text-align:center!important;
    overflow:hidden!important;
  }
  .hh-sitewide-header .hh-brand,
  .topbar.hh-sitewide-header .hh-brand,
  header[aria-label="HiddenHelp header"] .hh-brand,
  .hh-sitewide-header .brand,
  .topbar.hh-sitewide-header .brand,
  header[aria-label="HiddenHelp header"] .brand{
    grid-area:brand!important;
    justify-content:center!important;
    justify-self:center!important;
    width:auto!important;
    max-width:100%!important;
    gap:8px!important;
    margin:0 auto!important;
  }
  .hh-wordmark-lock{width:min(58vw,330px)!important;max-width:58vw!important;min-width:0!important;}
  .hh-sitewide-header .hh-smiley-mark,
  .topbar.hh-sitewide-header .hh-smiley-mark,
  header[aria-label="HiddenHelp header"] .hh-smiley-mark{width:clamp(38px,11vw,54px)!important;height:clamp(38px,11vw,54px)!important;}
  .hh-sitewide-header .hh-header-copy,
  .topbar.hh-sitewide-header .hh-header-copy,
  header[aria-label="HiddenHelp header"] .hh-header-copy{grid-area:copy!important;text-align:center!important;max-width:100%!important;margin:0 auto!important;}
  .hh-sitewide-header .strap,.topbar.hh-sitewide-header .strap,header[aria-label="HiddenHelp header"] .strap{font-size:clamp(1rem,5vw,1.22rem)!important;max-width:20ch!important;text-align:center!important;margin:0 auto!important;}
  .hh-sitewide-header .sub,.topbar.hh-sitewide-header .sub,header[aria-label="HiddenHelp header"] .sub{font-size:clamp(.9rem,4.2vw,1rem)!important;max-width:28ch!important;text-align:center!important;margin:7px auto 0!important;}
  .hh-sitewide-header .hh-desktop-nav,
  .topbar.hh-sitewide-header .hh-desktop-nav,
  header[aria-label="HiddenHelp header"] .hh-desktop-nav,
  .hh-sitewide-header nav[aria-label="Main navigation"],
  .topbar.hh-sitewide-header nav[aria-label="Main navigation"],
  header[aria-label="HiddenHelp header"] nav[aria-label="Main navigation"]{display:none!important;}
  .hh-sitewide-header .hh-mobile-menu,
  .topbar.hh-sitewide-header .hh-mobile-menu,
  header[aria-label="HiddenHelp header"] .hh-mobile-menu{display:block!important;grid-area:nav!important;width:100%!important;}
}