/* ==========================================================
   Local fonts
   ========================================================== */
@font-face {
  font-family: 'Simple Serenity Script';
  src: url('fonts/simple-serenity-script.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'La Luxes';
  src: url('fonts/LaLuxes-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================
   Design tokens
   ========================================================== */
:root {
  /* Colors — all text is pure black; --accent only used for non-text UI */
  --bg: #faf7f2;          /* fallback under cottonpaper */
  --bg-soft: #f3eee5;
  --text: #000000;        /* primary text */
  --muted: #000000;       /* secondary text — also black per design */
  --accent: #6f5a45;      /* button hover, focus rings, ::selection — darkened for AA-kontrast */
  --line: #c4b8a8;        /* hairline separators — visible on cream */

  /* Fonts — script ONLY for couple-name moments. La Luxes for everything readable. */
  --font-serif: 'Simple Serenity Script', 'Cormorant Garamond', cursive;
  --font-sans:  'La Luxes', 'Cormorant Garamond', 'Times New Roman', serif;

  /* Layout */
  --max-width: 48rem;
  --radius: 4px;
}

/* ==========================================================
   Base
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* The hidden attribute must always win, even over class-based display rules */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;            /* corner flowers bleed off-edge without horizontal scroll */
}

body {
  background-color: var(--bg);   /* fallback if paper image fails */
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  min-height: 100vh;
  min-height: 100dvh;            /* dynamic viewport — korrekt höjd på iOS Safari */
  text-wrap: pretty;             /* undviker ensamma ord sist i stycken */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sticky footer: body is a vertical flex column so <main> can grow
     and push the footer to the bottom even on short pages. */
  display: flex;
  flex-direction: column;
}

/* Cottonpaper background pinned to the viewport, identical on every page
   regardless of content height. White overlay (alpha 0.55) softens the shadows
   for readability — adjust to taste, 0 = full paper, 1 = pure white. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    url('bilder/cottonpaper.svg');
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
}

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

/* Default headings — La Luxes everywhere. The hero H1 overrides to script below. */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
}

a {
  color: var(--text);
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms ease;
}
a:hover { text-decoration-color: var(--text); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection { background: var(--accent); color: var(--bg); }

button { font-family: inherit; }

/* ==========================================================
   Corner flower decorations (anchored to viewport on every page)
   ========================================================== */
.bg-flower {
  position: fixed;
  pointer-events: none;
  user-select: none;
  z-index: -1;
  width: clamp(8rem, 28vw, 22rem);
  height: auto;
}
.bg-flower-tr {
  top: 0;
  right: 0;
  transform: translate(15%, -15%);   /* push deeper into corner so stem ends bleed off-screen */
}
.bg-flower-bl {
  bottom: 0;
  left: 0;
  transform: translate(-15%, 15%);   /* mirror — push deeper into bottom-left corner */
}

/* ==========================================================
   Header / nav / footer
   ========================================================== */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.75rem 1.5rem 1.25rem;
  max-width: var(--max-width);
  margin: 0 auto;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;            /* fyll body's bredd så space-between fungerar igen */
}

.brand {
  font-family: var(--font-serif);   /* script */
  font-size: 2rem;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--text);
  line-height: 1;
}

.site-nav {
  display: flex;
  gap: 1.75rem;
}

.site-nav a {
  font-family: var(--font-sans);
  font-size: 1rem;
  text-decoration: none;
  color: var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 200ms ease;
  padding: 0.4rem 0;             /* högre tryckyta för touch */
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { opacity: 0.55; }
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--text);
}

