/* ═══════════════════════════════════════════════════════════════════════════
   Hello Bleu — shared mobile & touch layer (hb-site.css)
   Loaded LAST on every page (original hand-coded pages + generated pages), so it
   can normalise the mobile experience without touching each page's own styles.
   Pair: /assets/hb-site.js (mobile drawer, hero clearance, tables, portfolio viewers)
   "Mobile" = phones & small tablets in portrait (≤900px) + phones in landscape.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--hbm-nav-h:66px;--hbm-blue:#2C8FFA;--hbm-cream:#FFFEF7;--hbm-ink:#111;--hbm-line:#E8E8E0}

/* ── 1. Never show the pixel cursor on touch screens (inline display:block needs !important) ── */
@media (hover:none),(pointer:coarse){
  #pixel-cursor{display:none !important}
}

/* ── 2. Touch screens have no hover: show hover-only affordances permanently ── */
@media (hover:none){
  .placement-item .placement-overlay,.placement-item .placement-expand,
  .board-frame .board-expand,.email-card .email-view-btn,.slide-arrow{opacity:1 !important}
  a,button,[onclick],.folder-wrapper,.svc-card,.work-card{-webkit-tap-highlight-color:rgba(44,143,250,.12)}
}

/* ── 3. Mobile navigation: compact bar + hamburger (drawer is built by hb-site.js) ── */
.nav-hamburger{-webkit-tap-highlight-color:transparent}
@media (max-width:900px),(pointer:coarse) and (max-height:520px){
  .nav{padding:10px 16px 10px 20px !important;min-height:0 !important}
  .nav-logo img{height:44px !important;width:auto !important}
  .nav .nav-links,.nav .nav-cta,.nav.mobile-open .nav-links{display:none !important}
  .nav .nav-hamburger{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;
    width:44px !important;height:44px !important;padding:0 !important;margin:0 -6px 0 0 !important;gap:5px !important;
    background:none !important;border:0 !important;border-radius:12px !important;cursor:pointer !important}
  .nav .nav-hamburger span{width:22px !important;height:2px !important;background:var(--hbm-blue) !important;border-radius:2px !important;transition:transform .25s,opacity .2s !important}
  html.hbm-open .nav .nav-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg) !important}
  html.hbm-open .nav .nav-hamburger span:nth-child(2){opacity:0 !important}
  html.hbm-open .nav .nav-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg) !important}
}
@media (pointer:coarse) and (max-height:520px){
  .nav{padding:6px 16px 6px 20px !important}
  .nav-logo img{height:36px !important}
}

/* Drawer */
.hbm-backdrop{position:fixed;inset:0;background:rgba(17,17,17,.38);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;z-index:99990;-webkit-tap-highlight-color:transparent}
.hbm-drawer{position:fixed;top:0;right:0;bottom:0;width:min(88vw,400px);background:var(--hbm-cream);z-index:99991;
  transform:translateX(104%);transition:transform .34s cubic-bezier(.2,.8,.2,1),visibility .34s;visibility:hidden;
  display:flex;flex-direction:column;box-shadow:-16px 0 48px rgba(0,0,0,.14);font-family:'Montserrat',sans-serif;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) 0;text-align:left}
html.hbm-open .hbm-drawer{transform:none;visibility:visible}
html.hbm-open .hbm-backdrop{opacity:1;visibility:visible}
html.hbm-open,html.hbm-open body{overflow:hidden !important;overscroll-behavior:none}
.hbm-drawer *{box-sizing:border-box}
.hbm-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 20px !important;border-bottom:1px solid var(--hbm-line);min-height:var(--hbm-nav-h)}
.hbm-head img{height:40px;width:auto;display:block}
.hbm-close{width:44px;height:44px;border:0;background:none;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--hbm-ink);cursor:pointer}
.hbm-close svg{width:22px;height:22px}
.hbm-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:6px 20px 16px !important}
.hbm-link,.hbm-acc>button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:54px;padding:0 !important;margin:0 !important;
  font:700 16px/1.2 'Montserrat',sans-serif;color:var(--hbm-ink);text-decoration:none;background:none;border:0;border-bottom:1px solid var(--hbm-line);
  text-align:left;cursor:pointer;-webkit-tap-highlight-color:rgba(44,143,250,.1)}
