/*
Theme Name: Save Our Date
Theme URI: https://saveourdate.studio
Author: Save Our Date
Description: Storefront for Save Our Date — invitation websites for every occasion. Block theme, built from the Storefront v2 design.
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saveourdate
*/

/* Block themes take their styling from theme.json. What lives here is the
   handful of things theme.json cannot express. */

/* ── Links ─────────────────────────────────────────────────────────────── */

a { text-decoration: none; }
a:hover { color: var(--wp--preset--color--teal); }

/* ── Eyebrow labels ────────────────────────────────────────────────────── */
/* The design's small tracked caps. Used above nearly every section heading. */

.sod-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--micro);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ── Hero claim ────────────────────────────────────────────────────────── */
/* The italic phrase and the supporting line sit side by side, divided by a
   gold hairline. Below 782px they stack, and the rule moves to the top so it
   still reads as a division rather than a stray vertical mark. */

.sod-claim {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  max-width: 640px;
  margin-top: var(--wp--preset--spacing--30);
}

.sod-claim__phrase {
  font-family: var(--wp--preset--font-family--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  color: #B8842E;
  white-space: nowrap;
}

.sod-claim__line {
  margin: 0;
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  line-height: 1.65;
  font-weight: 300;
  color: var(--wp--preset--color--muted);
  border-left: 1px solid var(--wp--preset--color--gold);
  padding-left: 28px;
}

@media (max-width: 781px) {
  .sod-claim { grid-template-columns: 1fr; gap: 18px; }
  .sod-claim__phrase { white-space: normal; }
  .sod-claim__line {
    border-left: none;
    border-top: 1px solid var(--wp--preset--color--gold);
    padding-left: 0;
    padding-top: 18px;
  }
}

/* ── Header ────────────────────────────────────────────────────────────── */
/* The header sits outside the constrained content flow, so it needs the root
   inline padding explicitly — without it the mark and the button collide with
   the viewport edges. */

.sod-header,
.sod-footer {
  padding-inline: clamp(1.25rem, 4.4vw, 4rem);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 1rem;
}

.sod-brand { display: flex; align-items: center; gap: 12px; }
.sod-brand svg { flex: none; display: block; }

/* ── Rules ─────────────────────────────────────────────────────────────── */
/* The design uses hairlines, never boxes or shadows. */

.sod-rule-top    { border-top: 1px solid rgba(22, 58, 70, 0.25); }
.sod-rule-bottom { border-bottom: 1px solid rgba(22, 58, 70, 0.25); }
.sod-rule-faint  { border-bottom: 1px solid rgba(22, 58, 70, 0.15); }

/* ── Occasion list rows ────────────────────────────────────────────────── */

.sod-row {
  display: grid;
  grid-template-columns: 64px 4fr 6fr 24px;
  gap: 32px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid rgba(22, 58, 70, 0.25);
}
.sod-row:hover { color: var(--wp--preset--color--teal); }

@media (max-width: 781px) {
  .sod-row {
    grid-template-columns: 40px 1fr;
    gap: 8px 20px;
    padding: 22px 0;
  }
  .sod-row > :nth-child(3) { grid-column: 2; }
  .sod-row > :nth-child(4) { display: none; }
}

/* ── Ghosted step numerals ─────────────────────────────────────────────── */

.sod-step { position: relative; padding-top: 96px; }
.sod-step__numeral {
  position: absolute;
  top: 8px;
  left: -8px;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(120px, 15vw, 220px);
  line-height: 0.8;
  font-weight: 300;
  pointer-events: none;
  user-select: none;
}

/* ── Pricing table ─────────────────────────────────────────────────────── */

.sod-pricing { display: grid; grid-template-columns: 3fr 4fr 5fr; }
.sod-pricing__cell { border-bottom: 1px solid rgba(22, 58, 70, 0.2); display: flex; align-items: center; }
.sod-pricing__premium { background: var(--wp--preset--color--pale); }

/* The RSVP row is the one difference between the packages — it gets the weight. */
.sod-pricing__pivot { padding-block: 40px; }

@media (max-width: 781px) {
  .sod-pricing { grid-template-columns: 1fr; }
  .sod-pricing__cell { border-bottom: none; }
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
/* Underline-only inputs, per the contact screen. 16px minimum stops iOS
   zooming the page when a field takes focus. */

.sod-field {
  height: 48px;
  border: none;
  border-bottom: 1px solid rgba(22, 58, 70, 0.25);
  background: transparent;
  font-family: var(--wp--preset--font-family--body);
  font-size: max(16px, 1.0625rem);
  font-weight: 300;
  color: var(--wp--preset--color--ink);
  padding: 0;
  outline: none;
  border-radius: 0;
}
.sod-field:focus { border-bottom-color: var(--wp--preset--color--teal); }
textarea.sod-field { height: auto; padding-bottom: 12px; line-height: 1.6; resize: vertical; }

/* ── Accessibility ─────────────────────────────────────────────────────── */

:focus-visible { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 3px; }

.sod-tap { min-height: 44px; min-width: 44px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Colour scheme ─────────────────────────────────────────────────────── */
/* Declares the design light so Chrome's native auto-dark leaves it alone.
   (A reader extension like Dark Reader overrides this regardless — that is
   the reader's choice to make, not a bug to fix.) */

:root { color-scheme: light; }

/* ── Design gallery ────────────────────────────────────────────────────── */

.gal-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(22, 58, 70, 0.25);
}
.gal-chips { display: flex; flex-wrap: wrap; gap: 4px; }

.gal-chip {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--wp--preset--color--subtle);
  font-family: var(--wp--preset--font-family--body);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 18px 16px 16px;
  margin-bottom: -1px;
  cursor: pointer;
  min-height: 44px;
}
.gal-chip:hover { color: var(--wp--preset--color--teal); }
.gal-chip[aria-pressed="true"] {
  color: var(--wp--preset--color--ink);
  border-bottom-color: var(--wp--preset--color--ink);
}

.gal-count {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--subtle);
  padding-bottom: 18px;
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  border-left: 1px solid rgba(22, 58, 70, 0.25);
}
@media (max-width: 700px) { .gal-grid { border-left: none; } }

