/*
 * Hele gaestesidens styling, ét stylesheet. Designet er Canva-filen i
 * resources/design/v2/: hvidt papir, sort skrift, rosa og salvie i hjerterne,
 * Great Vibes til det haandskrevne og Crimson Pro til broedteksten.
 * Ingen opdeling i lag og ingen klassenavne som forretningslogikken haenger paa.
 *
 * Ligger i public/ og ikke i resources/ med Vite, fordi siden skal kunne
 * rendres uden et npm-build - ogsaa i testsuiten og i CI.
 */

:root {
  --room: #f1eeec;
  --paper: #ffffff;
  --paper-edge: #ece8e6;
  --ink: #1f1d1c;
  --ink-soft: #797879;
  --rose: #efc2bf;
  --rose-deep: #c98f8c;
  --sage: #b3baa1;
  --sage-deep: #7d866b;
  --script: "Great Vibes", "Snell Roundhand", cursive;
  --serif: "Crimson Pro", "Georgia", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --room: #26241f; }
}
:root[data-theme="dark"] { --room: #26241f; }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--room); color: var(--ink);
  font-family: var(--serif); font-weight: 400;
  font-size: 19px; line-height: 1.4;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.paper {
  max-width: 1060px; margin: 0 auto; background: var(--paper);
  box-shadow: 0 1px 0 var(--paper-edge), 0 18px 50px rgba(60,45,30,.12);
  position: relative; overflow: hidden;
}

/* Streghjerterne. Maalene er designets: klyngen oeverst til venstre fylder
   knap 40 % af arkets bredde, den nederst til hoejre godt en tredjedel. */
.hearts { position: absolute; pointer-events: none; display: block; height: auto; }
.hearts-tl { top: 0; left: 0; width: min(300px, 40%); }
.hearts-br { bottom: 0; right: 0; width: min(220px, 32%); }

/* Hjertet med navnene er et billede med hvid baggrund. multiply lader
   baggrunden forsvinde hvis papiret en dag ikke er helt hvidt. */
.logo {
  display: block; width: 100%; max-width: 460px; height: auto;
  margin: 0 auto; mix-blend-mode: multiply;
}
.date {
  font-family: var(--script); color: var(--ink-soft);
  font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1.1;
  text-align: center; margin: .1em 0 0;
}

/* ---- kodeside ---- */
.gate { text-align: center; padding: 110px 26px 200px; position: relative; }
.gate .date { font-size: clamp(2rem, 7vw, 2.8rem); margin-bottom: .6em; }
.gate h1 { font-family: var(--script); font-weight: 400; font-size: clamp(2.6rem,9vw,3.6rem); margin: .2em 0 .3em; }
.gate p { max-width: 32ch; margin: 0 auto 1.1em; font-size: 16px; }
.gate input {
  font-family: var(--serif); font-size: 1.5rem; letter-spacing: .22em;
  width: 100%; max-width: 300px; text-align: center; text-transform: uppercase;
  padding: 12px 8px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--sage);
}
.gate input:focus { outline: none; border-bottom-color: var(--sage-deep); }
.gate .err { min-height: 1.4em; font-size: 14px; color: #a15b56; }
.btn {
  font-family: var(--serif); font-size: 13px; letter-spacing: .2em;
  text-transform: uppercase; text-decoration: none; display: inline-block;
  padding: 13px 30px; cursor: pointer; color: var(--ink);
  background: transparent; border: 1px solid var(--sage-deep);
}
.btn:hover { background: rgba(179,186,161,.18); }
.btn:focus-visible, input:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 3px; }

/* ---- lukket kort ----
 * Uden JavaScript kan kortet ikke klappes op, saa der vises invitationen
 * direkte: kortet er skjult indtil .js er sat paa <html>. */
.stage { display: none; }
.js .stage {
  display: flex; flex-direction: column; align-items: center;
  padding: 70px 24px 84px; perspective: 1700px; overflow-x: hidden;
}
.js .stage.hide { display: none; }
/* A4 staaende, som arket i Canva. */
.card {
  position: relative; display: block; width: min(380px, 80vw); aspect-ratio: 1 / 1.414;
  transform-style: preserve-3d; cursor: pointer;
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
}
.leaf { position: absolute; inset: 0; background: var(--paper); }
.leaf-inner { overflow: hidden; box-shadow: inset 16px 0 26px -22px rgba(31,29,28,.4), inset -16px 0 26px -22px rgba(31,29,28,.4); }
.flap {
  position: absolute; top: 0; bottom: 0; width: 50%;
  transform-style: preserve-3d; will-change: transform;
  transition: transform 1.9s cubic-bezier(.34,.9,.26,1), box-shadow 1.9s ease;
}
.flap-l { left: 0; transform-origin: left center; box-shadow: -2px 12px 30px rgba(60,45,30,.16); }
.flap-r { right: 0; transform-origin: right center; box-shadow: 2px 12px 30px rgba(60,45,30,.16); }
.card.open .flap-l { transform: rotateY(-174deg); box-shadow: 14px 12px 34px rgba(60,45,30,.08); }
.card.open .flap-r { transform: rotateY(174deg); box-shadow: -14px 12px 34px rgba(60,45,30,.08); }
.face { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; background: var(--paper); }
.face.back { transform: rotateY(180deg); }
.flap-l .face.front { box-shadow: inset -10px 0 18px -14px rgba(31,29,28,.35); }
.flap-r .face.front { box-shadow: inset 10px 0 18px -14px rgba(31,29,28,.35); }
.art { position: absolute; top: 0; bottom: 0; width: 200%; }
.flap-l .art { left: 0; }
.flap-r .art { right: 0; }
/* Kortet har sine egne hjerter. Paa en telefon fylder kortet hele bredden,
   og saa ligger papirets klynge oven i kortets - to motiver i ét hjoerne. */
