/* Mobile responsive core for the bunkerme site.
   1) Injects a stylesheet that shrinks the design-system type/spacing tokens and
      tames desktop-only inline layouts at small widths (uses !important to win over
      React inline styles, since the site is inline-styled throughout).
   2) Exposes window.useVW() — a React hook returning the current viewport width,
      so components can branch structurally (grids → stacks, nav → drawer). */

(function injectMobileCSS() {
  if (document.getElementById('bm-responsive')) return;
  const css = `
  /* ---- Fluid type: shrink tokens as the viewport narrows ---- */
  @media (max-width: 900px){
    :root{
      --text-display-lg: 3.25rem;  /* 52 */
      --text-display:    2.6rem;   /* ~42 */
      --text-h1:         2.05rem;  /* ~33 */
      --text-h2:         1.7rem;   /* ~27 */
      --text-h3:         1.35rem;
      --text-lg:         1.0625rem;
    }
  }
  @media (max-width: 600px){
    :root{
      --text-display-lg: 2.55rem;  /* 41 */
      --text-display:    2.15rem;  /* ~34 */
      --text-h1:         1.75rem;  /* 28 */
      --text-h2:         1.45rem;  /* ~23 */
      --text-h3:         1.25rem;
      --text-h4:         1.125rem;
      --text-lg:         1rem;
    }
  }

  /* ---- Kill horizontal overflow ---- */
  html, body{ max-width: 100%; overflow-x: hidden; }
  *{ -webkit-tap-highlight-color: transparent; }

  /* ---- Tighten the standard section container padding on phones ---- */
  @media (max-width: 600px){
    [style*="padding: 92px 28px 168px"]{ padding: 60px 20px 96px !important; }   /* hero */
    [style*="padding: 104px 28px"]{ padding: 64px 20px !important; }             /* section blocks */
    [style*="padding: 56px 28px 32px"]{ padding: 44px 20px 24px !important; }    /* footer top */
    [style*="padding: 72px 56px"]{ padding: 48px 24px !important; }              /* CTA band */
    [style*="padding: 120px 28px 96px"]{ padding: 88px 20px 64px !important; }   /* legal hub */
    [style*="padding: 104px 28px 96px"]{ padding: 80px 20px 64px !important; }   /* legal doc */
  }

  /* ---- Comfortable min tap targets ---- */
  @media (max-width: 600px){
    a, button{ }
  }

  /* ---- Headings never clip on narrow phones: allow wrapping, cap to viewport.
         Long single-word tokens break rather than overflow. Decorative
         one-line labels (eyebrow / numeric metrics) keep their inline nowrap. ---- */
  @media (max-width: 600px){
    h1, h2, h3, h4{ overflow-wrap: break-word; word-break: break-word; max-width: 100%; }
    p, li{ overflow-wrap: break-word; }
  }

  /* ---- Belt-and-braces overflow containment for the decorative hero waves,
         which extend past both edges by design. ---- */
  .bm-topcover{ overflow: hidden !important; }
  `;
  const el = document.createElement('style');
  el.id = 'bm-responsive';
  el.textContent = css;
  (document.head || document.documentElement).appendChild(el);
})();

function useVW() {
  const get = () => (typeof window !== 'undefined' ? window.innerWidth : 1200);
  const [w, setW] = React.useState(get());
  React.useEffect(() => {
    const onResize = () => setW(get());
    window.addEventListener('resize', onResize);
    window.addEventListener('orientationchange', onResize);
    onResize();
    return () => { window.removeEventListener('resize', onResize); window.removeEventListener('orientationchange', onResize); };
  }, []);
  return w;
}

Object.assign(window, { useVW });