/* ================================================================
   Cookie Crawl Campaign Theme
   Old Town Cookie Crawl — collectible tin order + thanks pages
   ================================================================
   Fonts: Sacramento (script), Lilita One (display caps), Poppins (body)
   Palette: Red / Cream / Sage / Maroon / Gold
   Campaign surfaces ONLY (src/routes/public-cookie-tin.ts order + thanks
   pages) — never mix with OTABQ (docs/design/guest/otabq.css) or the portal
   Adobe Calm system (docs/design/portal/_DESIGN.md). See README.md in this
   directory for the class inventory and the two-copies-in-sync rule.
   ================================================================ */

/* ================================================================
   TOKENS
   ================================================================ */

:root {
  /* ---- Palette (flat fills only — no gradients) ---- */
  --cc-red: #d63a48; /* page background */
  --cc-cream: #f6efd8; /* fills (pills/borders/chips/footer) + large display text (>=24px) and short glanceable labels */
  --cc-sage: #7d8f6f; /* pickup-info band fill */
  --cc-maroon: #8e2635; /* footer text; checkmark glyph */
  --cc-gold: #e3cfa4; /* accent only — star glyphs, dividers, focus rings */

  /* Small/paragraph-scale copy sitting directly on --cc-red or --cc-sage
     uses this instead of --cc-cream. Measured (WCAG relative-luminance
     formula, exact hex above): --cc-cream on --cc-red is ~4.0:1 and on
     --cc-sage ~3.0:1 — both short of the 4.5:1 AA floor for normal-sized
     text. Pure white clears 4.5:1 on red (4.61:1) and is the best
     achievable value on sage (3.48:1 — sage's own mid-tone luminance
     makes 4.5:1 mathematically unreachable with any light foreground;
     3.48:1 matches this codebase's existing precedent for accent-band
     text, see otabq.css's ".band .newsletter-consent" fix). --cc-cream
     stays the literal brand hex for every >=24px display element and for
     all fills/borders — see README.md "Contrast decisions" for the full
     per-element breakdown. */
  --cc-white: #ffffff;

  /* ---- Fonts (Google Fonts css2, loaded by the page's <head>) ---- */
  --cc-script: "Sacramento", Georgia, serif;
  --cc-display: "Lilita One", "Arial Black", Arial, sans-serif;
  --cc-body: "Poppins", Arial, sans-serif;
}

/* ================================================================
   RESET / BASE
   ================================================================ */

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--cc-red);
}
body {
  font-family: var(--cc-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* .cc-tilt's rotate(-3deg) can nudge a bounding box a
                          px or two wider than the viewport at exact widths */
}

/* ================================================================
   .cc-page — the single centered column (max-width 480px, mobile-first).
   Sits directly on the red <body> background — no card. text-align:center
   is the page default; .cc-checkbox is the one component that opts back to
   left-aligned label text.
   ================================================================ */

.cc-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 20px 48px;
  text-align: center;
  color: var(--cc-white);
}

/* Generic paragraph default for the page's "loose" copy (thanks-page hero
   lines, thanks-close statement) that isn't inside a more specific
   component. Deliberately a BARE ELEMENT selector (specificity 0,0,1),
   not ".cc-page p" (0,1,1) — every element on this page lives inside
   .cc-page anyway, so the ancestor qualifier added nothing except
   specificity that then had to be out-ordered. A bare "p" is the lowest
   specificity a color rule can have, so it always loses to ANY class-based
   rule (.cc-rules, .cc-script, .cc-display, .cc-band p, etc.) regardless of
   source order — see README.md "Ordering rule" for why this replaced an
   earlier ".cc-page p" version that silently lost to nothing and made
   .cc-rules/.cc-band .cc-script/.cc-band .cc-display/FAQ questions render
   white instead of cream (0,1,0 losing to 0,1,1 — caught via computed-style
   verification, not visual inspection alone). */
p {
  font-family: var(--cc-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--cc-white);
  margin: 0 0 16px;
}

/* ================================================================
   .cc-logo — top-of-page (small) and footer (large) via context, not a
   modifier class. alt text is always "Old Town Albuquerque" at the call
   site (not baked in here).
   ================================================================ */

