/* ===========================================================
   Pavla & Petr — wedding one-pager
   Autumn motif: deep green, wine and ivory. Self-hosted fonts,
   no external assets/CDNs (site CSP is same-origin only).
   =========================================================== */

/* Fonts — Isabela (script, brand + hero title), Playfair Display (headings),
   Lora (body). Isabela is a single-weight TTF (not a Google Font, so no
   latin/latin-ext subsetting) — see
   assets/fonts/licenses/LICENSE-Isabela.txt for its (non-OFL, personal-use)
   license. Self-hosted so the page needs no external requests. */

@font-face {
  font-family: 'Isabela';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/isabela.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/lora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/playfairdisplay-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/playfairdisplay-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-ivory:      #F7F1E6;
  --color-ivory-deep: #ECE0CB;
  --color-green-deep: #2E3B24;
  --color-green:      #52643C;
  --color-green-soft: #8A9868;
  --color-wine:       #6B2338;
  --color-wine-deep:  #431624;
  --color-gold:       #A9873F;
  --color-rust:       #C1622D;
  --color-wood:       #8A5A34;
  --color-wood-deep:  #5C3A1E;
  --color-paper:      #FFFDF8;

  /* Muted bouquet palette — deliberately desaturated next to the brighter
     gold/rust above, used only by the corner bouquets (see below). */
  --color-cream:       #F3E9D8;
  --color-champagne:   #E8D9B5;
  --color-peach:       #E3B98C;
  --color-terracotta:  #C17A52;
  --color-burgundy:    #5B2333;
  --color-olive:       #7C7A4A;
  --color-sage:        #A9B48C;

  --font-heading:     'Playfair Display', Georgia, 'Times New Roman', Times, serif;
  --font-body:        'Lora', Georgia, 'Times New Roman', Times, serif;
  --font-handwritten: 'Isabela', 'Segoe Script', cursive;

  --max-width: 960px;
  --radius: 10px;
  --shadow-soft: 0 6px 20px rgba(46, 59, 36, 0.12);
}

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

/* Decorative vine/bouquet/branch motifs intentionally bleed a little
   past section edges (see .hero__decor, .corner-bouquet, .bg-watermark)
   — clipping only the horizontal axis, page-wide, stops that bleed from
   ever causing a horizontal scrollbar, without touching vertical
   overflow (sections that need vertical spill, e.g. .hero, stay free to
   let motifs reach past their top/bottom). This has to be set on BOTH
   html and body: body alone leaves html as the actual root scroller on
   many mobile browsers (notably iOS Safari), which can still register
   the bled-out decorations as extra scrollable width — the page then
   doesn't rest centered on its real content (headline, photo, cards);
   it rests centered on a canvas that includes the invisible floral
   overflow, so the visible content reads as shifted to one side. */
html, body { overflow-x: hidden; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-green-deep);
  background: var(--color-ivory);
  line-height: 1.65;
}

h1, h2 { font-family: var(--font-heading); font-weight: 600; margin: 0; }

a { color: var(--color-wine); }

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

/* Accessibility ------------------------------------------------ */

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-green-deep);
  color: var(--color-ivory);
  padding: 0.6em 1em;
  z-index: 100;
}
.skip-link:focus {
  left: 0.5em;
  top: 0.5em;
}

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

/* Header --------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 241, 230, 0.94);
  backdrop-filter: blur(4px);
}

/* Small leaf sprigs echoing .hero__decor, so the vine motif reads as
   continuing up from the hero into the header rather than stopping dead
   at a hard line. Positioned to peek out past the header's own edges. */
.header-decor {
  position: absolute;
  width: 60px;
  height: 84px;
  bottom: -18px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.header-decor--left { left: 4px; color: var(--color-green-soft); transform: rotate(-8deg); }

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.8em 1.2em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
}

