/* =====================================================================
   TOOTH ANGELS — HEADER LOCK (loaded LAST on every page)
   One header for the whole site, copied from shop.html.
   Overrides every earlier header rule in style.css, page <style> blocks
   and mobile-fix.css. Keeps the menu on ONE line (no wrapping/stacking).
   Edit header styling HERE only.
   ===================================================================== */

/* ---------- shared (all widths) ---------- */
html body header.site-header:not(#_):not(#_){
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background:#ffffff!important;
  background-color:#ffffff!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  border-radius:0!important;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif!important;
  transform:none!important;
}
html body header.site-header:not(#_):not(#_) .brand{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
html body header.site-header:not(#_):not(#_) .brand-logo{
  display:block!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:none!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  margin:0!important;
}
html body header.site-header:not(#_):not(#_) .nav > a,
html body header.site-header:not(#_):not(#_) .nav .services-toggle,
html body header.site-header:not(#_):not(#_) .nav-cta{
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif!important;
  letter-spacing:0!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  text-transform:none!important;
}

/* ---------- desktop (901px and up) — as shop.html, stays at top while scrolling ---------- */
@media (min-width:901px){
  html body header.site-header:not(#_):not(#_){
    position:sticky!important;
    top:0!important;
    left:auto!important;
    right:auto!important;
    z-index:2147482000!important;
    height:112px!important;
    min-height:112px!important;
    padding:0 clamp(24px,4.2vw,60px)!important;
    gap:28px!important;
    border:0!important;
    border-bottom:1px solid rgba(45,104,112,.10)!important;
    box-shadow:none!important;
  }
  html body header.site-header:not(#_):not(#_) .brand-logo{
    height:auto!important;
    max-height:none!important;
    width:430px!important;
    min-width:430px!important;
    max-width:430px!important;
  }
  html body header.site-header:not(#_):not(#_) .nav{
    position:static!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:28.8px!important;
    margin:0 0 0 auto!important;
    padding:0!important;
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
    border-radius:0!important;
    width:auto!important;
    max-height:none!important;
    overflow:visible!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  html body header.site-header:not(#_):not(#_) .nav > a,
  html body header.site-header:not(#_):not(#_) .nav .services-toggle{
    display:inline-flex!important;
    align-items:center!important;
    font-size:14px!important;
    font-weight:500!important;
    line-height:1.2!important;
    color:#173f3d!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    width:auto!important;
  }
  html body header.site-header:not(#_):not(#_) .nav > a:hover,
  html body header.site-header:not(#_):not(#_) .nav .services-toggle:hover,
  html body header.site-header:not(#_):not(#_) .nav > a[aria-current="page"]{
    color:#0f8a7a!important;
  }
  html body header.site-header:not(#_):not(#_) .nav-cta{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    font-size:14px!important;
    font-weight:500!important;
    line-height:1.2!important;
    color:#ffffff!important;
    background:#174f56!important;
    background-color:#174f56!important;
    padding:0 18px!important;
    border:0!important;
    border-radius:999px!important;
    box-shadow:none!important;
    margin:0!important;
    width:auto!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
  }
  html body header.site-header:not(#_):not(#_) .menu-btn{display:none!important;}
  html body .ta-nav-scrim{display:none!important;}
}

/* mid-desktop: shrink logo + spacing so the bar always fits on one line */
@media (min-width:901px) and (max-width:1300px){
  html body header.site-header:not(#_):not(#_) .brand-logo{
    width:360px!important;min-width:360px!important;max-width:360px!important;
  }
  html body header.site-header:not(#_):not(#_) .nav{gap:16px!important;}
}
@media (min-width:901px) and (max-width:1120px){
  html body header.site-header:not(#_):not(#_){gap:18px!important;padding:0 24px!important;}
  html body header.site-header:not(#_):not(#_) .brand-logo{
    width:270px!important;min-width:270px!important;max-width:270px!important;
  }
  html body header.site-header:not(#_):not(#_) .nav{gap:13px!important;}
  html body header.site-header:not(#_):not(#_) .nav > a,
  html body header.site-header:not(#_):not(#_) .nav .services-toggle{font-size:13px!important;}
  html body header.site-header:not(#_):not(#_) .nav-cta{font-size:13px!important;padding:0 15px!important;}
}

/* ---------- tablet / phone (900px and below) — as shop.html ---------- */
@media (max-width:900px){
  html body header.site-header:not(#_):not(#_){
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:9000!important;
    height:58px!important;
    min-height:58px!important;
    padding:0 12px 0 14px!important;
    gap:12px!important;
    border:0!important;
    border-bottom:1px solid #e3eeee!important;
    box-shadow:0 2px 14px rgba(11,60,55,.06)!important;
  }
  html body header.site-header:not(#_):not(#_) .brand-logo{
    width:300px!important;min-width:0!important;max-width:calc(100vw - 80px)!important;
    height:32px!important;max-height:32px!important;
  }
  html body header.site-header:not(#_):not(#_) .nav-cta{display:none!important;}
}
@media (max-width:560px){
  html body header.site-header:not(#_):not(#_) .brand-logo{
    width:255px!important;max-width:calc(100vw - 80px)!important;
  }
}