/*
 * Components: header band, navigation, language toggle, framed panels,
 * buttons, form fields, stay cards and the information pages. Mobile-first.
 */

/* ---------------------------------------------------------------------------
 * Header band: mint like the save the date, with sunlight from above, a fine
 * linen weave and a scalloped lower edge like a summer awning.
 * ------------------------------------------------------------------------ */
.band {
  position: relative;
  margin-bottom: var(--scallop-size);
  color: var(--color-text);
  background-color: var(--color-mint);
  background-image:
    radial-gradient(ellipse 75% 100% at 50% 0%, rgb(255 255 255 / 38%), transparent 72%),
    repeating-linear-gradient(115deg, transparent 0 1.25rem, rgb(255 255 255 / 10%) 1.25rem 1.3rem),
    repeating-linear-gradient(25deg, transparent 0 1.25rem, rgb(255 255 255 / 7%) 1.25rem 1.3rem);
}

.band::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(var(--scallop-size) / 2);
  background:
    radial-gradient(
      circle at 50% 0,
      var(--color-mint) calc(var(--scallop-size) / 2 - 0.5px),
      transparent calc(var(--scallop-size) / 2)
    )
    0 0 / var(--scallop-size) 100% repeat-x;
  filter: drop-shadow(0 2px 0 rgb(143 187 165 / 55%));
}

/* Top row of the band: navigation and language toggle. */
.band__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-xs) var(--gutter);
  border-bottom: 1px solid rgb(255 255 255 / 60%);
}

.band__hero {
  padding: var(--space-l) var(--gutter) var(--space-m);
  text-align: center;
}

/* White script on mint is reserved for these large display lines; a soft
   green shadow lifts them off the band. */
.band__names,
.band__date {
  color: var(--color-on-mint-display);
  text-shadow: 0 1px 2px rgb(47 72 64 / 30%), 0 0 1.5rem rgb(47 72 64 / 12%);
}

.band__names {
  font-size: var(--font-size-names);
}

.band__date {
  margin-top: var(--space-xs);
  font-size: var(--font-size-date);
}

/* The place, framed by two short hairlines. */
.band__place {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-s);
  font-size: var(--font-size-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.band__place::before,
.band__place::after {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentcolor;
  opacity: 0.5;
}

/* ---------------------------------------------------------------------------
 * Site navigation. Without JavaScript the menu is always a visible list;
 * nav.js turns it into a burger dropdown on phones.
 * ------------------------------------------------------------------------ */
.site-nav__menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: 0 var(--space-s);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.site-nav__link:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.site-nav__link[aria-current="page"] {
  background: rgb(255 255 255 / 55%);
}

.site-nav__logout form {
  display: contents;
}

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  min-height: var(--tap-target);
  padding: 0 var(--space-s) 0 0;
  border: 0;
  background: none;
  font-weight: 500;
  cursor: pointer;
}

/* Three-line burger drawn with one bar and two shadows; becomes an X. */
.site-nav__toggle-icon {
  position: relative;
  width: 1.375rem;
  height: 2px;
  background: currentcolor;
  box-shadow: 0 -7px 0 currentcolor, 0 7px 0 currentcolor;
  transition: transform 200ms var(--ease-soft), box-shadow 200ms var(--ease-soft);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon {
  transform: rotate(45deg);
  box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentcolor;
  transform: rotate(90deg);
}

/* Phones with JavaScript: the menu is a white sheet dropping from the bar. */
@media (max-width: 47.99rem) {
  .site-nav--collapsible .site-nav__menu {
    position: absolute;
    top: 100%;
    left: var(--gutter);
    right: var(--gutter);
    z-index: 5;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-s);
    background: var(--color-card);
    box-shadow: var(--shadow-panel);
  }

  .site-nav--collapsible:not(.is-open) .site-nav__menu {
    display: none;
  }

  .site-nav--collapsible .site-nav__link {
    width: 100%;
    padding: 0 var(--space-m);
  }

  .site-nav--collapsible .site-nav__link[aria-current="page"] {
    background: var(--color-mint-light);
  }

  .site-nav--collapsible .site-nav__logout {
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: 1px solid var(--color-hairline);
  }
}

/* Laptops: centered links, language toggle on the right. */
@media (min-width: 48rem) {
  .band__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .site-nav {
    grid-column: 2;
  }

  .site-nav__toggle {
    display: none;
  }

  .site-nav__menu {
    justify-content: center;
  }

  .site-nav__logout {
    margin-left: var(--space-s);
    padding-left: var(--space-s);
    border-left: 1px solid rgb(255 255 255 / 70%);
  }
}

