/* Stan & Tessa — 04.06.27
   Palet en typografie 1-op-1 overgenomen uit "Bruiloft Zeeland v2.dc.html" */

:root {
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --color-bg: oklch(0.985 0.005 60);
  --color-text: oklch(0.26 0.012 20);
  --color-accent: oklch(0.66 0.085 18);
  --color-accent-100: oklch(0.955 0.02 18);
  --color-accent-200: oklch(0.915 0.035 18);
  --color-accent-300: oklch(0.85 0.05 18);
  --color-accent-600: oklch(0.57 0.09 18);
  --color-accent-700: oklch(0.48 0.09 18);
  --color-accent-2-100: oklch(0.968 0.012 35);
  --color-accent-2-800: oklch(0.36 0.045 22);
  --color-neutral-100: oklch(0.965 0.004 60);
  --color-neutral-200: oklch(0.925 0.005 55);
  --color-neutral-300: oklch(0.87 0.007 50);
  --color-neutral-400: oklch(0.72 0.009 45);
  --color-neutral-500: oklch(0.58 0.011 40);
  --color-neutral-700: oklch(0.42 0.013 30);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-600); }

img { display: block; max-width: 100%; }

h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 58px);
  line-height: 1.05;
  margin: 0;
}

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

.page { overflow-x: hidden; position: relative; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  padding: 12px 20px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Knoppen ---------- */

.btn {
  display: inline-block;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 30px;
  border-radius: 2px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.25s ease, color 0.25s ease;
}
.btn-soft { background: var(--color-accent-100); color: var(--color-text); }
.btn-soft:hover { background: var(--color-accent-200); color: var(--color-text); }
.btn-lg { padding: 16px 40px; }
.btn-solid { background: var(--color-accent); color: white; padding: 18px 32px; text-align: center; }
.btn-solid:hover { background: var(--color-accent-600); color: white; }
.btn-solid[disabled] { opacity: 0.55; cursor: progress; }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 22px 36px;
  background: linear-gradient(color-mix(in oklab, black 30%, transparent), transparent);
  pointer-events: none;
}
.nav a { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); }
.nav-links {
  display: flex;
  gap: 26px;
  font-size: 15px;
  font-weight: 500;
  pointer-events: auto;
}
.nav-links a { text-decoration: none; color: white; }
.nav-links a:hover { color: var(--color-accent-100); }
.nav-monogram {
  font-family: var(--font-heading);
  font-size: 22px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: white;
  pointer-events: auto;
  white-space: nowrap;
}
.nav-cta { display: flex; justify-content: flex-end; pointer-events: auto; }

/* ---------- Hero ---------- */

.hero { height: 100svh; min-height: 640px; position: relative; }
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Vrijwel bovenaan uitlijnen: hun hoofden zitten hoog in de foto, dus alles wat
     wegvalt moet er onderaan af. Die paar procent geeft de hond wat meer ruimte;
     vanaf ~7% sneuvelt de bovenkant van Stans hoofd. */
  object-position: center 4%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(20, 14, 10, 0.3), rgba(20, 14, 10, 0.1) 35%, rgba(20, 14, 10, 0.55));
  pointer-events: none;
}
.hero-content {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: center;
  text-align: center;
  color: white;
  pointer-events: none;
  padding: 0 24px 9vh;
}
.hero-kicker {
  font-family: var(--font-heading);
  font-size: clamp(19px, 2.4vw, 26px);
  font-style: italic;
  margin-bottom: 26px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}
.hero-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(58px, 10vw, 130px);
  line-height: 1;
  margin: 0 0 34px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.hero-date {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

/* ---------- Intro ---------- */

.intro {
  max-width: 640px;
  margin: 0 auto;
  padding: 140px 28px;
  text-align: center;
}
.intro-lead {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.35;
  margin: 0;
}
.intro-body {
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-neutral-700);
  margin: 28px 0 44px;
}

/* ---------- Locatie ---------- */