/* Header — höger sida: navigering + språkväxlare */
.header-end {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Kort skiljelinje mellan navigering och språkväxlare */
.header-divider {
  width: 1px;
  height: 1.2rem;
  background: var(--line);
  flex-shrink: 0;
}

/* Språkväxlare (SV · ES) */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.lang-toggle a,
.lang-toggle .lang-current {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: var(--text);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.lang-toggle .lang-current {
  border-bottom-color: var(--text);   /* markerar aktivt språk */
}
.lang-toggle .lang-other {
  opacity: 0.5;
  transition: opacity 200ms ease;
}
.lang-toggle .lang-other:hover,
.lang-toggle .lang-other:focus-visible {
  opacity: 1;
}
.lang-toggle .lang-sep {
  font-size: 0.875rem;
  opacity: 0.4;
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 1.5rem 4rem;
  width: 100%;
  flex: 1;                       /* grow to fill available height — pushes footer down */
}

.site-footer {
  text-align: center;
  padding: 4rem 1.5rem 3rem;
  color: var(--text);
  font-family: var(--font-serif);   /* script */
  font-size: 2.25rem;
  line-height: 1.2;
}

/* ==========================================================
   Shared blocks
   ========================================================== */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 400;
}

.button {
  display: inline-block;
  padding: 1.125rem 2.5rem;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: background 200ms ease, opacity 200ms ease;
  border: 0;
  cursor: pointer;
  font-weight: 400;
  line-height: 1.2;
}
.button:hover { background: var(--accent); }
.button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.button[disabled] { opacity: 0.6; cursor: not-allowed; }

.section-heading {
  text-align: center;
  margin: 5rem 0 1rem;
}
.section-heading h1,
.section-heading h2 {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  letter-spacing: 0.01em;
}
.section-heading .eyebrow {
  display: block;
  margin-bottom: 1rem;
}

.divider {
  width: 3.5rem;
  height: 1px;
  background: var(--text);
  border: 0;
  margin: 1.75rem auto 2.5rem;
}

/* ==========================================================
   Home — hero
   ========================================================== */
.hero {
  text-align: center;
  padding: 3.5rem 0 2rem;
}

/* Home only — centrera den luftiga heron vertikalt i tillgängligt utrymme */
body.home main {
  display: flex;
  flex-direction: column;
}
body.home .hero {
  margin: auto 0;
}
.hero .eyebrow {
  display: block;
  margin-bottom: 1.5rem;
}
.hero h1 {
  font-family: var(--font-serif);   /* script — couple names */
  font-size: clamp(3.75rem, 11vw, 7.5rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.85;                /* tight stacking */
  margin-bottom: 2rem;
}
.hero h1 .name {
  display: block;
  line-height: 0.85;
}
.hero .ampersand {
  display: block;
  font-style: normal;
  color: var(--text);
  font-size: 0.55em;
  line-height: 1;
  /* Asymmetric: the script "&" glyph has more empty space above its visible
     stroke than below, so we pull it up (negative top) and push Sebastian
     down (positive bottom) to equalize the visual gap to both names. */
  margin: -0.2em 0 0.4em 0;
}

/* Long welcome line under the names — uppercase tracked, wraps to two lines on narrow viewports */
.hero-welcome {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 400;
  max-width: 28rem;
  margin: 0 auto 2.75rem;
  line-height: 1.7;
}

.hero .date {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 1.375rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}
.hero .venue {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  letter-spacing: 0.18em;
  color: var(--text);
  text-transform: uppercase;
  margin: 0.5rem 0 3rem;
  line-height: 1.5;
}
.hero-image {
  margin: 2rem auto 3.5rem;
  max-width: 44rem;
}
.hero-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.welcome {
  max-width: 34rem;
  margin: 5rem auto 2.5rem;        /* generous top space — Sebastian's script descenders need room to breathe */
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.7;
}
.welcome p + p { margin-top: 1.25rem; }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2.5rem;
  margin: 4.5rem 0 2.5rem;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 3rem 0;
}
.fact h3 {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 400;
  margin-bottom: 0.75rem;
}
.fact p {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.3;
  color: var(--text);
}

.cta-row {
  text-align: center;
  margin: 2.5rem 0 0;
}

/* ==========================================================
   RSVP form
   ========================================================== */
.rsvp-intro {
  max-width: 30rem;
  text-align: center;
  margin: 0 auto 3.5rem;
  color: var(--text);
  font-size: 1.125rem;
  line-height: 1.6;
}

/* Warm inline message shown when "Tyvärr" is selected */
.rsvp-note {
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
}

.rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 3rem;                       /* tydligt mellanrum mellan Q&A-par så frågorna känns separata */
  max-width: 30rem;
  margin: 0 auto;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 2rem;                       /* luft mellan fråga och svar — särskilt skönt under Q1:s radioknappar */
}

.field label,
.field legend {
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: 0.01em;          /* questions are full sentences — minimal tracking for readability */
  color: var(--text);
  font-weight: 400;
  line-height: 1.5;
  text-align: center;              /* frågorna centreras */
}

.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field textarea,
.field select {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  padding: 0.625rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  transition: border-color 200ms ease;
  width: 100%;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text);
  opacity: 0.4;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--text);
  border-bottom-width: 2px;
}
.field textarea {
  resize: vertical;
  min-height: 5rem;
  line-height: 1.55;
}

fieldset {
  border: 0;
  padding: 0;
}
fieldset.field {
  gap: 0;                          /* använd legend:s margin för avstånd — flex-gap respekteras inte på <legend> i alla webbläsare */
}
fieldset legend {
  margin-bottom: 3rem;             /* tydligt avstånd från Q1-frågan till Ja/Nej-svaren */
}

.radio-group {
  display: flex;
  flex-direction: column;          /* stacked — the options are full sentences */
  gap: 0.75rem;
  width: max-content;              /* gruppen krymper till sitt innehåll … */
  max-width: 100%;
  margin: 0 auto;                  /* … och centreras i formuläret med radioknapparna linjerade */
}
.radio-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 1.125rem;
  color: var(--text);
}
.radio-option input[type="radio"] {
  width: auto;
  margin: 0;
  accent-color: var(--text);
  transform: scale(1.15);
}

.form-submit {
  align-self: center;              /* skicka-knappen centrerad */
}

.rsvp-error {
  color: var(--text);
  font-size: 1rem;
  font-style: italic;
  text-align: center;
}
.rsvp-error[hidden] { display: none; }

