/*
  Hand-authored additions to the generated stylesheet.

  tailwind.css is compiled output from the Next prototype. Do not edit it: it
  is regenerated from the prototype's class names. Everything hand written for
  WordPress belongs here, and this file loads after it.
*/

/* -------------------------------------------------------------------------
   FONT BRIDGE. This is the one thing without which the whole page falls back
   to system type.

   In the prototype these three variables are created by next/font, which does
   not exist here. The generated stylesheet still refers to them throughout
   (--font-display resolves to var(--font-archivo), and so on), so they have to
   be defined against the Google Fonts families enqueued in functions.php or
   every rule that uses them silently fails.
   ---------------------------------------------------------------------- */

:root {
  --font-archivo: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-geist: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /*
    THE FIGURE FACE, CHANGED SITEWIDE FROM ONE LINE.

    This was Silkscreen, a 5-pixel bitmap face. It looked right on the flyer at
    poster size and was genuinely unreadable on screen at body sizes: R1 000
    and R1000 were hard to tell apart, and 5 read as S. Every number on the
    site came through it, including the ticket prices and the donation amount.

    .u-figure resolves font-family through --font-pixel, and --font-pixel
    resolves through this, so redefining it here changes the ticket picker, the
    prices, the amount field, the totals and the eyebrow labels together. The
    name --font-pixel is now historical; the variable is the figure face.

    JetBrains Mono keeps the technical, hardware feel the campaign wants while
    being built for reading digits at small sizes: distinct 1, 7 and l, and a
    dotted zero.
  */
  --font-pixel: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/*
  Numbers in this face line up in columns: the ticket picker, the price ladder
  and the facts panel all put figures above and beside each other, so they get
  fixed-width digits.
*/
.u-figure {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Ground. The prototype set these on <body> through utility classes; here the
   theme owns them so nothing depends on a class surviving the port.
   ---------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  color-scheme: light;

  /*
    THE HEADER IS FIXED, SO EVERY ANCHOR NEEDED THIS.

    The nav bar is 4rem tall and sits over the page. Without a scroll offset
    every anchor target landed underneath it: clicking Prizes scrolled the
    prizes heading behind the bar, which reads as the link going to the wrong
    place. scroll-padding-top on the root fixes it for every anchor at once,
    including a hash arriving from another page, which is now how the nav
    works from the cart and checkout.

    4.5rem rather than 4rem so the heading is not flush against the bar.
  */
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background-color: var(--color-page);
  color: var(--color-fg);
  font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-page);
}

:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   WordPress reset. Core and WooCommerce inject their own type and spacing,
   and the design assumes neither.
   ---------------------------------------------------------------------- */

/*
  WRAPPED IN :where() ON PURPOSE, AND IT MATTERS.

  As a plain `img, svg` selector this had specificity (0,0,1) and, because this
  file loads after the generated stylesheet, its `height: auto` beat every
  Tailwind height utility in the theme. That silently broke image sizing
  everywhere: the sponsor logos, the partner lockup, the prize shots and the
  ribbon all fell back to their natural height, so anything relying on
  `h-full` or `h-[100px]` rendered at whatever size the file happened to be.

  :where() has zero specificity, so it still gives unstyled images a sane
  default while losing to any utility class that sets a height.
*/
:where(img, svg) {
  max-width: 100%;
  height: auto;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link, visible only on focus. */
.goc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-page);
  color: var(--color-fg);
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--color-line);
}

.goc-skip:focus {
  left: 1rem;
  top: 1rem;
}

/* -------------------------------------------------------------------------
   THREE RULES THAT CANNOT BE UTILITY CLASSES

   tailwind.css is compiled from the Next prototype's class names, so a utility
   the prototype never used does not exist in it and does nothing at all,
   silently. Each of these replaces a class that was being written in a
   template and quietly ignored. Checked with the class audit rather than by
   eye: scripts run over every template and compare against the compiled file.
   ---------------------------------------------------------------------- */

/*
  Donation preset buttons.

  This fixes a live contrast bug. The markup asked for hover:bg-accent-deep
  plus hover:text-page, but only the background utility was compiled: on hover
  the tile went deep pink while the label stayed near-black text-fg, which
  measures about 2:1 and was effectively unreadable. Both halves of the hover
  state are set here so they cannot come apart again.
*/
.goc-preset:hover,
.goc-preset:focus-visible {
  background-color: var(--color-accent-deep);
  color: var(--color-page);
}

