/* =============================================================================
   WEDDING WEBSITE — STYLESHEET
   =============================================================================
   This single file controls the entire visual look of the site: colors,
   fonts, spacing, and responsive (mobile-friendly) layout. index.html
   contains almost no styling of its own — instead it just assigns CSS
   "class" names to elements (e.g. class="hero"), and this file defines
   what each class actually looks like.

   Theme: "Elegant & minimal" — warm ivory background, deep charcoal text,
   a muted terracotta accent color (a soft nod to Sicilian stone/terracotta
   without being too literal), generous whitespace, serif headings paired
   with a clean sans-serif body font.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CSS VARIABLES (custom properties)
   -----------------------------------------------------------------------------
   ":root" refers to the <html> element, the top of the document. Variables
   defined here (with the "--name" syntax) become available everywhere else
   in this file via var(--name). This means if you ever want to change the
   accent color site-wide, you only edit it in ONE place (line below) instead
   of hunting through every rule that uses that color.
   ----------------------------------------------------------------------------- */
:root {
  --color-bg: #faf7f2;        /* main page background — warm ivory */
  --color-bg-alt: #f1ebe1;    /* slightly darker background for alternating sections */
  --color-text: #2e2a26;      /* main text color — near-black, softened */
  --color-text-soft: #6b6259; /* secondary/muted text (labels, captions) */
  --color-accent: #b5673a;    /* terracotta accent — used for links, buttons, highlights */
  --color-line: #ddd3c4;      /* subtle border/divider color */
  --font-display: 'Georgia', 'Times New Roman', serif;   /* used for headings — elegant serif */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* used for body text — clean & highly readable across OSes */
  --max-width: 860px;         /* the maximum width most content is allowed to stretch to, so lines of text don't become too wide/hard to read on big screens */
}

/* -----------------------------------------------------------------------------
   GLOBAL RESET / BASE STYLES
   -----------------------------------------------------------------------------
   These rules apply broadly, before any more specific component styling.
   ----------------------------------------------------------------------------- */

/*
  box-sizing: border-box makes padding and borders count INSIDE an element's
  declared width, rather than adding to it. Without this, a box set to
  width: 100% with padding would overflow its container. Applying it to "*"
  (every element) is a standard, widely-recommended CSS reset.
*/
* {
  box-sizing: border-box;
}

/*
  Makes anchor-link jumps (like clicking "RSVP" in the nav bar, which links
  to #rsvp) glide smoothly to that section instead of snapping instantly —
  a small but noticeable polish touch.
*/
html {
  scroll-behavior: smooth;
}

body {
  margin: 0; /* browsers add default margin around <body>; remove it so our own spacing is exact */
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6; /* generous line spacing improves readability for paragraphs */
}

/* All headings share the elegant serif display font, with browser-default bold removed */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400; /* normal weight rather than bold, for a softer/more elegant look */
  margin: 0; /* we control spacing explicitly per-section instead of relying on default heading margins */
}

/* -----------------------------------------------------------------------------
   SPLASH / LANGUAGE-CHOICE PAGE (index.html)
   -----------------------------------------------------------------------------
   The very first screen every visitor sees. Deliberately minimal: just the
   couple's names + date (readable regardless of language, so untranslated),
   then three flag buttons. Reuses .eyebrow/.amp/.hero-date/.hero-venue
   classes from the hero styling further down, so the splash page's names
   and date look consistent with the hero on home.html.
   ----------------------------------------------------------------------------- */
.splash-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  font-family: var(--font-body);
}

.splash {
  text-align: center;
  padding: 40px 24px;
}

.splash h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--color-text);
  margin: 0;
}

/* Buttons that let the visitor pick their language; laid out in a row on
   wide screens and wrapping onto multiple lines on narrow ones (flex-wrap),
   so three buttons never get squeezed on a phone screen. */
.lang-choice {
  margin-top: 48px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.lang-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  font-size: 1rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.lang-button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.lang-flag {
  font-size: 1.4rem;
  line-height: 1;
}

/* -----------------------------------------------------------------------------
   NAVIGATION BAR
   ----------------------------------------------------------------------------- */
.site-nav {
  position: sticky; /* stays pinned to the top of the viewport once the page scrolls past it */
  top: 0;
  z-index: 10; /* ensures the nav bar visually sits ABOVE the page content as it scrolls underneath */
  background: rgba(250, 247, 242, 0.9); /* semi-transparent version of the ivory background */
  backdrop-filter: blur(6px); /* blurs whatever scrolls underneath the nav, so text stays legible through the transparency */
  border-bottom: 1px solid var(--color-line);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto; /* centers this block horizontally within the full-width nav bar */
  display: flex;
  align-items: center;
  justify-content: space-between; /* pushes the "G & M" brand to the left and links to the right */
  padding: 14px 24px;
}

.nav-brand {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-text);
  text-decoration: none; /* removes the default underline browsers apply to <a> links */
  letter-spacing: 0.05em; /* slightly spaced-out letters for an elegant monogram feel */
}