.rsvp-success {
  text-align: center;
  padding: 3rem 0;
}
.rsvp-success p {
  font-family: var(--font-sans);
  font-size: 1.625rem;
  font-style: italic;
  line-height: 1.5;
  margin-top: 1.25rem;
  color: var(--text);
}
.rsvp-success .rsvp-success-note {
  font-size: 1.0625rem;
  font-style: normal;
  margin-top: 1.5rem;
}

/* ==========================================================
   Agenda — timeline
   ========================================================== */
.timeline {
  list-style: none;
  padding: 0;
  margin: 2.5rem auto 4rem;
  max-width: 34rem;
}
.timeline li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 2rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.timeline li:first-child { border-top: 0; padding-top: 0.75rem; }
.timeline .time {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--text);
  text-align: right;
  line-height: 1.2;
}
.timeline .event h3 {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
  color: var(--text);
  line-height: 1.3;
}
.timeline .event p {
  color: var(--text);
  font-size: 1.125rem;
  line-height: 1.5;
}

/* ==========================================================
   "Coming soon" placeholder (used on agenda)
   ========================================================== */
.coming-soon {
  text-align: center;
  padding: 3rem 0 4rem;
  margin: 1rem auto 4rem;
  max-width: 32rem;
}
.coming-soon p {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--text);
  line-height: 1.5;
}

/* ==========================================================
   Info cards (Good to know)
   ========================================================== */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 3rem 2.5rem;
  margin: 2.5rem 0 4rem;
  align-items: start;              /* cards keep their natural height (maps make some taller) */
}
.info-card h3 {
  font-family: var(--font-sans);
  font-size: 1.5rem;               /* större än brödtexten (1.125rem) — tydlig rubrik */
  letter-spacing: 0.04em;          /* tät spärr — strecken läses som solid svart, inte grått */
  text-transform: uppercase;
  color: var(--text);
  font-weight: 400;
  margin-bottom: 0.75rem;
}
.info-card p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text);
}
.info-card p + p { margin-top: 0.75rem; }
.info-card a {
  color: var(--text);
  text-decoration-color: var(--line);
}

/* Embedded maps inside info cards */
.info-map {
  margin-top: 1rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.info-map iframe {
  display: block;
  width: 100%;
  height: 16rem;
  border: 0;
}
.map-caption {
  font-style: italic;
}
.map-caption + .info-map {
  margin-top: 0.4rem;
}

/* ==========================================================
   Tablet
   ========================================================== */
@media (max-width: 48rem) {
  .section-heading { margin-top: 3.5rem; }
  .info-grid { gap: 2.5rem 2rem; }
  .bg-flower { width: clamp(7rem, 26vw, 16rem); }
}

/* ==========================================================
   Mobile
   ========================================================== */
@media (max-width: 32rem) {
  .site-header {
    padding: 1.5rem 1.25rem 1rem;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .site-nav { gap: 1.5rem; }
  .site-nav a { font-size: 0.9375rem; }
  .header-end { flex-direction: column; gap: 0.9rem; }
  .header-divider { width: 2.5rem; height: 1px; }
  main { padding: 1rem 1.25rem 3rem; }

  .hero { padding: 1.5rem 0 1rem; }
  .hero h1 { line-height: 1.05; }
  .hero .date { font-size: 1.375rem; }
  .hero .venue { margin-bottom: 2rem; font-size: 0.9375rem; }
  .hero-image { margin: 1.5rem auto 2.5rem; }
  .welcome { font-size: 1.125rem; }

  .section-heading { margin-top: 3rem; }
  .section-heading h2 { letter-spacing: 0; }
  .divider { margin: 1.25rem auto 2rem; }

  .timeline { margin-top: 1.5rem; }
  .timeline li {
    grid-template-columns: 4.5rem 1fr;
    gap: 1.5rem;
    padding: 1.5rem 0;
  }
  .timeline .time { font-size: 1.25rem; }
  .timeline .event h3 { font-size: 1.125rem; }
  .timeline .event p { font-size: 1rem; }

  .facts {
    gap: 2rem;
    padding: 2.25rem 0;
    margin-top: 2.5rem;
  }
  .fact p { font-size: 1.25rem; }

  .info-grid {
    gap: 2.5rem;
    grid-template-columns: 1fr;
  }
  .info-card p { font-size: 1.0625rem; }

  /* Form polish */
  .rsvp-intro { font-size: 1rem; }
  .field input,
  .field textarea { font-size: 1rem; }
  .radio-group { gap: 0.75rem; }
  .radio-option {
    padding: 0.45rem 0;
    font-size: 1rem;
  }
  .form-submit {
    width: 100%;
    align-self: stretch;
    padding: 1.125rem 2rem;
  }

  .brand { font-size: 1.75rem; }
  .site-footer { font-size: 1.875rem; padding: 3rem 1.25rem 2.5rem; }

  .bg-flower { width: clamp(6.5rem, 30vw, 11rem); }
}

/* ==========================================================
   Reduced motion
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}