.brand {
  font-family: var(--font-handwritten);
  font-size: 1.8rem;
  text-decoration: none;
  color: var(--color-wine);
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  text-decoration: none;
  color: var(--color-green-deep);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--color-wine);
}

.lang-switch {
  display: flex;
  gap: 0.3em;
}

.lang-switch__btn {
  border: 1px solid var(--color-green);
  background: transparent;
  color: var(--color-green-deep);
  border-radius: 999px;
  padding: 0.25em 0.75em;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: var(--font-body);
}

.lang-switch__btn[aria-pressed="true"] {
  background: var(--color-green-deep);
  color: var(--color-ivory);
  border-color: var(--color-green-deep);
}

.lang-switch__btn:hover { background: var(--color-wine); color: var(--color-ivory); border-color: var(--color-wine); }

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

.hero {
  position: relative;
  text-align: center;
  padding: 4.5em 1.2em 4em;
  background: var(--color-ivory);
}

.hero__decor {
  position: absolute;
  width: 130px;
  height: 180px;
  opacity: 0.3;
  top: -10px;
  z-index: 1;
}

.hero__decor--left { left: -10px; top: 440px; color: var(--color-green-soft); transform: rotate(-8deg); }
/* Desktop drops this vine entirely — only the mobile breakpoint below
   brings it back, repositioned. */
.hero__decor--right { right: -10px; color: var(--color-wine); transform: rotate(8deg) scaleX(-1); display: none; }

.hero__eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.85rem;
  color: var(--color-green);
}

.hero__photo {
  position: absolute;
  top: calc(9% + 50px);
  right: 5%;
  width: min(340px, 44%);
  z-index: 0;
  transform: rotate(-4deg);
}

/* Photo frame, plain paper-card border -------------------------------- */

.photo-frame {
  position: relative;
  width: 100%;
  /* Matches resources/pavca_a_petr_new.jpeg's own 444x520 ratio, so the
     photo shows in full with no cropping. */
  aspect-ratio: 111 / 130;
  padding: 10px;
  border-radius: 12px;
  background: var(--color-paper);
  box-shadow: var(--shadow-soft);
}

.photo-frame__photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.photo-frame__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Lightbox — click the hero photo to view it enlarged --------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3em 2em;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 20, 15, 0.85);
}

.lightbox__content {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 640px);
  max-height: 90vh;
}

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.lightbox__close {
  /* Anchored to the viewport corner (not .lightbox__content) so it
     stays visible regardless of how tall/wide the image renders —
     positioning it relative to the content risked pushing it off the
     top of the screen for large images. */
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 2;
  width: 2.2em;
  height: 2.2em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(30, 20, 15, 0.55);
  color: var(--color-ivory);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: rgba(30, 20, 15, 0.8);
  color: var(--color-champagne);
}

/* Corner bouquets — real photographic floral compositions (see
   assets/florals/, cut from resources/flowers-autumn*.png) rather than
   hand-drawn illustrations, each a single self-contained image, not a
   stack of separately-positioned sprigs.

   Two families:
   - --tl/--tr/--bl/--br: sit at one corner of a small positioned
     ancestor (.section__panel, .hero__photo) — used sparingly now, as
     quiet card-corner accents (usually --ghost + --sm), not on every
     card.
   - --edge-left/--edge-right: sit at the vertical mid-point of a whole
     .section, hugging the page's outer margin rather than a card
     corner. These are the main decorative rhythm: one per section,
     alternating sides down the page, so the eye picks up a steady
     left-right sway while scrolling instead of symmetric pairs
     clustered on every card.

   Mirroring and scale variation both go through the same two CSS
   custom properties (--flip, --scale) combined into one scale()
   transform, so a size/opacity utility can be added to any corner or
   edge instance without fighting over the transform property. Kept as
   siblings of .photo-frame / .section__panel / .section rather than
   descendants, since a clipped or overflow:hidden ancestor would clip
   absolutely-positioned children trying to escape it. Each image has
   its own natural aspect ratio, so height is left to scale with width. */