/* ---------------------------------------------------------------------------
 * Language toggle: DE | EN, current language on a light pill.
 * ------------------------------------------------------------------------ */
.language-toggle {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.language-toggle form {
  display: flex;
  align-items: center;
}

.language-toggle form + form::before {
  content: "|";
  padding: 0 0.125rem;
  opacity: 0.6;
}

.language-toggle__option {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  font-size: var(--font-size-small);
  letter-spacing: 0.08em;
  cursor: pointer;
}

.language-toggle__option:hover {
  text-decoration: underline;
}

.language-toggle__option[aria-pressed="true"] {
  background: rgb(255 255 255 / 55%);
  font-weight: 500;
}

@media (min-width: 48rem) {
  .language-toggle {
    grid-column: 3;
    justify-self: end;
  }
}

/* ---------------------------------------------------------------------------
 * Framed panel: the white photo frame from the save the date, with a thin
 * green inner line and small tick marks crossing the frame.
 * ------------------------------------------------------------------------ */
.framed-panel {
  --tick: linear-gradient(var(--color-frame-line), var(--color-frame-line));

  padding: var(--frame-width);
  background:
    var(--tick) 30% 0 / 1px var(--frame-width) no-repeat,
    var(--tick) 70% 0 / 1px var(--frame-width) no-repeat,
    var(--tick) 40% 100% / 1px var(--frame-width) no-repeat,
    var(--tick) 0 60% / var(--frame-width) 1px no-repeat,
    var(--tick) 100% 35% / var(--frame-width) 1px no-repeat,
    var(--color-card);
  box-shadow: var(--shadow-panel);
}

.framed-panel__inner {
  height: 100%;
  padding: var(--space-m);
  border: 1px solid var(--color-frame-line);
  background: var(--color-card);
}

/* ---------------------------------------------------------------------------
 * Buttons and form fields.
 * ------------------------------------------------------------------------ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--tap-target);
  padding: 0 var(--space-m);
  border: 0;
  border-radius: var(--radius-pill);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

.button--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.button--primary:hover {
  background: var(--color-accent-strong);
  color: var(--color-on-accent);
  text-decoration: none;
}

.button:active {
  transform: translateY(1px);
}

.button__arrow {
  transition: transform 150ms ease;
}

.button:hover .button__arrow {
  transform: translate(2px, -2px);
}

.field {
  display: block;
  margin-bottom: var(--space-m);
}

.field__label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 500;
}

.field__input {
  width: 100%;
  min-height: calc(var(--tap-target) + 4px);
  padding: 0 var(--space-s);
  border: 1px solid var(--color-text-muted);
  border-radius: 6px;
  background: var(--color-card);
}

.form-alert {
  margin-bottom: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border-left: 3px solid var(--color-alert);
  background: var(--color-alert-surface);
  color: var(--color-alert);
}

/* ---------------------------------------------------------------------------
 * Login page.
 * ------------------------------------------------------------------------ */
.login-panel {
  max-width: 26rem;
  margin: 0 auto;
}

.login-panel .page-title {
  margin-bottom: var(--space-m);
  text-align: center;
}

.login-panel .button {
  width: 100%;
}

/* ---------------------------------------------------------------------------
 * Stays page.
 * ------------------------------------------------------------------------ */
.page-intro {
  margin-bottom: var(--space-l);
}

.stay-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-l);
  padding: 0;
  list-style: none;
}

.stay-card .framed-panel__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.stay-card__kind {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stay-card__name {
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.stay-card__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s);
  margin-top: auto;
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-hairline);
}

.stay-card__facts dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.stay-card__facts dd {
  font-weight: 500;
}

.stay-card__link {
  align-self: flex-start;
  margin-top: var(--space-xs);
}

.empty-note {
  padding: var(--space-l) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-lead);
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * Prose: Markdown text from the content files. Work Sans ships 400 and 500
 * only, so bold is mapped to 500 instead of a synthesized weight.
 * ------------------------------------------------------------------------ */
.prose > * + * {
  margin-top: var(--space-s);
}

.prose h2,
.prose h3 {
  margin-top: var(--space-l);
  color: var(--color-accent-strong);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
}

.prose h3 {
  font-size: 1.0625rem;
}

.prose > :first-child {
  margin-top: 0;
}

.prose strong {
  font-weight: 500;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: var(--space-xs);
}

.prose li::marker {
  color: var(--color-mint-deep);
}

/* Long words (German compounds, e-mail addresses) wrap instead of overflowing;
   last lines avoid a single stranded word. */
.prose {
  overflow-wrap: break-word;
}

.prose p,
.prose li,
.timeline__text,
.shortcut-card__text {
  text-wrap: pretty;
}

.prose--document {
  max-width: 44rem;
}

