/* ── style.css ──────────────────────────────────────────────────────────────
   Mattea & Peter · Wedding Website · Malta · 31st May 2026

   Design philosophy: "A luxury wedding stationery suite, translated to the web."
   Every detail should feel like it was hand-crafted by a professional wedding
   designer — generous white space, confident typography, delicate watercolour
   colour accents, and subtle motion that feels like paint being placed on paper.

   ────────────────────────────────────────────────────────────────────────────
   SECTIONS:
     1.  CSS Custom Properties (variables)
     2.  Reset & base styles
     3.  Layout utilities
     4.  Navigation bar
     5.  Flash messages
     6.  Hero section
     7.  Floral dividers & ornamental elements
     8.  Sections & page headers
     9.  Buttons
    10.  Info cards (home page)
    11.  Our Story timeline (home page)
    12.  RSVP form
    13.  Schedule timeline
    14.  Travel page
    15.  Gallery
    16.  Admin dashboard
    17.  Footer
    18.  Responsive (mobile)
   ────────────────────────────────────────────────────────────────────────────
*/


/* ════════════════════════════════════════════════════════════════════════════
   0. LOCAL FONTS
   ════════════════════════════════════════════════════════════════════════════
   Gill Sans is served from our own /static/fonts/ folder rather than a CDN.
   The single .ttc (TrueType Collection) file contains all weights and styles,
   so one @font-face declaration covers the full range.
*/

/* Le Jour Script — calligraphic script for the couple's name displays */
@font-face {
  font-family: 'Le Jour Script';
  src: url('../fonts/LeJourScript.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Gill Sans — clean, classic sans-serif for body text and UI labels.
   The .ttc (TrueType Collection) file contains all weights and styles. */
@font-face {
  font-family: 'Gill Sans';
  src: url('../fonts/GillSans.ttc') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gill Sans';
  src: url('../fonts/GillSans.ttc') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


/* ════════════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
   ════════════════════════════════════════════════════════════════════════════
   Define all brand values ONCE here. Use them everywhere with var(--name).
   Changing a colour here instantly updates the entire site.
*/
:root {
  /* ── Brand coastal teal palette ────────────────────────────────────────────
     New brand identity: Romantic · Refined · Coastal
     Mattea & Peter · 31st May 2026 · Malta
     Colour source: official brand guidelines 2026
  ── */

  /* Core palette — from the brand guidelines colour swatch */
  --mint-pale:    #E0F7FA;   /* Ice blue (pale) — section backgrounds, form tints */
  --mint:         #4DD0E1;   /* Sky Blue — dividers, borders, soft accents         */
  --blue-sky:     #00ACC1;   /* Aqua — secondary interactive accent               */
  --teal:         #19666F;   /* Primary Teal — buttons, links, active states      */
  --teal-deep:    #004D54;   /* Coastal Navy — hover states, footer, strong text  */
  --blue-deep:    #006064;   /* Deep Teal — strong headings & hero text           */

  /* In the new coastal brand, gold is replaced by aqua accents.
     We keep the same variable *names* so all existing code still works —
     only the colour values change. */
  --gold:         #00ACC1;   /* → Aqua  — replaces gold for dividers & accents   */
  --gold-light:   #B2EBF2;   /* → Ice Blue — replaces pale gold for highlights   */

  /* ── Neutral palette ───────────────────────────────────────────────────── */
  --white:        #FFFFFF;
  --cream:        #FAFFFE;   /* Near-white with a breath of teal — page bg        */
  --cream-tinted: #F0FAFB;   /* Light ice blue — alternate section backgrounds   */
  --cream-warm:   #E8F8F9;   /* Coastal ice — welcome section background          */
  --card-bg:      #FFFFFF;   /* Pure white for card backgrounds                   */
  --border:       #B2EBF2;   /* Ice blue border line                              */
  --border-pale:  #E0F7FA;   /* Very light ice — subtle separators                */

  /* ── Text colours ──────────────────────────────────────────────────────── */
  --text:         #004D54;   /* Coastal Navy — all headings & important text      */
  --text-light:   #006064;   /* Deep Teal — body text, captions                  */
  --text-muted:   #00838F;   /* Mid teal — hints, placeholders, fine print        */

  /* ── Typography ────────────────────────────────────────────────────────── */

  /* Le Jour Script: flowing calligraphic font used for the couple's name.
     Used for: hero names, navbar brand, footer names */
  --font-script:  'Le Jour Script', 'Pinyon Script', cursive;

  /* The Seasons (Adobe Fonts): elegant serif for all headings.
     Cormorant Garamond kept as fallback. */
  --font-heading: 'the-seasons', 'Cormorant Garamond', Georgia, serif;

  /* Gill Sans: clean, classic sans-serif for body text and UI labels */
  --font-body:    'Gill Sans', 'Helvetica Neue', Arial, sans-serif;

  /* ── Shadows & depth ───────────────────────────────────────────────────── */
  /* Shadows now use Coastal Navy (0, 77, 84) instead of the old navy */
  --shadow-xs:    0 1px 4px rgba(0, 77, 84, 0.05);
  --shadow:       0 4px 20px rgba(0, 77, 84, 0.08);
  --shadow-md:    0 8px 32px rgba(0, 77, 84, 0.12);
  --shadow-hover: 0 12px 40px rgba(0, 77, 84, 0.16);
  --shadow-gold:  0 4px 24px rgba(0, 172, 193, 0.30);  /* now: aqua glow */

  /* ── Shape & motion ────────────────────────────────────────────────────── */
  --radius:       10px;
  --radius-lg:    16px;
  --transition:   0.25s ease;
  --transition-slow: 0.4s ease;
}


/* ════════════════════════════════════════════════════════════════════════════
   2. RESET & BASE STYLES
   ════════════════════════════════════════════════════════════════════════════
   Remove browser default margins/padding and establish consistent defaults.
*/

/* "box-sizing: border-box" is the most important reset. It makes width and
   height INCLUDE the padding, which is far more intuitive. Without this,
   adding padding to an element would make it grow unexpectedly. */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Smooth scrolling for anchor links (e.g. # links to sections) */
html {
  scroll-behavior: smooth;
}

/* Base body: set the font, background, and text colour for the entire site */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background-color: var(--cream);
  /* Prevent any element from accidentally causing horizontal scroll */
  overflow-x: hidden;
  /* Subtle noise texture for warmth — mimics watercolour paper grain */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* All headings use our brand serif — Cormorant Garamond */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--text);
}

/* Links: teal by default, darken on hover */
a {
  color: var(--teal);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--teal-deep);
  text-decoration: underline;
}

/* Images should never overflow their containers */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent horizontal overflow at the main content level too */
main {
  overflow-x: hidden;
}


/* ════════════════════════════════════════════════════════════════════════════
   3. LAYOUT UTILITIES
   ════════════════════════════════════════════════════════════════════════════
   Reusable helpers used across many pages.
*/

/* Centre-align text — used on the hero and welcome sections */
.text-center { text-align: center; }

/* The main content wrapper — limits width and centres horizontally.
   The 1.5rem side padding stops content touching screen edges on mobile. */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* A narrower container for forms and long prose — easier to read */
.container--narrow {
  max-width: 700px;
}

/* Consistent vertical breathing room between major page sections */
.section {
  padding: 5.5rem 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   4. NAVIGATION BAR
   ════════════════════════════════════════════════════════════════════════════
   Clean white bar that sticks to the top of the viewport as you scroll.
   The logo on the left, navigation links on the right.
*/

/* position: sticky keeps it pinned at the top during scroll.
   z-index: 200 ensures it always sits above all page content.

   The navbar starts fully transparent on page load — no background, no border.
   A small JavaScript snippet in base.html watches the scroll position and
   adds the class .navbar--scrolled once the user scrolls past 60px, which
   triggers the frosted-glass style below. The CSS transition makes this smooth.
*/
.navbar {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: none;
  /* Smooth transition between transparent and frosted-glass states */
  transition:
    background   0.4s ease,
    border-color 0.4s ease,
    box-shadow   0.4s ease,
    backdrop-filter 0.4s ease;
}

/* This class is added by JS once the user scrolls down — frosted glass effect */
.navbar--scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-pale);
  box-shadow: 0 1px 20px rgba(0, 77, 84, 0.06);
}

