/**
 * @file Shared public-header contract.
 *
 * Marketing, shop and legal pages use different semantic wrappers, but they
 * must expose the same visual axis, gutters and touch geometry.  Keep this
 * file loaded after page-specific styles so a section cannot reintroduce a
 * competing header height or an arbitrary control offset.
 */
:root{--ufm-public-header-height:74px;--ufm-public-gutter:clamp(16px,4vw,64px);--ufm-brand-lockup-width:clamp(132px,11vw,168px)}
:where(body>header,.topbar,.legal-header,.shop-header,.shop-checkout-header,.ufm-auth-public-header,.ufm-contact-head,.partner-head,.dash-head){
  height:var(--ufm-public-header-height)!important;
  min-height:var(--ufm-public-header-height)!important;
  padding-block:0!important;
  padding-inline:var(--ufm-public-gutter)!important;
  align-items:center!important;
  border-bottom:1px solid #251a3d14!important;
  background:#fffdfbf2!important;
  backdrop-filter:blur(16px)!important;
}
:where(body>header>a:first-child,.topbar .logo,.legal-brand,.shop-brand,.shop-checkout-header>a:first-child,.ufm-auth-public-header .auth-logo,.ufm-contact-head>a:first-child,.partner-head>a:first-child,.dash-head>a:first-child){
  width:var(--ufm-brand-lockup-width)!important;
  min-width:var(--ufm-brand-lockup-width)!important;
  max-width:var(--ufm-brand-lockup-width)!important;
  min-height:48px!important;display:flex!important;
  flex:0 0 var(--ufm-brand-lockup-width)!important;
  align-items:center!important;justify-content:center!important;
}
/* Canonical UFoundMe! brand lockup: every section reuses the Home logo and
   its discreet pronunciation instead of rebuilding a page-specific mark. */
.ufm-brand-lockup{
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:2px!important;
  line-height:1!important;
  text-decoration:none!important;
}
.ufm-brand-lockup>.brand-pronunciation{
  display:block!important;
  width:100%!important;
  flex:0 0 auto!important;
  color:#77717d!important;
  font-family:Inter,system-ui,sans-serif;
  font-size:clamp(10px,.72vw,12px)!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:.045em;
  text-align:center;
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}
/* Legacy section headers keep their semantic links, but receive the exact
   same visible lockup until their markup is migrated to the shared class. */
:where(.shop-brand,.legal-brand,.ufm-auth-public-header .auth-logo,.ufm-contact-head>a:first-child,.partner-head>a:first-child,.dash-head>a:first-child):not(.ufm-brand-lockup){
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:2px!important;
  line-height:1!important;
  text-decoration:none!important;
}
:where(.shop-brand,.legal-brand,.ufm-auth-public-header .auth-logo,.ufm-contact-head>a:first-child,.partner-head>a:first-child,.dash-head>a:first-child):not(.ufm-brand-lockup)::after{
  content:"[juː faʊnd miː]";
  display:block;
  width:100%;
  color:#77717d;
  font-family:Inter,system-ui,sans-serif;
  font-size:clamp(10px,.72vw,12px);
  font-weight:400;
  line-height:1;
  letter-spacing:.045em;
  text-align:center;
  white-space:nowrap;
}
:where(body>header>a:first-child,.topbar .logo,.legal-brand,.shop-brand,.shop-checkout-header>a:first-child,.ufm-auth-public-header .auth-logo,.ufm-contact-head>a:first-child,.partner-head>a:first-child,.dash-head>a:first-child)>img{
  width:100%!important;max-width:100%!important;height:auto!important;display:block!important;flex:0 0 auto!important;
}
body>.ufm-global-controls{
  top:calc(var(--ufm-public-header-height)/2)!important;
  right:var(--ufm-public-gutter)!important;
  transform:translateY(-50%)!important;
}

/* Medium desktop/tablet-landscape header ownership.
   The shop legacy markup exposes both standalone controls and the compact
   cart/menu group.  Only the compact group may be visible in this band. */
@media(min-width:1280px) and (max-width:1759px){
  .shop-header>.wide-menu-trigger,
  .shop-header>.desktop-cart-trigger{display:none!important}
  .shop-header>.compact-header-actions{display:flex!important}
}
.mobile-menu-sheet{z-index:13010!important}
.mobile-menu-sheet>header{position:relative;z-index:1}

