/*
Theme Name: Vellum
Theme URI: https://bagofapples.com/vellum
Author: Bag of Apples
Author URI: https://bagofapples.com
Description: A lightweight, evergreen base theme. All visual choices flow from a small set of CSS custom properties — change the palette, fonts, spacing, or motion in one place and the whole site follows. No page builders. No jQuery. WooCommerce styling is an optional self-contained layer.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vellum
Tags: blog, portfolio, photography, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* ============================================================
   VELLUM DESIGN SYSTEM
   Every site-wide visual choice lives here. Per-site child
   themes override these custom properties to restyle the
   entire theme without touching any selectors.
   ============================================================ */

:root {
  /* ── TYPOGRAPHY ──
     No default font baked in. Per-site child themes set these
     two variables. The cascade falls through to system fonts
     if a child theme forgets to override. */
  --font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── PALETTE — neutral defaults. Child themes override freely. ── */
  --color-bg:        #ffffff;
  --color-text:      #111111;
  --color-text-muted: rgba(17, 17, 17, .60);
  --color-line:      rgba(17, 17, 17, .12);
  --color-accent:    #1a1a1a;
  --color-accent-dim: rgba(26, 26, 26, .08);

  /* ── PER-PAGE OVERRIDES ──
     Filled in by inc/per-page-color.php from ACF (or static defaults).
     Components reference --page-* so a page can recolor itself without
     touching the global palette. */
  --page-bg:         var(--color-bg);
  --page-text:       var(--color-text);
  --page-text-muted: var(--color-text-muted);
  --page-line:       var(--color-line);
  --page-accent:     var(--color-accent);

  /* ── MOTION ── */
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --dur-xs:      .2s;
  --dur-sm:      .4s;
  --dur-md:      .9s;
  --dur-lg:      1.4s;
  /* Page-transition curtain fade. Kept short + independent of --dur-sm so
     the between-pages fade stays snappy without slowing UI hovers. */
  --dur-curtain: .14s;

  /* ── SPACING ──
     Page gutters and grid gaps that scale fluidly with viewport. */
  --gutter:     clamp(22px, 5vw, 86px);
  --gap:        clamp(14px, 2.5vw, 32px);
  --gap-sm:     clamp(8px, 1.5vw, 16px);
  --gap-lg:     clamp(28px, 4vw, 60px);

  /* ── TYPE SCALE ──
     All headings reference these. Override the variable, not the rule. */
  --type-display: clamp(48px, 6.5vw, 116px);
  --type-h1:      clamp(36px, 5.5vw, 80px);
  --type-h2:      clamp(28px, 4vw, 56px);
  --type-h3:      clamp(20px, 2.5vw, 36px);
  --type-h4:      clamp(16px, 1.8vw, 24px);
  --type-body:    clamp(15px, 1.3vw, 18px);
  --type-small:   clamp(12px, 1vw, 14px);
  --type-eyebrow: clamp(11px, .85vw, 13px);

  /* ── LAYOUT ── */
  --content-max:  1320px;
  --reading-max:  72ch;
  /* Height the fixed nav occupies. `.vellum-main` clears this by default so
     content never hides under the nav. Heroes / the page-title block opt
     out (see components.css → "NAV CLEARANCE"). */
  --nav-h:        clamp(76px, 9vh, 104px);
  /* Background the nav fades to once the page is scrolled (transparent at the
     top → solid on scroll). Child themes can override to match their palette. */
  --nav-scrolled-bg: rgba(255, 255, 255, .9);
  /* z-index stack (low → high):
       curtain : the page-transition fade. Below the nav so the nav
                 stays visible during transitions.
       nav     : sticky/fixed top navigation, always visible.
       overlay : mobile menu (full-screen, above nav so the open menu
                 covers the nav button).
       lightbox: above everything. */
  --z-curtain:    50;
  --z-nav:        60;
  --z-overlay:    100;
  --z-lightbox:   300;
}

/* ── LIGHT / DARK BODY VARIANTS ──
   Applied automatically by inc/per-page-color.php based on the
   per-page background luminance. Child themes can apply
   .vellum-dark / .vellum-light by hand on any element. */
body.vellum-dark {
  --page-bg:         #0d0c0a;
  --page-text:       #f3eee6;
  --page-text-muted: rgba(243, 238, 230, .65);
  --page-line:       rgba(243, 238, 230, .10);
}
body.vellum-light {
  --page-bg:         #ffffff;
  --page-text:       #0d0c0a;
  --page-text-muted: rgba(13, 12, 10, .55);
  --page-line:       rgba(13, 12, 10, .10);
}