/*
  Three-column grid: [left links] [centred logo] [right links]
  All three columns are auto-sized and the whole group is centred,
  so the logo sits in the middle with equal spacing on both sides.
*/
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.75rem;
  display: grid;
  /* 1fr auto 1fr: left and right columns are always equal width,
     so the logo column is always at the exact horizontal centre */
  grid-template-columns: 1fr auto 1fr;
  column-gap: 2.25rem;
  align-items: center;
  height: 72px;
}

/* Circular logo — centrepiece of the navbar */
.nav-logo {
  height: 58px;
  width: 58px;
  object-fit: cover;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  transition: transform var(--transition), border-color var(--transition);
}
.nav-brand:hover .nav-logo {
  transform: scale(1.05);
  border-color: var(--teal);
}

/*
  Nav entrance animation — items fade in and slide down from above.
  Logo animates first (0.10s delay), then left links, then right links
  sweep left-to-right across the bar.
*/
@keyframes nav-enter {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0);     }
}

/* Logo — centred home link */
.nav-brand {
  justify-self: center;
  display: flex;
  align-items: center;
  opacity: 0;
  animation: nav-enter 0.40s cubic-bezier(0.22, 1, 0.36, 1) 0.10s forwards;
}

/* Horizontal list of navigation links */
.nav-links {
  list-style: none;
  display: flex;
  gap: 2.25rem;
  align-items: center;
  margin: 0; padding: 0;
}


/* Links stagger in: left side first, then right — a left-to-right sweep */
.nav-links li {
  opacity: 0;
  animation: nav-enter 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.nav-links--left  { justify-content: flex-end;   } /* push links to right edge, towards logo */
.nav-links--right { justify-content: flex-start;  } /* push links to left edge, towards logo */
.nav-links--left  li:nth-child(1) { animation-delay: 0.30s; }
.nav-links--left  li:nth-child(2) { animation-delay: 0.50s; }
.nav-links--right li:nth-child(1) { animation-delay: 0.70s; }
.nav-links--right li:nth-child(2) { animation-delay: 0.90s; }

/* Each nav link: small, uppercase, tracked — feels like luxury stationery labels */
.nav-links a {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  text-decoration: none;
  padding-bottom: 4px;
  /* The underline slides in from the left on hover */
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--teal);
  border-bottom-color: var(--teal);
  text-decoration: none;
}


/* ════════════════════════════════════════════════════════════════════════════
   5. FLASH MESSAGES
   ════════════════════════════════════════════════════════════════════════════
   One-time messages that appear after form submissions or login attempts.
   They vanish when the page reloads, so they're called "flash" messages.
*/
.flash-container {
  max-width: 1100px;
  margin: 1.25rem auto 0;
  padding: 0 1.75rem;
}