.corner-bouquet {
  position: absolute;
  width: 190px;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 3px 7px rgba(46, 59, 36, 0.16));
  --flip: 1;
  --scale: 1;
  transform: scale(calc(var(--flip) * var(--scale)));
  transition: opacity 0.3s ease;
}

.corner-bouquet__img { display: block; width: 100%; height: auto; }

.corner-bouquet--tl { top: -70px; left: -70px; }
.corner-bouquet--tr { top: -70px; right: -70px; --flip: -1; }
.corner-bouquet--bl { bottom: -70px; left: -70px; --flip: -1; }
.corner-bouquet--br { bottom: -70px; right: -70px; }

/* Edge rhythm pieces — anchored to the section, not the card, so they
   read as part of the page margin rather than framing any one block of
   content. Vertically centered by default; individual placements nudge
   top up/down a few percent (inline style) so the run down the page
   doesn't look mechanically identical. */
.corner-bouquet--edge {
  top: 50%;
  transform: translateY(-50%) scale(calc(var(--flip) * var(--scale)));
  width: 130px;
}
.corner-bouquet--edge-left { left: -56px; }
.corner-bouquet--edge-right { right: -56px; --flip: -1; }

/* Scale variants (±15-20%) so repeated placements don't read as
   identical stamps. */
.corner-bouquet--sm { --scale: 0.85; }
.corner-bouquet--lg { --scale: 1.15; }

/* Opacity variants let some bouquets recede into the background rather
   than compete with content — used on most edge pieces and all
   card-corner accents so the page stays airy. */
.corner-bouquet--ghost { opacity: 0.35; }
.corner-bouquet--soft { opacity: 0.55; }

/* The hero photo's own two bouquets run a touch larger — they're the
   page's single biggest floral moment, echoing the reference arch photo. */
.corner-bouquet--photo { width: 220px; }
.corner-bouquet--photo.corner-bouquet--tl { top: -98px; left: -98px; }
.corner-bouquet--photo.corner-bouquet--br { bottom: -98px; right: -98px; }

.corner-bouquet--footer { width: 150px; opacity: 0.85; }
.corner-bouquet--footer.corner-bouquet--bl { bottom: -50px; left: -30px; }

/* .corner-bouquet--edge-left/right reach out toward .section's own
   margin, which only stays comfortably wide once the viewport clears
   .section's own max-width (960px, see --max-width). Below that the
   section IS the viewport, so .section__panel's edge creeps inward
   continuously while the edge piece stayed full-size — worst gap (near
   zero clearance) sits right around 700-900px, not caught by a
   700px-only breakpoint. Shrinking/pushing out starts here instead so
   there's no gap in coverage between this and the 420px breakpoint
   below. */
@media (max-width: 960px) {
  .corner-bouquet--edge { width: 92px; }
  .corner-bouquet--edge-left { left: -85px; }
  .corner-bouquet--edge-right { right: -85px; }
}

@media (max-width: 700px) {
  .corner-bouquet { width: 130px; }
  .corner-bouquet--tl, .corner-bouquet--tr { top: -50px; }
  .corner-bouquet--bl, .corner-bouquet--br { bottom: -50px; }
  .corner-bouquet--tl, .corner-bouquet--bl { left: -50px; }
  .corner-bouquet--tr, .corner-bouquet--br { right: -50px; }
  .corner-bouquet--photo { width: 160px; }
  .corner-bouquet--photo.corner-bouquet--tl,
  .corner-bouquet--photo.corner-bouquet--tr { top: -70px; }
  .corner-bouquet--photo.corner-bouquet--bl,
  .corner-bouquet--photo.corner-bouquet--br { bottom: -70px; }
  .corner-bouquet--footer { width: 105px; }
  .corner-bouquet--footer.corner-bouquet--bl { bottom: -34px; left: -18px; }
}