.hbm-link[aria-current=page],.hbm-sub a[aria-current=page]{color:var(--hbm-blue)}
.hbm-acc>button svg{width:14px;height:14px;transition:transform .25s;flex:none;color:var(--hbm-blue)}
.hbm-acc>button[aria-expanded=true] svg{transform:rotate(180deg)}
.hbm-acc>button[aria-expanded=true]{color:var(--hbm-blue)}
.hbm-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.hbm-sub>div{overflow:hidden}
.hbm-acc>button[aria-expanded=true]+.hbm-sub{grid-template-rows:1fr}
.hbm-sub>div>div{padding:6px 0 14px 14px !important;border-bottom:1px solid var(--hbm-line)}
.hbm-sub a{display:flex;align-items:center;min-height:44px;font:600 14.5px/1.3 'Montserrat',sans-serif;color:#555;text-decoration:none}
.hbm-group{font:700 11px/1 'Montserrat',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--hbm-blue);margin:14px 0 4px !important}
.hbm-group:first-child{margin-top:6px !important}
.hbm-sub small{font:500 12px 'Open Sans',sans-serif;color:#999;margin-left:6px !important}
.hbm-foot{padding:16px 20px 20px !important;border-top:1px solid var(--hbm-line);display:grid;gap:10px}
.hbm-btn{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;font:700 15px 'Montserrat',sans-serif;text-decoration:none;
  background:var(--hbm-blue);color:#fff;border:2px solid var(--hbm-blue)}
.hbm-btn.ghost{background:transparent;color:var(--hbm-ink);border-color:var(--hbm-ink)}
.hbm-mail{display:flex;align-items:center;justify-content:center;min-height:44px;font:600 13px 'Montserrat',sans-serif;color:#777;text-decoration:none}
@media (pointer:coarse) and (max-height:520px){.hbm-link,.hbm-acc>button{min-height:48px}.hbm-foot{grid-template-columns:1fr 1fr;padding:10px 20px !important}.hbm-mail{grid-column:1/-1;padding:0 !important}}

/* ── 4. Mobile layout & legibility fixes ── */
@media (max-width:900px),(pointer:coarse) and (max-height:520px){
  /* first section clears the fixed nav (hb-site.js re-checks every page on load/resize) */
  .hero-section,.nav + .hero,.nav + section.s.dark{padding-top:calc(var(--hbm-nav-h) + 36px) !important}
  /* tap targets */
  .hbf-col a,.hbf-bottom nav a{display:inline-flex !important;align-items:center !important;min-height:36px !important}
  .hbf-col ul{gap:2px !important}
  .hbf-mail{display:inline-flex !important;align-items:center !important;min-height:40px !important;font-size:13px !important}
  .hbf-bottom nav{gap:22px !important}
  .hbf-social a{width:44px !important;height:44px !important}
  .svc-learn{display:inline-flex !important;align-items:center !important;min-height:40px !important;font-size:13px !important}
  .crumbs a{display:inline-block;padding:10px 0}
  .hero-tag{min-height:34px !important;display:inline-flex !important;align-items:center !important;font-size:11px !important}
  .pack-expand-btn{min-height:38px !important;font-size:11px !important}
  /* nothing important under 11px */
  .hbf-head,.card-kicker,.lbl,.testi-badge,.highlight-label,.carousel-label-top,.video-label-text,.pack-stage-label,.cluster-header,.chrome-subject{font-size:11px !important}
  .trust-label{font-size:11px !important}
  .board-expand{font-size:11px !important}
  .story-badge-label{font-size:10px !important}
  .more{font-size:12px !important}
  .hbf-bottom p{font-size:12px !important}
  /* safety net: nothing can widen the page sideways */
  html{overflow-x:hidden}
  @supports (overflow:clip){html{overflow-x:clip}}
  /* media never wider than the screen */
  img,video,iframe,canvas:not(#pixel-cursor){max-width:100%}
  /* Zyra packaging selector fits 320px screens */
  .pack-selector{gap:8px !important}
  .pack-sel-item{width:calc((100% - 16px) / 3) !important;max-width:110px !important}
}

/* Homepage hero buttons stay on one line; Just Tattoos logo no longer covers its eyebrow on small phones */
@media (max-width:480px){
  .cta-row .btn-primary,.cta-row .btn-secondary{white-space:nowrap !important;padding-left:22px !important;padding-right:22px !important}
  img.hero-logo[alt="Just Tattoos"]{margin-bottom:calc(min(380px,85vw) * -0.2) !important}
}

/* PPC case study strategy grid: one column on small phones */
@media (max-width:480px){.strat-grid{grid-template-columns:1fr !important}}

/* ── iOS zooms into any field under 16px: keep form fields at 16px on touch screens ── */
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px !important}}

/* ── 5. Responsive tables (classes added by hb-site.js) ── */
tr.hbm-span-row{display:none}
@media (max-width:600px){
  table.hbm-fit{min-width:0 !important;width:100% !important}
  table.hbm-span .hbm-span-src{display:none !important}
  table.hbm-span tr.hbm-span-row{display:table-row !important}
  table.hbm-span tr.hbm-span-row td{background:#F0F6FF !important;text-align:center !important;padding:18px 14px !important;font-size:13px !important;line-height:1.5 !important}
  .hbm-span-label{display:block !important;font:700 11px/1.3 'Montserrat',sans-serif !important;letter-spacing:.12em;text-transform:uppercase;color:var(--hbm-blue) !important;margin:0 0 6px !important}
  table.hbm-fit th,table.hbm-fit td{padding:10px 12px !important;font-size:13.5px !important;white-space:normal !important}
  table.hbm-stack{min-width:0 !important;width:100% !important;border-collapse:collapse}
  table.hbm-stack thead{display:none !important}
  table.hbm-stack,table.hbm-stack tbody,table.hbm-stack tr{display:block !important;width:100% !important}
  table.hbm-stack tr{padding:14px 16px !important;border-bottom:1px solid var(--hbm-line) !important;background:transparent}
  table.hbm-stack tr:last-child{border-bottom:0 !important}
  table.hbm-stack td{display:block !important;position:relative !important;width:100% !important;min-height:20px;
    padding:5px 0 5px 46% !important;border:0 !important;text-align:left !important;font-size:14px !important;background:transparent !important;overflow-wrap:anywhere}
  table.hbm-stack td::before{content:attr(data-label);position:absolute;left:0;top:7px;width:42%;text-align:left;font:700 10.5px/1.35 'Montserrat',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#888}
  table.hbm-stack td:first-child{padding:0 0 8px 0 !important;font-weight:700 !important;font-size:15px !important;color:#111}
  table.hbm-stack td:first-child::before{content:none}
  table.hbm-stack td.hbm-hl{color:var(--hbm-blue) !important;font-weight:700 !important}
  table.hbm-fit td[rowspan],table.hbm-fit td[colspan]{font-size:12.5px !important;line-height:1.45 !important}
  table.hbm-fit td[rowspan] strong[style*="font-size"]{font-size:28px !important;line-height:1.05 !important}
  table.hbm-fit td[rowspan]{padding:10px 8px !important}
  .table-scroll:has(table.hbm-stack){overflow-x:visible !important}
}

/* ── 6. Phones in landscape: the homepage's desktop snap-scroller is replaced by normal scrolling ── */
@media (pointer:coarse) and (max-height:520px){
  .snap-container .hbf{scroll-snap-align:none !important}
}

/* ── 7. Respect "reduce motion" ── */
@media (prefers-reduced-motion:reduce){
  .hbm-drawer,.hbm-backdrop,.hbm-sub{transition:none !important}
  .fade-up,.fade-up.will-animate{opacity:1 !important;transform:none !important;transition:none !important}
  html{scroll-behavior:auto !important}
}