/*
 * ─────────────────────────────────────────────────────────────
 *  BASE.CSS  —  Modern reset + base element styling
 *  web-starter-kit v1
 *
 *  Depends on: tokens.css (must be loaded first)
 *  No class-level styling here — only element defaults.
 * ─────────────────────────────────────────────────────────────
 */

/* ── GOOGLE FONTS DEFAULT IMPORT ────────────────────────────
 * Override in client-theme.css with the client's own fonts.
 * These defaults pair a refined serif with a geometric sans.
 * ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');


/* ── MODERN CSS RESET ────────────────────────────────────────
 * Based on Andy Bell's modern reset + Josh Comeau additions.
 * ─────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Prevent layout shift when scrollbar appears */
  scrollbar-gutter: stable;
}

body {
  font-family:    var(--font-body);
  font-size:      var(--step-0);
  font-weight:    var(--weight-body);
  line-height:    var(--line-height-body);
  color:          var(--ink);
  background:     var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  min-height: 100svh;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────
 * Fluid headings drawn from the type scale.
 * Display font (serif) for h1–h3, body sans for h4–h6.
 * ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-weight:    var(--weight-display);
  line-height:    var(--line-height-heading);
  letter-spacing: var(--letter-spacing-tight);
  color:          var(--ink);
  /* Prevent orphaned single words */
  text-wrap:      balance;
}

h1 {
  font-family:  var(--font-display);
  font-size:    var(--step-5);
  font-weight:  var(--weight-display);
}

h2 {
  font-family:  var(--font-display);
  font-size:    var(--step-4);
  font-weight:  var(--weight-display);
}

h3 {
  font-family:  var(--font-display);
  font-size:    var(--step-3);
  font-weight:  var(--weight-display);
}

h4 {
  font-family:  var(--font-body);
  font-size:    var(--step-2);
  font-weight:  var(--weight-ui);
  letter-spacing: var(--letter-spacing-base);
}