@media (max-width: 420px) {
  .corner-bouquet { width: 98px; }
  .corner-bouquet--tl, .corner-bouquet--tr { top: -36px; }
  .corner-bouquet--bl, .corner-bouquet--br { bottom: -36px; }
  .corner-bouquet--tl, .corner-bouquet--bl { left: -36px; }
  .corner-bouquet--tr, .corner-bouquet--br { right: -36px; }
  .corner-bouquet--edge { width: 72px; }
  .corner-bouquet--edge-left { left: -65px; }
  .corner-bouquet--edge-right { right: -65px; }
  .corner-bouquet--photo { width: 122px; }
  .corner-bouquet--photo.corner-bouquet--tl,
  .corner-bouquet--photo.corner-bouquet--tr { top: -52px; }
  .corner-bouquet--photo.corner-bouquet--bl,
  .corner-bouquet--photo.corner-bouquet--br { bottom: -52px; }
}

/* Individual one-off position/scale overrides for specific bouquet
   instances, requested ad-hoc rather than part of the general
   --sm/--lg/--edge system above. Written as dedicated classes here,
   never as inline style="..." — this project's CSP is `style-src 'self'`
   with no `unsafe-inline`, so the browser silently drops any inline
   style attribute rather than erroring, which made early attempts at
   these tweaks appear to do nothing. Relies on matching the source
   order below (each rule here comes after the base .corner-bouquet /
   .corner-bouquet--edge rules it overrides) since specificity alone
   is otherwise tied at one class each. */
.corner-bouquet--hero-tilt { transform: translateY(-70px) scale(1.2) rotate(70deg); }

@media (max-width: 1650px) {
  /* .hero__photo has a fixed 340px width (see min(340px, 44%)) but is
     positioned with right:5%, so its left edge — where this bouquet
     sits — creeps steadily closer to the (roughly constant-width,
     centered) headline as the viewport narrows from very wide desktop
     down toward tablet. Combined with this piece's large rotate/
     translateY/scale, that means it drapes across "Petr" on laptop-
     width screens (confirmed on a 1280px and 1440px viewport — common
     MacBook Air sizes) even though it clears the text fine on a wide
     monitor. Shrinking it here is simpler and safer than touching the
     photo's own position, which the rest of the hero layout depends
     on. */
  .corner-bouquet--hero-tilt { transform: translateY(-35px) scale(0.65) rotate(70deg); }
}
.corner-bouquet--hero-accent {
  left: 7%;
  right: auto;
  top: auto;
  bottom: calc(10% + 50px);
  transform: scale(2.55);
}
.corner-bouquet--programme-pos { top: 58%; }
.corner-bouquet--menu-pos { top: 45%; }
.corner-bouquet--gifts-pos { top: 40%; transform: translateY(-50%) scale(-1.2); }
.corner-bouquet--rsvp-pos { top: 55%; }
.corner-bouquet--info-pos { top: 48%; transform: translateY(-50%) scale(1.725); }
.corner-bouquet--contacts-edge-pos { top: 40%; }
.corner-bouquet--contacts-accent-scale { transform: scale(3.825); }

/* Reusable background branch/leaf watermark — same faint line-art as
   .intro__watermark, scattered sparingly elsewhere as ambient texture
   behind the content. Never more than one per section, kept small and
   very low-opacity, so it reads as background detail rather than
   another bouquet competing with the florals or the copy. */
.bg-watermark {
  position: absolute;
  width: 260px;
  color: var(--color-green);
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}
/* Rotating a tall, narrow shape like this (viewBox 160x260) inflates
   its axis-aligned bounding box a lot more than the un-rotated width
   suggests — a 220px-wide box rotated 40deg paints out to nearly
   400px wide. Sized and angled conservatively here specifically to
   keep that rotated footprint clear of .section__panel, not just the
   pre-rotation width. */