.nav-links {
  display: flex;
  gap: 20px; /* even spacing between each nav link, no manual margins needed */
}

.nav-links a {
  color: var(--color-text-soft);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color 0.2s ease; /* smoothly animates the color change on hover instead of snapping instantly */
}

.nav-links a:hover {
  color: var(--color-accent);
}

/* The small flag links in the nav bar that let a visitor change language
   from any page, without going back to the splash page (index.html). */
.nav-lang-switch {
  display: flex;
  gap: 10px;
}

.nav-lang-switch a {
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.nav-lang-switch a:hover {
  opacity: 1;
}

/* -----------------------------------------------------------------------------
   HERO (the large banner at the top of the page with the couple's names)
   ----------------------------------------------------------------------------- */
.hero {
  min-height: 70vh; /* at least 70% of the visible browser window height, so it reads as a full "banner" moment */
  display: flex;
  align-items: center;    /* vertically centers the content block */
  justify-content: center; /* horizontally centers the content block */
  text-align: center;
  padding: 80px 24px;
  /* Soft top-to-bottom gradient between the two background tones, rather than a flat color */
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
}

.hero-content .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em; /* wide letter spacing is a classic way to make small uppercase labels feel intentional/elegant rather than shouty */
  font-size: 0.8rem;
  color: var(--color-text-soft);
  margin-bottom: 16px;
}

.hero-content h1 {
  /*
    clamp(MIN, PREFERRED, MAX) lets the heading's font size scale smoothly
    with the browser width — it will never shrink below 2.5rem (readable on
    tiny phones) or grow past 4.5rem (doesn't overwhelm huge monitors), and
    in between it scales fluidly based on viewport width (6vw).
  */
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--color-text);
}

.hero-content .amp {
  color: var(--color-accent); /* makes the "&" between the two names pop as a small design accent */
  font-style: italic;
}

.hero-date {
  margin-top: 20px;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  color: var(--color-accent);
}

.hero-venue {
  margin-top: 8px;
  color: var(--color-text-soft);
  font-size: 1rem;
}

/* -----------------------------------------------------------------------------
   SECTIONS (shared layout rules for every content section below the hero)
   ----------------------------------------------------------------------------- */
.section {
  max-width: var(--max-width); /* keeps paragraph/content width readable, not stretched edge-to-edge */
  margin: 0 auto; /* centers the section horizontally on the page */
  padding: 80px 24px; /* generous vertical spacing between sections is a big part of the "elegant & minimal" feel */
  text-align: center;
}

/*
  ".alt-bg" sections (Event Details) need a background color that
  spans the FULL width of the browser window, not just the centered content
  column. So for these, we override max-width to 100% on the outer section,
  and then re-apply the max-width/centering to a nested selector just below,
  so the background is full-bleed but the text inside still lines up with
  every other section.
*/
.section.alt-bg {
  max-width: 100%;
  background: var(--color-bg-alt);
}

.section.alt-bg > * {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.section h2 {
  font-size: 2rem;
}

/* The small decorative line under each section heading */
.section-rule {
  width: 60px;
  height: 2px;
  background: var(--color-accent);
  margin: 20px auto 40px; /* "auto" left/right margin centers this fixed-width bar */
}

.section-intro {
  color: var(--color-text-soft);
  margin-bottom: 32px;
}

/* -----------------------------------------------------------------------------
   EVENT DETAILS SECTION
   ----------------------------------------------------------------------------- */

/*
  CSS Grid with "auto-fit" and "minmax" is what makes this layout responsive
  WITHOUT any @media query: on a wide screen there's room for both cards
  side-by-side (each at least 240px wide), but as the browser narrows below
  the point where two 240px columns plus the gap can fit, the grid
  automatically drops the second card to a new row below the first —
  all handled natively by the browser's layout engine.
*/
.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  text-align: left; /* card content itself reads left-aligned, contrasting with the centered section heading above */
  margin-top: 8px;
}