/*
  The amount field.

  TWO FOCUS RINGS WERE BEING DRAWN, WHICH IS THE BUG. The wrapper took a
  border-colour change on :focus-within, and the input inside it also picked up
  the global :focus-visible rule, which is a 2px outline at 3px offset. The
  offset drew that outline *inside* the wrapper, so focusing the field produced
  a pink box floating within a grey box with the R sitting outside it, which
  read as a broken control rather than a focused one.

  The wrapper now owns the entire focus treatment and the input's own outline
  is suppressed. The replacement has to be unmistakable, so it is a 2px inset
  ring in accent-deep, which measures 5.75:1 against this surface, well past
  the 3:1 that UI component boundaries need.

  A donation is at most six digits; a full-width box invites the wrong guess
  about what belongs in it.
*/
.goc-amount-field {
  max-width: 18rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.goc-amount-field:focus-within {
  border-color: var(--color-accent-deep);
  box-shadow: inset 0 0 0 1px var(--color-accent-deep);
}

.goc-amount-field input:focus,
.goc-amount-field input:focus-visible {
  outline: none;
  box-shadow: none;
}

/*
  Spinner arrows off. They sat on top of the digits in a field this size, and a
  donation amount is typed, not nudged one rand at a time. Arrow keys still
  step the value, so nothing is lost for keyboard use.
*/
.goc-amount-field input::-webkit-outer-spin-button,
.goc-amount-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.goc-amount-field input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/*
  TWO UTILITY CLASSES WITH NO PROTOTYPE COUNTERPART.

  The generated stylesheet only contains classes the Next prototype actually
  uses, and the donation amount field is a real form here and a mock there, so
  these two exist in no prototype component. They were surviving in
  tailwind.css from an earlier build and would vanish the next time it was
  regenerated, taking the field's appearance with them silently.

  They belong here, per the rule at the top of this file. Anything else the
  templates need that the prototype does not have goes here too.
*/
.bg-transparent {
  background-color: transparent;
}

.pr-4 {
  padding-right: 1rem;
}

/*
  THE "BUYING FOR SOMEONE ELSE" DISCLOSURE.

  A <details> rather than a scripted panel, so the recipient fields open and
  submit with JavaScript switched off. The summary is styled to read as the
  button it stands in for, which means the default disclosure marker has to
  go: inline-flex already suppresses it in Chrome, but Firefox needs
  list-style and older WebKit needs the pseudo-element.
*/
.goc-gift-summary {
  cursor: pointer;
  list-style: none;
}

.goc-gift-summary::-webkit-details-marker,
.goc-gift-summary::marker {
  display: none;
  content: "";
}

/* A caret of our own, so the control still says which way it opens. */
.goc-gift-summary::after {
  content: "＋";
  font-family: var(--font-pixel);
  font-size: 0.8125rem;
  line-height: 1;
}

.goc-gift[open] > .goc-gift-summary::after {
  content: "−";
}

/* Spacing between posts in the archive fallback, which used a bare mb-16. */
.goc-archive-item + .goc-archive-item {
  margin-top: 4rem;
}

/* -------------------------------------------------------------------------
   WOOCOMMERCE NOTICES

   Woo ships its own notice styling, but Tailwind's reset strips the list
   markers, padding and background it relies on, leaving an error message as a
   line of plain body text that reads like page copy. These are the only
   messages the store has for telling someone their donation was rejected, so
   they have to be unmissable.
   ---------------------------------------------------------------------- */

.goc-notices .woocommerce-error,
.goc-notices .woocommerce-message,
.goc-notices .woocommerce-info {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  list-style: none;
  border-left: 3px solid var(--color-cyan-deep);
  background-color: var(--color-surface);
  color: var(--color-fg);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.goc-notices .woocommerce-error {
  border-left-color: var(--color-accent-deep);
}

.goc-notices li {
  list-style: none;
}

.goc-notices li + li {
  margin-top: 0.4rem;
}

/* Woo puts a "View cart" style link inside the notice. */
.goc-notices a {
  color: var(--color-accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -------------------------------------------------------------------------
   WOOCOMMERCE PAGES

   Cart, checkout and order received. These are shortcodes rendered through
   the_content(), so the markup is WooCommerce's and the styling has to reach
   it from outside.

   SCOPED UNDER .goc-shop ON PURPOSE. WooCommerce enqueues its own three
   stylesheets and they are not dequeued: its JS depends on some of that CSS
   for overlays and spinners, and ripping it out to hand-write replacements is
   how a checkout quietly breaks. A two-class selector beats Woo's
   single-class defaults without needing !important on every line.

   Templates in woocommerce/ use goc- classes rather than Tailwind utilities.
   tailwind.css is compiled from the prototype's class names and the prototype
   never saw a checkout, so those utilities would not exist.
   ---------------------------------------------------------------------- */

.goc-shop {
  color: var(--color-fg-2);
  font-size: 1rem;
  line-height: 1.65;
}

/* The confirmation page's own headline and lede. */
.goc-thanks-title {
  font-family: var(--font-archivo), ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-fg);
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}

.goc-thanks-lede {
  margin: 1.25rem 0 0;
  max-width: 52ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-fg-2);
}

/* -------------------------------------------------------------------------
   THE RAFFLE NUMBERS

   Markup from goc_numbers_html() in the plugin, which emits classes and no
   inline styles so that this file can style it for the web and
   woocommerce/emails/email-styles.php can style it for email.
   ---------------------------------------------------------------------- */

.goc-numbers {
  margin: 2.5rem 0;
  padding: 1.75rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent-deep);
}

.goc-numbers-heading {
  margin: 0 0 1rem;
  font-family: var(--font-archivo), ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg);
}