@media (max-width: 640px) {
  .js .paper:has(.stage:not(.hide)) > .hearts { display: none; }
}
.card .hearts-tl { width: 40%; }
.card .hearts-br { width: 35%; }
.cover-art {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; text-align: center; padding: 0 3%;
}
.cover-art .logo { max-width: none; }
.cover-art .date { display: block; font-size: clamp(1.5rem, 6vw, 2.2rem); }
.inner-text {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; text-align: center; padding: 26px;
}
.inner-text .greet { font-family: var(--script); font-size: clamp(1.9rem,7vw,2.4rem); line-height: 1.2; }
.hint {
  margin-top: 26px; font-size: 12px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-soft);
  transition: opacity .5s ease;
}
.card.open ~ .hint { opacity: 0; }

/* ---- invitation ----
 * Den aabne invitation er designets inderside: tre spalter med en tynd
 * streg imellem, hjerte-krusseduller i hjoernerne, programmet som tidslinje
 * med ikoner og det praktiske med et ikon pr. sted. */
.js .invite { display: none; }
/* tabindex="-1" gav en fokusramme da kortet blev klappet op. Fokus skal
   flytte sig, men ikke tegne en ramme om hele invitationen. */
.invite:focus { outline: none; }
.js .invite.revealed { display: block; }
.fade-in { animation: rise .9s cubic-bezier(.22,.8,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } }

/* Papirets store streghjerter hoerer til forsiden. Indersiden har sine egne
   krusseduller i hver spalte. */
html:not(.js) .paper:has(.invite) > .hearts,
.paper:has(.invite.revealed) > .hearts { display: none; }

/* Paa telefonen: invitationen, programmet, det praktiske - i den raekkefoelge
   DOM'en har dem. Paa en bred skaerm staar invitationen i midten. */
.fold { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .fold {
    grid-template-columns: 1fr 1.1fr 1fr;
    grid-template-areas: "programme main info";
  }
  .panel-main { grid-area: main; border-left: 1px solid var(--paper-edge); border-right: 1px solid var(--paper-edge); }
  .panel-programme { grid-area: programme; }
  .panel-info { grid-area: info; }
}
@media (max-width: 899px) {
  .panel + .panel { border-top: 1px solid var(--paper-edge); }
}
.panel { position: relative; padding: 96px 28px 110px; text-align: center; }
.panel-main { padding-top: 48px; padding-bottom: 56px; }

.divider { display: block; width: 156px; height: 28px; margin: 8px auto 16px; }

/* Hjerte-krussedullerne. Klippet ud af designet og lagt oven paa spalten. */
.corner { position: absolute; pointer-events: none; height: auto; display: block; }
.panel-programme .corner-top { top: 8px; left: 0; width: min(270px, 92%); }
.panel-info .corner-top { top: 8px; right: 0; width: min(270px, 92%); }
/* Bunden: en lang krusedul der starter ude til venstre og ender i to
   hjerter til hoejre. */
.panel .corner-bottom { bottom: 14px; right: 6px; width: min(270px, 92%); }

.panel h2 {
  font-family: var(--script); font-weight: 400;
  font-size: 2.9rem; line-height: 1.1; margin: 0;
}

/* ---- midten ---- */
.panel-main .heart { display: block; width: min(230px, 62%); height: auto; margin: 0 auto 4px; }
.greet {
  text-wrap: balance;
  font-family: var(--script); font-size: clamp(2.4rem,7vw,3rem);
  line-height: 1.15; margin: 0 0 .5em;
}
.lede { font-family: var(--script); font-size: clamp(2rem,6vw,2.5rem); line-height: 1.1; margin: 0 0 .6em; }
@media (min-width: 900px) {
  .panel-main .greet { font-size: clamp(2rem, 3.2vw, 2.7rem); }
}
.panel-main .body { font-size: clamp(19px, 2.2vw, 21px); line-height: 1.4; margin: 0 0 1em; }
.panel-main .regards { font-size: 1rem; margin: 0; }
.panel-main .signature { font-family: var(--script); font-size: 2.4rem; line-height: 1.1; margin: .1em 0 0; }

/* ---- tidslinjen ----
 * Ikon | prikket streg med et hjerte pr. punkt | klokkeslaet og hvad. */