.bg-watermark--menu { bottom: 4%; right: -30px; left: auto; width: 80px; transform: rotate(-20deg); }
.bg-watermark--info { top: 6%; left: -30px; right: auto; width: 80px; transform: rotate(20deg); }

/* Same line-art vine, but standing on its own as a slightly more visible
   floating accent (not a faint ambient watermark) next to the Dress
   code heading — bigger and less transparent than the other
   .bg-watermark uses, and positioned at the top-left rather than
   hugging the section's vertical midpoint. */
.dresscode__float-watermark {
  top: 2%;
  left: -20px;
  width: 90px;
  opacity: 0.3;
  transform: rotate(-18deg);
}

@media (max-width: 700px) {
  /* Purely decorative background texture — simplest to hide below the
     width where .section__panel starts eating into .section's own
     margin, rather than chase the rotated-bounding-box math down to
     every breakpoint. */
  .bg-watermark { display: none; }

  /* .corner-bouquet--gifts-pos/--info-pos carry a permanent enlarge
     multiplier (1.2x / 1.725x) from earlier one-off "make it bigger"
     requests, layered on top of the already-shrunk breakpoint width —
     on a narrow screen that combination pushes them into the card
     next to them. Placed here, after their base definitions further
     up this file, so this actually wins the (otherwise tied)
     cascade — an earlier attempt at this same fix was placed before
     those base rules and silently lost. Drop back to an unscaled
     mirror; the enlarge was a desktop-only flourish. */
  .corner-bouquet--gifts-pos { transform: translateY(-50%) scale(-1); }
  .corner-bouquet--info-pos { transform: translateY(-50%) scale(1); }

  /* Same story, bigger number: this one carries a 3.825x multiplier.
     At the 420px breakpoint's 98px base width that computes to a
     ~375px-wide painted box — wider than the viewport itself. */
  .corner-bouquet--contacts-accent-scale { transform: scale(1); }

  /* Mobile-only trims to the hero: drop the accent bouquet lower-left
     near the CTA button (too much competing detail in a narrow
     stack), and size up the photo's top-left bouquet 30% since it's
     the one carrying that corner. 0.65 was this piece's existing
     mobile scale (see the 1650px breakpoint above) — 30% bigger than
     that is 0.845. The photo's own bottom-right bouquet is
     intentionally left untouched. */
  .corner-bouquet--hero-accent { display: none; }
  .corner-bouquet--hero-tilt { transform: translateY(-35px) scale(0.845) rotate(70deg); }

  /* Unlike desktop (hidden entirely, see the base rule), the top-right
     vine comes back on mobile, nudged down from its default -10px —
     still comfortably above the "Zveme Vás..." eyebrow line, just not
     flush with the very top edge. */
  .hero__decor--right { display: block; top: 25px; }
}

.hero__content {
  position: relative;
  z-index: 2;
  /* Block-level children (h1/p) are full-width boxes regardless of how
     little of that width their text actually fills — with the hero
     title's huge font-size that invisible box was wide/tall enough to
     sit on top of .hero__photo and swallow clicks meant for the photo
     underneath. Only .hero__cta is actually interactive, so it opts
     back in below. */
  pointer-events: none;
}

.hero__title {
  /* Top/bottom margin (in rem, not em, so it doesn't scale with the
     title's own huge font-size) positions the title between
     .hero__eyebrow and .hero__date — both of which have their own
     margins zeroed out so this is the only spacing in play. Split
     unevenly rather than 50/50: the script font's glyphs sit high in
     their own line box (tall ascender loops, little descender), so an
     equal box-margin split reads as top-heavy — shifting more of the
     gap to the top nudges the visible letters down to where they look
     centered. */
  margin: 2.4rem 0 0.6rem;
  font-family: var(--font-handwritten);
  font-weight: 400;
  font-size: clamp(4.4rem, 14vw, 7.6rem);
  color: var(--color-wine-deep);
}

.hero__amp {
  color: var(--color-wine);
  padding: 0 0.15em;
}

