/* Guest sharing page — restyled 2026-09-16 to match the LIVE 78on5th site.
 *
 * Ashton, 2026-09-16: "i dont like the design of the share page it does not carry any of the
 * design, look or feel of the welcome page or live website." He was right, and measurably so.
 * Every value below is copied from the stylesheet proven to be serving —
 * clients/78_on_5th/wp_theme/app.css, sha256 8c0b7e46…, confirmed by fetching
 * https://78on5th.co.za/wp-content/themes/78on5th-theme/app.css (HTTP 200, 2063 lines).
 * Nothing here is invented.
 *
 * What was wrong before, and is now fixed:
 *   ground      cream/white gradient   ->  --dark-bg #1A1714          (the site is dark; this was inverted)
 *   headings    Playfair 800           ->  Playfair 400               (site: 400 x7, 500 x2, 600 x2, never 700/800)
 *   buttons     border-radius 999px    ->  4px                        (site uses 3 / 4 / 8px and no pill)
 *   body text   --muted #6B6258        ->  --body-text #D4C5B0        (the site's own body token, 27 rules)
 *   small print (same #6B6258)         ->  --muted-text #A69882       (the site's own muted token)
 *
 * Contrast on --dark-bg, measured: heading #F5EDE0 15.36:1 · body #D4C5B0 10.55:1 ·
 * muted #A69882 6.32:1 · gold #D4A03C 7.56:1. All pass AA for body text; the first two pass AAA.
 *
 * NOT copied from the site, deliberately: .hero-title's `font-style: italic`. The site loads
 * italic 400 from Google Fonts, but this page bundles a local woff2 with a WEIGHT AXIS ONLY and
 * no italic instance, so italic here would be faux-obliqued by the browser. Roman 400 instead.
 *
 * Selectors are unchanged from the previous file, so index.html and app.js need no edit — except
 * the header logo, which must become the WHITE lockup on a dark ground (see index.html + the
 * asset map in runtime/server.py).
 */

@font-face {
  font-family: 'Playfair Display';
  src: url('/ugc/assets/playfair-display-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/ugc/assets/source-sans-3-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  accent-color: #D4A03C;
  /* Token names and values as the live site declares them. */
  --dark-bg: #1A1714;
  --medium-bg: #241F1A;
  --card-bg: #2E2720;
  --gold: #D4A03C;
  --gold-dark: #B8860B;
  --terracotta: #C4956A;
  --heading-text: #F5EDE0;
  --body-text: #D4C5B0;
  --muted-text: #A69882;
  --border-warm: rgba(212, 160, 60, 0.15);
  --border-subtle: rgba(245, 237, 224, 0.08);
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font-body);
  color: var(--body-text);
  background: var(--dark-bg);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--body-text);
  background: var(--dark-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

a { color: var(--gold); text-underline-offset: .16em; }

/* ---------- masthead and foot ---------- */

header, footer {
  max-width: 980px;
  margin: auto;
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
}
.brand { display: block; line-height: 0; }
.brand img { display: block; width: min(214px, 42vw); height: auto; }

header p, .eyebrow {
  font: 700 11px/1.5 var(--font-body);
  letter-spacing: .42em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0;
}

footer {
  border-top: 1px solid var(--border-subtle);
  font: 600 12px/1.5 var(--font-body);
  color: var(--muted-text);
}

/* ---------- page type ---------- */

main { max-width: 720px; margin: 30px auto 70px; padding: 0 24px; }

h1, h2 {
  font-family: var(--font-heading);
  font-weight: 400;              /* the site's display weight; it never sets Playfair above 600 */
  letter-spacing: 1px;           /* app.css .hero-title/.hero-tagline both use +1px */
  color: var(--heading-text);
}
/* h1 is the welcome page's own hero title: app.css `.welcome-title-text` (:1207), including its
 * gold glow. The welcome hero pairs that title with the brand lockup and uses no rule underneath,
 * so the rule I first put here is gone — the glow is what the page family actually does. */
h1 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.05;
  margin: 10px 0 18px;
  text-shadow:
    0 0 30px rgba(184, 134, 11, 0.3),
    0 0 60px rgba(184, 134, 11, 0.15);
}
/* app.css `.welcome-card h2` (:1398) */
h2 {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.2;
  margin: 0 0 12px;
}
/* app.css `.welcome-hero-sub` (:1230) — lighter weight and slightly translucent cream, which is
 * what gives the welcome page its calm opening paragraph. */
.intro {
  max-width: 680px;
  margin: 16px 0 32px;
  color: rgba(245, 237, 224, 0.86);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
}

/* app.css `.welcome-step` (:1390) — the 01 / 02 / 03 marker on each welcome card. Here it numbers
 * the three stages of the form, which appear one at a time, so it doubles as "where am I". */
.step {
  display: inline-block;
  margin-bottom: 18px;
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--gold);
}

/* ---------- panels ---------- */

/* app.css `.welcome-card` (:1377) exactly — same ground, same subtle border, same 8px, same 32
 * padding. This is the single change that makes the page read as part of the welcome page's family
 * rather than a different page in the same colours. */
form, section {
  margin-top: 32px;
  padding: 32px;
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--body-text);
}