/* fit-content: paa en bred skaerm staar tidslinjen centreret som én blok. */
.timeline { list-style: none; margin: 0 auto; padding: 0; text-align: left; width: fit-content; max-width: 22rem; position: relative; }
.timeline::before {
  content: ""; position: absolute; top: 10px; bottom: 10px; left: 86px;
  border-left: 1.5px dotted var(--rose);
}
.timeline li { display: grid; grid-template-columns: 68px 1fr; column-gap: 38px; align-items: center; position: relative; }
.timeline li + li { margin-top: 26px; }
/* Hjertet paa stregen, hvidt indeni saa stregen ser ud til at gaa bag om. */
.timeline-mark { position: absolute; left: 79px; top: 50%; width: 15px; height: 14px; transform: translateY(-50%); color: var(--rose-deep); }
.timeline-icon { display: flex; justify-content: center; }
.icon { display: block; width: 52px; height: auto; max-height: 56px; object-fit: contain; }
.timeline .icon { width: 64px; max-height: 66px; }
.icon-heart { width: 22px; height: 20px; color: var(--rose-deep); }
.timeline .when { display: block; font-size: 1.45rem; line-height: 1.15; }
.timeline .what { display: block; font-size: 1.15rem; line-height: 1.25; }
/* Paa en telefon er spalten hele skaermen; lidt stoerre, saa tidslinjen
   fylder bredden ud i stedet for at klumpe sig i venstre side. */
@media (max-width: 899px) {
  .timeline { width: auto; max-width: 24rem; }
  .timeline li { grid-template-columns: 76px 1fr; column-gap: 36px; }
  .timeline::before { left: 94px; }
  .timeline-mark { left: 87px; }
  .timeline .icon { width: 72px; max-height: 74px; }
  .timeline .when { font-size: 1.6rem; }
  .timeline .what { font-size: 1.25rem; }
}

/* ---- det praktiske ----
 * Ikon til venstre, tekst til hoejre. Overskriften "Adresser:" staar over
 * tekstspalten, som i designet. */
.panel-info .block, .panel-info .item { text-align: left; }
.panel-info .block { max-width: 20rem; margin: 0 auto; }
.panel-info .block > h3 { margin: 0 0 .5em 76px; }
.panel-info .item { display: grid; grid-template-columns: 60px 1fr; column-gap: 16px; align-items: center; }
.panel-info .item + .item { margin-top: 16px; }
.item-icon { display: flex; justify-content: center; }
.panel-info h3 { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; margin: 0 0 .15em; }
.panel-info .item-text > h3 { margin-bottom: .25em; }
.panel-info p { margin: 0; font-size: 1rem; line-height: 1.3; }
.panel-info .bullet { position: relative; padding-left: 1em; }
.panel-info .bullet::before {
  content: ""; position: absolute; left: .1em; top: .55em;
  width: .32em; height: .32em; border-radius: 50%; background: var(--ink);
}
.panel-info .sub { padding-left: 1em; font-size: .92rem; }
.wishes .btn { margin-top: .7em; padding: 10px 18px; background: var(--paper); border-color: var(--rose-deep); }
.wishes .btn:hover { background: var(--rose); }
/* Adressen under knappen er til PAPIR: knappen kan ikke trykkes paa et
   printet ark, saa der skal adressen kunne tastes af. Paa skaermen er
   knappen nok, og en lang adresse brudt over to linjer er bare stoej.
   print.css viser den igen. */
.wishes .url { display: none; font-size: 13px; letter-spacing: .02em; color: var(--ink-soft); margin-top: .5em; word-break: break-all; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- fanerne paa en telefon ----
 * invitation.js saetter .has-tabs og .is-hidden. Skjulingen gaelder KUN
 * under 900px - paa en bred skaerm staar de tre spalter side om side, og
 * print.css viser alle sider paa papir. */
.panel-tabs { display: none; }
@media (max-width: 899px) {
  .has-tabs .panel.is-hidden { display: none; }
  .has-tabs .panel + .panel { border-top: 0; }
  /* Kun naar kortet er klappet op - .has-tabs saettes af javascript, og med
     javascript ligger invitationen skjult indtil .revealed. Baren er en
     soeskende til .invite (se skabelonen). */
  .has-tabs .invite.revealed ~ .panel-tabs { display: flex; }
  .has-tabs .panel-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    justify-content: space-around;
    background: var(--paper);
    border-top: 1px solid var(--rose);
    box-shadow: 0 -6px 18px rgba(60,45,30,.08);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .panel-tabs button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: 0; padding: 6px 4px; cursor: pointer;
    font-family: var(--serif); font-size: 1rem; color: var(--ink-soft);
  }
  .panel-tabs svg { width: 14px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .panel-tabs button[aria-current="true"] { color: var(--rose-deep); }
  .panel-tabs button[aria-current="true"] svg { fill: var(--rose); }
  /* Fokus flyttes til siden ved et fanebyt; den skal ikke tegne en ramme. */
  .panel:focus { outline: none; }
  .panel-tabs button:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: -2px; }
  /* En kort side (fx Praktisk) skal ikke vise det graa rum under papiret. */
  .has-tabs .paper { min-height: 100vh; min-height: 100dvh; }
  /* Plads under den sidste linje, saa fanebaren ikke daekker den. */
  .has-tabs .invite.revealed { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}