.hero__date {
  margin: 0;
}

.hero__date time {
  display: inline-block;
  margin-top: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  color: var(--color-wine);
  letter-spacing: 0.06em;
}

.hero__countdown {
  margin-top: 1.2em;
  font-size: 0.95rem;
  color: var(--color-green);
}

.hero__cta {
  display: inline-block;
  pointer-events: auto;
  margin-top: 2em;
  padding: 0.75em 2em;
  background: var(--color-wine);
  color: var(--color-ivory);
  text-decoration: none;
  border-radius: 999px;
  font-size: 1rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, background 0.15s ease;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  background: var(--color-wine-deep);
  transform: translateY(-2px);
}

/* Sections --------------------------------------------------------- */

.section {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3.5em 1.2em;
  text-align: center;
}

.section__title {
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  color: var(--color-green-deep);
  margin-bottom: 0.3em;
}

.section__flourish {
  display: block;
  width: 64px;
  height: 20px;
  margin: 0.4em auto 1.3em;
  color: var(--color-wine);
}

.section__flourish--start {
  margin: 0 0 1.2em;
}

.menu__options {
  list-style: none;
  counter-reset: menu-option;
  display: flex;
  gap: 2.4em;
  margin: 0;
  padding: 0;
  text-align: left;
}

.menu__option {
  counter-increment: menu-option;
  flex: 1 1 0;
}

.menu__option + .menu__option {
  padding-left: 2.4em;
  border-left: 1px solid var(--color-green-soft);
}

.menu__option::before {
  content: "Menu " counter(menu-option);
  display: block;
  margin: 0 0 0.5em;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-wine);
}

.menu__soup {
  margin: 0 0 0.3em;
  font-style: italic;
  color: var(--color-green-deep);
}

.menu__main {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-wine);
}

.gifts__poem {
  /* data-i18n sets this via textContent, so line breaks in the
     translation string are plain \n characters, not <br> tags —
     pre-line renders them as line breaks without needing markup. */
  white-space: pre-line;
  max-width: 420px;
  margin: 0 auto;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--color-wine);
}

/* Dress code — colour palette shown as real watercolour maple-leaf
   paintings (assets/florals/leaf-*.webp, supplied by the user), one per
   swatch colour, rather than a generated shape, in two rows of 4
   (green/wine/ochre/wood, then mint/purple/yellow/beige). Source files
   carried a flat white background (green), a checkerboard
   AI-generator artefact (wood, beige, purple, yellow — same
   background-removal threshold as the corner-bouquet florals, see the
   README), or a dark vignette (an earlier wood source, since
   replaced); those were cut to real alpha transparency during import,
   the rest (wine, ochre, mint) already carried it. Each swatch just
   centres its own image inside a fixed-size box via object-fit-style
   centring (max-width/max-height: 100%, width/height: auto) so every
   leaf sits at a consistent scale despite differing natural aspect
   ratios, and each swatch rotates its leaf a different amount
   (.dresscode__swatch--N .dresscode__leaf-img) so the 8 stems don't
   all point the same way. */

.dresscode__text {
  max-width: 560px;
  margin: 0 auto 2.4em;
  color: var(--color-green-deep);
  white-space: pre-line;
}

.dresscode__palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6em 2.2em;
}

.dresscode__swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
}

.dresscode__stain {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
}

.dresscode__leaf-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(46, 59, 36, 0.25));
}

.dresscode__swatch--wine .dresscode__leaf-img {
  transform: rotate(180deg);
}

.dresscode__swatch--wood .dresscode__leaf-img {
  transform: rotate(90deg);
}

.dresscode__swatch--beige .dresscode__leaf-img {
  transform: rotate(30deg);
}

.dresscode__swatch--mint .dresscode__leaf-img {
  transform: rotate(-20deg);
}

.dresscode__swatch--purple .dresscode__leaf-img {
  transform: rotate(15deg);
}

