/* Fonts in public/fonts (free, see the OFL files there), picked to match the save-the-date cards:
   Dancing Script for Freestyle Script, Selawik (Microsoft's free Segoe UI look-alike) for Segoe UI. */
@font-face { font-family: "Dancing Script"; src: url(fonts/dancing-script.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: Selawik; src: url(fonts/selawik.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Selawik; src: url(fonts/selawik-semibold.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }

/* Your colour palette. Change these and the whole site follows. */
:root {
  --bg: #fbf8f4;       /* page background */
  --surface: #ffffff;  /* cards, inputs */
  --text: #2b2724;     /* body text */
  --muted: #7a716a;    /* secondary text, borders */
  --accent: #788a68;   /* buttons, links, highlights (also in icon.svg) */
  --on-accent: #ffffff;
  --font-display: "Dancing Script", "Segoe Script", cursive;  /* names and section titles */
  --font-body: Selawik, "Segoe UI", system-ui, sans-serif;     /* everything else */
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1.05rem/1.6 var(--font-body); }
h1, h2 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; }
h2 { font-size: 2.2rem; margin: 0 0 .8rem; }
h3 { margin: 1.5rem 0 .3rem; font-size: 1.15rem; font-weight: 600; line-height: 1.3; } /* small headings stay in the plain font */
a { color: var(--accent); }

/* Photos behind the header and the text (see .backdrop in index.php). Knobs:
   --hero-focus picks which part of the first photo stays in view (0% = top, 100% = bottom),
   the scroll speed is set at the bottom of index.php (0.3). */
.page { position: relative; overflow: hidden; --hero-h: 100vh; --hero-h: 100svh; --hero-focus: 65%; }
.backdrop { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }
.backdrop > div { background-position: center; background-size: cover; }
/* Dark overlay keeps the header text readable on any photo. Falls back to the accent colour without a photo. */
.backdrop .photo-1 { height: var(--hero-h); background: linear-gradient(rgb(0 0 0 / .45), rgb(0 0 0 / .1) 60%), url(photos/hero.jpg) center var(--hero-focus) / cover, var(--accent); }
/* The later photos fade softly into the one above. */
.backdrop > div + div { display: none; height: max(100vh, 60vw); margin-top: -20vh; mask-image: linear-gradient(transparent, #000 20vh); }
/* Phones and other portrait screens: photo "windows" between the sections instead of the faint
   photos behind the text. --win-h sets their height. The photo is taller than the window so it
   can drift (scroll speed in index.php). */
.window {
  --win-h: 20rem; height: var(--win-h); margin: 0 -1.5rem;
  background: center / auto calc(var(--win-h) + .55 * (100vh + var(--win-h))) no-repeat; /* the photo is set per window */
}
.hero {
  position: relative; min-height: var(--hero-h);
  /* The text sits in the upper part of the photo; padding-top sets how far down it starts. */
  display: grid; place-items: start center; padding: 6vh 1rem 3rem; text-align: center; color: #fff;
}
.hero-text { position: relative; }
/* Wide screens: a portrait photo would be cut down to a thin strip, so the header gets taller
   and the text moves to the top. Scrolling down then reveals the rest of the photo. */
@media (min-aspect-ratio: 1/1) {
  .page { --hero-h: 170vh; }
  .backdrop > div + div { display: block; }
  .window { display: none; }
  .scroll-hint { display: none; }
  .hero { padding-top: 5vh; }
}
/* Phones: a small arrow at the bottom of the photo shows there is more below. It fades out once scrolling starts. */
.scroll-hint {
  position: absolute; bottom: 1.2rem; left: 50%; translate: -50% 0; color: #fff;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / .5)); transition: opacity .4s;
  animation: bob 2.4s ease-in-out infinite;
}
.scroll-hint.gone { opacity: 0; pointer-events: none; }
@keyframes bob { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint { animation: none; } }
.kicker { text-transform: uppercase; letter-spacing: .2em; font-size: 1.5rem; }
html[lang=en] .kicker { margin-top: 0; } /* English is two lines ("We’re getting / married"), so it starts a bit higher */
.hero .when { font-size: 1.6rem; margin-top: 4vh; } /* 4vh = gap below the names */
/* Wide screens: the page text scrolls up over the lower part of the photo on a see-through card.
   The negative margin there sets how early it starts covering the photo. Phones: the text starts below the photo. */
.hero + main {
  position: relative; padding: 0 1.5rem; border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (min-aspect-ratio: 1/1) {
  .hero + main { margin-top: -112vh; max-width: 56rem; padding: 0 3rem; }
}
.hero .lang a, .hero .lang span { color: #fff; }
.lang { position: absolute; top: .8rem; right: 1rem; display: flex; gap: .8rem; font-weight: bold; }
.lang a { text-decoration: none; opacity: .7; }
.hero h1 { font-size: clamp(3.5rem, 14vw, 7rem); font-weight: 700; margin: 8vh 0 .1em; /* 8vh = gap below „Wir heiraten“ */ text-shadow: 0 2px 12px rgb(0 0 0 / .35); }


main, footer { max-width: 40rem; margin: 0 auto; padding: 0 1rem; }
main.narrow { padding: 2rem 1rem; }
section { padding: 2.5rem 0 0; }
/* Divider between sections: a thin line across the text width with a small leaf sprig (divider.svg) in the middle.
   On phones it is left out where a photo window follows. */
section::after {
  --line: linear-gradient(color-mix(in srgb, var(--accent) 55%, transparent) 0 0);
  content: ""; display: block; height: 24px; margin: 2.5rem 0 0;
  background: url(divider.svg) center / 64px 24px no-repeat,
              var(--line) left 60% / calc(50% - 40px) 1px no-repeat, var(--line) right 60% / calc(50% - 40px) 1px no-repeat;
}
@media not all and (min-aspect-ratio: 1/1) {
  section:has(+ .window)::after { display: none; }
  section:has(+ .window) { padding-bottom: 2.5rem; }
}
footer { padding: 2rem 1rem; text-align: center; color: var(--muted); }
section ul { margin: .3rem 0 1rem; padding-left: 1.3rem; }
section li { margin: .15rem 0; }
section p:has(+ ul) { margin-bottom: .3rem; }

.schedule { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; }
.schedule dt { font-weight: bold; }
.schedule dd { margin: 0; }
.map { display: block; width: 100%; max-width: 40rem; height: 22rem; border: 0; border-radius: 6px; }

label { display: block; margin: 1rem 0; }
fieldset { border: 0; padding: 0; margin: 1rem 0; }
legend { font-weight: bold; }
legend.title { margin-top: 1.5rem; font-size: 1.15rem; font-weight: 600; } /* a question that is also the heading, like h3 */
.choice label { margin: .3rem 0; }
.person { margin: 1rem 0; padding: .5rem 1rem; background: var(--surface); border-radius: 6px; }
.person legend { float: left; margin-top: .5rem; }
.person label { clear: left; }
input:not([type=radio], [type=checkbox]), select, textarea {
  display: block; width: 100%; margin-top: .3rem; padding: .6rem; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--muted); border-radius: 6px;
}
button, .button {
  display: inline-block; padding: .7rem 1.6rem; font: inherit; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); text-decoration: none;
}
button.secondary, .button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: .4rem 1rem; }
button[hidden] { display: none; }
.ok { padding: 1rem; background: color-mix(in srgb, var(--accent) 15%, var(--surface)); border-radius: 6px; }
.error { color: #b3261e; }
.muted { color: var(--muted); }
label.check { margin-top: -.5rem; }

/* Admin */
.tabs a { font-weight: bold; }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 1.5rem; }
table.edit { width: 100%; }
table.edit td { border: 0; padding: .2rem; }
table.edit input, table.edit textarea { margin: 0; min-width: 8rem; font-size: .9rem; }
/* The admin pages (the only pages with tables) use the full window width */
main:has(table) { max-width: none; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--muted); vertical-align: top; }
td input { min-width: 12rem; font-size: .8rem; }
label.link { display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem; font-size: .8rem; }
label.link input { margin: 0; }
td button { padding: .2rem .6rem; }
fieldset:disabled button { display: none; } /* locked answers: no add/remove buttons */
.person .child { margin: 0; }
.names { clear: left; display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; } /* first and last name side by side */
/* A required answer missing when saving: red border and a short hint below (text set by the page script). */
.missing input, .missing select { border-color: #b3261e; }
.missing::after { content: attr(data-hint); display: block; color: #b3261e; font-size: .9rem; }
#kids .kid { margin: .5rem 0; }
#kids .need-age:not([hidden]) { display: block; }

/* Admin: photo overview */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; }
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; height: 8rem; object-fit: cover; border-radius: 6px; }
.gallery figcaption { font-size: .85rem; word-break: break-all; }
.gallery form { margin-top: .3rem; }