.flash {
  padding: 1rem 1.4rem;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Error flash: soft blue background with a teal left border */
.flash--error {
  background: #EAF4F8;
  color: #1A4A5A;
  border-left: 4px solid var(--teal);
}

/* Success flash: soft mint background with a mint left border */
.flash--success {
  background: #E6F6F4;
  color: #1A4A40;
  border-left: 4px solid var(--mint);
}


/* ════════════════════════════════════════════════════════════════════════════
   6. HERO SECTION
   ════════════════════════════════════════════════════════════════════════════
   The full-height opening panel of the home page. This is the most important
   section — it sets the entire emotional tone of the site.

   The background is a layered radial gradient that mimics a watercolour wash:
   pure white at the centre (where the logo sits), fading to warm cream at
   the edges, with soft mint/teal washes in the corners.
*/

/* The outer hero container takes up almost the full viewport height */
.hero {
  position: relative;
  min-height: 94vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;

  /* Multi-layer gradient: bright white centre → faint ice blue at the edges.
     This creates the luminous, coastal-morning quality of the new brand.
     rgba(178, 235, 242) is Ice Blue; rgba(77, 208, 225) is Sky Blue. */
  background:
    radial-gradient(ellipse 70% 80% at 50% 30%, rgba(255,255,255,1) 0%, transparent 65%),
    radial-gradient(ellipse 100% 60% at 20% 100%, rgba(178, 235, 242, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 80% 90%, rgba(77, 208, 225, 0.25) 0%, transparent 55%),
    linear-gradient(160deg, #FDFEFF 0%, #F5FDFE 45%, #EDF9FB 100%);
}

/* The decorative overlay adds an extra layer of depth — a gentle centred glow
   that draws the eye to the content and away from the edges. */
.hero-overlay {
  position: absolute;
  inset: 0;
  /* A soft aqua radial glow centred on the logo area — coastal light quality */
  background:
    radial-gradient(ellipse 60% 55% at 50% 38%, rgba(77, 208, 225, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 30% 20% at 50% 60%, rgba(0, 172, 193, 0.05) 0%, transparent 60%);
  pointer-events: none;   /* The overlay MUST NOT block clicks on buttons below */
}

/* Subtle decorative corner watercolour blobs — purely ornamental */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
/* Top-left corner watercolour wash — ice blue coastal light */
.hero::before {
  width: 500px;
  height: 500px;
  top: -180px;
  left: -180px;
  background: radial-gradient(circle, rgba(178, 235, 242, 0.38) 0%, transparent 65%);
}
/* Bottom-right corner watercolour wash — aqua coastal depth */
.hero::after {
  width: 400px;
  height: 400px;
  bottom: -120px;
  right: -100px;
  background: radial-gradient(circle, rgba(0, 172, 193, 0.22) 0%, transparent 65%);
}

/* The actual content — sits on top of all the overlay layers (z-index: 1) */
.hero-content {
  position: relative;
  z-index: 1;
  padding: 4rem 2rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Fade the whole hero in on page load — feels like paper drying */
  animation: hero-enter 1.2s ease both;
}

/* The hero section fades in gently from slightly below */
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── The large logo wreath ───────────────────────────────────────────────
   This is THE hero element. It should feel special — prominent, glowing,
   gently floating like it's suspended in Mediterranean sunlight. */
.hero-logo {
  width: 200px;
  height: 200px;
  object-fit: contain;
  border-radius: 50%;
  margin-bottom: 2.5rem;
  /* Multi-layer shadow: a soft teal glow + a faint gold warmth underneath */
  /* Aqua glow replaces the old teal+gold filter — coastal, not warm */
  filter:
    drop-shadow(0 8px 30px rgba(0, 172, 193, 0.25))
    drop-shadow(0 2px 8px rgba(77, 208, 225, 0.15));
  /* Slow, serene floating animation */
  animation: hero-logo-float 7s ease-in-out infinite;
}

/* The logo gently rises and falls — like a flower on a gentle breeze */
@keyframes hero-logo-float {
  0%, 100% { transform: translateY(0px) scale(1); }
  50%       { transform: translateY(-10px) scale(1.01); }
}

/* "We're getting married" — the small eyebrow line above the names */
.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1rem;
  /* Fade in slightly after the logo */
  animation: hero-enter 1.2s 0.3s ease both;
}

/* The couple's names — the single most important typographic moment on the site.
   Uses Pinyon Script: a flowing calligraphic font that matches the wedding
   The Seasons is an elegant serif that reads beautifully at display sizes. */
.hero-names {
  font-family: var(--font-heading);
  font-size: clamp(3.2rem, 10vw, 7rem);
  font-weight: 400;
  font-style: normal;  /* The font is inherently calligraphic — no CSS italic needed */
  color: var(--teal-deep);
  line-height: 1.1;
  margin-bottom: 1.75rem;
  letter-spacing: 0.01em;
  /* The names slide in after the eyebrow */
  animation: hero-enter 1.2s 0.5s ease both;
}

/* A delicate gold horizontal rule between the names and the date */
.hero-divider {
  /* The line itself */
  width: 80px;
  height: 1px;
  margin: 0 auto 1.75rem;
  position: relative;
  /* Gradient fades from transparent → gold → transparent */
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  /* Two tiny gold diamond shapes at either end, created with pseudo-elements */
  animation: hero-enter 1.2s 0.7s ease both;
}
/* Small dot at the left end of the divider line */
.hero-divider::before,
.hero-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 5px;
  height: 5px;
  background: var(--gold);
  opacity: 0.8;
}
.hero-divider::before { left: 8px; }
.hero-divider::after  { right: 8px; }

/* The wedding date */
.hero-date {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--teal-deep);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
  animation: hero-enter 1.2s 0.8s ease both;
}

/* The venue name — uppercase, small, tracked */
.hero-venue {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-bottom: 3rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  animation: hero-enter 1.2s 0.9s ease both;
}


/* ════════════════════════════════════════════════════════════════════════════
   7. FLORAL DIVIDERS & ORNAMENTAL ELEMENTS
   ════════════════════════════════════════════════════════════════════════════
   These small decorative elements break up sections and add character.
*/

/* Unicode floral characters in teal — the ❀ ✿ ❀ between sections */
.floral-divider {
  font-size: 1.15rem;
  color: var(--mint);
  letter-spacing: 0.7em;
  margin: 2rem 0;
  opacity: 0.7;
  display: block;
}


/* ════════════════════════════════════════════════════════════════════════════
   8. SECTIONS & PAGE HEADERS
   ════════════════════════════════════════════════════════════════════════════
   Shared styles for the header blocks at the top of each page (RSVP, Schedule,
   Travel, Gallery) and section titles used within pages.
*/

/* The banner header at the top of inner pages (not the home page hero) */
.page-header {
  text-align: center;
  padding: 4.5rem 0 3.5rem;
  /* A soft wash of cream-to-mint that feels distinct from the main body */
  background:
    radial-gradient(ellipse 80% 80% at 50% 0%, rgba(194, 234, 229, 0.2) 0%, transparent 70%),
    var(--cream);
  border-bottom: 1px solid var(--border-pale);
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}

/* Soft decorative corner blob on page headers */
.page-header::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  top: -100px;
  right: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 206, 198, 0.18) 0%, transparent 65%);
  pointer-events: none;
}