.dresscode__swatch--yellow .dresscode__leaf-img {
  transform: rotate(-50deg);
}

.dresscode__label {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-green-deep);
}

@media (max-width: 480px) {
  .dresscode__palette { gap: 1.2em 1.6em; }
  .dresscode__stain { width: 90px; height: 90px; }
}

.section--intro { position: relative; }

.section__panel {
  max-width: 640px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 70px 16px 70px 16px;
  box-shadow: var(--shadow-soft);
  padding: 2.4em 2em;
}

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

.intro__watermark {
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%) rotate(10deg);
  width: 260px;
  color: var(--color-green);
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 700px) {
  /* At this width .intro__inner fills nearly the whole section, so a
     260px-wide watermark (sized for a roomy desktop margin) reaches
     straight across the text instead of sitting beside it. */
  .intro__watermark { display: none; }

  /* Forced line break only makes sense on the wide desktop line length;
     on mobile the text should wrap naturally instead. */
  .intro__motto-break { display: none; }
}

.intro__inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

.intro__lead {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--color-green-deep);
  margin: 0 0 1.5em;
}

.intro__lead--centered {
  text-align: center;
}

.intro__details {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4em;
}

.intro__details--stacked {
  flex-direction: column;
  align-items: center;
  gap: 1.8em;
  text-align: center;
}

.intro__details--stacked .intro__block {
  /* The base .intro__block flex-basis (200px) sizes a row of side-by-side
     columns; here flex-direction is column, so that same basis would force
     200px of *height* on short blocks like "Kdy?", leaving dead space below
     the text instead of centering it. Size to content instead. */
  flex: 0 0 auto;
}

.intro__block {
  flex: 1 1 200px;
}

.intro__block + .intro__block {
  padding-left: 2em;
  border-left: 1px solid var(--color-green-soft);
}

.intro__details--stacked .intro__block + .intro__block {
  padding-left: 0;
  padding-top: 1.8em;
  border-left: none;
  border-top: 1px solid var(--color-green-soft);
}

.intro__when-date {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-wine);
}

.intro__heading {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-wine);
  margin: 0 0 0.4em;
}

.intro__block p {
  margin: 0.2em 0;
}

.intro__map-link {
  display: inline-block;
  margin-left: 0.3em;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Map preview — privacy-friendly click-to-load Google Maps embed. Nothing
   is fetched from Google until the button is clicked (see initMapPreview
   in js/main.js); the placeholder button itself is fully self-hosted. */

.map-preview {
  margin: 1em auto 0;
  max-width: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.map-preview__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--color-green-soft);
  border-radius: var(--radius);
  background: var(--color-ivory-deep);
  color: var(--color-wine);
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.map-preview__btn:hover,
.map-preview__btn:focus-visible {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--color-wine);
}

.map-preview__icon {
  width: 18px;
  height: 18px;
  color: var(--color-wine);
}

.map-preview__iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Programme — vertical timeline, not a boxed list ------------------- */

.programme__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.6em;
  text-align: left;
  border-left: 2px solid var(--color-green-soft);
}

.programme__list > li {
  position: relative;
  padding: 0.55em 0 0.55em 0.4em;
}

.programme__list > li::before {
  content: "";
  position: absolute;
  left: calc(-1.6em - 6px);
  top: 1.1em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-wine);
  border: 2px solid var(--color-ivory);
}

.programme__time {
  display: inline-block;
  min-width: 3.4em;
  margin-right: 0.6em;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-wine);
}

.programme__sublist {
  list-style: none;
  margin: 0.6em 0 0 2.6em;
  padding: 0;
}

.programme__sublist li {
  padding: 0.25em 0 0.25em 1.2em;
  position: relative;
  font-size: 0.95rem;
  color: var(--color-green-deep);
}

