/* ═══════════════════════════════════════════════════════════════════════
   VIVID HOME — Design System
   Premium B2C ecommerce for canvas prints & custom wallpapers

   This file defines ALL design tokens as CSS custom properties.
   No component styles live here — only the raw materials.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────
   1. COLOR TOKENS

   Palette philosophy:
   - Warm neutrals as base (cream, linen, stone) — NOT clinical white
   - Brand gradient accent drawn from the Vivid Home logo spectrum
   - Semantic colors for UI feedback
   ───────────────────────────────────────────────────────────────────── */

:root {

  /* ── 1a. Warm Neutral Base ──
     The backbone of every page. Cream and linen tones create warmth
     that makes art photography look its best — like gallery walls. */
  --vh-white:          #FFFFFF;
  --vh-cream:          #FAF8F5;         /* primary background — warm off-white */
  --vh-linen:          #F5F0EB;         /* secondary surfaces, cards, alternating sections */
  --vh-sand:           #EDE7DF;         /* borders, dividers, subtle backgrounds */
  --vh-stone:          #D4CBC0;         /* disabled states, muted borders */
  --vh-warm-gray:      #A89F95;         /* placeholder text, tertiary content */
  --vh-charcoal:       #4A4440;         /* secondary text */
  --vh-espresso:       #2C2825;         /* primary text — warm near-black */
  --vh-ink:            #1A1715;         /* headings, maximum contrast */

  /* ── 1b. Brand Gradient Colors ──
     From the Vivid Home logo: blue → cyan → purple → magenta → orange.
     Each stop is available individually for accents and highlights. */
  --vh-blue:           #2563EB;
  --vh-cyan:           #06B6D4;
  --vh-purple:         #7C3AED;
  --vh-magenta:        #DB2777;
  --vh-rose:           #F43F5E;
  --vh-orange:         #F97316;
  --vh-amber:          #F59E0B;

  /* ── 1c. Brand Gradients ──
     The full-spectrum gradient for hero elements, promo bars, CTAs.
     Directional variants for different component orientations. */
  --vh-gradient:       linear-gradient(135deg, #2563EB 0%, #06B6D4 20%, #7C3AED 40%, #DB2777 60%, #F43F5E 75%, #F97316 90%, #F59E0B 100%);
  --vh-gradient-h:     linear-gradient(90deg,  #2563EB 0%, #06B6D4 20%, #7C3AED 40%, #DB2777 60%, #F43F5E 75%, #F97316 90%, #F59E0B 100%);
  --vh-gradient-v:     linear-gradient(180deg, #2563EB 0%, #06B6D4 20%, #7C3AED 40%, #DB2777 60%, #F43F5E 75%, #F97316 90%, #F59E0B 100%);

  /* Subtle gradient for buttons and interactive elements — shorter range, more focused */
  --vh-gradient-cta:   linear-gradient(135deg, #7C3AED, #DB2777, #F43F5E);
  --vh-gradient-cta-h: linear-gradient(135deg, #6D28D9, #BE185D, #E11D48);  /* hover state */

  /* Warm gradient for premium/luxury accents */
  --vh-gradient-warm:  linear-gradient(135deg, #F59E0B, #F97316, #F43F5E);

  /* Glass overlay for cards and panels on top of images */
  --vh-gradient-glass: linear-gradient(180deg, rgba(250,248,245,0.85), rgba(250,248,245,0.65));

  /* ── 1d. Semantic Colors ──
     Functional colors for feedback, validation, and status. */
  --vh-success:        #16A34A;
  --vh-success-light:  #F0FDF4;
  --vh-warning:        #EAB308;
  --vh-warning-light:  #FEFCE8;
  --vh-error:          #DC2626;
  --vh-error-light:    #FEF2F2;
  --vh-info:           #2563EB;
  --vh-info-light:     #EFF6FF;

  /* ── 1e. Overlay & Backdrop ── */
  --vh-overlay:        rgba(26, 23, 21, 0.55);
  --vh-overlay-heavy:  rgba(26, 23, 21, 0.75);
  --vh-backdrop-blur:  blur(24px);


  /* ─────────────────────────────────────────────────────────────────────
     2. TYPOGRAPHY

     Dual-font strategy:
     - HEADING: Geologica — bold, modern variable sans-serif.
       Strong visual presence with high legibility. Used for all headings,
       display text, and hero copy. Weights 600–800.
     - BODY: Onest — warm geometric sans-serif with character.
       Excellent readability at all sizes. Friendly but professional.
     ───────────────────────────────────────────────────────────────────── */

  /* ── 2a. Font Families ── */
  --vh-font-heading:   'Geologica', 'Inter', system-ui, -apple-system, sans-serif;
  --vh-font-body:      'Onest', 'Inter', system-ui, -apple-system, sans-serif;
  --vh-font-mono:      'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* ── 2b. Type Scale ──
     Modular scale based on 1.25 ratio (major third).
     Each step: previous × 1.25. Base = 1rem (16px). */
  --vh-text-xs:        0.75rem;      /* 12px — fine print, badges */
  --vh-text-sm:        0.875rem;     /* 14px — captions, meta, helper text */
  --vh-text-base:      1rem;         /* 16px — body text baseline */
  --vh-text-md:        1.125rem;     /* 18px — lead paragraphs, emphasized body */
  --vh-text-lg:        1.25rem;      /* 20px — large body, card titles */
  --vh-text-xl:        1.5rem;       /* 24px — section subtitles, small headings */
  --vh-text-2xl:       1.875rem;     /* 30px — h4 equivalent */
  --vh-text-3xl:       2.25rem;      /* 36px — h3 equivalent */
  --vh-text-4xl:       3rem;         /* 48px — h2 equivalent */
  --vh-text-5xl:       3.75rem;      /* 60px — h1, hero headlines */
  --vh-text-6xl:       4.5rem;       /* 72px — display / statement text */
  --vh-text-7xl:       6rem;         /* 96px — jumbo display (hero only) */

  /* ── 2c. Font Weights ── */
  --vh-weight-light:   600;          /* Geologica minimum — no thin weights */
  --vh-weight-regular: 400;
  --vh-weight-medium:  500;
  --vh-weight-semibold:600;
  --vh-weight-bold:    700;
  --vh-weight-extrabold: 800;        /* Geologica/Onest max — hero headlines */

  /* ── 2d. Line Heights ── */
  --vh-leading-none:   1;            /* headings, display text */
  --vh-leading-tight:  1.2;          /* large headings */
  --vh-leading-snug:   1.35;         /* small headings, subheadings */
  --vh-leading-normal: 1.6;          /* body text */
  --vh-leading-relaxed:1.75;         /* long-form reading, descriptions */
  --vh-leading-loose:  2;            /* extra breathing room */

  /* ── 2e. Letter Spacing ── */
  --vh-tracking-tighter: -0.03em;    /* large display headings */
  --vh-tracking-tight:   -0.015em;   /* medium headings */
  --vh-tracking-normal:   0;         /* body */
  --vh-tracking-wide:     0.025em;   /* buttons, labels */
  --vh-tracking-wider:    0.05em;    /* eyebrow text, all-caps labels */
  --vh-tracking-widest:   0.1em;     /* uppercase micro-copy */


  /* ─────────────────────────────────────────────────────────────────────
     3. SPACING

     8px base grid. Every spatial decision snaps to this scale.
     Named semantically where helpful (section, page).
     ───────────────────────────────────────────────────────────────────── */

  --vh-space-1:        0.25rem;      /*  4px */
  --vh-space-2:        0.5rem;       /*  8px */
  --vh-space-3:        0.75rem;      /* 12px */
  --vh-space-4:        1rem;         /* 16px */
  --vh-space-5:        1.25rem;      /* 20px */
  --vh-space-6:        1.5rem;       /* 24px */
  --vh-space-8:        2rem;         /* 32px */
  --vh-space-10:       2.5rem;       /* 40px */
  --vh-space-12:       3rem;         /* 48px */
  --vh-space-16:       4rem;         /* 64px */
  --vh-space-20:       5rem;         /* 80px */
  --vh-space-24:       6rem;         /* 96px */
  --vh-space-32:       8rem;         /* 128px */

  /* Semantic spacing — consistent vertical rhythm for page sections */
  --vh-section-py:     var(--vh-space-24);     /* vertical padding between sections */
  --vh-section-py-sm:  var(--vh-space-16);     /* compact section padding */
  --vh-section-py-lg:  var(--vh-space-32);     /* hero / statement sections */
  --vh-section-gap:    var(--vh-space-12);     /* gap between content blocks within a section */
  --vh-page-gutter:    var(--vh-space-6);      /* page edge padding (mobile-first) */


  /* ─────────────────────────────────────────────────────────────────────
     4. LAYOUT

     Container widths, grid columns, breakpoint-aware values.
     ───────────────────────────────────────────────────────────────────── */

  --vh-container-sm:   640px;        /* narrow content: text blocks, forms */
  --vh-container-md:   768px;        /* medium: single-column with breathing room */
  --vh-container-lg:   1024px;       /* standard content width */
  --vh-container:      1280px;       /* primary container — most page content */
  --vh-container-xl:   1440px;       /* wide: product grids, galleries */
  --vh-container-full: 1920px;       /* max-width for full-bleed hero sections */

  /* Grid */
  --vh-grid-cols:      12;           /* standard 12-column grid */
  --vh-grid-gap:       var(--vh-space-6);


  /* ─────────────────────────────────────────────────────────────────────
     5. BORDERS & RADIUS

     Soft, rounded corners throughout. Sharper for small elements,
     more generous for cards and panels. Never harsh or boxy.
     ───────────────────────────────────────────────────────────────────── */

  --vh-radius-xs:      4px;          /* badges, tags, tiny elements */
  --vh-radius-sm:      6px;          /* inputs, small buttons */
  --vh-radius-md:      10px;         /* buttons, dropdowns */
  --vh-radius-lg:      16px;         /* cards, panels, modals */
  --vh-radius-xl:      24px;         /* large cards, featured sections */
  --vh-radius-2xl:     32px;         /* hero cards, promotional elements */
  --vh-radius-full:    9999px;       /* pills, avatar circles */

  --vh-border-width:   1px;
  --vh-border-color:   var(--vh-sand);
  --vh-border:         var(--vh-border-width) solid var(--vh-border-color);


  /* ─────────────────────────────────────────────────────────────────────
     6. SHADOWS

     Layered shadow system. Shadows use warm-tinted blacks to match
     the warm neutral palette. Multiple layers for realistic depth.
     ───────────────────────────────────────────────────────────────────── */

  /* Single-layer utility shadows */
  --vh-shadow-xs:      0 1px 2px rgba(44, 40, 37, 0.05);
  --vh-shadow-sm:      0 2px 4px rgba(44, 40, 37, 0.06),
                       0 1px 2px rgba(44, 40, 37, 0.04);
  --vh-shadow-md:      0 4px 12px rgba(44, 40, 37, 0.08),
                       0 2px 4px rgba(44, 40, 37, 0.04);
  --vh-shadow-lg:      0 12px 32px rgba(44, 40, 37, 0.10),
                       0 4px 8px rgba(44, 40, 37, 0.05);
  --vh-shadow-xl:      0 20px 48px rgba(44, 40, 37, 0.12),
                       0 8px 16px rgba(44, 40, 37, 0.06);
  --vh-shadow-2xl:     0 32px 72px rgba(44, 40, 37, 0.16),
                       0 12px 24px rgba(44, 40, 37, 0.08);

  /* Colored shadows for interactive elements (buttons, CTAs) */
  --vh-shadow-brand:   0 8px 24px rgba(124, 58, 237, 0.20),
                       0 4px 8px rgba(219, 39, 119, 0.12);
  --vh-shadow-warm:    0 8px 24px rgba(249, 115, 22, 0.20),
                       0 4px 8px rgba(244, 63, 94, 0.10);

  /* Card hover lift effect */
  --vh-shadow-hover:   0 20px 48px rgba(44, 40, 37, 0.14),
                       0 8px 16px rgba(44, 40, 37, 0.06);

  /* Inner shadow for inset elements (inputs, wells) */
  --vh-shadow-inner:   inset 0 2px 4px rgba(44, 40, 37, 0.06);


  /* ─────────────────────────────────────────────────────────────────────
     7. TRANSITIONS & ANIMATIONS

     Motion design: elegant, not flashy. Ease-out for enters,
     ease-in for exits. Spring-like curves for interactive feedback.
     ───────────────────────────────────────────────────────────────────── */

  /* ── 7a. Durations ── */
  --vh-duration-fast:    150ms;      /* micro-interactions: hover color, opacity */
  --vh-duration-base:    250ms;      /* standard transitions: buttons, links */
  --vh-duration-medium:  350ms;      /* panels, dropdowns, modals enter */
  --vh-duration-slow:    500ms;      /* page transitions, hero animations */
  --vh-duration-slower:  700ms;      /* scroll-triggered reveals */

  /* ── 7b. Easing Curves ── */
  --vh-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);       /* snappy enter — default for most transitions */
  --vh-ease-in:          cubic-bezier(0.55, 0, 1, 0.45);      /* accelerating exit */
  --vh-ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);      /* symmetric — good for loops */
  --vh-ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot — buttons, toggles, playful elements */
  --vh-ease-smooth:      cubic-bezier(0.4, 0, 0.2, 1);        /* Material-style — general purpose */

  /* ── 7c. Composite Transitions (ready to apply) ── */
  --vh-transition-fast:    all var(--vh-duration-fast) var(--vh-ease-out);
  --vh-transition-base:    all var(--vh-duration-base) var(--vh-ease-out);
  --vh-transition-medium:  all var(--vh-duration-medium) var(--vh-ease-out);
  --vh-transition-slow:    all var(--vh-duration-slow) var(--vh-ease-out);
  --vh-transition-colors:  color var(--vh-duration-fast) var(--vh-ease-out),
                           background-color var(--vh-duration-fast) var(--vh-ease-out),
                           border-color var(--vh-duration-fast) var(--vh-ease-out);
  --vh-transition-shadow:  box-shadow var(--vh-duration-base) var(--vh-ease-out);
  --vh-transition-transform: transform var(--vh-duration-base) var(--vh-ease-out);


  /* ─────────────────────────────────────────────────────────────────────
     8. Z-INDEX SCALE

     Centralized stacking order prevents z-index wars.
     ───────────────────────────────────────────────────────────────────── */

  --vh-z-below:        -1;
  --vh-z-base:          0;
  --vh-z-raised:        10;          /* cards with hover lift, dropdowns */
  --vh-z-nav:           100;         /* mega menus, navigation dropdowns */
  --vh-z-header:        200;         /* sticky header */
  --vh-z-drawer:        400;         /* side drawers (cart, filters) */
  --vh-z-overlay:       450;         /* drawer backdrop overlay */
  --vh-z-modal:         500;         /* modals, lightboxes */
  --vh-z-toast:         600;         /* notifications, toast messages */
  --vh-z-tooltip:       700;         /* tooltips */
  --vh-z-max:           9999;        /* emergency override only */


  /* ─────────────────────────────────────────────────────────────────────
     9. COMPONENT TOKENS

     Pre-composed values for frequently-used component patterns.
     These reference the primitives above for consistency.
     ───────────────────────────────────────────────────────────────────── */

  /* ── 9a. Buttons ── */
  --vh-btn-height:       48px;
  --vh-btn-height-sm:    40px;
  --vh-btn-height-lg:    56px;
  --vh-btn-padding-x:    var(--vh-space-8);
  --vh-btn-radius:       var(--vh-radius-md);
  --vh-btn-font-size:    var(--vh-text-sm);
  --vh-btn-font-weight:  var(--vh-weight-semibold);
  --vh-btn-tracking:     var(--vh-tracking-wide);

  /* ── 9b. Inputs & Forms ── */
  --vh-input-height:     48px;
  --vh-input-padding-x:  var(--vh-space-4);
  --vh-input-radius:     var(--vh-radius-sm);
  --vh-input-border:     var(--vh-border);
  --vh-input-bg:         var(--vh-white);
  --vh-input-focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.15);

  /* ── 9c. Cards ── */
  --vh-card-radius:      var(--vh-radius-xl);
  --vh-card-padding:     var(--vh-space-6);
  --vh-card-shadow:      var(--vh-shadow-sm);
  --vh-card-shadow-hover:var(--vh-shadow-hover);
  --vh-card-bg:          var(--vh-white);

  /* ── 9d. Header ── */
  --vh-header-height:    72px;
  --vh-header-bg:        rgba(250, 248, 245, 0.92);

  /* ── 9e. Promo Bar ── */
  --vh-promo-height:     42px;
  --vh-promo-bg:         var(--vh-gradient-h);
  --vh-promo-color:      var(--vh-white);
  --vh-promo-font-size:  var(--vh-text-xs);

  /* ── 9f. Product Cards ── */
  --vh-product-card-ratio: 1 / 1;   /* image aspect ratio — square */
  --vh-product-card-gap:   var(--vh-space-4);
}


/* ─────────────────────────────────────────────────────────────────────
   10. RESPONSIVE BREAKPOINTS (as media queries)

   CSS custom properties can't be used in media queries, so these
   are documented here as reference and used as literal values.

   Breakpoint         Width    Target
   ─────────────────  ───────  ──────────────────────────────────
   --vh-bp-xs         480px    Large phones (landscape)
   --vh-bp-sm         640px    Small tablets
   --vh-bp-md         768px    Tablets
   --vh-bp-lg         1024px   Small desktops / large tablets
   --vh-bp-xl         1280px   Standard desktops
   --vh-bp-2xl        1440px   Large desktops
   --vh-bp-3xl        1920px   Ultra-wide / full-bleed
   ───────────────────────────────────────────────────────────────────── */

/* Mobile-first overrides for spacing and typography at key breakpoints */

@media (max-width: 767px) {
  :root {
    /* Tighter section spacing on mobile */
    --vh-section-py:     var(--vh-space-16);
    --vh-section-py-sm:  var(--vh-space-10);
    --vh-section-py-lg:  var(--vh-space-20);
    --vh-section-gap:    var(--vh-space-8);
    --vh-page-gutter:    var(--vh-space-4);

    /* Scaled-down headings for mobile */
    --vh-text-5xl:       2.5rem;     /* 40px instead of 60px */
    --vh-text-6xl:       3rem;       /* 48px instead of 72px */
    --vh-text-7xl:       3.5rem;     /* 56px instead of 96px */
    --vh-text-4xl:       2.25rem;    /* 36px instead of 48px */
    --vh-text-3xl:       1.875rem;   /* 30px instead of 36px */

    /* Slightly smaller header on mobile */
    --vh-header-height:  64px;
    --vh-grid-gap:       var(--vh-space-4);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --vh-section-py:     var(--vh-space-20);
    --vh-section-py-lg:  var(--vh-space-24);
    --vh-page-gutter:    var(--vh-space-5);
    --vh-text-7xl:       4.5rem;
    --vh-text-6xl:       3.75rem;
  }
}

@media (min-width: 1440px) {
  :root {
    /* More generous spacing on large screens */
    --vh-page-gutter:    var(--vh-space-8);
  }
}


/* ─────────────────────────────────────────────────────────────────────
   11. DARK MODE (future-proofing)

   Tokens ready for dark mode when needed. Currently inactive.
   Uncomment and enable when dark mode is implemented.
   ───────────────────────────────────────────────────────────────────── */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --vh-cream:          #1A1715;
    --vh-linen:          #221F1C;
    --vh-sand:           #2C2825;
    --vh-stone:          #4A4440;
    --vh-warm-gray:      #8A817A;
    --vh-charcoal:       #C4BBB2;
    --vh-espresso:       #E8E0D8;
    --vh-ink:            #FAF8F5;
    --vh-white:          #1A1715;
    --vh-card-bg:        #221F1C;
    --vh-header-bg:      rgba(26, 23, 21, 0.92);
    --vh-overlay:        rgba(0, 0, 0, 0.65);
    --vh-border-color:   rgba(168, 159, 149, 0.15);
    --vh-input-bg:       #221F1C;
    --vh-shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.2);
    --vh-shadow-sm:      0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
    --vh-shadow-md:      0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.15);
    --vh-shadow-lg:      0 12px 32px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2);
  }
}
*/