.page-title {
  font-family: var(--font-heading);
  /* Scales from 2.4rem on phones up to 3.8rem on desktop */
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  font-weight: 500;
  font-style: italic;
  color: var(--text);
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}

.page-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* Section titles used within the home page welcome and story sections */
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 500;
  font-style: italic;
  margin-bottom: 1.5rem;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ── Welcome section (home page) ─────────────────────────────────────────
   A warm cream panel that comes immediately after the hero. */
.welcome-section {
  background: var(--cream-warm);
  border-top: 1px solid var(--border-pale);
  border-bottom: 1px solid var(--border-pale);
  position: relative;
  overflow: hidden;
}
/* Subtle centred radial glow in the welcome section — ice blue coastal light */
.welcome-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(178, 235, 242, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

/* The welcome body text paragraphs */
.welcome-text {
  font-size: 1.1rem;
  max-width: 620px;
  margin: 0 auto 1.25rem;
  color: var(--text-light);
  line-height: 1.9;
  position: relative;   /* sits above the ::before glow */
  z-index: 1;
}

.welcome-text strong {
  color: var(--teal-deep);
  font-weight: 700;
}


/* ════════════════════════════════════════════════════════════════════════════
   9. BUTTONS
   ════════════════════════════════════════════════════════════════════════════
   All buttons share the .btn base class. Modifier classes change the visual.
   All buttons are pill-shaped (border-radius: 50px) — a nod to the organic,
   rounded quality of watercolour shapes.
*/

/* Base button: shared properties for all button variants */
.btn {
  display: inline-block;
  padding: 0.85rem 2.4rem;
  /* pill shape */
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
  /* Prevent buttons from having default browser focus outlines */
  outline: none;
  /* Inline-flex so icon + text can sit side by side if needed */
  white-space: nowrap;
}

/* ── Primary button: solid teal fill, white text ── */
.btn--primary {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
  /* Depth shadow that matches the teal colour */
  box-shadow: 0 4px 16px rgba(58, 143, 160, 0.25);
}
.btn--primary:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: var(--white);
  text-decoration: none;
  /* Lift effect — the button floats up 2px on hover */
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(31, 110, 118, 0.35);
}

/* ── Secondary button: teal outline, transparent fill ── */
.btn--secondary {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
}
.btn--secondary:hover {
  background: var(--mint-pale);
  color: var(--teal-deep);
  border-color: var(--teal-deep);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(58, 143, 160, 0.12);
}

/* ── Ghost button: minimal, for low-priority actions ── */
.btn--ghost {
  background: transparent;
  color: var(--text-light);
  border-color: var(--border);
}
.btn--ghost:hover {
  background: var(--cream-tinted);
  color: var(--text);
  border-color: var(--teal);
  text-decoration: none;
}

/* Size variants */
.btn--large { padding: 1.1rem 3rem; font-size: 0.76rem; letter-spacing: 0.18em; }
.btn--small { padding: 0.5rem 1.25rem; font-size: 0.68rem; }

/* A small breathing gap when buttons appear inside section text */
.section .btn {
  margin-top: 1.25rem;
}

/* ── RSVP Heartbeat pulse ──────────────────────────────────────────────────
   .btn--rsvp-pulse is the pulsing glow on the hero RSVP button.
   The @keyframes animation and the class itself are defined in home.html
   in an inline <style> block — that keeps the animation co-located with
   the only button that uses it, making it easy to find and tweak.
   See home.html → bottom <style> block → @keyframes rsvp-pulse.

   The effect: box-shadow creates a teal ring that expands outward from
   the button and fades to transparent — like a heartbeat pulse or sonar
   ripple. It repeats every 2.4 seconds, forever.
*/
.btn--rsvp-pulse {
  /* Base declaration here so the class name exists in style.css for tooling.
     The actual animation property is set in home.html's inline <style>. */
}


/* ════════════════════════════════════════════════════════════════════════════
   10. INFO CARDS (Home Page)
   ════════════════════════════════════════════════════════════════════════════
   Three summary cards for Date, Venue, and RSVP deadline. CSS Grid makes them
   lay out in a row on desktop and stack on mobile automatically.
*/

/* The section wrapping all three cards — alternating background tint */
.info-cards-section {
  background: var(--white);
  border-top: 1px solid var(--border-pale);
}

/* CSS Grid: auto-fit means columns wrap automatically when there's not enough
   room. minmax(240px, 1fr) means each card is at least 240px wide. */
.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.75rem;
}

/* Each individual info card */
.info-card {
  background: var(--card-bg);
  border: 1px solid var(--border-pale);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
}

/* A gradient accent line at the very top of each card — the "watercolour stroke" */
.info-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  /* The gradient sweeps through the full brand palette */
  background: linear-gradient(90deg, var(--mint), var(--teal), var(--blue-sky));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Cards lift on hover with a deeper shadow */
.info-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-5px);
}