h5 {
  font-family:  var(--font-body);
  font-size:    var(--step-1);
  font-weight:  var(--weight-ui);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

h6 {
  font-family:  var(--font-body);
  font-size:    var(--step-0);
  font-weight:  var(--weight-ui);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
}

/* Eyebrow / label — use <p class="eyebrow"> or <span class="eyebrow"> */
.eyebrow {
  font-family:    var(--font-body);
  font-size:      var(--step--1);
  font-weight:    var(--weight-ui);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color:          var(--muted);
  line-height:    1.4;
}

/* Italic serif accent — for descriptive subheadings (saipua.com pattern) */
.subtitle {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   var(--step-2);
  color:       var(--muted);
  line-height: var(--line-height-heading);
}

p {
  max-width:   var(--measure);
  line-height: var(--line-height-body);
  color:       var(--ink);
}

p + p {
  margin-block-start: var(--space-m);
}

/* Lead paragraph */
p.lead {
  font-size:   var(--step-1);
  font-weight: 300;
  color:       var(--ink);
  max-width:   52ch;
}

/* Small / caption */
small, .caption {
  font-size:   var(--step--1);
  color:       var(--muted);
  line-height: 1.5;
}

strong, b {
  font-weight: var(--weight-ui);
}

em {
  font-family: var(--font-display);
  font-style:  italic;
}


/* ── LINKS ──────────────────────────────────────────────────
 * Refined, non-default — underline on hover, not by default.
 * ─────────────────────────────────────────────────────────── */

a {
  color:           var(--brand);
  text-decoration: none;
  transition:      color var(--duration-fast) var(--ease-out);
}

a:hover {
  color:           var(--brand-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Subtle underline link (use inside body copy) */
a.link-subtle {
  color:              inherit;
  text-decoration:    underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

a.link-subtle:hover {
  color:                  var(--brand);
  text-decoration-color:  var(--brand);
  text-decoration:        underline;
}


/* ── BUTTONS ────────────────────────────────────────────────
 * Two styles:
 *  .btn          — primary solid (brand colour, full weight)
 *  .btn-outline  — ghost / outline variant
 * Both are fully token-driven and re-theme automatically.
 * ─────────────────────────────────────────────────────────── */

.btn,
.btn-outline {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-xs);
  font-family:      var(--font-body);
  font-size:        var(--step--1);
  font-weight:      var(--weight-ui);
  letter-spacing:   var(--letter-spacing-caps);
  text-transform:   uppercase;
  text-decoration:  none;
  padding:          var(--space-s) var(--space-xl);
  border-radius:    var(--radius-s);
  border:           1.5px solid transparent;
  cursor:           pointer;
  white-space:      nowrap;
  transition:       background  var(--duration-base) var(--ease-out),
                    color       var(--duration-base) var(--ease-out),
                    border-color var(--duration-base) var(--ease-out),
                    box-shadow  var(--duration-base) var(--ease-out),
                    transform   var(--duration-fast) var(--ease-spring);
  -webkit-user-select: none;
  user-select: none;
}

.btn {
  background:  var(--brand);
  color:       var(--canvas);
  border-color: var(--brand);
}

.btn:hover {
  background:   var(--brand-2);
  border-color: var(--brand-2);
  color:        var(--canvas);
  box-shadow:   var(--shadow-m);
  transform:    translateY(-1px);
  text-decoration: none;
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-outline {
  background:   transparent;
  color:        var(--brand);
  border-color: currentColor;
}

.btn-outline:hover {
  background:  var(--brand);
  color:       var(--canvas);
  border-color: var(--brand);
  box-shadow:  var(--shadow-s);
  transform:   translateY(-1px);
  text-decoration: none;
}

/* Light variant — for use on dark/coloured backgrounds */
.btn-light {
  background:   var(--canvas);
  color:        var(--brand);
  border-color: var(--canvas);
}

.btn-light:hover {
  background:   var(--accent);
  color:        var(--ink);
  border-color: var(--accent);
  text-decoration: none;
}

/* Size variants */
.btn-lg {
  font-size:  var(--step-0);
  padding:    var(--space-m) var(--space-2xl);
}

.btn-sm {
  font-size:  calc(var(--step--1) * 0.9);
  padding:    var(--space-2xs) var(--space-l);
}


/* ── FOCUS STATES ───────────────────────────────────────────
 * Visible, branded, accessible — never removed.
 * ─────────────────────────────────────────────────────────── */

:focus-visible {
  outline:        2px solid var(--brand);
  outline-offset: 3px;
  border-radius:  var(--radius-xs);
}

/* Suppress for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}


/* ── IMAGES & MEDIA ─────────────────────────────────────────
 * ─────────────────────────────────────────────────────────── */

img, video, svg, canvas, picture {
  display:    block;
  max-width:  100%;
  height:     auto;
}

/* Prevent alt text overflow when images fail */
img {
  object-fit: cover;
}

figure {
  margin: 0;
}

figcaption {
  font-size:   var(--step--1);
  color:       var(--muted);
  margin-top:  var(--space-xs);
  font-style:  italic;
}


/* ── LISTS ──────────────────────────────────────────────────
 * ─────────────────────────────────────────────────────────── */

ul, ol {
  padding-inline-start: var(--space-l);
}

li {
  margin-block: var(--space-2xs);
  line-height:  var(--line-height-body);
}

/* Unstyled list — for nav, card grids */
.list-none {
  list-style:          none;
  padding-inline-start: 0;
}

.list-none li {
  margin-block: 0;
}


/* ── HORIZONTAL RULE ────────────────────────────────────────
 * Thin editorial divider (locomotive.ca pattern).
 * ─────────────────────────────────────────────────────────── */

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin-block: var(--space-2xl);
}


/* ── BLOCKQUOTE ─────────────────────────────────────────────
 * ─────────────────────────────────────────────────────────── */

blockquote {
  font-family:  var(--font-display);
  font-style:   italic;
  font-size:    var(--step-2);
  line-height:  var(--line-height-heading);
  border-left:  3px solid var(--accent);
  padding-inline-start: var(--space-l);
  color:        var(--ink);
  max-width:    var(--measure);
}

blockquote cite {
  display:    block;
  font-size:  var(--step--1);
  font-style: normal;
  color:      var(--muted);
  margin-top: var(--space-s);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  font-family: var(--font-body);
}


/* ── FORMS ──────────────────────────────────────────────────
 * Minimal, refined — used in newsletter + contact sections.
 * ─────────────────────────────────────────────────────────── */

input, textarea, select {
  font-family:  var(--font-body);
  font-size:    var(--step-0);
  color:        var(--ink);
  background:   var(--surface);
  border:       1.5px solid var(--rule);
  border-radius: var(--radius-s);
  padding:      var(--space-s) var(--space-m);
  width:        100%;
  line-height:  var(--line-height-body);
  appearance:   none;
  transition:   border-color var(--duration-fast) var(--ease-out),
                box-shadow   var(--duration-fast) var(--ease-out);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--brand);
  outline:      none;
  box-shadow:   0 0 0 3px rgba(var(--brand-rgb), 0.15);
}

input::placeholder, textarea::placeholder {
  color:        var(--muted);
  opacity:      1;
}

textarea {
  resize:       vertical;
  min-height:   120px;
}

label {
  font-size:      var(--step--1);
  font-weight:    var(--weight-ui);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color:          var(--muted);
  display:        block;
  margin-bottom:  var(--space-xs);
}


/* ── UTILITY HELPERS ────────────────────────────────────────
 * Minimal set — keep these lean.
 * ─────────────────────────────────────────────────────────── */

/* Layout containers */
.container {
  width:         100%;
  max-width:     var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--text {
  max-width: var(--container-text);
}

.container--wide {
  max-width: var(--container-wide);
}

/* Text alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Visually hidden (accessible) */
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space: nowrap;
  border:     0;
}

/* Reveal animation base (fill in JS with Intersection Observer) */
.reveal {
  opacity:    1; /* Default visible — JS enhances, not breaks */
  transform:  none;
  transition: opacity  var(--duration-enter) var(--ease-out),
              transform var(--duration-enter) var(--ease-out);
}

.reveal.is-hidden {
  opacity:   0;
  transform: translateY(24px);
}

/* Aspect ratios */
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1; }
.aspect-photo  { aspect-ratio: 4 / 3; }
.aspect-tall   { aspect-ratio: 3 / 4; }
.aspect-cinema { aspect-ratio: 21 / 9; }