.detail-card {
  background: var(--color-bg); /* deliberately lighter than the alt-bg section behind it, so each card reads as a distinct "card" */
  border: 1px solid var(--color-line);
  border-radius: 4px;
  padding: 28px;
}

.detail-card h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.detail-time {
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 4px 0 12px;
}

.detail-note {
  color: var(--color-text-soft);
  font-size: 0.9rem;
  font-style: italic;
  margin-top: 12px;
}

.detail-extra {
  margin-top: 32px;
  color: var(--color-text-soft);
}

/* -----------------------------------------------------------------------------
   RSVP FORM
   ----------------------------------------------------------------------------- */
.rsvp-form {
  text-align: left; /* form fields/labels read left-aligned even though the section heading above is centered */
  max-width: 480px; /* narrower than the general section width, so the form doesn't stretch into uncomfortably long input boxes */
  margin: 0 auto;
}

/* Each label+input pair is stacked vertically (label on top, input below) */
.form-row {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.form-row label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-soft);
  margin-bottom: 6px;
}

/* The "I have a food allergy" checkbox row reads left-to-right (checkbox,
   then its label text) rather than stacked like the other form rows,
   since a checkbox+label pair is conventionally read as one line. */
.form-row-checkbox {
  flex-direction: row;
  align-items: center;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: none; /* overrides the uppercase styling other .form-row labels get, since this reads as a normal sentence */
  letter-spacing: normal;
  color: var(--color-text);
  font-size: 1rem;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent); /* tints the native checkbox to match the site's accent color instead of the browser default blue */
  cursor: pointer;
}

/*
  Grouping these three selectors together (comma-separated) applies the same
  rule to all of them at once, since text inputs, dropdowns, and multi-line
  text areas should all share the same box styling for visual consistency.
*/
.form-row input,
.form-row select,
.form-row textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--color-line);
  border-radius: 3px;
  background: var(--color-bg);
  color: var(--color-text);
}

/* Replaces the browser's default (often garish blue) focus outline with a subtle accent-colored border, when a visitor clicks/tabs into a field */
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.rsvp-form button {
  width: 100%; /* full-width button reads clearly as the form's primary action */
  padding: 14px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 1rem;
  letter-spacing: 0.05em;
  cursor: pointer; /* shows a hand/pointer cursor on hover, reinforcing that it's clickable */
  transition: opacity 0.2s ease;
}

.rsvp-form button:hover {
  opacity: 0.9; /* a subtle dimming on hover as a hover-state cue, without changing the whole color */
}

.form-note {
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--color-text-soft);
  font-style: italic;
  text-align: center;
}

/* Small explanatory text under the "Your Name" field, clarifying that one
   person can RSVP on behalf of their whole household. */
.field-hint {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--color-text-soft);
  font-style: italic;
}

/* Shown by script.js after a successful RSVP submission, replacing the
   form entirely so the guest gets unambiguous confirmation. */
.form-success {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  color: var(--color-accent);
  font-size: 1.1rem;
}

/* Shown by script.js only if submission fails; sits alongside the
   (re-enabled) form rather than replacing it, so the guest can retry
   without having to re-type everything. */
.form-error {
  max-width: 480px;
  margin: 16px auto 0;
  padding: 12px 16px;
  text-align: center;
  color: #a33;
  border: 1px solid #a33;
  border-radius: 3px;
  font-size: 0.9rem;
}

/* -----------------------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------------------- */
.site-footer {
  text-align: center;
  padding: 40px 24px;
  color: var(--color-text-soft);
  font-size: 0.85rem;
  border-top: 1px solid var(--color-line);
}

/* -----------------------------------------------------------------------------
   RESPONSIVE ADJUSTMENTS FOR SMALL SCREENS (phones)
   -----------------------------------------------------------------------------
   A "@media" query only applies the CSS rules inside it when the condition
   is true — here, "max-width: 600px" means "only apply this on screens
   600px wide or narrower" (i.e., most phones in portrait orientation).
   Everything else in this file already applies at all sizes; this block
   just adds a few extra tweaks specifically for small screens.
   ----------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .nav-inner {
    flex-direction: column; /* stacks the brand and links vertically instead of side-by-side, since there isn't enough horizontal room */
    gap: 10px;
  }

  .nav-links {
    gap: 14px;
    flex-wrap: wrap; /* allows links to wrap onto a second line if they still don't all fit on one */
    justify-content: center;
  }

  .section {
    padding: 60px 20px; /* slightly less vertical padding on phones, so visitors don't have to scroll excessively just to get past whitespace */
  }
}