.cc-logo {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto 24px;
}

/* ================================================================
   .cc-tilt — the -3deg rotated headline block (script line + caps line).
   Shared literally by the order page's "The 2026 / COLLECTIBLE COOKIE TIN"
   and the thanks page's "Your tin is / RESERVED!" / "Looking for / YOUR
   ORDER?" — same treatment, so no separate headline class per page.
   ================================================================ */

.cc-tilt {
  display: block;
  transform: rotate(-3deg);
  margin: 8px 0 24px;
}
/* Floors raised (visual review round 1): the previous clamps bottomed out
   at 35.1px/29.25px at a 390px viewport (9vw/7.5vw), short of the ~46/~36
   spec sizes at the small end. The order page's caps line also has a hard
   <br> now (see renderOrderPage()) so "COLLECTIBLE COOKIE TIN" is a
   deterministic two-line stack instead of wrapping only below ~375px. */
.cc-tilt .cc-script {
  display: block;
  font-size: clamp(46px, 9vw, 50px);
}
.cc-tilt .cc-display {
  display: block;
  font-size: clamp(38px, 7.5vw, 40px);
  margin-top: 4px;
}

/* ================================================================
   .cc-script / .cc-display — font-family utilities. Every current usage of
   both wants --cc-cream (large display type or a short glanceable label —
   see README.md "Contrast decisions"), so it's the base color here; no
   usage needs an override.
   ================================================================ */

.cc-script {
  font-family: var(--cc-script);
  font-style: italic;
  color: var(--cc-cream);
  line-height: 1.15;
}
.cc-display {
  font-family: var(--cc-display);
  color: var(--cc-cream);
  line-height: 1.05;
  letter-spacing: 0.02em;
}

/* ================================================================
   .cc-tin-art — the tin lid art in a clipped circle, plus the side-band
   strip and artist credit (src/routes/public-cookie-tin.ts
   renderTinArt(); art revealed 2026-07-29, Honor Heindl). The dashed
   placeholder circle this class originally drew is gone — the reveal
   shipped and renderTinArt() always emits the art now. NOT one of the 18
   classes named in the brief's semantic-primitive list — see README.md
   "Beyond the 18".
   ================================================================ */

.cc-tin-art {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  /* Deliberate cream rim (J.J. 2026-07-29); the img overscale below pushes
     the master's own white margin fully outside the clip, so this border
     is the only ring that renders. */
  border: 6px solid var(--cc-cream);
  margin: 0 auto 24px;
  overflow: hidden;
}
.cc-tin-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Overscale so the art's own circular edge and the master's white
     margin always overflow the 50% clip (threshold for this master's
     margin is scale(1.0525) - measured, see the reveal review). */
  transform: scale(1.08);
}
.cc-tin-credit {
  text-align: center;
  margin: -8px 0 24px;
}
.cc-tin-credit .cc-script {
  font-size: 34px;
}

/* Homepage copy v2 (J.J. review round, 2026-07-30): FAQ section heading in
   script, and the footer's four terms clauses collapsed behind a summary.
   The #terms anchor (Stripe Checkout consent link target) sits on a
   DESCENDANT <p> inside the details - browsers only auto-expand a <details>
   when the fragment target is inside it, never when it IS it, so moving the
   id onto the details would deep-link buyers to a closed widget. */
.cc-faq-heading {
  font-size: 34px;
  text-align: center;
  margin: 0 0 16px;
}
.cc-terms summary {
  cursor: pointer;
  /* <summary> is not a <p>, so .cc-footer p's maroon never reaches it and
     it would inherit .cc-page's white onto the cream fill (1.15:1 -
     invisible; same shape as the ack-checkbox incident documented above). */
  color: var(--cc-maroon);
}
.cc-footer a {
  color: var(--cc-maroon);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Papel-picado side-band strip (the tin's side art, alpha-preserving PNG
   on its own maroon field), shown directly under the lid circle with the
   credit signing both. */
.cc-tin-band {
  display: block;
  width: min(560px, 92%);
  height: auto;
  margin: 0 auto 24px;
}

/* ================================================================
   .cc-price — "$15" + "+ tax", live-state only.
   ================================================================ */

.cc-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 0 0 28px;
}
.cc-price .cc-display {
  font-size: clamp(44px, 13vw, 56px);
}
.cc-price .cc-script {
  font-size: 28px;
}