/* The emoji icon at the top of each card */
.info-card__icon {
  font-size: 2.4rem;
  margin-bottom: 1.1rem;
  display: block;
}

/* Card title: Cormorant Garamond italic */
.info-card__title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 500;
  font-style: italic;
  margin-bottom: 0.85rem;
  color: var(--text);
}

/* Card body text */
.info-card p {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Links inside cards */
.info-card a {
  color: var(--teal);
  font-weight: 700;
  transition: color var(--transition);
}
.info-card a:hover {
  color: var(--teal-deep);
  text-decoration: underline;
}


/* ════════════════════════════════════════════════════════════════════════════
   11. OUR STORY TIMELINE (Home Page)
   ════════════════════════════════════════════════════════════════════════════
   A vertical timeline running down the page showing the couple's milestones.
   Layout per item: [date] | [spine dot] | [content]

   The spine is a vertical gradient line drawn using CSS pseudo-elements.
   Each item fades in with a staggered animation delay, creating a pleasing
   cascade as the page loads.
*/

/* The story section itself: pure white to contrast with the cream body */
.story-section {
  background: var(--white);
  border-top: 1px solid var(--border-pale);
  border-bottom: 1px solid var(--border-pale);
}

/* The centred timeline column */
.story-timeline {
  position: relative;
  padding: 0.5rem 0 3rem;
  max-width: 800px;
  margin: 0 auto;
}

/* The continuous vertical gradient line — the "spine" of the timeline.
   ::before creates a pseudo-element (a visual element with no HTML) that
   draws the line. It's absolutely positioned to run the full height. */
.story-timeline::before {
  content: '';
  position: absolute;
  /* Shifted 5px left so the 10px-wide SVG tile is centred at 156px */
  left: 151px;
  top: 0;
  bottom: 0;
  width: 10px;
  /*
    Squiggly spine: a tiny SVG wave tile (10×20px) that repeats vertically.
    The SVG path draws one full sine-wave cycle using cubic bezier curves:
      M5,0          — start at centre-top
      C9,5 1,10 5,10 — curve right then left to centre-middle
      C9,15 1,20 5,20 — curve right then left to centre-bottom
    The %23 is a URL-encoded # (needed inside a data URI).
  */
  /* Squiggly spine — colour updated to Sky Blue #4DD0E1 (%234DD0E1 URL-encoded) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath d='M5,0 C9,5 1,10 5,10 C9,15 1,20 5,20' stroke='%234DD0E1' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: 10px 20px;
}

/* Each row in the timeline */
.story-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 3.25rem;
  position: relative;
  /* Starts invisible and slightly below final position */
  opacity: 0;
  transform: translateY(24px);
  /* Fades in on load — see stagger delays below */
  animation: story-fade-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Stagger the animation: each item starts 0.12s later than the previous one.
   This creates a cascade effect where items appear one after another. */
.story-item:nth-child(1) { animation-delay: 0.10s; }
.story-item:nth-child(2) { animation-delay: 0.22s; }
.story-item:nth-child(3) { animation-delay: 0.34s; }
.story-item:nth-child(4) { animation-delay: 0.46s; }
.story-item:nth-child(5) { animation-delay: 0.58s; }
.story-item:nth-child(6) { animation-delay: 0.70s; }
.story-item:nth-child(7) { animation-delay: 0.82s; }

/* The fade-in animation: rise from 24px below into final position */
@keyframes story-fade-in {
  to { opacity: 1; transform: translateY(0); }
}

/* The date label — sits to the left of the spine line */
.story-date {
  width: 140px;
  flex-shrink: 0;   /* Never shrink, always take up 140px */
  text-align: right;
  padding-right: 1.6rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 600;
  color: var(--teal);
  padding-top: 0.2rem;
  line-height: 1.3;
}

/* The dot that sits exactly on the spine line */
.story-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--teal);
  flex-shrink: 0;
  margin-top: 0.35rem;
  position: relative;
  /* The -6px nudge centres the 14px dot on the 2px spine line */
  left: -6px;
  transition: background var(--transition-slow), border-color var(--transition),
              box-shadow var(--transition);
  /* Small drop shadow for depth */
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 2px 8px rgba(58, 143, 160, 0.15);
}

/* The dot fills with teal colour when you hover over the whole row */
.story-item:hover .story-dot {
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(25, 102, 111, 0.15), 0 2px 12px rgba(25, 102, 111, 0.25);
}

/* Special aqua dot for the final wedding entry — replaces the old gold dot.
   var(--gold) now resolves to Aqua (#00ACC1) via the updated :root variables. */
.story-dot--wedding {
  width: 22px;
  height: 22px;
  background: var(--gold);      /* → Aqua */
  border-color: var(--gold);    /* → Aqua */
  /* The -10px nudge centres this larger 22px dot on the spine */
  left: -10px;
  /* A layered aqua glow: inner tight ring + outer diffused ring */
  box-shadow:
    0 0 0 4px rgba(0, 172, 193, 0.22),
    0 0 0 7px rgba(0, 172, 193, 0.08),
    0 4px 16px rgba(0, 172, 193, 0.32);
  /* Gentle pulse glow on the wedding dot */
  animation: wedding-dot-glow 3s ease-in-out infinite;
}

/* The aqua wedding dot breathes with a soft coastal glow */
@keyframes wedding-dot-glow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0,172,193,0.22), 0 0 0 7px rgba(0,172,193,0.08), 0 4px 16px rgba(0,172,193,0.32); }
  50%       { box-shadow: 0 0 0 6px rgba(0,172,193,0.30), 0 0 0 12px rgba(0,172,193,0.06), 0 6px 24px rgba(0,172,193,0.42); }
}

/* The text content to the right of the dot */
.story-content {
  padding-left: 1.85rem;
  flex: 1;
  padding-bottom: 0.5rem;
}