.goc-numbers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.goc-number {
  padding: 0.55rem 0.85rem;
  background-color: var(--color-page);
  border: 1px solid var(--color-line);
  color: var(--color-fg);
  font-family: var(--font-pixel);
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  list-style: none;
}

/*
  WHOSE NUMBERS THESE ARE, on the confirmation page.

  The web twin of .goc-numbers-for in woocommerce/emails/email-styles.php.
  Only printed when an order actually names someone, which is when one payment
  bought tickets for other people; without it the page would run several lists
  of numbers together with nothing saying which belonged to whom.
*/
.goc-numbers-for {
  margin: 1.15rem 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-fg);
}

.goc-numbers-for:first-of-type {
  margin-top: 0;
}

.goc-numbers-for-email {
  font-weight: 400;
  color: var(--color-fg-3);
}

.goc-numbers-note {
  margin: 1rem 0 0;
  max-width: 52ch;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-fg-3);
}

/* -------------------------------------------------------------------------
   Receipt strip: order number, date, email, total, payment method
   ---------------------------------------------------------------------- */

.goc-receipt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  background-color: var(--color-line);
  border: 1px solid var(--color-line);
}

.goc-receipt > li {
  margin: 0;
  padding: 1.1rem 1.25rem;
  background-color: var(--color-surface);
  list-style: none;
}

.goc-receipt-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-3);
}

.goc-receipt-value {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-pixel);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-fg);
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   What happens next
   ---------------------------------------------------------------------- */

.goc-next {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-line);
}

.goc-next-title {
  margin: 0 0 1.25rem;
  font-family: var(--font-archivo), ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--color-fg);
}

.goc-next-list {
  margin: 0;
  padding-left: 1.5rem;
  max-width: 62ch;
  list-style: decimal;
}

.goc-next-list li {
  margin-top: 0.6rem;
}

.goc-next-list li::marker {
  color: var(--color-fg-3);
  font-family: var(--font-pixel);
}

.goc-next-list strong {
  color: var(--color-fg);
  font-weight: 600;
}

.goc-shop a,
.goc-next-list a {
  color: var(--color-accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Buttons

   Square with the campaign's stepped corners, matching u-pixel on the
   campaign page. Woo's .button is included so its own buttons (Place order,
   Update cart) inherit the same shape rather than staying rounded and blue.
   ---------------------------------------------------------------------- */

.goc-btn,
.goc-shop .button,
.goc-shop button[type="submit"],
.goc-shop input[type="submit"],
.goc-shop .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.25rem;
  padding: 0 1.75rem;
  background-color: var(--color-accent-deep);
  color: var(--color-page);
  border: 0;
  border-radius: 0;
  font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  clip-path: polygon(
    0 4px, 4px 4px, 4px 0,
    calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)
  );
}

