/* ==========================================================================
   ob-hf.css v1.0 (Web Designer, Oct 24 2026): header, drawer, footer and the
   mobile sticky call bar. Spec: design/header-footer-spec.md.
   Load AFTER ob-site.css (handle 'ob-st-hf', deps ob-st-site). Every rule is
   scoped to .ob-hd*, .ob-callbar, .ob-st-footer / .ob-ft-* or body.ob-has-callbar.
   Tokens: tokens.css (Jost, #313D4D, #484F56, #496EA0, #B8D0ED, #EAF2FB...).
   ========================================================================== */

/* ---------- 1. Header row (mobile first, <768) ---------- */
.ob-hd{--ob-hd-h:60px}
.ob-hd-row{min-height:var(--ob-hd-h);height:var(--ob-hd-h)}            /* fixed height = no CLS */
.ob-hd-logo-img{height:40px;width:148px;max-width:none}               /* 300x81 ratio, reserved box */
.ob-hd-icon:focus-visible,.ob-hd a:focus-visible,.ob-hd button:focus-visible,
.ob-callbar a:focus-visible,.ob-st-footer a:focus-visible,.ob-st-footer button:focus-visible{outline:none;box-shadow:var(--sh-focus);border-radius:var(--r-md)}
/* cart count: always printed (server + Woo fragment); 0 is a quiet outline, 1+ is filled blue */
.ob-hd-icon .ob-hd-count{font:700 12px/18px var(--ob-font);top:3px;right:1px}
.ob-hd-icon .ob-hd-count[data-count="0"]{background:#fff;color:var(--ob-slate-500);box-shadow:inset 0 0 0 1.5px var(--ob-border-strong)}
.ob-hd-mcall-num{display:none}
/* Sale stands out in red in the drawer and the desktop row (matched by URL, no menu-class change needed) */
.ob-hd-menu>li>a[href*="/oxygen-bar-sale-special-offers/"]{color:var(--ob-sale)}

/* ---------- 2. Drawer (<1024) ---------- */
.ob-hd-menu .sub-menu a{font-size:16px}                                 /* mobile text floor 16px (was 15) */
.ob-hd-panel-util{display:none}
.ob-hd-panel.is-open .ob-hd-panel-util{display:block;list-style:none;margin:0;padding:8px 0;border-bottom:1px solid var(--ob-border)}
.ob-hd-panel-util a{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;color:var(--ob-navy-900);font:500 16px/1.3 var(--ob-font);text-decoration:none}
.ob-hd-panel-util a:hover{color:var(--ob-blue-700)}
.ob-hd-panel-util .ob-hd-ic{width:20px;height:20px;color:var(--ob-blue-600)}
.ob-hd-panel-util .ob-hd-count{position:static;display:inline-block;margin-left:auto}
.ob-hd-panel-util .ob-hd-count[data-count="0"]{background:#fff;color:var(--ob-slate-500);box-shadow:inset 0 0 0 1.5px var(--ob-border-strong)}
.ob-hd-panel-foot{gap:8px}
.ob-hd-panel-info{margin:2px 0 0;text-align:center;font:400 16px/1.45 var(--ob-font);color:var(--ob-slate-500)}
.ob-hd-panel-info a{display:inline-flex;align-items:center;min-height:44px;color:var(--ob-blue-600);font-weight:600;white-space:nowrap}
.ob-hd-panel-info span{display:block}
.ob-hd-panel-ww{font-size:16px}

/* ---------- 3. Tablet 768-1023: number shown next to the call icon (drawer stays the existing 420px left panel from 600px) ---------- */
@media (min-width:768px) and (max-width:1023px){
 .ob-hd-row{padding:0 24px;gap:8px}
 .ob-hd-mcall{width:auto;padding:0 12px;gap:8px;font:600 16px/1 var(--ob-font);color:var(--ob-navy-900)}
 .ob-hd-mcall-num{display:inline;white-space:nowrap}
}

/* ---------- 4. Desktop >=1024 (76px utility row + 52px menu row = 128px + 1px hairline, reserved) ---------- */
@media (min-width:1024px){
 .ob-hd{--ob-hd-h:76px}
 .ob-hd-logo-img{height:42px;width:156px}
 .ob-hd-panel-util,.ob-hd-panel-info{display:none!important}
 .ob-hd-nav-inner{min-height:52px}
 .ob-hd-menu .sub-menu a{min-height:44px;font-size:15px}
 .ob-hd-util .ob-hd-cartpill{min-height:44px}
 .ob-hd-util .ob-hd-cartpill .ob-hd-count{box-shadow:none!important;background:none!important;color:inherit!important}
}

/* ---------- 5. Checkout slim header (is_checkout(), not order-received) ---------- */
.ob-hd--slim .ob-hd-row{gap:12px}
.ob-hd--slim .ob-hd-logo{margin:0 auto 0 0}
.ob-hd-secure{display:none;align-items:center;gap:6px;color:var(--ob-slate-500);font:500 16px/1 var(--ob-font)}
.ob-hd-secure .ob-hd-ic{width:18px;height:18px;color:var(--ob-success)}
.ob-hd-slimcall{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;color:var(--ob-navy-900);font:600 16px/1 var(--ob-font);text-decoration:none;white-space:nowrap}
.ob-hd-slimcall .ob-hd-ic{width:20px;height:20px}
.ob-hd-slimcall-q{display:none;color:var(--ob-slate-500);font-weight:400}
@media (min-width:768px){.ob-hd-secure{display:inline-flex}.ob-hd-slimcall-q{display:inline}}

/* ---------- 6. Sticky call bar (<1024 only) ---------- */
.ob-callbar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;gap:8px;box-sizing:border-box;height:calc(64px + env(safe-area-inset-bottom,0px));padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:#fff;box-shadow:0 -1px 0 var(--ob-border),0 -6px 20px rgba(49,61,77,.12);font-family:var(--ob-font);transition:transform .2s ease,visibility 0s linear 0s}
.ob-callbar a{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:48px;padding:0 10px;box-sizing:border-box;border:1.5px solid var(--ob-navy-900);border-radius:var(--r-md);font:600 16px/1.1 var(--ob-font);text-decoration:none;white-space:nowrap}
.ob-callbar .ob-cb-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ob-callbar .ob-cb-call{flex-grow:1.3;background:var(--ob-navy-900);color:#fff;box-shadow:var(--sh-2)}
.ob-callbar .ob-cb-call:hover{background:var(--ob-navy-hover);color:#fff}
.ob-callbar .ob-cb-quote{background:#fff;color:var(--ob-navy-900)}
.ob-callbar .ob-cb-quote:hover{background:var(--ob-blue-50)}
/* outside phone hours (Mon–Fri, 9 AM–5 PM ET): the quote form becomes the primary button; the call link still works */
.ob-callbar.is-offhours .ob-cb-call{background:#fff;color:var(--ob-navy-900);box-shadow:none}
.ob-callbar.is-offhours .ob-cb-call:hover{background:var(--ob-blue-50)}
.ob-callbar.is-offhours .ob-cb-quote{background:var(--ob-navy-900);color:#fff;box-shadow:var(--sh-2)}
.ob-callbar.is-offhours .ob-cb-quote:hover{background:var(--ob-navy-hover)}
.ob-callbar.is-hidden{transform:translateY(110%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
html.ob-hd-locked .ob-callbar{display:none}                             /* drawer open */
body.ob-has-callbar{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))} /* server class: footer never covered, no CLS */
@media (min-width:1024px){.ob-callbar{display:none}body.ob-has-callbar{padding-bottom:0}}
@media (prefers-reduced-motion:reduce){.ob-callbar,.ob-callbar.is-hidden{transition:none}}
@media print{.ob-callbar{display:none}}

/* ---------- 7. Footer ---------- */
.ob-ft-top{grid-template-columns:minmax(220px,1.4fr) 5fr}
.ob-ft-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
.ob-ft-brand p{margin:12px 0 0}
.ob-ft-contact p{margin:0;line-height:1.5}
.ob-ft-contact p+p{margin-top:2px}
.ob-ft-contact .js-cta-phone,.ob-ft-contact .js-cta-email{white-space:nowrap}
.ob-ft-contact .ob-ft-k{color:#C9D2DD}
.ob-ft-contact .ob-phone-hours{font-size:inherit;opacity:1;color:var(--ob-blue-200)}
.ob-st-footer .ob-ft-legal a,.ob-st-footer .ob-social a{color:#C9D2DD}
@media (max-width:1023px){
 .ob-ft-top{grid-template-columns:1fr}
 .ob-ft-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px}
 .ob-ft-brand{grid-column:auto}
}
@media (min-width:768px) and (max-width:1023px){
 .ob-ft-brand{display:grid;grid-template-columns:auto 1fr;gap:0 32px;align-items:start}
 .ob-ft-brand .ob-ft-logo{grid-row:1/4}
 .ob-ft-brand .ob-ft-contact{grid-column:2}
}
/* mobile: 16px floor everywhere in the footer, 52px accordion rows, 44px links */
@media (max-width:767px){
 .ob-st-footer,.ob-st-footer .t-small,.ob-st-footer .ob-phone-hours,.ob-st-footer .ob-ft-bottom,.ob-st-footer .ob-ft-col ul a{font-size:16px}
 .ob-st-footer p.ob-disclaimer,.ob-st-footer .ob-disclaimer{font-size:16px;line-height:1.55}
 .ob-ft-container{padding:32px 16px 24px}
 .ob-ft-logo img{width:180px}
 .ob-ft-contact{margin:16px 0 24px}
 .ob-ft-contact p{line-height:1.4}
 .ob-ft-nav{grid-template-columns:1fr;gap:0}
 .ob-ft-nav .ob-ft-col:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
 .ob-st-footer .ob-ft-h button{font-size:16px;min-height:52px;padding:0}
 .ob-ft-col ul{padding:0 0 12px 12px}
 .ob-ft-bottom{gap:0}
 .ob-ft-legal ul{column-gap:20px}
}

/* ---------- 8. 44px tap targets at ALL widths (homepage audit 17:45, item 1) ---------- */
/* header: desktop utility links, cart pill, dropdown links and submenu toggles */
.ob-hd a,.ob-hd button{min-height:44px}
@media (min-width:1024px){
 .ob-hd-menu>li>a{padding-right:0}
 .ob-hd-menu>li:not(.menu-item-has-children)>a{padding-right:14px}
 .ob-hd-menu .ob-sub-toggle{width:44px}
 .ob-hd-menu .sub-menu a{display:flex;align-items:center}
 .ob-hd-menu>li>a{min-width:44px;justify-content:center}
}
/* footer: every link and accordion heading is a 44px row; link lists use the row height as spacing (no extra gap) */
.ob-st-footer a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.ob-ft-col ul{gap:0}
.ob-ft-col li{margin:0}
.ob-ft-h button{display:flex;align-items:center;min-height:44px;min-width:44px}
.ob-ft-contact p{display:flex;flex-wrap:wrap;align-items:center;column-gap:.35em;min-height:44px}
.ob-ft-contact p+p{margin-top:0}
.ob-social{display:inline-flex;gap:4px}
.ob-social a{justify-content:center;min-width:44px;margin:0;padding:0 6px}
@media (max-width:767px){
 .ob-st-footer .ob-ft-h button{min-height:52px}
 .ob-social a:first-child{padding-left:0;justify-content:flex-start}
}
/* 1024-1199: keep the 7 top-level items on ONE 52px row with full 44px toggles (no wrap = no height jump) */
@media (min-width:1024px) and (max-width:1199px){
 .ob-hd-menu{flex-wrap:nowrap;gap:0;justify-content:space-between}
 .ob-hd-menu>li{flex:none}
 .ob-hd-menu>li>a{padding-left:8px;font-size:13px;letter-spacing:0}
 .ob-hd-menu>li:not(.menu-item-has-children)>a{padding-right:8px}
 .ob-hd-menu .ob-sub-toggle{width:44px}
}

/* v1.1.25 (QA P2 #1): after Esc the desktop dropdown is hidden even while hovered/focused, so Tab can't enter it. */
@media (min-width:1024px){
 .ob-hd-menu>li.is-sub-dismissed>.sub-menu,.ob-hd-menu>li.is-sub-dismissed:hover>.sub-menu,.ob-hd-menu>li.is-sub-dismissed:focus-within>.sub-menu{display:none}
}

/* v1.1.27 DV-002 (QA): the last top-level dropdown (Help) opens right-aligned to its trigger, so it stays inside the
   viewport and the 1240 header container at 1024–1920. */
@media (min-width:1024px){
 .ob-hd-menu>li:last-child>.sub-menu,.ob-hd-menu>li.menu-item-has-children:nth-last-child(2):has(+ li:not(.menu-item-has-children))>.sub-menu{left:auto;right:0}
}

/* v1.1.27 DV-013 (QA): footer logo keeps its 300×81 ratio (the 8px white padding no longer eats into the image box),
   so it renders 220×59 (180×49 under 768) plus padding. The 768w file in the srcset is the 2x source. The white
   badge stays until the Designer supplies a light-on-dark logo (listed for a ruling). */
.ob-st-footer .ob-ft-logo{display:inline-block;line-height:0}
.ob-st-footer .ob-ft-logo img,.ob-ft-logo img{box-sizing:content-box;width:220px;max-width:calc(100% - 16px);height:auto;aspect-ratio:300/81;object-fit:contain}
@media (max-width:767px){.ob-st-footer .ob-ft-logo img,.ob-ft-logo img{width:180px}}

/* v1.1.27 DV-014 (QA): Hello Elementor caps content pages at 800px from 992 to 1199. Use the header/shop gutters
   (24px each side) instead, so 1024 gets 976px like the header and shop. */
@media (min-width:992px) and (max-width:1199px){
 body.page:not([class*=elementor-page-]) .site-main,
 body.page:not([class*=elementor-page-]) .site-main .page-header .entry-title,
 body.page:not([class*=elementor-page-]) .site-main .page-content{max-width:none;width:100%}
 body.page:not([class*=elementor-page-]) .site-main{padding-inline:24px;box-sizing:border-box}
}

/* Footer logo plate (Web Designer, 2026-10-24, Cullen/Sky footer-logo request).
   The live logo file is used exactly as-is (no recolour, no redraw). It sits on a white rounded plate so the
   navy "BARS" (1.15:1 on #313D4D) reads on the dark footer. The plate is on the <a>, not the <img>, so the
   link is the tap target (>=44px tall) and the image box keeps the file's real 300x81 ratio.
   Append to the END of assets/css/ob-hf.css (after the v1.1.27 DV-013 block, which it replaces). */
.ob-st-footer .ob-ft-logo{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;max-width:100%;padding:10px 14px;background:#fff;border-radius:10px;line-height:0;text-decoration:none;vertical-align:top}
.ob-st-footer .ob-ft-logo img{display:block;box-sizing:content-box;width:220px;max-width:100%;height:auto;aspect-ratio:300/81;object-fit:contain;padding:0;margin:0;background:none;border-radius:0}
.ob-st-footer .ob-ft-logo:focus-visible{outline:2px solid #5EC6FF;outline-offset:3px}
@media (max-width:767px){.ob-st-footer .ob-ft-logo img{width:180px}}

/* v1.1.28.1 (Sky, 9:53 PM ET): call-bar phone button. Icon + number on one line, centred both ways, same 48px height
   as "Request a quote", no wrap at 360-430. On a clean render the 1.1.23 rules already did this; the off-centre text came
   from a browser extension (Google Voice) injecting its own inline/block wrapper and icon around the number inside the
   <span>. These rules are scoped to #ob-callbar (ID specificity) so that any injected child is laid out in the same row
   and centred instead of stacking under the icon. tel: href, tracking attributes and in/off-hours colours unchanged. */
#ob-callbar.ob-callbar > a.ob-cb-call,#ob-callbar.ob-callbar > a.ob-cb-quote{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:8px;height:48px;min-height:48px;max-height:48px;line-height:1;white-space:nowrap;text-align:center;overflow:hidden}
#ob-callbar.ob-callbar > a.ob-cb-call > .ob-cb-ic{display:block;flex:0 0 20px;width:20px;height:20px;margin:0;align-self:center;position:static}
#ob-callbar.ob-callbar > a.ob-cb-call > span{display:inline-flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center;justify-content:center;gap:4px;min-width:0;margin:0;padding:0;line-height:1!important;white-space:nowrap!important;align-self:center}
/* injected nodes often carry inline styles (display:block, absolute icons), hence !important on the layout properties only */
#ob-callbar.ob-callbar > a.ob-cb-call > span *{display:inline-flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center;vertical-align:middle;margin-block:0!important;line-height:1!important;white-space:nowrap!important;float:none!important;position:static!important}

/* v1.1.30.45 (Sky, via Elon): footer social tiles near the top of the brand column, order FB, IG, X, YT.
   Tile #496EA0 (--obg-steel, the brand steel blue): white icon 5.22:1. Hover #3B5A86 (--ob-blue-700, white 7.02:1)
   plus a sky inset edge so it still reads on the #313D4D footer. Focus: 2px #5EC6FF ring, 5.77:1 on the footer
   (same ring as the footer logo). 44x44 tiles, 8px gap, 22px icons. */
.ob-st-footer .ob-ft-social{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px;padding:0}
.ob-st-footer .ob-ft-social li{margin:0;padding:0}
.ob-st-footer .ob-ft-social a{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;border-radius:6px;background:#496EA0;color:#fff;text-decoration:none;line-height:0;transition:background-color .15s ease,box-shadow .15s ease}
.ob-st-footer .ob-ft-social a:hover{background:#3B5A86;color:#fff;text-decoration:none;box-shadow:inset 0 0 0 2px #5EC6FF}
.ob-st-footer .ob-ft-social a:focus-visible{outline:2px solid #5EC6FF;outline-offset:3px;box-shadow:none;border-radius:6px}
.ob-st-footer .ob-ft-social svg{display:block;width:22px;height:22px;flex:none}
@media (min-width:768px) and (max-width:1023px){.ob-ft-brand .ob-ft-social{grid-column:2}}
@media (prefers-reduced-motion:reduce){.ob-st-footer .ob-ft-social a{transition:none}}
/* v1.1.30.45: the bottom row lost its third item (the old 194px text links), so justify-content:space-between pushed the
   copyright to the far right. An empty 194px spacer in its place keeps the copyright exactly where it was. 1024px and up
   only (below that the old links wrapped to their own row, so the copyright was already at the right); not on the slim
   checkout footer (no .ob-ft-top there, and it never had the links). */
@media (min-width:1024px){.ob-st-footer .ob-ft-top ~ .ob-ft-bottom::after{content:"";flex:0 0 194px}}