.story-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.story-desc {
  color: var(--text-light);
  font-size: 0.97rem;
  line-height: 1.75;
}

/* The final wedding entry gets a highlighted card treatment —
   coastal ice blue gradient instead of the old warm gold. */
.story-item--wedding .story-content {
  /* Coastal gradient: faint ice blue → white */
  background: linear-gradient(135deg, #E8F8FA, #FFFFFF);
  border: 1px solid rgba(0, 172, 193, 0.2);
  /* An aqua left border accent — the most important stroke on the page.
     var(--gold) now resolves to Aqua so this updates automatically. */
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 172, 193, 0.08);
}

.story-item--wedding .story-title {
  color: var(--teal-deep);
  font-size: 1.45rem;
}

/* The date for the wedding entry is gold, not teal */
.story-item--wedding .story-date {
  color: var(--gold);
}


/* ════════════════════════════════════════════════════════════════════════════
   12. RSVP FORM
   ════════════════════════════════════════════════════════════════════════════
   The form where guests submit their RSVP. Clean, spacious, elegant.
*/

/* The white card wrapping the form fields */
.rsvp-form {
  background: var(--card-bg);
  border: 1px solid var(--border-pale);
  border-radius: var(--radius-lg);
  padding: 3rem 2.75rem;
  box-shadow: var(--shadow-md);
  margin-top: 2.5rem;
  /* Gradient top accent — same as info cards */
  position: relative;
  overflow: hidden;
}
.rsvp-form::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mint), var(--teal), var(--blue-sky));
}

/* Space between each form field group */
.form-group {
  margin-bottom: 2rem;
}

/* Labels above each field: small, uppercase, tracked — like a stationery label */
.form-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.55rem;
}

/* The little red/teal asterisk marking required fields */
.required { color: var(--teal); }

/* Text inputs and textareas */
.form-input,
.form-textarea {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
/* On focus (when the user clicks into the field), the border turns teal
   and a soft glow appears — makes it clear which field is active */
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(58, 143, 160, 0.12);
}

/* A small number input (for "how many guests?") */
.form-input--small { max-width: 100px; }

/* Resizable textarea for dietary notes etc. */
.form-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

/* Small hint text below a field */
.form-hint {
  font-size: 0.83rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
  line-height: 1.5;
}

/* Pill-style radio button options (Yes / No attendance) */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.6rem;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  padding: 0.7rem 1.5rem;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  font-size: 0.95rem;
  transition: border-color var(--transition), background var(--transition),
              box-shadow var(--transition);
}
.radio-label:hover {
  border-color: var(--teal);
  background: var(--mint-pale);
  box-shadow: 0 2px 8px rgba(58, 143, 160, 0.1);
}

/* Hide the native browser radio button — we replace it with .radio-custom */
.radio-label input[type="radio"] { position: absolute; opacity: 0; width: 0; }

/* Our custom circular dot inside the radio button */
.radio-custom {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  transition: border-color var(--transition), background var(--transition);
  flex-shrink: 0;
}
/* When the radio is checked, the custom dot fills with teal */
.radio-label input[type="radio"]:checked ~ .radio-custom {
  border-color: var(--teal);
  background: var(--teal);
  box-shadow: inset 0 0 0 3px var(--white);
}
/* When the radio is checked, the whole pill gets a mint background */
.radio-label:has(input[type="radio"]:checked) {
  border-color: var(--teal);
  background: var(--mint-pale);
}

/* ── Thank-you confirmation page ──────────────────────────────────────────
   The page shown after a successful RSVP submission. */
.thanks-icon {
  font-size: 4.5rem;
  margin: 2.5rem 0 1.25rem;
  display: block;
}
.thanks-message {
  margin: 1.75rem 0;
}
.thanks-message p {
  margin-bottom: 0.85rem;
  font-size: 1.05rem;
  color: var(--text-light);
  line-height: 1.8;
}


/* ════════════════════════════════════════════════════════════════════════════
   13. SCHEDULE TIMELINE (Schedule Page)
   ════════════════════════════════════════════════════════════════════════════
   A timeline showing the order of events on the wedding day: ceremony,
   drinks reception, dinner, speeches, etc.
   Same visual language as the story timeline but slightly more compact.
*/

/* The timeline wrapper */
.timeline {
  position: relative;
  padding: 1rem 0;
  max-width: 680px;
  margin: 0 auto;
}

/* Vertical spine line running through the timeline */
.timeline::before {
  content: '';
  position: absolute;
  /* Shifted 5px left so the 10px-wide SVG tile is centred at 130px */
  left: 125px;
  top: 0;
  bottom: 0;
  width: 10px;
  /* Same squiggly SVG tile, in Aqua #00ACC1 (%2300ACC1 URL-encoded) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath d='M5,0 C9,5 1,10 5,10 C9,15 1,20 5,20' stroke='%2300ACC1' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: 10px 20px;
}

/* Each event row */
.timeline-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2.75rem;
  position: relative;
}

/* The time label to the left of the spine */
.timeline-time {
  width: 110px;
  flex-shrink: 0;
  text-align: right;
  padding-right: 1.5rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--teal);
  font-weight: 600;
  padding-top: 0.12rem;
  line-height: 1.3;
}

/* The filled dot sitting on the spine */
.timeline-marker {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--teal);
  border: 3px solid var(--white);   /* white ring so dot stands out on the spine */
  /* A teal ring around the border */
  box-shadow: 0 0 0 2px var(--teal);
  flex-shrink: 0;
  margin-top: 0.3rem;
  position: relative;
  /* The -5.5px nudge centres this 13px dot on the 1.5px spine */
  left: -5.5px;
  transition: background var(--transition), box-shadow var(--transition);
}
.timeline-item:hover .timeline-marker {
  background: var(--teal-deep);
  box-shadow: 0 0 0 2px var(--teal-deep), 0 0 12px rgba(0, 77, 84, 0.3);
}