.venue {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px 150px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 72px;
  align-items: center;
}
.venue-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
}
.venue-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(0.96);
}
.venue-text h2 { margin: 0 0 26px; }
.venue-text > p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-neutral-700);
  margin: 0 0 36px;
}
.venue-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  color: var(--color-neutral-700);
}
.venue-facts li { display: flex; gap: 14px; align-items: center; }
.venue-facts strong { color: var(--color-text); font-weight: 600; }
.icon { color: var(--color-accent); display: flex; flex: 0 0 auto; }

/* Nodig omdat de `display: flex` hieronder anders het hidden-attribuut van de
   browser overschrijft, en de placeholder dus altijd over de foto heen ligt. */
.photo-placeholder[hidden] { display: none; }

.photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--color-accent-2-100);
  border: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-500);
  text-align: center;
  padding: 24px;
}
.photo-placeholder-icon { color: var(--color-accent-300); }
.photo-placeholder-title {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--color-neutral-700);
}
.photo-placeholder-note {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- Brede fotoband ---------- */

.band { padding: 0 0 150px; }
/* Tweeluik: twee staande foto's naast elkaar.
   De cellen hebben exact de verhouding van de foto's (3:4, beide 1050x1400),
   dus er wordt niets bijgesneden: de hele foto is altijd te zien, op elke
   schermbreedte. Een vaste hoogte over de volle breedte deed dat wél, en dan
   hangt het van het scherm af of Tessa's hand met de ring nog in beeld valt. */
.band-figure {
  position: relative;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.band-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: saturate(0.9) contrast(0.96);
}

/* ---------- Praktisch / tijdlijn ---------- */

.info {
  position: relative;
  padding: 130px 28px 150px;
  background: var(--color-bg);
  overflow: hidden;
}
.info-inner { max-width: 720px; margin: 0 auto; position: relative; }

.section-head { text-align: center; margin-bottom: 56px; }
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  margin-bottom: 20px;
}
.eyebrow-accent { color: var(--color-accent-700); margin-bottom: 22px; }

.map-wrap { display: flex; justify-content: center; margin: 0 0 90px; }
#zeeland-map { width: min(500px, 88vw); height: auto; }
#zeeland-map:empty { display: none; }

.timeline { position: relative; }
.timeline-path {
  position: absolute;
  left: 5px;
  top: 0;
  width: 60px;
  height: 100%;
  overflow: visible;
}
.timeline-items {
  display: flex;
  flex-direction: column;
  gap: 72px;
  position: relative;
  padding-left: 96px;
}

.tl-item { position: relative; margin: 0; }
.tl-dot {
  position: absolute;
  left: -96px;
  top: 2px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-neutral-300);
  display: grid;
  place-items: center;
  color: var(--color-neutral-700);
}
.tl-item h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 27px;
  margin: 0 0 10px;
}
.tl-item p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-neutral-700);
  margin: 0;
}

.tl-photo {
  position: relative;
  width: min(78%, 440px);
  overflow: hidden;
  margin: 0;
}
.tl-photo.portrait { aspect-ratio: 3 / 4; }
.tl-photo.landscape { aspect-ratio: 3 / 2; }
.tl-photo-right { align-self: flex-end; }
.tl-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(0.96);
}

/* ---------- FAQ ---------- */

.faq { background: var(--color-bg); position: relative; padding: 130px 28px; }
.faq-inner { max-width: 720px; margin: 0 auto; }
.faq .section-head { margin-bottom: 64px; }
.faq-list { display: flex; flex-direction: column; }