/* ================================================================
   .cc-rules — the three-line rules paragraph (renders in ALL states).
   .cc-star colors the &#10022; glyphs gold; .cc-divider is the dashed gold
   rule immediately after (bundled by the same renderer — the two have
   always rendered as one visual unit).
   ================================================================ */

.cc-rules {
  font-family: var(--cc-display);
  font-size: 19px;
  letter-spacing: 0.05em;
  line-height: 1.7;
  color: var(--cc-cream);
  margin: 0 0 24px;
}
.cc-star {
  color: var(--cc-gold);
}
.cc-divider {
  width: 100%;
  max-width: 320px;
  margin: 0 auto 24px;
  border: none;
  border-top: 2px dashed var(--cc-gold);
}

/* ================================================================
   .cc-checkbox — accessible custom checkbox. Visually-hidden real
   <input type="checkbox"> + a sibling <span> painted as the box (same
   hidden-input technique as otabq.css's .checkbox, see
   docs/design/guest/otabq.css:3922) + a :focus-visible ring (gold, per
   this palette's "accent" color) that otabq's own .checkbox doesn't carry.
   The visual box is a plain sibling <span> (no extra class) selected via
   "input + span" — keeps the class contract at exactly .cc-checkbox.
   ================================================================ */

.cc-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  font-family: var(--cc-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--cc-white);
  margin: 0 0 14px;
  /* Vertical padding, not a bigger checkbox square (visual review round 1:
     measured tap targets as small as 21px/42px at 390px — the label's OWN
     text height, single- or double-line, was the whole target). 12px top +
     bottom guarantees >=44px even for the shortest single-line label
     ("Yes, send me community updates": 14*1.5=21px content + 24px = 45px).
     The 20px .cc-checkbox input + span square itself is unchanged. */
  padding: 12px 0;
}
.cc-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cc-checkbox input + span {
  width: 20px;
  height: 20px;
  border: 2px solid var(--cc-cream);
  border-radius: 4px;
  background: transparent;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: background 0.15s;
}
.cc-checkbox input:checked + span {
  background: var(--cc-cream);
}
.cc-checkbox input:checked + span::after {
  content: "";
  width: 6px;
  height: 10px;
  border: 2px solid var(--cc-maroon);
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}
.cc-checkbox input:focus-visible + span {
  outline: 3px solid var(--cc-gold);
  outline-offset: 2px;
}

/* ================================================================
   .cc-qty — live-state quantity stepper (minus / count / plus) between the
   ack checkboxes and the BUY MY TIN button (2026-08-01 copy-cascade round;
   Stripe's own adjustable_quantity stepper is buried past the Pay button,
   so buyers pick quantity here instead). Buttons are cream-bordered pills —
   border treatment borrowed from .cc-checkbox's box, pill radius from
   .cc-btn — rather than a new fill treatment; the live count reuses the
   shared .cc-display utility (Lilita One, cream) at the same
   short-glanceable-label scale as the rest of the page. See README.md
   "Beyond the 18".
   ================================================================ */

.cc-qty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 0 24px;
}
.cc-qty button {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--cc-cream);
  border-radius: 999px;
  background: transparent;
  color: var(--cc-cream);
  font-family: var(--cc-display);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.cc-qty button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cc-qty button:focus-visible {
  outline: 3px solid var(--cc-gold);
  outline-offset: 2px;
}
.cc-qty .cc-display {
  min-width: 32px;
  font-size: 28px;
}

/* ================================================================
   .cc-btn — cream pill / red display text. Used for: the live-state
   "RESERVE MY TIN" CTA (<a>, aria-disabled-gated), the closed-state
   newsletter "SUBSCRIBE" button (<button>, sized down via the
   .newsletter-form context below), and the thanks page's pickup-code pill
   (a non-interactive <div>, letter-spacing/font-size tweaked inline for
   that one call site — see README.md "Beyond the 18").
   ================================================================ */