/* A 1 100 px viewport cannot safely hold logo, account capsule, cart and
   hamburger in one row.  Authentication remains the first group in the menu;
   the header keeps only its two immediate actions. */
@media(min-width:768px) and (max-width:1199px){
  body>.ufm-global-controls.ufm-guest-controls{display:none!important}
  body>.ufm-global-controls.ufm-owner-controls{right:164px!important}
  body:has(>.topbar)>.ufm-global-controls.ufm-owner-controls{top:calc(var(--ufm-public-header-height)/2)!important}
  .topbar>.mobile-cart-trigger{right:80px!important}
  .topbar>.wide-menu-trigger{right:20px!important}
  .legal-header .legal-back{margin-left:auto!important}
  .shop-header .cart-trigger{margin-left:auto!important}
}

@media(max-width:767px){
  :root{--ufm-public-header-height:68px;--ufm-public-gutter:12px;--ufm-brand-lockup-width:clamp(112px,34vw,138px)}
  :where(body>header,.topbar,.legal-header,.shop-header,.shop-checkout-header,.ufm-auth-public-header,.ufm-contact-head,.partner-head,.dash-head){gap:10px!important}
  .ufm-brand-lockup>.brand-pronunciation{font-size:10px!important}
  body>.ufm-global-controls.ufm-guest-controls{display:none!important}
  body>.ufm-global-controls.ufm-owner-controls{top:7px!important;right:124px!important;transform:none!important}
  body>.ufm-global-controls.ufm-owner-controls .ufm-owner-menu>div{position:absolute!important;top:calc(100% + 9px)!important;right:-117px!important;left:auto!important;width:min(290px,calc(100vw - 16px))!important}
  .legal-header .legal-back{margin-left:auto!important}
  .shop-header .cart-trigger{margin-left:auto!important}
  .legal-page main::before{inset:var(--ufm-public-header-height) 0 0!important}
}

@media(pointer:coarse){
  :where(body>header,.topbar,.legal-header,.shop-header,.shop-checkout-header,.ufm-auth-public-header,.ufm-contact-head,.partner-head,.dash-head) :where(a,button,summary){
    min-width:44px;min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  }
}

/* Final specificity fence: page styles may describe their internal header
   content, but cannot redefine the public shell height. */
body>:is(header.topbar,header.legal-header,header.shop-header,header.shop-checkout-header,header.ufm-auth-public-header,header.ufm-contact-head,header.partner-head,header.dash-head),
body>header:first-child{height:var(--ufm-public-header-height)!important;min-height:var(--ufm-public-header-height)!important;padding-block:0!important;align-items:center!important}
body.legal-page>header.legal-header{height:var(--ufm-public-header-height)!important;min-height:var(--ufm-public-header-height)!important;padding-block:0!important;align-items:center!important}

/* Open-menu contrast contract: navigation symbols, arrows and labels are
   rendered as true black on their light surfaces in every responsive range. */
.mobile-menu-sheet :is(.mobile-sheet-routes,.mobile-sheet-tools,.mobile-sheet-account,.mobile-sheet-languages) :is(a,button),
.mobile-menu-sheet :is(.mobile-sheet-routes,.mobile-sheet-tools,.mobile-sheet-account,.mobile-sheet-languages) :is(span,b),
.mobile-menu-sheet .mobile-sheet-tools h2{
  color:#000!important;
}
.mobile-menu-sheet :is(.mobile-sheet-routes,.mobile-sheet-tools) img{
  filter:brightness(0)!important;
  opacity:1!important;
}
.mobile-menu-sheet .mobile-test-now{
  color:#000!important;
  background:#f6f3ef!important;
}
.mobile-menu-sheet .mobile-test-now img{filter:brightness(0)!important}
.mobile-menu-sheet .mobile-wall-of-fame{
  color:#000!important;
  background:color-mix(in srgb,#04313c 15%,#fff)!important;
}
.mobile-menu-sheet .mobile-wall-of-fame img{filter:brightness(0)!important}
.mobile-menu-sheet .mobile-sheet-tools .menu-aa{
  color:#000!important;
  border:1px solid #000!important;
  background:#fff!important;
}
.mobile-menu-sheet .mobile-sheet-account .primary,
.mobile-menu-sheet .mobile-sheet-languages a[aria-current]{
  color:#000!important;
  border:1px solid #000!important;
  background:#fff!important;
}