/* ==========================================================================
   PLAYBOOK site layer — responsive rules and global fixes applied on top of
   the Claude Design export. The pages themselves use inline styles with no
   media queries, so this file makes them work at phone and tablet widths.
   Loaded last on every page. Edit here, then run `npm run build`.
   ========================================================================== */

html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bs-body-bg, #fff); }
img, video, canvas, svg { max-width: 100%; }
img { height: auto; }
img[style*="height:"] { height: revert-layer; }
table { max-width: 100%; }

/* Focus visibility (keyboard users) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--rv-accent, #0e8fce); outline-offset: 2px; border-radius: 4px;
}

/* Skip link */
.pv-skip { position: absolute; left: 12px; top: -48px; z-index: 1000; padding: 8px 14px;
  background: var(--rv-dark-blue, #253056); color: #fff; font: 600 14px 'Red Hat Text', system-ui, sans-serif;
  border-radius: 6px; text-decoration: none; transition: top .15s; }
.pv-skip:focus { top: 12px; }

/* Runtime templates and the empty runtime root stay invisible until the runtime renders */
x-dc { display: none !important; }
#dc-root:empty { display: none; }

/* --------------------------------------------------------------------------
   Header navigation — collapsible below 960px. The toggle button is added
   by site.js; the rest is CSS driven by body.pv-nav-open.
   -------------------------------------------------------------------------- */
.pv-nav-toggle { display: none; }
@media (max-width: 960px) {
  #dc-root > .sc-host > div > header > div, main ~ header > div, header.pv-site-header > div { position: relative; }
  .pv-nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin-left: auto; height: 40px; padding: 0 12px; border: 1px solid var(--rv-gray-300, #d5d6dd);
    border-radius: 8px; background: var(--rv-surface, #fff); color: var(--rv-gray-900, #20222a);
    font: 600 14px 'Red Hat Text', system-ui, sans-serif; cursor: pointer; }
  .pv-nav-toggle .bi { font-size: 18px; line-height: 1; }
  header nav { display: none !important; }
  body.pv-nav-open header nav { display: flex !important; flex-direction: column; align-items: stretch !important;
    flex-basis: 100%; width: 100%; gap: 4px !important; padding: 8px 0 12px; margin-left: 0 !important; }
  body.pv-nav-open header nav > a { padding: 10px 4px; border-bottom: 1px solid var(--rv-gray-200, #e9eaee); font-size: 1rem !important; }
  body.pv-nav-open header nav > a:last-child { border-bottom: 0; }
  body.pv-nav-open header nav .btn, body.pv-nav-open header nav > *:not(a) { margin-top: 8px; }
}

/* --------------------------------------------------------------------------
   Grids. The build marks every multi-column layout grid with data-cols="N"
   (icon gutters and label columns are not marked). Collapse in two steps.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  [data-cols="3"], [data-cols="4"], [data-cols="5"], [data-cols="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  [data-cols] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-cols] > [style*="grid-column"] { grid-column: auto !important; }
  [data-cols] > [style*="grid-row"] { grid-row: auto !important; }
}
/* Footer: link columns and the right-hand brand block */
@media (max-width: 760px) {
  footer > div { grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; }
  footer > div > div:last-child { align-items: flex-start !important; }
  footer > div > div:last-child > div:last-child { flex-direction: column; align-items: flex-start !important; text-align: left; }
  footer > div > div:last-child > div:last-child > div { text-align: left !important; }
}
@media (max-width: 480px) {
  footer [style*="repeat(3, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* --------------------------------------------------------------------------
   Type and spacing at phone width
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  h1[style*="font-size: 3"] , [style*="font-size: 3.75rem"], [style*="font-size: 3.5rem"], [style*="font-size: 3.25rem"], [style*="font-size: 3.2rem"], [style*="font-size: 3rem"] { font-size: 2.125rem !important; line-height: 1.12 !important; }
  [style*="font-size: 2.75rem"], [style*="font-size: 2.5rem"] { font-size: 1.875rem !important; line-height: 1.15 !important; }
  [style*="font-size: 2.25rem"], [style*="font-size: 2rem"] { font-size: 1.625rem !important; line-height: 1.2 !important; }
  [style*="padding: 96px 24px"], [style*="padding: 88px 24px"], [style*="padding: 80px 24px"], [style*="padding: 72px 24px"],
  [style*="padding: 64px 24px"], [style*="padding: 56px 24px"] { padding-top: 40px !important; padding-bottom: 48px !important; }
  [style*="padding: 48px 24px"] { padding-top: 32px !important; padding-bottom: 40px !important; }
  [style*="padding: 48px"]:not([style*="padding: 48px 24px"]) { padding: 24px !important; }
  [style*="padding: 40px"]:not([style*="padding: 40px 24px"]) { padding: 20px !important; }
  [style*="padding: 32px"]:not([style*="padding: 32px 24px"]) { padding: 20px !important; }
  [style*="white-space: nowrap"]:not(a):not(nav *):not(span) { white-space: normal !important; }
  [style*="min-width: 640px"] { min-width: 0 !important; }
  [style*="width: 400px"], [style*="width: 500px"], [style*="width: 520px"] { width: 100% !important; max-width: 100%; }
  /* Long tables and phone strips scroll inside their own box instead of the page */
  table { display: block; overflow-x: auto; }
}

/* Print pieces (doc-page) are fixed-size: scroll inside their own box on small screens. */
doc-page { display: block; max-width: 100%; min-width: 0 !important; overflow-x: auto; }

/* Phone-screen strips: always scroll horizontally inside their own box. */
[data-strip-w], [data-strip-padx] { max-width: 100%; }
.pv-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: 0s !important; scroll-behavior: auto; }
}

/* Print */
@media print {
  header, footer, .pv-nav-toggle, .pv-skip { display: none !important; }
  a { color: inherit; text-decoration: none; }
}