.programme__sublist li::before {
  content: "";
  position: absolute;
  left: 0.1em;
  top: 0.6em;
  width: 9px;
  height: 7px;
  background: var(--color-green);
  border-radius: 0 70% 0 70%;
  transform: rotate(-45deg);
}

.programme__link {
  color: var(--color-wine);
  text-decoration: underline;
}

.programme__link:hover,
.programme__link:focus-visible {
  color: var(--color-wine-deep);
}

.rsvp__button {
  display: inline-block;
  margin-top: 1em;
  padding: 0.7em 1.8em;
  border-radius: 999px;
  background: var(--color-wine);
  color: var(--color-ivory);
  text-decoration: none;
}

.rsvp__button:hover,
.rsvp__button:focus-visible {
  background: var(--color-wine-deep);
}

.contacts__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
  margin: 0;
  padding: 0;
  text-align: center;
}

.contacts__item {
  flex: 1 1 160px;
}

.contacts__item + .contacts__item {
  padding-left: 2em;
  border-left: 1px solid var(--color-green-soft);
}

.contacts__role {
  margin: 0 0 0.1em;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-wine);
}

.contacts__name {
  margin: 0 0 0.4em;
  font-style: italic;
  color: var(--color-green-deep);
}

.contacts__phone {
  text-decoration: none;
  color: var(--color-green-deep);
}

.contacts__phone:hover,
.contacts__phone:focus-visible {
  color: var(--color-wine);
  text-decoration: underline;
}

.info__blocks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8em;
  text-align: center;
}

.info__block + .info__block {
  padding-top: 1.8em;
  border-top: 1px solid var(--color-green-soft);
  width: 100%;
}

.info__heading {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-wine);
  margin: 0 0 0.4em;
}

.info__block p {
  max-width: 480px;
  margin: 0 auto;
}

.info__link {
  white-space: nowrap;
}

.info__drivers {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-top: 0.8em;
}

.info__driver {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin: 0;
}

.info__driver-name {
  font-style: italic;
  color: var(--color-green-deep);
}

.info__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  text-decoration: none;
  color: var(--color-green-deep);
  white-space: nowrap;
}

.info__phone:hover,
.info__phone:focus-visible {
  color: var(--color-wine);
  text-decoration: underline;
}

.info__phone-icon {
  flex-shrink: 0;
}

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

.site-footer {
  position: relative;
  padding: 2em 1.2em 3em;
  text-align: center;
  border-top: 1px solid var(--color-ivory-deep);
}

.site-footer__brand {
  display: inline-block;
}

/* Responsive tweaks ----------------------------------------------------- */

@media (min-width: 600px) {
  .site-header__inner { flex-wrap: nowrap; }
}

@media (max-width: 480px) {
  .main-nav ul { gap: 0.8em; justify-content: center; width: 100%; }
  .site-header__inner { justify-content: center; }
  .hero__decor { width: 90px; height: 130px; }
  /* Below this width the photo drops out of its absolute top-right
     perch (see base .hero__photo) and back into normal document flow,
     landing between .hero__date and the countdown/CTA block thanks to
     its position in the markup — full opacity, no longer a faint
     background wash. Stays `relative` rather than `static` so it keeps
     anchoring its absolutely-positioned corner bouquets. */
  .hero__photo { position: relative; width: min(240px, 72%); margin: 1.4em auto; opacity: 1; }
  .intro__block + .intro__block { padding-left: 0; border-left: none; }
  .section__panel { border-radius: 40px 14px 40px 14px; padding: 1.8em 1.3em; }
  .menu__options { flex-direction: column; gap: 1.8em; }
  .menu__option + .menu__option { padding-left: 0; padding-top: 1.8em; border-left: none; border-top: 1px solid var(--color-green-soft); }
  .contacts__list { flex-direction: column; gap: 1.4em; }
  .contacts__item + .contacts__item { padding-left: 0; padding-top: 1.4em; border-left: none; border-top: 1px solid var(--color-green-soft); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__cta { transition: none; }
}