.goc-btn:hover,
.goc-shop .button:hover,
.goc-shop button[type="submit"]:hover,
.goc-shop input[type="submit"]:hover,
.goc-shop .woocommerce-Button:hover {
  background-color: var(--color-accent-hi);
  color: var(--color-page);
  text-decoration: none;
}

.goc-btn-quiet {
  background-color: var(--color-surface-2);
  color: var(--color-fg);
}

.goc-btn-quiet:hover {
  background-color: var(--color-line);
  color: var(--color-fg);
}

.goc-thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0 0;
}

.goc-thanks-actions a {
  text-decoration: none;
}

/* -------------------------------------------------------------------------
   Woo's own tables: the order table on the confirmation page, and the cart
   and order review tables on the way to it.
   ---------------------------------------------------------------------- */

.goc-shop h2,
.goc-shop h3 {
  font-family: var(--font-archivo), ui-sans-serif, system-ui, sans-serif;
  color: var(--color-fg);
  letter-spacing: -0.01em;
}

.goc-shop h2 {
  margin: 3.5rem 0 1.25rem;
  font-size: 1.375rem;
  font-weight: 700;
}

.goc-shop h3 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 700;
}

.goc-shop table.shop_table,
.goc-shop table.woocommerce-table {
  width: 100%;
  margin: 0;
  border: 1px solid var(--color-line);
  border-collapse: collapse;
  border-radius: 0;
  font-size: 0.9375rem;
}

.goc-shop table.shop_table th,
.goc-shop table.shop_table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
  color: var(--color-fg-2);
}

.goc-shop table.shop_table thead th {
  background-color: var(--color-surface);
  color: var(--color-fg);
  font-family: var(--font-archivo), ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.goc-shop table.shop_table tfoot th,
.goc-shop table.shop_table tfoot td {
  background-color: var(--color-surface);
  color: var(--color-fg);
  font-weight: 600;
}

.goc-shop table.shop_table tfoot tr:last-child th,
.goc-shop table.shop_table tfoot tr:last-child td {
  font-family: var(--font-pixel);
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
}

.goc-shop .woocommerce-Price-amount {
  font-family: var(--font-pixel);
  font-variant-numeric: tabular-nums;
}

.goc-shop .wc-item-meta,
.goc-shop .wc-item-meta p,
.goc-shop td small {
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--color-fg-3);
}

/* Wide tables scroll in their own box, never the page. */
.goc-shop .woocommerce-order-details,
.goc-shop .woocommerce-checkout-review-order,
.goc-shop .woocommerce-cart-form {
  overflow-x: auto;
}

.goc-shop address {
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-line);
  background-color: var(--color-surface);
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Checkout form fields.

   Square, on the same surfaces as the donation amount field, so the checkout
   does not arrive looking like a different website.
   ---------------------------------------------------------------------- */

.goc-shop input[type="text"],
.goc-shop input[type="email"],
.goc-shop input[type="tel"],
.goc-shop input[type="password"],
.goc-shop input[type="number"],
.goc-shop textarea,
.goc-shop select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: 0;
  color: var(--color-fg);
  font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.goc-shop input:focus,
.goc-shop textarea:focus,
.goc-shop select:focus {
  outline: none;
  border-color: var(--color-accent-deep);
  box-shadow: inset 0 0 0 1px var(--color-accent-deep);
}

.goc-shop label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  color: var(--color-fg-2);
}

.goc-shop .required {
  color: var(--color-accent-deep);
  text-decoration: none;
}

.goc-shop .form-row {
  margin-bottom: 1.1rem;
}

/* -------------------------------------------------------------------------
   THE CART, AND CHANGING YOUR MIND

   The funnel sends add-to-cart straight to checkout, so the cart page is a
   detour rather than a step. It still has to work properly when someone
   arrives to change quantities or drop a line.
   ---------------------------------------------------------------------- */