.faq-row { border-top: 1px solid var(--color-neutral-200); }
.faq-q {
  all: unset;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 26px 4px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 23px;
  color: var(--color-text);
}
.faq-q:hover { color: var(--color-accent-700); }
.faq-q:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.faq-plus {
  flex: 0 0 auto;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 22px;
  transition: transform 0.3s;
}
.faq-q[aria-expanded="true"] .faq-plus { transform: rotate(45deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.faq-a.open { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p {
  margin: 0;
  padding: 0 4px 28px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-neutral-700);
  max-width: 560px;
}

/* ---------- RSVP ---------- */

.rsvp {
  padding: 130px 28px 150px;
  background: var(--color-bg);
  border-top: 1px solid var(--color-neutral-200);
}
.rsvp-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.rsvp-inner h2 { margin: 0 0 16px; }
.rsvp-lead {
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-neutral-700);
  margin: 0 0 44px;
}
.rsvp-contact { font-size: 15px; color: var(--color-neutral-700); margin: 36px 0 0; }

.rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.rsvp-form input,
.rsvp-form textarea {
  border: 1px solid var(--color-neutral-300);
  background: var(--color-bg);
  border-radius: 2px;
  padding: 16px 20px;
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--color-text);
  width: 100%;
}
.rsvp-form textarea { resize: vertical; min-height: 56px; }
.rsvp-form input::placeholder,
.rsvp-form textarea::placeholder { color: var(--color-neutral-500); }

.rsvp-choice { display: flex; gap: 12px; flex-wrap: wrap; }
.rsvp-choice button {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  min-width: 140px;
  text-align: center;
  padding: 15px 20px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.2s ease, color 0.2s ease;
}
.rsvp-choice button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Specificiteit moet hoger zijn dan `.rsvp-choice button { all: unset }` hierboven,
   anders wist die reset de rand en achtergrond weer. */
.rsvp-choice .rsvp-yes { border: 1px solid var(--color-accent); background: transparent; color: var(--color-accent-700); }
.rsvp-choice .rsvp-yes[aria-pressed="true"] { background: var(--color-accent); color: white; }
.rsvp-choice .rsvp-no { border: 1px solid var(--color-neutral-400); background: transparent; color: var(--color-neutral-700); }
.rsvp-choice .rsvp-no[aria-pressed="true"] { background: var(--color-neutral-700); color: white; }

.rsvp-error {
  font-size: 15px;
  color: var(--color-accent-2-800);
  background: var(--color-accent-100);
  border-radius: 2px;
  padding: 12px 16px;
  margin: 0;
}
.rsvp-done {
  font-family: var(--font-heading);
  font-size: 28px;
  font-style: italic;
  color: var(--color-accent-700);
}

/* ---------- Footer ---------- */

.footer { background: var(--color-bg); text-align: center; padding: 90px 28px; }
.footer-names {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 40px);
  margin-bottom: 12px;
}
.footer-date {
  font-family: var(--font-heading);
  font-size: 17px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--color-neutral-500);
}
.footer-note { font-size: 14px; color: var(--color-neutral-500); margin-top: 18px; }

/* ---------- Mobiel ---------- */

@media (max-width: 760px) {
  .nav {
    grid-template-columns: 1fr auto;
    grid-template-areas: "monogram cta" "links links";
    padding: 16px 20px 20px;
    gap: 10px 12px;
  }
  .nav-monogram { grid-area: monogram; justify-self: start; font-size: 18px; }
  .nav-cta { grid-area: cta; }
  .nav-cta .btn { padding: 11px 20px; font-size: 12px; }
  .nav-links { grid-area: links; gap: 20px; font-size: 14px; }

  .hero-content { padding-bottom: 12vh; }

  .intro { padding: 100px 24px; }
  .venue { padding-bottom: 110px; gap: 48px; }
  .band { padding-bottom: 110px; }
  .band-figure { gap: 6px; padding: 0 24px; }

  .info { padding: 100px 24px 110px; }
  .map-wrap { margin-bottom: 64px; }

  .timeline-path { display: none; }
  .timeline-items { padding-left: 0; gap: 56px; }
  .tl-dot { position: static; margin-bottom: 18px; }
  .tl-photo, .tl-photo-right { width: 100%; align-self: stretch; }

  .faq { padding: 100px 24px; }
  .faq-q { font-size: 20px; padding: 22px 2px; }

  .rsvp { padding: 100px 24px 110px; }
}