.cc-btn {
  display: inline-block;
  font-family: var(--cc-display);
  font-size: 28px; /* bumped from the brief's ~22px so red-on-cream (~4.0:1)
                       clears WCAG's 3:1 large-text threshold outright —
                       see README.md "Contrast decisions" */
  color: var(--cc-red);
  background: var(--cc-cream);
  padding: 14px 36px;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  border: none;
}
.cc-btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}
.cc-btn:focus-visible {
  outline: 3px solid var(--cc-gold);
  outline-offset: 2px;
}
/* Caption directly under the CTA button ("(unlocks when both boxes are
   checked)") — ties the size/color to being the button's very next
   sibling rather than inventing a new class. Bottom margin 28px (visual
   review round 1: this caption is the live-state's last element before
   .cc-band, and .cc-band has no top margin of its own — every block on
   this page sets its OWN bottom margin for rhythm, so with none here the
   two sat flush against each other at 0px gap). */
.cc-btn + p {
  font-family: var(--cc-body);
  font-size: 16px;
  color: var(--cc-cream);
  margin: 10px 0 28px;
}
/* Secondary reuse (newsletter Subscribe) — smaller than the primary CTA so
   the visual hierarchy stays: one big "RESERVE MY TIN" moment per page.
   Vertical padding 14px (visual review round 1: 10px measured a 39px tall
   tap target at 16px font — short of 44px). */
.newsletter-form .cc-btn {
  font-size: 20px;
  padding: 14px 20px;
}

/* ================================================================
   .cc-band — sage pickup-info section (renders in ALL order-page states;
   shared with the thanks page). Contains plain <p> copy and one .cc-chip.
   ================================================================ */

.cc-band {
  background: var(--cc-sage);
  border-radius: 16px;
  padding: 32px 24px;
  margin: 0 0 28px;
}
.cc-band .cc-script {
  display: block;
  font-size: clamp(28px, 8vw, 36px);
  margin: 0 0 14px;
}
.cc-band .cc-display {
  display: block;
  font-size: 19px;
  letter-spacing: 0.05em;
  margin: 0 0 16px;
}
/* :not(.cc-script):not(.cc-display) — without this, ".cc-band p" (0,1,1)
   would beat the bare ".cc-script"/".cc-display" utility rules (0,1,0) on
   the two heading lines above, which are ALSO <p> tags, and repaint them
   white instead of cream. Same fix applied to .cc-box p / .cc-faq p below;
   see the "p" rule's comment near the top of this file for the first,
   page-level instance of this exact bug. */
.cc-band p:not(.cc-script):not(.cc-display) {
  font-family: var(--cc-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--cc-white);
  margin: 0 0 14px;
}

/* ================================================================
   .cc-chip — bordered pickup-deadline box inside .cc-band.
   ================================================================ */

.cc-chip {
  border: 1.5px solid var(--cc-cream);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 8px 0 0;
}
.cc-chip p {
  font-family: var(--cc-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--cc-white);
  margin: 0;
}

/* ================================================================
   .cc-box — cream-bordered state box (closed / sold-out). Also hosts the
   closed-state .newsletter-form (input + button) and its
   .newsletter-check consent checkbox, inside a [data-newsletter] wrapper —
   plain, unstyled-here hooks renderNewsletterScript() selects by; only
   .cc-input/.cc-btn/.cc-checkbox paint them.
   ================================================================ */

