/* ============================================================
   Mobile / responsive layer for the Paladin Labs static site.
   Linked right before </helmet>, i.e. AFTER each page's MK-II
   <style> block, so these !important rules win over the inline
   and MK-II !important declarations.
   Breakpoint: <= 860px (phones + small tablets).
   ============================================================ */

/* ---- global safety: never allow sideways scroll ---- */
html, body { overflow-x: hidden !important; }

/* toggle + burger are desktop-hidden; shown (and kept keyboard-focusable) inside the media query */
.b-navtoggle { display: none; }
.b-burger { display: none; }

@media (max-width: 860px) {

  /* ================= NAV → hamburger ================= */
  header { padding: 0 12px !important; top: 10px !important; }
  header > nav {
    flex-wrap: wrap !important;
    height: auto !important;
    row-gap: 0 !important;
    padding: 10px 12px 10px 20px !important;
    position: relative;
    align-items: center !important;
  }
  header > nav > a:first-of-type { order: 1; }

  /* checkbox stays in the DOM and keyboard tab order, just visually hidden,
     so keyboard users can Tab to it and press Space to toggle the menu */
  .b-navtoggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .b-burger {
    display: inline-flex !important;
    order: 2;
    margin-left: auto;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 7px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .b-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #cfe0f0;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  /* visible focus ring on the burger when the hidden checkbox is focused */
  .b-navtoggle:focus-visible ~ .b-burger {
    outline: 2px solid #29b6ff;
    outline-offset: 3px;
    border-radius: 8px;
  }

  /* menu list: full-width, stacked, hidden until the toggle is checked */
  header > nav > ul {
    order: 3;
    flex-basis: 100% !important;
    width: 100%;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
  }
  .b-navtoggle:checked ~ ul { display: flex !important; }
  header > nav > ul > li {
    width: 100%;
    border-top: 1px solid rgba(148, 196, 255, 0.10);
  }
  header > nav > ul > li > a,
  header > nav > ul > li > .b-dd-trigger {
    display: flex !important;
    align-items: center;
    width: 100%;
    padding: 14px 4px !important;
    font-size: 15px !important;
    color: #c2cedb !important;
  }

  /* primary CTA: full-width row, revealed with the menu */
  header > nav > a.b-btn-primary {
    order: 4;
    flex-basis: 100%;
    width: 100%;
    display: none !important;
    justify-content: center;
    margin: 10px 0 2px !important;
    padding: 14px !important;
    font-size: 15px !important;
  }
  .b-navtoggle:checked ~ a.b-btn-primary { display: inline-flex !important; }

  /* Portfolio submenu: render inline (static) inside the open menu,
     since hover/focus dropdowns are awkward on touch */
  .b-dd { width: 100%; position: static !important; }
  .b-dd::after { display: none !important; }
  .b-dd-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    min-width: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 8px 14px !important;
    margin: 0 !important;
  }
  .b-dd-menu .b-dd-item { padding: 9px 10px !important; }

  /* burger → X when open */
  .b-navtoggle:checked ~ .b-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .b-navtoggle:checked ~ .b-burger span:nth-child(2) { opacity: 0; }
  .b-navtoggle:checked ~ .b-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ================= LAYOUT: collapse multi-column grids ================= */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 1.02fr 0.98fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* footer: brand block spans the top, the three link columns stay side by side */
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px 18px !important;
  }
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] > div:first-child {
    grid-column: 1 / -1;
  }
  /* gaps tuned for side-by-side columns are too large once stacked */
  [style*="gap: 88px"],
  [style*="gap: 72px"],
  [style*="gap: 64px"],
  [style*="gap: 56px"] { gap: 40px !important; }

  /* ================= SPACING: trim desktop gutters / section padding ================= */
  [style*="padding: 0 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding: 128px 40px 120px"] { padding: 104px 20px 64px !important; }
  [style*="padding: 156px 40px 150px"] { padding: 110px 20px 72px !important; }
  [style*="padding: 104px 40px 88px"]  { padding: 100px 20px 56px !important; }
  [style*="padding: 100px 40px 92px"]  { padding: 100px 20px 56px !important; }
  [style*="padding: 92px 40px 64px"]   { padding: 96px 20px 48px !important; }
  [style*="padding: 72px 40px 40px"]   { padding: 96px 20px 32px !important; }
  [style*="padding: 96px 40px"]        { padding: 96px 20px !important; }
  /* large card paddings squeeze content (and wrap buttons) at phone width */
  [style*="padding: 72px 64px"],
  [style*="padding: 80px 64px"] { padding: 48px 24px !important; }
  [style*="padding: 56px 60px"],
  [style*="padding: 52px 56px"] { padding: 36px 22px !important; }
  /* keep button labels on one line; trim CTA button padding so it fits small phones */
  .b-btn { white-space: nowrap; }
  a[style*="padding: 15px 28px"] { padding: 14px 22px !important; }
  section[style*="padding: 120px 0"] { padding: 68px 0 !important; }
  section[style*="padding: 116px 0"] { padding: 66px 0 !important; }
  section[style*="padding: 110px 0"] { padding: 64px 0 !important; }
  section[style*="padding: 100px 0"] { padding: 60px 0 !important; }

  /* ================= MEDIA: keep mockups inside the viewport ================= */
  img, video, hos-video { max-width: 100% !important; height: auto; }
  /* only the phone-mockup frames (fixed width AND rounded), never text blocks
     that merely use max-width: 300px/340px */
  [style*="width: 340px"][style*="border-radius"],
  [style*="width: 300px"][style*="border-radius"] {
    width: 100% !important;
    max-width: 300px !important;
    margin-left: auto;
    margin-right: auto;
  }
  /* flatten the floating perspective phone mockup on the homepage */
  .b-float {
    transform: none !important;
    animation: none !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42) !important;
  }
}