/* Copy Room HQ marketing site — mockup Option A (SPEC §4a, LOCKED).
   Reference: docs/marketing/mockups/option-a.html and option-a-{desktop,mobile}.png.

   This file styles the public site only. The school kiosks, /hq and /api render from views/
   with their own inline styles and never load it.

   Contrast: the mockup's blue (#2F7DF6) is 3.90:1 on white, which passes WCAG AA only at
   large sizes. So the palette splits it. --blue is for fills, borders, icons and display-size
   text; --blue-text (#1F66D1, 5.41:1) is for body-size blue text and for any surface carrying
   white body text, buttons included. The same applies to the orange: --orange fills,
   --orange-text (#B54E08, 5.17:1) for the small uppercase eyebrow. Every pair below is at
   least 4.5:1 and the ratios are listed where they are not obvious. */

:root {
  --blue: #2F7DF6;
  --blue-text: #1F66D1;      /* 5.41:1 on white; white on it is 5.41:1 */
  --blue-dark: #1A57B5;      /* hover */
  --orange: #FF8A3D;
  --orange-text: #B54E08;    /* 5.17:1 on white, 4.86:1 on the soft band */
  --ink: #1E2A3A;            /* 14.5:1 on white */
  --muted: #55657A;          /* 5.95:1 on white */
  --band: #F5F8FC;
  --hero-top: #EEF5FF;
  --line: #E2E8F2;
  --white: #fff;
  --shadow: 0 6px 24px rgba(30, 42, 58, .08);
  --radius: 18px;
  --font: Nunito, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

/* Self-hosted so no font origin is needed in the CSP (§4a). One variable file covers every
   weight the design uses, and is smaller than the two static cuts it replaces. */
@font-face {
  font-family: Nunito;
  src: url(/fonts/nunito-var.woff2) format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
/* ^ the sticky header's height plus a little air: without it #main and #talk would
   land underneath the bar. The phone value is in the 760px block. */
body { margin: 0; background: var(--white); color: var(--ink); font: 18px/1.55 var(--font); }
img { max-width: 100%; }
a { color: var(--blue-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.08; margin: .2em 0; font-weight: 800; letter-spacing: -.5px; }
h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; margin: 0 0 28px; font-weight: 800; }
h3 { font-size: 21px; line-height: 1.25; margin: .2em 0 .4em; font-weight: 800; }
p { margin: 0 0 14px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
section { padding: 72px 0; }
.band { background: var(--band); }
.hero { background: linear-gradient(180deg, var(--hero-top), var(--white)); }
.lead { font-size: 20px; color: var(--ink); }
.micro, .proof { font-size: 15px; color: var(--muted); }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 800; color: var(--orange-text); margin: 0 0 10px; }
.hl { color: var(--blue); }           /* display size only, never body text */
.center { text-align: center; }
.narrow { max-width: 720px; }
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }

/* Skip link: the nav is a long list on every page. */
.skip { position: absolute; left: -9999px; }
/* fixed, not absolute: the header is sticky now, so a skip link pinned to the top of the
   document would be off screen by the time anyone tabbed to it. z-index clears the bar. */
.skip:focus { position: fixed; left: 24px; top: 12px; z-index: 60; background: var(--white); color: var(--blue-text); padding: 10px 16px; border-radius: 999px; box-shadow: var(--shadow); }
:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 2px; border-radius: 4px; }

/* ---- nav ----
   The bar is sticky, so it is the full-bleed element and .navwrap holds the 1120px column:
   a sticky max-width header would have let the page show through on either side of it on a
   wide screen. The hairline is always there; the shadow arrives on scroll, below. */
header.nav { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.navwrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px 24px; flex-wrap: wrap; max-width: 1120px; margin: 0 auto; }
/* width:auto, or the width="301" attribute wins and the <a> stays a 301px-wide flex item
   with the logo letterboxed inside it — which is what pushed the Menu button onto a
   second row on a phone. */
header.nav .brand img { height: 36px; width: auto; display: block; }
header.nav nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; font-size: 15px; }
header.nav nav a:not(.btn) { color: var(--ink); font-weight: 700; padding: 4px 0; border-bottom: 2px solid transparent; }
header.nav nav a.on { border-bottom-color: var(--blue); color: var(--blue-text); }

/* The shadow appears once the page has moved, with no scroll listener: this is a CSS
   scroll-driven animation, so it costs nothing and runs off the main thread. Browsers
   without it (and anyone who asked for reduced motion, since the rule at the foot of this
   file turns every animation off) keep the hairline above, which is what separates the bar
   from the page in the first place. */
@supports (animation-timeline: scroll()) {
  header.nav { animation: navlift linear both; animation-timeline: scroll(root block); animation-range: 0 64px; }
  @keyframes navlift {
    from { box-shadow: 0 0 0 rgba(30, 42, 58, 0); }
    to { box-shadow: 0 4px 16px rgba(30, 42, 58, .10); }
  }
}