/* app.css `.welcome-card p` (:1405) */
form > p, section > p { margin: 0 0 18px; color: var(--body-text); font-size: 17px; line-height: 1.7; }

label { display: block; margin: 18px 0; font-size: 17px; font-weight: 600; color: var(--heading-text); }
small { display: block; margin-top: 5px; font: 400 13px/1.6 var(--font-body); color: var(--muted-text); }

/* app.css `.welcome-secondary-note` (:1430) — the gold-barred aside. The welcome page uses it for
 * "social media is optional"; here it carries the own-words / not-a-review caveats, which are the
 * same kind of quiet, important footnote. */
.note {
  margin: 20px 0 0;
  padding: 18px 22px;
  border-left: 4px solid var(--gold);
  background: rgba(212, 160, 60, 0.08);
  color: var(--body-text);
  font: 400 15px/1.65 var(--font-body);
}

input[type=file], textarea, select {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 13px;
  border: 1px solid var(--border-warm);
  background: var(--medium-bg);
  border-radius: 4px;
  font: 400 16px/1.5 var(--font-body);
  color: var(--heading-text);
}
textarea { resize: vertical; min-height: 96px; }

/* The browser's native "Choose File" chip renders as a light grey system button, which is the
 * one remaining light-mode artefact on a dark page. ::file-selector-button restyles it without
 * touching the markup or app.js — the input stays a real <input type=file>, so the upload path,
 * the accept list and #photo.files[0] are all unchanged. */
input[type=file]::file-selector-button {
  margin-right: 14px;
  padding: 9px 18px;
  border-radius: 4px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font: 700 13px/1 var(--font-body);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
input[type=file]::file-selector-button:hover {
  background: var(--gold);
  color: var(--dark-bg);
}
textarea::placeholder { color: var(--muted-text); }
select option { background: var(--medium-bg); color: var(--heading-text); }

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font: 400 15px/1.5 var(--font-body);
  color: var(--body-text);
}
.check input { margin: 4px 0; min-width: 18px; min-height: 18px; accent-color: var(--gold); }

fieldset {
  border: 1px solid var(--border-warm);
  padding: 12px 16px;
  margin: 26px 0;
  border-radius: 8px;
}
legend { padding: 0 8px; font-weight: 700; color: var(--gold); }

/* ---------- buttons: the site's exact treatment ---------- */

button {
  cursor: pointer;
  padding: 14px 32px;
  border-radius: 4px;
  font: 700 15px/1 var(--font-body);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  min-height: 48px;
  background: var(--dark-bg);
  color: var(--gold);
  border: 1px solid var(--gold);
  text-shadow: 0 0 8px rgba(212, 160, 60, 0.6), 0 0 2px rgba(184, 134, 11, 0.8);
  transition: all 0.2s ease;
}
button:hover:not(:disabled) { background: var(--gold); color: var(--dark-bg); text-shadow: none; }
button.secondary {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-weight: 600;
  text-shadow: none;
}
button.secondary:hover:not(:disabled) { background: var(--gold); color: var(--dark-bg); }
button:disabled { opacity: .58; cursor: wait; }

button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid rgba(212, 160, 60, .55);
  outline-offset: 3px;
}

.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 24px; }

/* ---------- the guest's own media ---------- */

#preview {
  display: block;
  max-width: 100%;
  max-height: 340px;
  object-fit: contain;
  margin: 16px auto 4px;
  border-radius: 8px;
  border: 1px solid var(--border-warm);
  background: var(--dark-bg);
}
.submitted-card { display: grid; gap: 16px; margin: 20px 0 22px; }
.submitted-card:empty { display: none; }

#consent-photo, #video-preview, #consent-video {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid var(--border-warm);
  background: var(--dark-bg);
}

/* A quoted guest voice. Terracotta bar, as on the approval cards. */
#consent-quote {
  margin: 0;
  padding: 22px 24px;
  border-left: 4px solid var(--terracotta);
  background: var(--medium-bg);
  border-radius: 0 8px 8px 0;
  font: 400 clamp(22px, 4.8vw, 34px)/1.25 var(--font-heading);
  letter-spacing: 1px;
  color: var(--heading-text);
  overflow-wrap: anywhere;
}
#consent-quote:before { content: '\201C'; }
#consent-quote:after  { content: '\201D'; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--medium-bg);
  border: 1px solid var(--border-warm);
  color: var(--gold);
}

/* Status line. Gold rather than the old brick red, which had no basis in the palette. */
#message {
  max-width: 720px;
  margin: 22px auto 0;
  font: 600 15px/1.6 var(--font-body);
  color: var(--gold);
  min-height: 1.6em;
}

[hidden] { display: none !important; }

@media (max-width: 640px) {
  header { align-items: flex-start; flex-direction: column; padding: 22px 22px 12px; }
  .brand img { width: min(190px, 70vw); }
  header p { font-size: 10px; letter-spacing: .32em; }
  main { margin-top: 12px; padding: 0 18px; }
  h1 { font-size: clamp(36px, 11vw, 50px); }
  .intro { font-size: 18px; }
  form, section { padding: 22px 18px; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions button, form > button { width: 100%; }
  #consent-photo { max-height: 330px; }
  footer { align-items: flex-start; flex-direction: column; padding: 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}