/*
  THE QUANTITY FIELD NEEDS THIS. The generic input rule above sets
  width: 100% so checkout fields fill their column, and the cart's quantity
  box is an input[type=number] sitting in a narrow table cell: without a
  width of its own it stretches the column and breaks the table layout.
*/
.goc-shop .quantity input.qty,
.goc-shop td.product-quantity input.qty {
  width: 5.5rem;
  min-width: 5.5rem;
  text-align: center;
  font-family: var(--font-pixel);
  font-variant-numeric: tabular-nums;
}

/* Woo's remove column is a bare multiplication sign, not a word: it should
   read as a control, not as a link in a sentence. */
.goc-shop td.product-remove {
  width: 3rem;
}

.goc-shop td.product-remove a,
.goc-shop a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--color-line);
  background-color: var(--color-surface);
  color: var(--color-fg-2);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.goc-shop td.product-remove a:hover,
.goc-shop a.remove:hover {
  background-color: var(--color-accent-deep);
  border-color: var(--color-accent-deep);
  color: var(--color-page);
}

/* The word "Remove" appended to each line of the checkout order review. */
.goc-remove {
  display: inline-block;
  margin-left: 0.6rem;
  font-size: 0.8125rem;
  color: var(--color-fg-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.goc-shop .goc-remove:hover,
.goc-remove:hover {
  color: var(--color-accent-deep);
}

/* The bar above the checkout form, and the recovery links on pay-for-order. */
.goc-cart-bar {
  margin: 0 0 1.75rem;
  padding: 0.85rem 1.1rem;
  background-color: var(--color-surface);
  border-left: 3px solid var(--color-cyan-deep);
  font-size: 0.875rem;
  color: var(--color-fg-2);
}

.goc-cart-bar a {
  color: var(--color-accent-deep);
}

/* Cart totals sit in their own panel, not floated the way Woo does it. */
.goc-shop .cart_totals,
.goc-shop .cart-collaterals {
  margin-top: 2.5rem;
  width: 100%;
  float: none;
}

.goc-shop .cart_totals h2 {
  margin-top: 0;
}

.goc-shop .actions .button {
  margin-top: 1rem;
}

/* Empty cart: give it somewhere to go rather than a dead end. */
.goc-shop .cart-empty {
  font-size: 1.0625rem;
  color: var(--color-fg);
}

.goc-shop .return-to-shop {
  margin-top: 1.5rem;
}

/* -------------------------------------------------------------------------
   WOOCOMMERCE PAGES ON A PHONE

   Sized against a 375px viewport, which leaves 335px of content once px-5
   takes 20px off each side. Every number below was chosen against that
   measurement rather than by squinting at a narrow window.

   The confirmation page is the one that matters most: it is read on a phone,
   moments after paying, usually to screenshot the numbers.
   ---------------------------------------------------------------------- */

@media (max-width: 40rem) {

  /*
    96px of padding above and below is right on a desktop and is most of a
    phone screen before anything appears, on top of the 64px fixed header.
  */
  .goc-page-shell {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }

  /*
    The floor of the clamp, not the clamp itself: 5vw is only 19px at this
    width, so the title was already pinned to its 2.25rem minimum. At weight
    800 that turned "Order received, awaiting payment" into three dense lines.
  */
  .goc-thanks-title {
    font-size: 2rem;
    letter-spacing: -0.02em;
  }

  .goc-thanks-lede {
    font-size: 1rem;
  }

  /*
    THE RECEIPT WAS THE WORST OF IT. auto-fit with a 11rem minimum fits
    exactly one column at 335px, so five short facts became five stacked
    blocks of about 68px each: 340px of scrolling to read five values.

    On a phone each row becomes a single line, label left and value right,
    the way a receipt actually reads. Same information in roughly 220px.
  */
  .goc-receipt {
    grid-template-columns: 1fr;
    margin-top: 2rem;
  }

  .goc-receipt > li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
  }

  .goc-receipt-label {
    flex: none;
  }

  .goc-receipt-value {
    margin-top: 0;
    text-align: right;
    /* min-width: 0 is what lets a long email address wrap inside a flex
       item instead of forcing the row wider than the screen. */
    min-width: 0;
  }

  /*
    Chip geometry, so the numbers pack three to a row rather than two.
    At 1.75rem padding the box left 277px, and three 94px chips plus gaps
    needed 294px. Trimming both gets them onto one line for a three-ticket
    order and two lines for six.
  */
  .goc-numbers {
    margin: 2rem 0;
    padding: 1.25rem;
  }

  .goc-number {
    font-size: 1rem;
    padding: 0.5rem 0.7rem;
  }

  /* Full-width buttons: bigger tap targets, and two of them no longer wrap
     into a ragged pair of different widths. */
  .goc-thanks-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .goc-thanks-actions .goc-btn {
    width: 100%;
  }

  /* 3.5rem plus 2.5rem was 96px of empty space before "What happens next". */
  .goc-next {
    margin-top: 2.5rem;
    padding-top: 2rem;
  }

  .goc-shop h2 {
    margin-top: 2.5rem;
    font-size: 1.25rem;
  }

  .goc-shop table.shop_table th,
  .goc-shop table.shop_table td {
    padding: 0.7rem 0.75rem;
  }

  /* The money column should not wrap mid-amount to save six pixels. */
  .goc-shop table.shop_table td:last-child,
  .goc-shop table.shop_table th:last-child {
    white-space: nowrap;
  }

  /*
    Insurance rather than a fix. WooCommerce's own small-screen stylesheet
    already unfloats these billing and shipping columns, but it is a separate
    file that a caching or optimisation plugin can drop, and a 48% float on a
    phone is a horizontally scrolling page.
  */
  .goc-shop .col2-set .col-1,
  .goc-shop .col2-set .col-2,
  .goc-shop .woocommerce-columns > div {
    float: none;
    width: 100%;
  }
}

/* -------------------------------------------------------------------------
   PROSE, FOR CONTENT WRITTEN IN THE WORDPRESS EDITOR

   THIS BLOCK IS NOT OPTIONAL. Tailwind's base reset deliberately flattens
   editor output: it sets every heading to `font-size: inherit` and removes
   list markers, on the assumption that utility classes will supply them. That
   assumption holds for the campaign page, where every element is hand
   classed, and fails completely for a page someone types into the editor.

   Without these rules the terms and privacy pages render as one
   undifferentiated wall of same-size text with no bullets, which is exactly
   what "the pages aren't working" looks like.

   Applied by page.php and index.php to whatever the_content() returns.
   ---------------------------------------------------------------------- */

.goc-prose {
  color: var(--color-fg-2);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.goc-prose > * + * {
  margin-top: 1.15rem;
}

.goc-prose h2 {
  font-family: var(--font-archivo), ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-fg);
  text-wrap: balance;
}

.goc-prose h2 + * {
  margin-top: 1.5rem;
}

.goc-prose h3 {
  font-family: var(--font-archivo), ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-fg);
  margin-top: 2.75rem;
  text-wrap: balance;
}