/* The event text to the right of the dot */
.timeline-content {
  padding-left: 1.6rem;
  flex: 1;
}

.timeline-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.timeline-desc {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.65;
}


/* ════════════════════════════════════════════════════════════════════════════
   14. TRAVEL PAGE
   ════════════════════════════════════════════════════════════════════════════
   Information about how to get to Malta, where to stay, etc.
   Uses a card-based layout with a grid for hotels.
*/

/* Each major travel section (Getting Here, Hotels, etc.) */
.travel-block {
  margin-bottom: 4rem;
}

/* The sub-heading within each travel block (e.g. "Getting to Malta") */
.travel-heading {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-style: italic;
  font-weight: 500;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  /* A subtle gradient underline instead of a solid border */
  border-bottom: 1px solid var(--border-pale);
  color: var(--text);
  position: relative;
}
/* A short gradient accent line below the heading text */
.travel-heading::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--mint));
  border-radius: 2px;
}

/* Individual travel info cards (e.g. flight info, taxi info) */
.travel-card {
  background: var(--card-bg);
  border: 1px solid var(--border-pale);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-xs);
  margin-bottom: 1rem;
  transition: box-shadow var(--transition);
}
.travel-card:hover {
  box-shadow: var(--shadow);
}

.travel-card h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.65rem;
  color: var(--teal-deep);
}

/* 2-column grid for side-by-side travel options */
.travel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
}

/* Grid for hotel recommendation cards */
.hotel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

/* Individual hotel recommendation card */
.hotel-card {
  background: var(--card-bg);
  border: 1px solid var(--border-pale);
  /* Thicker top accent border — the same gradient stripe as info cards */
  border-top: 3px solid var(--mint);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), transform var(--transition);
}
.hotel-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.hotel-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.6rem;
  color: var(--text);
}
.hotel-distance, .hotel-price {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  line-height: 1.5;
}
.hotel-notes {
  font-size: 0.92rem;
  margin: 0.85rem 0 0;
  color: var(--text);
  line-height: 1.6;
}

/* Small italic fine-print note */
.travel-note {
  font-size: 0.83rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.6;
}


/* ════════════════════════════════════════════════════════════════════════════
   15. GALLERY
   ════════════════════════════════════════════════════════════════════════════
   A responsive photo grid that fills with couple photos.
   Currently shows a placeholder when the gallery is empty.
*/

/* Responsive masonry-style grid */
.photo-grid {
  display: grid;
  /* Fill as many 280px+ columns as fit, then wrap to the next row */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
}

/* Each photo tile — fixed aspect ratio keeps all thumbnails the same shape */
.photo-item {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* 4:3 aspect ratio — landscape photo proportions */
  aspect-ratio: 4 / 3;
  transition: box-shadow var(--transition);
}
.photo-item:hover {
  box-shadow: var(--shadow-md);
}

.photo-img {
  width: 100%;
  height: 100%;
  /* cover: fills the box, crops the edges rather than squishing the photo */
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Slight zoom on hover — feels interactive and modern */
.photo-item:hover .photo-img { transform: scale(1.06); }

/* The placeholder shown when no photos have been uploaded yet */
.gallery-empty {
  padding: 5rem 2rem;
  background: var(--card-bg);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.gallery-empty__icon {
  font-size: 4.5rem;
  margin-bottom: 1.25rem;
  display: block;
}
.gallery-empty h2 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  margin-bottom: 0.6rem;
  font-size: 1.8rem;
}
.gallery-empty p { color: var(--text-light); }
.gallery-empty__hint { margin-top: 1.1rem; font-size: 0.9rem; }
/* Code snippets in the hint */
.gallery-empty__hint code {
  background: var(--mint-pale);
  padding: 0.15em 0.45em;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--teal-deep);
}


/* ════════════════════════════════════════════════════════════════════════════
   16. ADMIN DASHBOARD
   ════════════════════════════════════════════════════════════════════════════
   The private admin page Pete uses to see RSVPs and manage the site.
   A clean, functional design that still feels on-brand.
*/

/* Header row with page title + action buttons side by side */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--border);
}

/* The group of buttons in the top-right of the admin header */
.admin-header-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Four stat cards in a row (Total RSVPs, Attending, Declined, Total Guests) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.1rem;
  margin-bottom: 3rem;
}

/* Individual stat card */
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-pale);
  border-top: 4px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.1rem;
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition);
}
.stat-card:hover { box-shadow: var(--shadow); }

/* Colour the top accent of each stat card differently */
.stat-card--yes    { border-top-color: var(--teal); }
.stat-card--no     { border-top-color: var(--blue-sky); }
.stat-card--guests { border-top-color: var(--gold); }

/* The large number shown in the stat card */
.stat-card__number {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* The small label below the number */
.stat-card__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* Scrollable wrapper so the RSVP table doesn't break on narrow screens */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-pale);
}

/* The actual RSVP data table */
.rsvp-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  font-size: 0.9rem;
}

/* Table header cells */
.rsvp-table th {
  background: var(--teal-deep);
  color: var(--white);
  padding: 0.95rem 1.1rem;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Table data cells */
.rsvp-table td {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--border-pale);
  vertical-align: top;
  line-height: 1.5;
}

/* Attending rows: very faint aqua tint */
.row--yes td { background: rgba(77, 208, 225, 0.05); }
/* Declined rows: very faint coastal navy tint */
.row--no td  { background: rgba(0, 172, 193, 0.04); }
/* Highlight on hover */
.rsvp-table tr:hover td {
  background: rgba(178, 235, 242, 0.15);
  transition: background var(--transition);
}