/* ─────────────────────────────────────────────────────────────────────
   12. UTILITY: VISUALLY HIDDEN
   Screen-reader only content — accessibility essential.
   ───────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────
   13. BREADCRUMB — Unified component (all pages)
   Clean inline breadcrumb with chevron separators.
   ───────────────────────────────────────────────────────────────────── */

nav.vh-breadcrumb {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #8A8A8A;
}

/* — Flat variant (page.php, single.php) — */
nav.vh-breadcrumb a {
  color: #6B6860;
  text-decoration: none;
  transition: color 0.2s ease;
}

nav.vh-breadcrumb a:hover {
  color: #1A1715;
  text-decoration: underline;
}

/* Chevron separator — hides inner text, shows CSS arrow */
nav.vh-breadcrumb .vh-breadcrumb-sep {
  display: inline-flex;
  align-items: center;
  margin: 0 8px;
  font-size: 0;
  line-height: 0;
}

nav.vh-breadcrumb .vh-breadcrumb-sep::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid #B8B5AE;
  border-bottom: 1.5px solid #B8B5AE;
  transform: rotate(-45deg);
}

nav.vh-breadcrumb .vh-breadcrumb-current {
  color: #4A4440;
  font-weight: 600;
}

/* — Modifier: --on-dark — for hero sections with dark backgrounds — */
nav.vh-breadcrumb.vh-breadcrumb--on-dark {
  color: rgba(255, 255, 255, 0.55);
}
nav.vh-breadcrumb.vh-breadcrumb--on-dark a {
  color: rgba(255, 255, 255, 0.7);
}
nav.vh-breadcrumb.vh-breadcrumb--on-dark a:hover {
  color: #fff;
}
nav.vh-breadcrumb.vh-breadcrumb--on-dark .vh-breadcrumb-sep::before {
  border-right-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(255, 255, 255, 0.4);
}
nav.vh-breadcrumb.vh-breadcrumb--on-dark .vh-breadcrumb-current {
  color: #fff;
}

/* — Modifier: --centered — center alignment (used inside hero sections) — */
nav.vh-breadcrumb.vh-breadcrumb--centered {
  justify-content: center;
  margin-bottom: 20px;
}

/* — OL variant (WooCommerce product page) — */
nav.vh-breadcrumb ol {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

nav.vh-breadcrumb ol li {
  display: inline-flex;
  align-items: center;
  list-style: none !important;
  color: #8A8A8A;
  font-size: 13px;
}

nav.vh-breadcrumb ol li + li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid #B8B5AE;
  border-bottom: 1.5px solid #B8B5AE;
  transform: rotate(-45deg);
  margin: 0 10px;
  vertical-align: middle;
}

nav.vh-breadcrumb ol li a {
  color: #6B6860;
  text-decoration: none;
  transition: color 0.2s ease;
}

nav.vh-breadcrumb ol li a:hover {
  color: #1A1715;
  text-decoration: underline;
}

nav.vh-breadcrumb ol li:last-child {
  color: #4A4440;
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════════
   14. Shared Page Layout
   Container, page hero, page title — used by page.php, single.php, etc.
   ═══════════════════════════════════════════════════════════════════════ */

.s-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

.s-page-hero {
  padding: 24px 0;
  background: var(--vh-linen);
  border-bottom: 1px solid var(--vh-sand);
}

.s-page-content {
  padding: 48px 0 80px;
}

.s-page-title {
  font-family: 'Geologica', var(--vh-font-heading), system-ui, sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vh-ink);
  margin: 0 0 var(--vh-space-8, 32px);
}

.s-entry-content {
  font-family: 'Onest', var(--vh-font-body), system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--vh-charcoal);
}

@media (max-width: 767px) {
  .s-container {
    padding: 0 16px;
  }
  .s-page-hero {
    padding: 18px 0;
  }
  .s-page-content {
    padding: 32px 0 60px;
  }
}


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