/* ---------------------------------------------------------------------------
 * Home: framed photo hanging from the band, welcome and key facts side by
 * side on laptops, two shortcut cards below.
 * ------------------------------------------------------------------------ */
.home-photo {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin: calc(-1 * var(--space-m)) auto var(--space-xl);
}

.home-photo__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--color-frame-line);
}

/* Slideshow (several photos): slides stacked in a 3:2 frame, only the active one visible.
   The buttons come from slideshow.js, so without JavaScript just the first photo shows. */
.slideshow__viewport {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--color-frame-line);
  background: var(--color-mint-light);
}

.slideshow__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 800ms ease;
}

.slideshow__slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .slideshow__slide {
    transition: none;
  }
}

.slideshow__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-top: var(--space-xs);
}

.slideshow__button {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  padding: 0 var(--space-s);
  border: 1px solid var(--color-frame-line);
  border-radius: var(--radius-pill);
  background: var(--color-card);
  color: var(--color-accent-strong);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.slideshow__button:hover {
  background: var(--color-mint-light);
  color: var(--color-text);
}

.slideshow__counter {
  flex: 1;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  text-align: center;
}

.home-columns {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

.home-welcome .page-title {
  margin-bottom: var(--space-s);
}

.prose--welcome {
  font-size: var(--font-size-lead);
}

.home-facts .framed-panel__inner {
  padding: var(--space-l) var(--space-m);
}

.home-facts__section + .home-facts__section {
  margin-top: var(--space-l);
}

.home-facts__title {
  margin-bottom: var(--space-s);
  color: var(--color-accent);
  font-size: 2rem;
}

.shortcuts {
  margin-top: var(--space-xl);
}

.shortcuts__list {
  display: grid;
  gap: var(--space-m);
  padding: 0;
  list-style: none;
}

/* The whole card is the link; the arrow nudges forward on hover. */
.shortcut-card {
  position: relative;
  display: grid;
  gap: var(--space-xs);
  height: 100%;
  padding: var(--space-m) calc(var(--space-l) + var(--space-m)) var(--space-m) var(--space-m);
  border-left: 3px solid var(--color-mint);
  background: var(--color-card);
  box-shadow: var(--shadow-panel);
  color: var(--color-text);
  text-decoration: none;
  transition: transform 200ms var(--ease-soft), border-color 200ms var(--ease-soft);
}

.shortcut-card:hover {
  color: var(--color-text);
  border-left-color: var(--color-accent);
  transform: translateY(-2px);
}

.shortcut-card__title {
  color: var(--color-accent);
  font-size: 2rem;
}

.shortcut-card__text {
  color: var(--color-text-muted);
}

.shortcut-card__arrow {
  position: absolute;
  top: 50%;
  right: var(--space-m);
  color: var(--color-accent);
  font-size: 1.5rem;
  transform: translateY(-50%);
  transition: transform 200ms var(--ease-soft);
}

.shortcut-card:hover .shortcut-card__arrow {
  transform: translate(4px, -50%);
}

@media (min-width: 40rem) {
  .shortcuts__list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
  }
}

@media (min-width: 56rem) {
  .home-photo {
    margin-top: calc(-1 * var(--space-l));
    transform: rotate(-1deg);
  }

  .home-columns {
    grid-template-columns: 1.2fr 1fr;
  }
}

/* ---------------------------------------------------------------------------
 * Information cards: one per Markdown section (travel modes, contacts).
 * ------------------------------------------------------------------------ */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-l);
  padding: 0;
  list-style: none;
}

.info-card {
  padding: var(--space-m);
  border-top: 3px solid var(--color-mint);
  background: var(--color-card);
  box-shadow: var(--shadow-panel);
}

.info-card__title {
  margin-bottom: var(--space-s);
  color: var(--color-accent-strong);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
}

/* A link alone on its line (phone number, e-mail) gets a full tap target. */
.info-card .prose p > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
}

.info-card .prose > * + * {
  margin-top: var(--space-xs);
}

/* ---------------------------------------------------------------------------
 * Travel: venue address with the outbound map link.
 * ------------------------------------------------------------------------ */
.venue-panel {
  margin-bottom: var(--space-l);
}

.venue-panel__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}

.venue-panel__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.venue-panel__address {
  display: grid;
  margin-top: var(--space-xs);
  font-style: normal;
}

.venue-panel__name {
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.3;
}

@media (min-width: 40rem) {
  .venue-panel__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-l);
  }
}

/* ---------------------------------------------------------------------------
 * Schedule: jump links between days and a timeline per day. The thin line
 * and the dots run down the gap between time and description.
 * ------------------------------------------------------------------------ */