/* Hidden until site.js claims it, so it is never a button that does nothing. */
.menubtn { display: none; align-items: center; min-height: 44px; padding: 8px 16px; border: 2px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font: 700 15px var(--font); cursor: pointer; }
.menubtn[aria-expanded="true"] { background: var(--hero-top); border-color: var(--blue); color: var(--blue-text); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; min-height: 44px; border-radius: 999px; font: 700 16px var(--font); background: var(--blue-text); color: var(--white); border: 2px solid var(--blue-text); cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); text-decoration: none; }
.btn.ghost, .btn.sec { background: var(--white); color: var(--blue-text); }
.btn.ghost:hover, .btn.sec:hover { background: var(--hero-top); }
.btn.lg { padding: 15px 28px; font-size: 17px; }
.link { font-weight: 800; color: var(--blue-text); }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 28px 0 14px; }

/* ---- layout grids. Never pin these inline: the media query below is what keeps a phone
       from scrolling sideways. ---- */
.g2, .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.g3, .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hg { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
/* A tall form beside short text would otherwise float the text to the middle of the gap. */
.hg.top { align-items: start; }

.card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; }
.band .card { box-shadow: 0 6px 24px rgba(30, 42, 58, .06); }
.card ul { padding-left: 20px; margin: 0; }
.card li { margin: 6px 0; }
.strip { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 26px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.band .strip { background: var(--white); }

/* ---- numbered steps ---- */
.step b { display: inline-grid; place-items: center; width: 44px; height: 44px; font-size: 20px; background: #FFE7D6; color: var(--orange-text); border-radius: 50%; margin-bottom: 10px; }

/* ---- hero artwork: a mock job board with a ticket over it ---- */
.visual { position: relative; padding-bottom: 40px; }
.app { background: var(--white); border-radius: 16px; box-shadow: 0 20px 50px rgba(47, 125, 246, .2); font-size: 13px; overflow: hidden; }
.app .bar { display: flex; gap: 6px; align-items: center; padding: 10px 12px; background: #F1F4F9; }
.app .bar i { width: 10px; height: 10px; border-radius: 50%; background: #ccc; }
.app .bar span { margin-left: 10px; color: var(--muted); }
.appin { display: grid; grid-template-columns: 110px 1fr; }
.side { background: #F7F9FC; padding: 12px; }
.side p { margin: 0 0 6px; padding: 6px 8px; color: var(--ink); }
.side .on { background: var(--blue-text); color: var(--white); border-radius: 8px; }
.main { padding: 14px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.stats div { background: var(--hero-top); border-radius: 10px; padding: 8px; font-size: 11px; color: var(--muted); }
.stats b { display: block; font-size: 18px; color: var(--ink); }
.job { display: grid; grid-template-columns: 50px 1.3fr 1.2fr 74px; gap: 8px; align-items: center; padding: 9px 6px; border-bottom: 1px solid #EEF1F5; }
.job small { display: block; color: var(--muted); }
.st { font-style: normal; font-size: 11px; padding: 3px 6px; text-align: center; font-weight: 800; border-radius: 999px; }
.st.printing { background: #FFE7D6; color: #96420B; }   /* 5.73:1 */
.st.queued { background: var(--hero-top); color: var(--blue-text); }  /* 4.93:1 */
.st.done { background: #DDF5E6; color: #1E7A45; }       /* 4.66:1 */
.slip { position: absolute; right: -14px; bottom: 0; width: 190px; padding: 14px; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--white); color: #111; transform: rotate(4deg); box-shadow: 0 12px 30px rgba(0, 0, 0, .25); border-radius: 6px; }
.slip p { margin: 2px 0; }
.slip .tk { font-weight: 800; font-size: 15px; border-bottom: 2px dashed #111; margin-bottom: 6px; }
.slip .bc { height: 28px; margin: 8px 0; background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 4px, #111 4px 5px, #fff 5px 8px); }

/* ---- quote band ---- */
.quote { background: var(--blue-text); color: var(--white); text-align: center; }
.quote blockquote { font-size: clamp(22px, 3vw, 30px); margin: 0 auto 10px; max-width: 800px; font-weight: 700; }
.quote p { color: #E8F1FF; }        /* 4.76:1 on the band */

/* ---- pricing ---- */
.price { font-size: 48px; font-weight: 800; color: var(--blue); line-height: 1.1; }
.price small { font-size: 18px; font-weight: 400; color: var(--muted); }
.fine { text-align: center; margin-top: 24px; }

/* ---- the three paths ---- */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.path { display: block; padding: 28px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); }
.path:hover { text-decoration: none; box-shadow: 0 10px 30px rgba(30, 42, 58, .14); }
.path u { text-decoration: none; font-weight: 800; color: var(--blue-text); }
.path .ic { font-size: 26px; color: var(--orange-text); display: block; margin-bottom: 6px; }
.path.hot { background: var(--blue-text); color: var(--white); }
.path.hot u, .path.hot .ic { color: var(--white); }
.path.hot p { color: #E8F1FF; }

/* ---- forms ---- */
form .f { display: block; font-weight: 700; margin: 14px 0 6px; }
form input, form select, form textarea { width: 100%; font: inherit; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); }
form textarea { min-height: 110px; }
form input:focus, form select:focus, form textarea:focus { border-color: var(--blue-text); }
.err { color: #A3180E; font-weight: 700; }   /* 6.6:1 on white */

/* ---- video cards ---- */
.video { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; text-align: center; }
.video .ph { aspect-ratio: 16/9; background: var(--hero-top); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--blue-text); margin-bottom: 12px; }
.video iframe, .video video { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 10px; }

/* ---- the printed 4x6 label, shown at something like real size ---- */
.ticket { width: 3.6in; max-width: 100%; background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; padding: 16px 18px 14px; box-shadow: 0 18px 40px rgba(30, 42, 58, .18); border-radius: 4px; transform: rotate(-2deg); }
.ticket .lh { font-size: 10.5pt; font-weight: 800; text-align: center; border-bottom: 2px solid #000; padding-bottom: 3px; margin-bottom: 8px; }
.ticket .who { font-size: 22pt; font-weight: 900; line-height: 1.15; }
.ticket .dept { font-size: 13pt; font-weight: 600; margin: 2px 0 8px; }
.ticket .need { border: 2.5px solid #000; padding: 5px 8px; margin: 6px 0 8px; font-size: 16pt; font-weight: 800; }
.ticket .need small { display: block; font-size: 8.5pt; letter-spacing: 1.5px; }
.ticket .attr { font-size: 13pt; line-height: 1.25; padding: 3px 0 3px 16px; text-indent: -16px; border-bottom: 1px dotted #777; }
.ticket .attr::before { content: "▪ "; }
.ticket .attr b { font-weight: 800; }
.ticket .ft { margin-top: 8px; border-top: 1px solid #000; padding-top: 4px; display: flex; justify-content: space-between; align-items: baseline; }
.ticket .ft .est { font-size: 12pt; font-weight: 800; }
.ticket .ft .when { font-size: 9.5pt; font-weight: 600; }
.ticket .fn { font-size: 7.5pt; line-height: 1.2; margin-top: 4px; }

/* ---- footer ---- */
footer.foot { border-top: 1px solid var(--line); margin-top: 0; padding: 28px 0; font-size: 14px; color: var(--muted); }
footer.foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer.foot a { color: var(--muted); }
footer.foot nav { display: flex; gap: 16px; flex-wrap: wrap; }

@media (max-width: 1024px) {
  .hg, .g2, .grid2 { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: 1fr 1fr; }
  .slip { position: static; transform: none; width: auto; max-width: 260px; margin: 18px auto 0; box-shadow: var(--shadow); }
  .visual { padding-bottom: 0; }
}
@media (max-width: 760px) {
  section { padding: 48px 0; }
  .g3, .grid3, .g4, .paths { grid-template-columns: 1fr; }
  .appin { grid-template-columns: 1fr; }
  .side { display: none; }
  .job { grid-template-columns: 44px 1fr 74px; }
  .job > span:nth-child(3) { display: none; }
  /* One row, 60px tall: 44px of tap target plus 8px of air top and bottom. The links move
     into the panel below rather than wrapping, which is what kept the old header at ~200px
     on a phone and would have pinned a third of the screen. */
  html { scroll-padding-top: 72px; }
  .navwrap { padding: 8px 16px; gap: 10px; }
  header.nav .brand img { height: 28px; }
  header.nav.js .menubtn { display: inline-flex; }
  header.nav.js #sitenav { display: none; }
  header.nav.js.open #sitenav {
    /* nowrap, or a column with a height ceiling spills into a second column on a short
       landscape phone instead of scrolling. */
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 4px 16px 16px; background: var(--white);
    border-top: 1px solid var(--line); box-shadow: 0 12px 24px rgba(30, 42, 58, .12);
    /* dvh so the panel is not cut off behind a phone browser's own toolbar; vh first for
       anything that does not know dvh. */
    max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    font-size: 16px;
  }
  header.nav.js.open #sitenav > * { flex: 0 0 auto; }
  header.nav.js.open #sitenav a:not(.btn) { display: flex; align-items: center; min-height: 48px; padding: 4px; border-bottom: 1px solid var(--line); }
  header.nav.js.open #sitenav .btn { margin-top: 16px; }
  .strip { flex-direction: column; align-items: flex-start; }
  footer.foot .wrap { flex-direction: column; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }