/* ============================================================
   main.css — Pablo & Ella Wedding Website
   Variables, typography (Special Elite + Courier Prime), reset,
   paper texture, page system, hover-underline base
   ============================================================ */

/* ── CSS Custom Properties ────────────────────────────────── */
:root {
  /* Colors */
  --color-yellow:       #FFD000;
  --color-blue:         #2B4ECC;
  --color-blue-hover:   #4B6AE0;
  --color-red:          #e91526;
  --color-cream:        #EAE5DC;
  --color-page-bg:      #f3f3eb; /* welcome + letter page background */
  --color-ink:          #1C1C1A;
  --color-paper-shadow: #D4CEC4;

  /* Fonts */
  --font-display: 'Arial Rounded MT Bold', 'Arial Rounded MT', Arial, sans-serif;
  --font-body:    'Arial Rounded MT Bold', 'Arial Rounded MT', Arial, sans-serif;

  /* Sizes */
  --size-nav:        30px;
  --size-nav-sm:     22px;
  --size-artist:     24px;
  --size-topbar:     13px;
  --size-letter:     19px;
  --size-panel-body: 17px;
  --size-panel-head: 21px;

  /* Layout */
  --letter-max:      680px;
  --letter-pad-top:  80px;
  --letter-pad-side: 60px;

  /* Transitions */
  --t-page:  280ms ease-in-out;
  --t-hover: 160ms ease;
}

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

html, body { width: 100%; height: 100%; overflow: hidden; }

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; cursor: pointer; color: inherit; }

/* ── Paper Texture ────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.038;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ── Page System ──────────────────────────────────────────── */
.page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-page);
  /* overflow: hidden — NOT auto. overflow:auto on a position:fixed element
     breaks mix-blend-mode on iOS Safari. Scrolling is handled by inner wrappers. */
  overflow: hidden;
}

/* Inner scroll wrapper used by pages that need to scroll (letter pages) */
.page-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.page.is-active { opacity: 1; pointer-events: all; }

/* ── Hand Underline base ─────────────────────────────────── */
/* Actual wiggle SVG injected by hover-underline.js */
.hand-underline {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.hand-underline .underline-svg {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 80ms ease;
}

.hand-underline:hover .underline-svg { opacity: 1; }


/* ── Utility ──────────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}