/* "Yes" / "No" badge pills in the attending column */
.badge {
  display: inline-block;
  padding: 0.22em 0.75em;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.badge--yes { background: var(--mint-pale); color: var(--teal-deep); }
/* "No" badge: ice blue background with deep teal text — on-brand and legible */
.badge--no  { background: #E0F7FA; color: #006064; }

/* The RSVP timestamp */
.date-cell {
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.83rem;
}


/* ════════════════════════════════════════════════════════════════════════════
   17. FOOTER
   ════════════════════════════════════════════════════════════════════════════
   A deep teal-navy footer that anchors the bottom of every page.
   Light text on dark background. The couple's names in large elegant italic.
*/

.footer {
  /* Deep navy-teal — matches the darkest brand tone */
  background: var(--text);
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 4.5rem 1.75rem 3rem;
  margin-top: 0;
  position: relative;
  overflow: hidden;
}

/* A soft aqua radial glow in the footer background — coastal depth */
.footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 30%, rgba(0, 172, 193, 0.12) 0%, transparent 65%);
  pointer-events: none;
}

/* A short gradient line at the very top of the footer */
.footer::before {
  content: '';
  display: block;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mint), var(--gold), var(--mint), transparent);
  margin: 0 auto 3rem;
  opacity: 0.6;
}

/* Inner wrapper sits above the background glow */
.footer-inner {
  position: relative;
  z-index: 1;
}

/* The couple's names in large serif — matches the hero and nav */
.footer-names {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-style: italic;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

/* Date and venue: small, tracked, slightly transparent */
.footer-date, .footer-venue {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Copyright line: barely visible — it's fine print */
.footer-copy {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 2rem;
  letter-spacing: 0.07em;
}


/* ════════════════════════════════════════════════════════════════════════════
   18. RESPONSIVE — MOBILE STYLES
   ════════════════════════════════════════════════════════════════════════════
   @media (max-width: 768px) means: "only apply these styles when the screen
   is 768px wide or less" — i.e. phones and most tablets in portrait mode.

   The goal is to make every element readable and usable on small screens
   without losing the brand aesthetic.
*/
@media (max-width: 768px) {

  /* ── Navigation ── */
  /* On mobile: switch to flex column so the logo is always
     perfectly centred above the two link groups */
  .nav-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 0.85rem 1.5rem;
    gap: 0.6rem;
  }
  /* Move the logo to the top — it sits above both link rows on mobile.
     The HTML has left-links → logo → right-links, so order:-1 pulls the
     logo above the left links without touching the HTML. */
  .nav-brand { order: -1; }
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.1rem;
  }
  /* On mobile both link groups share one row — reset side-specific alignment */
  .nav-links--left,
  .nav-links--right { justify-content: center; }

  /* ── Sections ── */
  /* Reduce vertical breathing room on small screens */
  .section { padding: 3rem 0; }

  /* ── Hero ── */
  .hero { min-height: 80vh; }
  /* Slightly smaller logo on phones — still prominent */
  .hero-logo { width: 155px; height: 155px; }
  /* Tighten vertical padding on the hero content so it doesn't feel
     too spaced out on portrait phones */
  .hero-content { padding: 2.5rem 1.5rem 3rem; }
  /* Reduce the corner blobs on mobile */
  .hero::before { width: 280px; height: 280px; }
  .hero::after  { width: 240px; height: 240px; }
  /* Tighten the date and subtitle spacing in the hero */
  .hero-date    { font-size: 1.1rem; }
  .hero-nav-subtitle { margin-bottom: 1.5rem; }
  /* "Welcome" eyebrow — larger on mobile so it's legible */
  .hero-eyebrow { font-size: 1rem; }

  /* ── Cards & grids ── */
  /* Single column on phones */
  .info-cards, .travel-grid, .hotel-grid, .stats-grid {
    grid-template-columns: 1fr;
  }

  /* ── Story timeline ── */
  /* Move the spine to the left edge on mobile */
  .story-timeline::before {
    left: 16px;
  }
  /* Stack date above the content (remove side-by-side layout) */
  .story-item {
    flex-direction: column;
    padding-left: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .story-date {
    width: auto;
    text-align: left;
    padding-right: 0;
    padding-left: 0;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
  }
  /* The dot sits absolutely on the left spine */
  .story-dot {
    position: absolute;
    left: 10px;
    top: 0.25rem;
    margin-top: 0;
  }
  .story-dot--wedding {
    left: 6px;
  }
  .story-content {
    padding-left: 0;
    width: 100%;
  }

  /* ── Schedule timeline ── */
  /* Same spine-to-left treatment */
  .timeline::before { left: 16px; }
  .timeline-item    { flex-direction: column; gap: 0.15rem; padding-left: 2.5rem; }
  .timeline-time    { width: auto; text-align: left; padding-right: 0; padding-left: 0; font-size: 0.9rem; }
  .timeline-marker  { position: absolute; left: 10px; top: 0.25rem; }
  .timeline-content { padding-left: 0; }

  /* ── Forms ── */
  .rsvp-form { padding: 1.75rem 1.25rem; }

  /* ── Admin ── */
  .admin-header { flex-direction: column; align-items: flex-start; }

  /* ── Page header ── */
  .page-header { padding: 3rem 0 2.5rem; }

  /* ── Footer ── */
  .footer { padding: 3.5rem 1.25rem 2.5rem; }
  .footer-names { font-size: 1.7rem; }

  /* ── Wedding story card — reduce inner padding on phones ── */
  .story-item--wedding .story-content {
    padding: 1.1rem 1.25rem;
  }

  /* ── Info cards — tighten padding ── */
  .info-card { padding: 2rem 1.5rem; }
}

/* ── Very small phones (under 400px) ── */
@media (max-width: 400px) {
  .hero-logo { width: 130px; height: 130px; }
  .nav-links { gap: 0.4rem 0.8rem; }
  .btn--large { padding: 0.9rem 2rem; }
  /* Tighten the hero even further on very small phones */
  .hero-content { padding: 2rem 1.25rem 2.5rem; }
}