.gal-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 32px 36px;
  border-right: 1px solid rgba(22, 58, 70, 0.25);
  border-bottom: 1px solid rgba(22, 58, 70, 0.25);
}
.gal-card[hidden] { display: none; }

.gal-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* The swatch previews the design's own palette and type — not a photograph,
   because a photo would show the client's wedding rather than our design. */
.gal-swatch {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 36px 32px;
  position: relative;
}
.gal-swatch__kicker { font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase; opacity: 0.7; }
.gal-swatch__sample { line-height: 1.02; white-space: pre-line; }
.gal-swatch__rule { width: 36px; height: 1px; }
.gal-swatch__line { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.8; }
.gal-swatch__dots { position: absolute; right: 24px; bottom: 24px; display: flex; gap: 6px; }
.gal-swatch__dots span { width: 12px; height: 12px; }

.gal-name { font-family: var(--wp--preset--font-family--display); font-size: 32px; line-height: 1; }
.gal-meta { font-size: 13px; letter-spacing: 0.1em; color: var(--wp--preset--color--subtle); }

.gal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
}
.gal-btn--ghost { border: 1px solid var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); }
.gal-btn--ghost:hover { background: var(--wp--preset--color--wash); }
.gal-btn--solid { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--ivory); }
.gal-btn--solid:hover { background: var(--wp--preset--color--teal); color: var(--wp--preset--color--ivory); }

.gal-empty { padding: 64px 0; color: var(--wp--preset--color--muted); }
.gal-empty[hidden] { display: none; }

/* ── Depth ─────────────────────────────────────────────────────────────── */
/* Two very soft washes drawn from the brand's own accents — teal from the top
   right, gold from the top left — so the page has light in it rather than
   being flat paper. Both sit under 12% alpha: you should feel them, not see
   them. A saturated multi-hue gradient would read as a template, which is the
   one thing this brand cannot afford. */

.sod-wash {
  position: relative;
  background:
    radial-gradient(110% 70% at 82% -8%,  rgba(61, 143, 166, 0.13), transparent 62%),
    radial-gradient(80% 55% at -8% 4%,    rgba(232, 184, 106, 0.14), transparent 58%),
    var(--wp--preset--color--ivory);
}

/* A quieter band for sections that sit between the loud ones, so the page
   alternates tone instead of running as one long sheet of ivory. */
.sod-band {
  background:
    linear-gradient(180deg, var(--wp--preset--color--ivory) 0%, var(--wp--preset--color--wash) 45%, var(--wp--preset--color--ivory) 100%);
}

/* The teal and ink bands get depth in their own hue — a single light source,
   not a second colour. */
.sod-band-teal {
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
    var(--wp--preset--color--teal);
}
.sod-band-ink {
  background:
    radial-gradient(80% 130% at 85% 110%, rgba(61, 143, 166, 0.35), transparent 62%),
    radial-gradient(60% 90% at 10% -10%, rgba(232, 184, 106, 0.12), transparent 58%),
    var(--wp--preset--color--ink);
}

/* Hairlines read as drawn rather than printed when they fade at the ends. */
.sod-rule-top,
.sod-rule-bottom { border-image: linear-gradient(90deg, transparent, rgba(22,58,70,.3) 12%, rgba(22,58,70,.3) 88%, transparent) 1; }