.cc-box {
  border: 1.5px solid var(--cc-cream);
  border-radius: 16px;
  padding: 28px 24px;
  margin: 0 0 28px;
}
.cc-box .cc-display {
  display: block;
  font-size: 24px;
  margin: 0 0 12px;
}
/* :not(.cc-display) — see the matching comment on .cc-band p above. */
.cc-box p:not(.cc-display) {
  font-family: var(--cc-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--cc-white);
  margin: 0 0 16px;
}
.cc-box p:last-child {
  margin-bottom: 0;
}
.cc-box .newsletter-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center; /* visual review round 1: only affects the
    wrapped case — .cc-input's flex-grow already consumes all leftover
    width on the shared row, so this only centers SUBSCRIBE when it drops
    to its own row at narrow widths. */
  margin: 0 0 12px;
}
.cc-box .newsletter-form .cc-input {
  flex: 1 1 160px;
}
/* The sign-up's result lines, which renderNewsletterScript() adds after the
   [data-newsletter] wrapper: an error under the form, or the success line in
   the wrapper's place. Inline styles until the script was shared with the
   Cookie Crawl page (2026-11-11); same look. Written as .cc-box p.<class> so
   they outrank .cc-box p:not(.cc-display) and .cc-box p:last-child above. */
.cc-box p.newsletter-error {
  color: var(--cc-white);
  font: 400 13px/1.4 var(--cc-body);
  margin: 8px 0 0;
}
.cc-box p.newsletter-success {
  color: var(--cc-cream);
  font: 600 14px/1.5 var(--cc-body);
  margin: 0;
}

/* ================================================================
   .cc-input — newsletter email field (closed-state box only).
   ================================================================ */

.cc-input {
  font-family: var(--cc-body);
  font-size: 18px;
  padding: 10px 14px;
  border: 1.5px solid var(--cc-cream);
  border-radius: 8px;
  background: transparent;
  color: var(--cc-white);
}
.cc-input::placeholder {
  color: var(--cc-cream);
  opacity: 0.8;
}
.cc-input:focus-visible {
  outline: 3px solid var(--cc-gold);
  outline-offset: 2px;
}

/* ================================================================
   .cc-faq — order-page-only FAQ list. Each Q&A is a plain <div> (question
   <p class="cc-display"> + answer <p>) — no extra class needed per item.
   Question headings use the DISPLAY font (Lilita One), same family as the
   closed-state "TIN ORDERING IS CLOSED RIGHT NOW" heading — not the script
   font. Sized down from that heading's scale to fit a list of four, with
   letter-spacing matching other .cc-display usages at this size (see
   .cc-rules). Lilita has no automatic uppercasing, so the question text
   itself is literal caps in the markup (same convention as every other
   .cc-display usage on this page) — a sentence-case string in this class
   would render in the display font but NOT read as caps.
   ================================================================ */

.cc-faq {
  margin: 0 0 32px;
}
.cc-faq > div {
  margin: 0 0 24px;
}
.cc-faq > div:last-child {
  margin-bottom: 0;
}
.cc-faq .cc-display {
  display: block;
  font-size: 20px;
  letter-spacing: 0.05em;
  margin: 0 0 6px;
}
/* :not(.cc-display) — see the matching comment on .cc-band p above. */
.cc-faq p:not(.cc-display) {
  font-family: var(--cc-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--cc-white);
  margin: 0;
}

/* ================================================================
   .cc-footer — cream strip, maroon text (renders in ALL states/pages).
   #terms (the Stripe Checkout ToS anchor target) lives on the fine-print
   <p> inside this — see src/routes/public-cookie-tin.ts renderCcFooter().
   ================================================================ */

.cc-footer {
  background: var(--cc-cream);
  border-radius: 16px;
  padding: 28px 24px;
  margin: 0;
}
.cc-footer .cc-logo {
  width: 180px;
  margin: 0 auto 16px;
}
.cc-footer p {
  font-family: var(--cc-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cc-maroon);
  margin: 0;
}

/* ================================================================
   .cc-link — cream... rendered white, underlined text link (see README.md
   "Contrast decisions" for why this one full-sentence link uses
   --cc-white rather than the brief's literal "cream"). Used for the order
   page's "Coming to the Cookie Crawl itself?" CTA and the thanks page's
   "Cookie Crawl details" CTA.
   ================================================================ */

.cc-link {
  display: inline-block;
  font-family: var(--cc-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  color: var(--cc-white);
  text-decoration: underline;
  margin: 0 0 28px;
}
.cc-link:focus-visible {
  outline: 3px solid var(--cc-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 360px) {
  .cc-page {
    padding-left: 16px;
    padding-right: 16px;
  }
}