.goc-prose h4 {
  font-family: var(--font-archivo), ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-fg);
  margin-top: 2rem;
}

.goc-prose h3 + *,
.goc-prose h4 + * {
  margin-top: 0.85rem;
}

/* Markers are put back explicitly, because the reset took them away. */
.goc-prose ul,
.goc-prose ol {
  padding-left: 1.4rem;
}

.goc-prose ul {
  list-style: disc;
}

.goc-prose ol {
  list-style: decimal;
}

.goc-prose li {
  margin-top: 0.5rem;
}

.goc-prose li::marker {
  color: var(--color-fg-3);
}

.goc-prose strong,
.goc-prose b {
  color: var(--color-fg);
  font-weight: 600;
}

.goc-prose a {
  color: var(--color-accent-deep);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 2px;
}

.goc-prose a:hover {
  text-decoration-color: var(--color-accent-deep);
}

.goc-prose hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin-top: 2.5rem;
}

.goc-prose blockquote {
  border-left: 3px solid var(--color-cyan-deep);
  padding-left: 1.1rem;
  margin-left: 0;
}

.goc-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.goc-prose th,
.goc-prose td {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}

.goc-prose th {
  color: var(--color-fg);
  font-weight: 600;
}

/* Wide content scrolls in its own box, never the page. */
.goc-prose .goc-scroll,
.goc-prose figure.wp-block-table {
  overflow-x: auto;
}