/* ============================================================
   RESET + BASE
   Modern, minimal reset. No normalize.css — we set our own
   sensible defaults and let the cascade do the work.
   ============================================================ */

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

html {
  background: var(--page-bg);
  color: var(--page-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: auto; /* JS smooth scroll handles this */
  text-rendering: optimizeLegibility;
  /* Kill the mobile tap-highlight "black box" globally (inherited prop) so no
     link/button flashes a dark overlay on touch. Base fix — all child themes
     inherit it. Re-enable per element with a specific tap-highlight-color. */
  -webkit-tap-highlight-color: transparent;
}
/* Belt-and-suspenders for interactive elements that some engines highlight
   independently of the inherited value. */
a, button, [role="button"], input, select, textarea, label, summary {
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-text);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.65;
  overflow-x: hidden;
  transition: background var(--dur-md) var(--ease),
              color      var(--dur-md) var(--ease);
}

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

a,
a:visited {
  /* :visited is pinned too — without it, a link whose target has been
     visited (e.g. the home-linked wordmark) falls back to the browser's
     default blue/purple, since a bare `inherit` doesn't override the UA
     visited color. */
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

p, ul, ol, dl, blockquote, figure, pre {
  margin: 0 0 1em;
}

ul, ol { padding-left: 1.4em; }
/* Vertical spacing between list items only applies inside prose / article
   contexts — nav menus and other flex/grid lists do not want this. */
.prose li + li,
.entry-content li + li { margin-top: .25em; }

hr {
  border: 0;
  border-top: 1px solid var(--page-line);
  margin: var(--gap) 0;
}

/* ============================================================
   GLOBAL TYPOGRAPHY
   Sizes, weights, and rhythm. Font-family is the only thing
   the child theme is required to set.
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: var(--type-h1); line-height: .95; }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); }
h4 { font-size: var(--type-h4); }

p, li, td, th, label {
  font-size: var(--type-body);
  line-height: 1.65;
}

p { text-wrap: pretty; }

small, .text-small { font-size: var(--type-small); }

.eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--page-text-muted);
  margin: 0 0 1em;
}

.display {
  font-family: var(--font-display);
  font-size: var(--type-display);
  font-weight: 800;
  line-height: .93;
  letter-spacing: -0.01em;
}

.lede {
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.5;
  color: var(--page-text);
}

/* Reading column for prose pages */
.prose {
  max-width: var(--reading-max);
  margin: 0 auto;
}

.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { margin-top: 2em; }
.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--page-line);
  transition: text-decoration-color var(--dur-sm) var(--ease);
}
.prose a:hover { text-decoration-color: var(--page-accent); }

.prose blockquote {
  border-left: 3px solid var(--page-accent);
  padding: 4px 0 4px 24px;
  font-style: italic;
  color: var(--page-text-muted);
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--narrow { max-width: 920px; }
.container--wide   { max-width: none; }

.stack > * + * { margin-top: var(--gap); }
.stack-sm > * + * { margin-top: var(--gap-sm); }
.stack-lg > * + * { margin-top: var(--gap-lg); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  align-items: center;
}

.grid {
  display: grid;
  gap: var(--gap);
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--page-bg);
  color: var(--page-text);
  padding: 12px 18px;
  border: 2px solid var(--page-accent);
}
.skip-link:focus { left: 12px; top: 12px; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   WORDPRESS CORE CLASSES — minimum needed to pass theme review
   ============================================================ */

.alignleft  { float: left;  margin: 0 var(--gap) var(--gap) 0; }
.alignright { float: right; margin: 0 0 var(--gap) var(--gap); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide  { max-width: min(1400px, 100%); margin-left: auto; margin-right: auto; }
.alignfull  { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

.wp-caption {
  max-width: 100%;
  margin-bottom: var(--gap);
}
.wp-caption-text,
figcaption {
  font-size: var(--type-small);
  color: var(--page-text-muted);
  margin-top: .5em;
  line-height: 1.5;
}

.sticky        { display: block; }
.bypostauthor  { display: block; }
.gallery-caption {}

/* Pagination */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--page-line);
  font-size: var(--type-small);
  color: var(--page-text-muted);
  transition: border-color var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}
.page-numbers.current,
.page-numbers:hover {
  border-color: var(--page-accent);
  color: var(--page-accent);
}

/* Component styles are loaded separately from assets/css/components.css */