.day-jump {
  margin-bottom: var(--space-l);
}

.day-jump__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  padding: 0;
  list-style: none;
}

.day-jump__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: 0 var(--space-m);
  border: 1px solid var(--color-frame-line);
  border-radius: var(--radius-pill);
  background: var(--color-card);
  color: var(--color-accent-strong);
  font-weight: 500;
  text-decoration: none;
}

.day-jump__link:hover {
  background: var(--color-mint-light);
  color: var(--color-text);
}

.schedule-day {
  scroll-margin-top: var(--space-m);
}

.schedule-day + .schedule-day {
  margin-top: var(--space-xl);
}

.schedule-day__title {
  margin-bottom: var(--space-m);
  color: var(--color-accent);
  font-size: 2.25rem;
}

.timeline {
  --timeline-time-width: 3.25rem;
  --timeline-gap: var(--space-l);
  --timeline-dot: 0.75rem;

  padding: 0;
  list-style: none;
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--timeline-time-width) 1fr;
  column-gap: var(--timeline-gap);
  padding-bottom: var(--space-l);
}

.timeline__item::before,
.timeline__item::after {
  content: "";
  position: absolute;
  left: calc(var(--timeline-time-width) + var(--timeline-gap) / 2);
}

/* Line from this dot down to the next one. */
.timeline__item::before {
  top: 0.8rem;
  bottom: -0.8rem;
  width: 1px;
  background: var(--color-frame-line);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item:last-child::before {
  display: none;
}

.timeline__item::after {
  top: 0.45rem;
  width: var(--timeline-dot);
  height: var(--timeline-dot);
  margin-left: calc(var(--timeline-dot) / -2);
  border: 2px solid var(--color-mint-deep);
  border-radius: 50%;
  background: var(--color-page);
}

.timeline__time {
  color: var(--color-accent);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.timeline__title {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
}

.timeline__text {
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
}

/* Place of an item: a small pin, then the name (wrapped anywhere so long names fit a phone). */
.timeline__where {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}

.timeline__pin {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.1em;
  color: var(--color-accent);
}

@media (min-width: 48rem) {
  .timeline {
    --timeline-time-width: 4rem;
    --timeline-gap: var(--space-xl);
  }
}

/* ---------------------------------------------------------------------------
 * Wishes: a short letter from the couple on a framed card.
 * ------------------------------------------------------------------------ */
.letter {
  max-width: 44rem;
}

.letter .framed-panel__inner {
  padding: var(--space-l) var(--space-m);
}

.letter .prose > p:first-child {
  font-size: var(--font-size-lead);
}

@media (min-width: 48rem) {
  .letter .framed-panel__inner {
    padding: var(--space-xl);
  }
}

/* ---------------------------------------------------------------------------
 * Coming-soon page: a framed panel under a string of pennants (CSS only).
 * ------------------------------------------------------------------------ */
.coming-soon,
.bunting {
  max-width: 36rem;
  margin-inline: auto;
}

.coming-soon {
  text-align: center;
}

.coming-soon__eyebrow {
  margin-bottom: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.coming-soon .lead {
  margin-inline: auto;
  margin-bottom: var(--space-m);
}

/* Pennants: coloured stripes cut into downward triangles by a mask (one cone per flag),
   hanging from a thin string. The cone angle is atan((width / 2) / height) for the
   2rem x 1.75rem flag, so the triangle just touches both top corners. */
.bunting {
  --flag-width: 2rem;
  --flag-height: 1.75rem;
  --flag-half-angle: 29.7deg;

  height: calc(var(--flag-height) + 2px);
  margin-bottom: var(--space-s);
  background: repeating-linear-gradient(
    90deg,
    var(--color-mint-deep) 0 var(--flag-width),
    var(--color-peach) var(--flag-width) calc(var(--flag-width) * 2),
    var(--color-accent) calc(var(--flag-width) * 2) calc(var(--flag-width) * 3)
  );
  --flag-mask:
    linear-gradient(var(--color-text), var(--color-text)) 0 0 / 100% 2px no-repeat,
    conic-gradient(
        from calc(var(--flag-half-angle) * -1) at 50% 100%,
        #000 0 calc(var(--flag-half-angle) * 2),
        transparent 0
      )
      0 2px / var(--flag-width) var(--flag-height) repeat-x;
  -webkit-mask: var(--flag-mask);
  mask: var(--flag-mask);
}

@media (prefers-reduced-motion: no-preference) {
  .bunting {
    transform-origin: top center;
    animation: bunting-sway 6s ease-in-out infinite alternate;
  }

  @keyframes bunting-sway {
    from { transform: rotate(-0.6deg); }
    to { transform: rotate(0.6deg); }
  }
}