/* ================================================
   Wedding Amour — Standard Wedding Theme
   Palette: blush · olive · ink · cream
   Fonts:   Playfair Display (headings/names) + Jost (body)
   Style:   Full-bleed romantic photo hero, alternating love-story rows,
            portfolio-style gallery grid — modeled on a classic wedding
            template, with our own photos/content wired in.
   ================================================ */

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

:root {
    --blush:        #d4b0a5;
    --blush-deep:   #b98a7c;
    --olive:        #939580;
    --olive-deep:   #767a63;
    --ink:          #2b2724;
    --text:         #5a5450;
    --muted:        #948d86;
    --cream:        #fbf6f3;
    --white:        #ffffff;
    --border:       rgba(185,138,124,.22);
    --accent-color: #b98a7c;
    --radius:       16px;
    --btn-radius:   50px;

    /* 'Great Vibes' stands in for the original reference template's licensed
       "monallesia" script font, which is set as the font-family for every
       heading (h1-h6) there — so --ff-heading carries that role here too.
       Numeric/functional bits that were never actual headings in the reference
       (buttons, countdown digits, schedule times, prose paragraphs) intentionally
       stay off this variable — a whole paragraph or a "12:00" schedule time in
       cursive script hurts legibility for no fidelity gain, since those aren't
       headings in the source design either. */
    --ff-heading: 'Great Vibes', cursive;
    --ff-serif:   'Playfair Display', Georgia, serif;
    --ff-body:    'Jost', Arial, sans-serif;

    --gold-line: linear-gradient(90deg, transparent, var(--blush-deep) 25%, var(--olive) 75%, transparent);

    --card-shadow: 0 1px 2px rgba(43,39,36,.04), 0 8px 24px rgba(43,39,36,.06), 0 40px 70px rgba(43,39,36,.16);
    --card-shadow-sm: 0 1px 2px rgba(43,39,36,.04), 0 12px 30px rgba(43,39,36,.08);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--ff-body);
    color: var(--text);
    background: var(--cream);
    line-height: 1.75;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--blush-deep); text-decoration: none; transition: color .2s; }
a:hover { color: var(--olive-deep); text-decoration: none; }

/* ── Containers ─────────────────────────────── */
.wa-container     { max-width: 1100px; margin: 0 auto; padding: 0; }
.wa-container--sm { max-width: 680px; }

/*
 * Alternating section backgrounds, computed from what actually renders rather
 * than hardcoded per section — any of these can be hidden by plan tier, the
 * section-visibility toggle, or missing data, and the rhythm still holds
 * because :nth-child only counts DOM nodes that actually exist.
 */
.wa-alt-sections > * {
    background: var(--white);
}
.wa-alt-sections > *:nth-child(even) {
    background: var(--cream);
}

/* ── Section helpers ─────────────────────────── */
.wa-section-title {
    position: relative;
    font-family: var(--ff-heading);
    /* Great Vibes only ships a single (regular) weight — sized up from the old
       serif clamp() since script faces read visually smaller at the same
       font-size, with extra line-height so ascenders/descenders don't clip. */
    font-size: clamp(2.4rem, 6vw, 3.5rem);
    font-weight: 400;
    line-height: 1.35;
    color: var(--ink);
    text-align: center;
    padding-bottom: 1.5rem;
    margin-bottom: 1.25rem;
}

.wa-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    background: var(--gold-line);
}

.wa-section-title::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 9px;
    height: 9px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--blush-deep);
    z-index: 1;
}

.wa-eyebrow {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--blush-deep);
    text-align: center;
    margin-bottom: .75rem;
}

/* ── Floating topbar ─────────────────────────── */
.wa-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    padding: .85rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    transition: background .3s ease, backdrop-filter .3s ease;
}

/* Desktop only (mobile hides these links behind the hamburger toggle, which
   already has its own self-contained dark-blur backdrop — the bar itself
   stays transparent unconditionally there). Give the bar a solid/blurred
   background past the scroll threshold (.scrolled toggled by data-topbar in
   theme.js) so it reads consistently regardless of what scrolls underneath —
   light (not dark) here since .wa-topbar__links a is dark var(--ink) text,
   the opposite of the light/white nav text the other themes use. */
@media (min-width: 601px) {
    .wa-topbar.scrolled {
        background: color-mix(in srgb, var(--cream) 92%, transparent);
        backdrop-filter: blur(10px);
    }
}

.wa-topbar__links {
    display: flex;
    gap: 1.75rem;
    margin-left: auto;
}

.wa-topbar__links a {
    position: relative;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: .75;
    padding-bottom: .2rem;
}

.wa-topbar__links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .25s ease;
}

.wa-topbar__links a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.wa-topbar__toggle { display: none; }

/* Demo-only Basic/Standard switch + close + cart badge — shared look defined
   globally in layouts/theme.blade.php, just positioned here at opposite bottom
   corners, at every screen width. */
.dpb-switch,
.dpb-fab {
    position: fixed;
    bottom: 1rem;
    z-index: 9999;
}
.dpb-fab { right: 1rem; }
.dpb-close { right: 4rem; }
.dpb-switch {
    left: 1rem;
    display: flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 .25rem;
}
.dpb-switch a {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 .9rem;
    font-size: 12px;
}

/* ── Hero (content-height, host + co-host photos) ───────
   Matches the reference design's "static hero" variant: centered names/date sit
   above a row of three arched panels rather than a full-bleed photo behind the
   text — so there's no dark-photo/light-text contrast concern here at all, and
   the section's height is just however tall its content is, not a forced
   min-height: 100vh. */
.wa-hero {
    position: relative;
    padding: 7.5rem 1.5rem 4rem;
    text-align: center;
    background: linear-gradient(180deg, var(--blush) 0%, var(--cream) 45%);
}

.wa-hero__date {
    max-width: 46rem;
    margin: 0 auto;
}

.wa-hero__eyebrow {
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .45em;
    text-transform: uppercase;
    color: var(--blush-deep);
    margin-bottom: 1rem;
}

.wa-hero__names {
    font-family: var(--ff-heading);
    font-size: clamp(2.75rem, 8vw, 5.5rem);
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: .75rem;
}

.wa-hero__amp {
    display: inline-block;
    font-weight: 400;
    color: var(--olive);
    margin: 0 .15em;
}

.wa-hero__date-text {
    font-size: 1.15rem;
    color: var(--text);
}

/* Standalone floral accent — host/co-host photos no longer live in the hero,
   they moved down into "Meet the Couple" (see .wa-couple__photo below), which
   now carries the arched-panel treatment this used to be shared with. */
.wa-hero__accent {
    max-width: clamp(6rem, 16vw, 10rem);
    margin: 2.5rem auto 5rem;
}
.wa-hero__accent img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 20px rgba(43,39,36,.12));
    animation: wa-hero-sway 8s ease-in-out infinite alternate;
}

@keyframes wa-hero-sway {
    from { transform: rotate(-3deg) translateY(0); }
    to   { transform: rotate(3deg) translateY(-8px); }
}

.wa-btn,
.wa-hero__cta {
    margin-top: 3rem;
    display: inline-block;
    background: linear-gradient(135deg, var(--blush-deep), var(--olive-deep));
    color: #fff !important;
    font-family: var(--ff-body);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-decoration: none;
    padding: .95rem 2.75rem;
    border-radius: var(--btn-radius);
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(185,138,124,.4);
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.wa-btn:hover,
.wa-hero__cta:hover {
    background: linear-gradient(135deg, var(--olive-deep), var(--blush-deep));
    box-shadow: 0 12px 28px rgba(147,149,128,.4);
    text-decoration: none;
    transform: translateY(-2px);
}

/* ── Shape divider (hero seam) ────────────────── */
.wa-shape {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    direction: ltr;
    pointer-events: none;
    z-index: 1;
}
.wa-shape-top { top: -1px; }
.wa-shape-bottom { bottom: -1px; }
.wa-shape[data-negative="false"].wa-shape-bottom,
.wa-shape[data-negative="true"].wa-shape-top {
    transform: rotate(180deg);
}
.wa-shape svg {
    display: block;
    width: calc(100% + 1.3px);
    height: 46px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* ── Section corner accent ─────────────────────
   A curved laurel branch (see partials/section-accent.blade.php), included either
   as a direct sibling of .wa-container (sections this theme owns directly) or
   nested inside it as the first child of a shared component's `heading` slot
   (dress-code, story timeline, etc.) — either way it's the first element at its
   DOM level, so the general sibling selector below reliably lifts real content
   above the decoration regardless of nesting depth. */
.wa-couple, .wa-countdown, .wa-audio, .wa-story, .wa-gallery, .wa-program, .wa-dress-code,
.wa-good-to-know, .wa-location, .wa-guest-wall, .wa-album, .wa-closing, .wa-rsvp {
    position: relative;
    overflow: hidden;
}

.wa-section-accent {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.wa-section-accent__branch {
    position: absolute;
    display: block;
    width: 140px;
    height: 140px;
    opacity: .14;
}
.wa-section-accent__branch--1 {
    top: -20px;
    left: -20px;
    color: var(--blush-deep);
}
.wa-section-accent__branch--2 {
    bottom: -20px;
    right: -20px;
    transform: rotate(180deg);
    color: var(--olive);
}

@media (max-width: 700px) {
    .wa-section-accent__branch { display: none; }
}

/* Only every other section gets the accent, following the same rhythm as the
   background-tint alternation above — on every single section back-to-back it
   reads as repetitive. */
.wa-alt-sections > *:nth-child(odd) .wa-section-accent {
    display: none;
}

.wa-couple .wa-section-accent ~ *,
.wa-countdown .wa-section-accent ~ *,
.wa-audio .wa-section-accent ~ *,
.wa-story .wa-section-accent ~ *,
.wa-gallery .wa-section-accent ~ *:not(.gg-lightbox),
.wa-program .wa-section-accent ~ *,
.wa-dress-code .wa-section-accent ~ *,
.wa-good-to-know .wa-section-accent ~ *,
.wa-location .wa-section-accent ~ *,
.wa-guest-wall .wa-section-accent ~ *,
.wa-album .wa-section-accent ~ *,
.wa-closing .wa-section-accent ~ *,
.wa-rsvp .wa-section-accent ~ * {
    position: relative;
    z-index: 2;
}

/* ── Meet the Couple ──────────────────────────── */
/* Rides up over the hero's bottom edge as a raised white card (.wa-hero's
   negative margin-bottom pulls the following section up). Needs
   position:relative + a z-index above the hero's internal stacking (shape-
   divider, accent) so it paints on top, and its own opaque background so it
   reads as a card sitting on the hero rather than a transparent continuation
   of it. overflow is explicitly visible (overriding the shared section-accent
   rule below, which sets overflow:hidden on every alt-section) because the
   photos are deliberately meant to poke up out of this box — see
   .wa-couple__photo. */
.wa-couple {
    position: relative;
    z-index: 2;
    overflow: visible;
    background: var(--white);
    padding: 0 1rem 5.5rem;
    border-radius: 32px 32px 0 0;
    text-align: center;
}

/* .wa-couple's own children are just the decoration layer (position:absolute,
   out of flow) and .wa-container, so the flex context that "order" needs has
   to live on .wa-container itself — .wa-couple__grid is its direct child. */
.wa-couple > .wa-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* order:-1 visually moves the photo row above the eyebrow/title that precede
   it in the markup (DOM/reading order is untouched — screen readers still hit
   the heading first) so the photos sit flush against the card's own top edge,
   which is what makes the half-in-hero/half-on-white split below line up. */
.wa-couple__grid {
    order: -1;
    --cp-w: clamp(25rem, 20vw, 14rem);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    margin: 0 0 2rem;
    flex-wrap: wrap;
}

.wa-couple__person {
    position: relative;
    width: var(--cp-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    /* Reserves flow space for the photo's bottom half — the photo itself is
       absolutely positioned and contributes no height to normal flow, so
       without this the role/name text below would sit right under the seam
       instead of under the visible (white-side) half of the photo. */
    padding-top: calc(var(--cp-w) * 2 / 3);
}

/* Arched panel, positioned so its vertical center sits exactly on
   .wa-couple__person's top edge (= the card's own top edge, since the grid
   has no top margin/padding above it) — translate(-50%, -50%) from top:0
   means precisely the top half renders above that line, over the hero's
   background, and the bottom half renders below it, over the white card. */
.wa-couple__photo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--cp-w);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(43,39,36,.22);
}

.wa-couple__photo::before {
    content: '';
    position: absolute;
    inset: 3%;
    border: 10px solid rgba(255,255,255,.6);
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}

.wa-couple__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: wa-hero-zoom 25s ease-in-out infinite alternate;
}

@keyframes wa-hero-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}

.wa-couple__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.5rem, 5vw, 4rem);
    background: var(--olive-deep);
}

.wa-couple__role {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--blush-deep);
    margin-top: .7rem;
}

.wa-couple__name {
    font-family: var(--ff-heading);
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--ink);
}

.wa-couple__amp {
    font-family: var(--ff-heading);
    font-size: clamp(2.5rem, 4vw, 3.25rem);
    color: var(--olive);
    align-self: flex-start;
    /* Roughly centers the amp on the visible (white-side) half of the photos
       next to it — .wa-couple__person's padding-top reserves that same
       distance for the photo's bottom half. */
    margin: calc(var(--cp-w, 14rem) / 3) .5rem 0;
}

/* ── Countdown ───────────────────────────────── */
.wa-countdown {
    padding: 5rem 1rem;
    text-align: center;
}

/* Same "framed box" treatment as .wa-couple__photo (organic asymmetric
   border-radius, inset frame line, drop shadow) rather than the plain
   bordered box wedding-sage uses for its countdown — just filled with the
   heart-frame background image instead of a host/co-host photo. */
.wa-countdown__timer {
    position: relative;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    max-width: 44rem;
    margin: 2rem auto 0;
    padding: 2.5rem 2rem;
    overflow: hidden;
}



.wa-countdown__unit {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    min-width: 90px;
    text-align: center;
    box-shadow: var(--card-shadow-sm);
    overflow: hidden;
}
.wa-countdown__unit::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gold-line);
}

.wa-countdown__number {
    display: block;
    font-family: var(--ff-serif);
    font-size: clamp(2rem, 6vw, 3.25rem);
    font-weight: 700;
    color: var(--blush-deep);
    line-height: 1;
}

.wa-countdown__label {
    display: block;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .5rem;
}

/* ── Audio player ──────────────────────────── */
.wa-audio {
    padding: 5rem 1rem;
    text-align: center;
}

/* ── Poem / message ──────────────────────────── */
.wa-poem {
    padding: 6rem 1.5rem;
    text-align: center;
}

.wa-poem__card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--card-shadow-sm);
    padding: 3.25rem 2.5rem 2.75rem;
    overflow: hidden;
}
.wa-poem__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--gold-line);
}

.wa-poem__text {
    font-family: var(--ff-serif);
    font-size: clamp(1.05rem, 2.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.9;
    color: var(--ink);
    white-space: pre-line;
}

.wa-poem__sig {
    margin-top: 1.75rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--blush-deep);
}

/* ── Our Story ─────────────────────────────────
   Dedicated component (<x-wedding-amour-story-timeline>), rebuilt to match the
   reference template's wpo-story-section-s4 layout as closely as our single-
   photo-per-milestone data allows: a plain (unframed, unshadowed) photo on one
   side, a square-bordered, background-less text panel on the other, each with
   a solid offset color block peeking out behind it, alternating sides every
   row. The reference's text column also carries a *second*, smaller photo
   above its bordered box — dropped here since a milestone only ever has one
   photo to work with; everything else (borders, offset blocks, spacing,
   type scale, side-swap) follows the source. */
.wa-story {
    padding: 5.5rem 1.5rem;
    text-align: center;
}

.wa-story__intro {
    max-width: 34rem;
    margin: 0 auto 1rem;
    font-size: 1rem;
    line-height: 1.7;
}

.wa-story__list {
    max-width: 75rem;
    margin: 3rem auto 0;
}

.wa-story__item {
    display: flex;
    align-items: flex-start;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-bottom: clamp(3rem, 8vw, 5.5rem);
    text-align: left;
}
.wa-story__item:last-child {
    padding-bottom: 0;
}

.wa-story__photo,
.wa-story__card {
    flex: 1 1 50%;
    min-width: 0;
}

/* Default order: photo left, card right. --reverse swaps sides by flipping
   flex order rather than touching markup, so alternation is a pure style
   concern — matches the reference's :nth-child(even) order-swap technique. */
.wa-story__item--reverse .wa-story__photo { order: 2; }
.wa-story__item--reverse .wa-story__card { order: 1; }

/* Plain, unadorned photo — no rounded corners, no card shadow, no zoom. The
   reference relies entirely on the offset color block behind it for visual
   interest rather than any treatment on the photo itself. */
.wa-story__photo {
    position: relative;
    aspect-ratio: 4 / 3;
}

.wa-story__photo::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    bottom: -1.5rem;
    width: 60%;
    height: 55%;
    background: var(--cream);
    z-index: -1;
}
.wa-story__item--reverse .wa-story__photo::before {
    left: auto;
    right: -1.5rem;
}

.wa-story__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Square-bordered, background-less panel — matches .wpo-story-content, which
   is a plain 1px border with no fill so the section's own alternating tint
   shows through. */
.wa-story__card {
    position: relative;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border: 1px solid var(--olive);
    text-align: center;
}

.wa-story__card::before {
    content: '';
    position: absolute;
    right: -1.5rem;
    bottom: -1.5rem;
    width: 60%;
    height: 55%;
    background: var(--cream);
    z-index: -1;
}
.wa-story__item--reverse .wa-story__card::before {
    right: auto;
    left: -1.5rem;
}

.wa-story__period {
    display: block;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 500;
    color: var(--olive);
    margin-bottom: 1rem;
}

.wa-story__title {
    font-family: var(--ff-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 400;
    line-height: 1.35;
    color: var(--ink);
    margin-bottom: 1rem;
}

.wa-story__desc {
    font-size: clamp(.95rem, 1.5vw, 1.15rem);
    line-height: 1.75;
    color: var(--text);
}

@media (max-width: 860px) {
    .wa-story__item,
    .wa-story__item--reverse {
        flex-wrap: wrap;
    }
    .wa-story__item--reverse .wa-story__photo,
    .wa-story__item--reverse .wa-story__card {
        order: 0;
    }
    .wa-story__photo,
    .wa-story__card {
        flex-basis: 100%;
    }
    .wa-story__photo::before,
    .wa-story__item--reverse .wa-story__photo::before,
    .wa-story__card::before,
    .wa-story__item--reverse .wa-story__card::before {
        display: none;
    }
}

/* ── Gallery ───────────────────────────────────
   Shared <x-gallery-grid> reskin: a defined edge instead of a borderless tile —
   equivalent to the reference's bordered portfolio grid. */
.wa-gallery {
    padding: 5.5rem 1rem;
    text-align: center;
}
.wa-gallery .gg-item {
    border: 1px solid var(--border);
}

/* ── Program ─────────────────────────────────── */
.wa-program {
    padding: 5.5rem 1rem;
    text-align: center;
}

.wa-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 2rem;
}

.wa-tl-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--card-shadow-sm);
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}

.wa-tl-item:hover {
    box-shadow: var(--card-shadow);
    transform: translateY(-2px);
}

.wa-tl-time {
    background: rgba(185,138,124,.12);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--blush-deep);
    padding: 1.25rem .5rem;
}

.wa-tl-body { padding: 1.1rem 1.5rem; text-align: left; }
.wa-tl-label { font-weight: 600; font-size: .95rem; color: var(--ink); }
.wa-tl-loc { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.wa-tl-loc a { margin-left: .4em; opacity: .8; font-size: .85em; color: inherit; }

/* ── Dress Code / Good to Know ───────────────── */
.wa-dress-code {
    padding: 5.5rem 1rem;
    text-align: center;
}
.wa-good-to-know {
    padding: 5.5rem 1rem;
    text-align: center;
}

.wa-dress-code .wa-container {
    position: relative;
    max-width: 680px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--card-shadow-sm);
    padding: 3rem 2.5rem;
}

/* Good to Know is rendered directly in index.blade.php rather than via the
   shared <x-good-to-know> component (see the comment there) so this theme can
   use its own line-art icon set instead of the shared component's hardcoded
   Heroicons — modeled on the wpo-features-item pattern from this template
   family: a circular icon badge over a centered title and description, in a
   white rounded card. The badge is the icon <svg> itself given a background +
   padding + border-radius:50% (no separate wrapper element needed — SVGs
   accept the normal CSS box model like any other element). */
.wa-gtk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}

.wa-gtk-card {
    text-align: center;
    background: var(--white);
    border-radius: 18px;
    box-shadow: var(--card-shadow-sm);
    padding: clamp(2rem, 5vw, 3rem) 1.5rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.wa-gtk-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow);
}

.wa-gtk-card__icon {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    padding: 1.25rem;
    box-sizing: content-box;
    background: var(--cream);
    border-radius: 50%;
    color: var(--blush-deep);
    margin: 0 auto 1.5rem;
}

.wa-gtk-card__title {
    font-family: var(--ff-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .5rem;
}

.wa-gtk-card__text {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--text);
}

/* ── Guest Wall ────────────────────────────────
   Shared <x-guest-wall> card grid, reskinned to match the rest of the theme's
   white-card-on-cream language. */
.wa-guest-wall {
    padding: 5rem 1rem;
    text-align: center;
}
.wa-guest-wall .gw-card {
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow-sm);
}
.wa-guest-wall .gw-card__quote,
.wa-guest-wall .gw-card__name {
    color: var(--blush-deep);
}

.wa-gallery-upload {
    padding: 5.5rem 1rem;
    text-align: center;
}

.wa-gallery-upload .gu-form {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--card-shadow-sm);
}

/* ── Location ────────────────────────────────── */
.wa-location {
    padding: 5.5rem 1rem;
    text-align: center;
}

.wa-location__address {
    font-size: .95rem;
    color: var(--muted);
    margin: .5rem 0 2.5rem;
}

.wa-map {
    max-width: 820px;
    margin: 1.5rem auto 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 50px rgba(0,0,0,.1);
}

.wa-map iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}

/* ── Closing ─────────────────────────────────── */
.wa-closing {
    padding: 3.5rem 1.5rem 1.5rem;
    text-align: center;
}

.wa-closing__text {
    font-family: var(--ff-serif);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--muted);
}

/* ── RSVP section ────────────────────────────── */
.wa-rsvp {
    padding: 3rem 1rem 6rem;
}

.wa-rsvp .rsvp-layout-wrap {
    max-width: 600px;
    padding: 0;
}

.wa-rsvp .rsvp-layout-wrap .rsvp-form-col {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--card-shadow-sm);
    padding: 1.25rem 1rem;
}

.wa-form .form__group label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .4rem;
}

.wa-rsvp .rsvp-qr-strip__inner {
    border-color: var(--border);
    background: var(--white);
}
.wa-rsvp .rsvp-qr-calendar { color: var(--blush-deep); }
.wa-rsvp .rsvp-qr-calendar:hover { color: var(--olive-deep); }

/* ── Album ───────────────────────────────────── */
.wa-album {
    padding: 5rem 1.5rem;
    text-align: center;
}
.wa-album__sub {
    color: var(--muted);
    font-size: .95rem;
    margin: .5rem 0 2.5rem;
}

/* ── Footer ──────────────────────────────────── */
.wa-footer {
    position: relative;
    background: var(--ink);
    color: rgba(255,255,255,.55);
    text-align: center;
    padding: 3.5rem 1.5rem 3rem;
    font-size: .82rem;
    line-height: 2.2;
}
.wa-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gold-line);
}
.wa-footer a { color: var(--blush); }
.wa-footer__names {
    font-family: var(--ff-heading);
    font-weight: 400;
    font-size: 1.6rem;
    color: rgba(255,255,255,.85);
    display: block;
    margin-bottom: .35rem;
}
.wa-footer__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    max-width: 14rem;
    margin: 0 auto 1.25rem;
    color: var(--blush);
}
.wa-footer__ornament-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, currentColor);
}
.wa-footer__ornament-line:last-child {
    background: linear-gradient(to left, transparent, currentColor);
}
.wa-footer__ornament-mark {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
}
.wa-footer__signoff {
    margin: 1rem auto 0;
    max-width: 22rem;
    font-style: italic;
    color: var(--blush);
    opacity: .9;
}
.wa-footer__cal {
    margin-top: 1.75rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.wa-footer__cal-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 880px) {
    .wa-hero { padding: 6rem 1.25rem 3rem; margin-bottom: -6rem; }
    .wa-couple { border-radius: 24px 24px 0 0; }
}

@media (max-width: 600px) {
    /* .wa-topbar is space-between (brand left, toggle right) on desktop — pin the
       toggle to the left instead on mobile, matching every other theme. */
    .wa-topbar { justify-content: flex-start; }
    .wa-topbar__toggle { order: -1; }

    .wa-topbar__toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 3rem;
        height: 3rem;
        padding: 0;
        border: 1.5px solid rgba(255,255,255,.25);
        border-radius: 50%;
        background: rgba(60,45,40,.55);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        cursor: pointer;
        transition: background .2s;
    }
    .wa-topbar__toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 1px;
        background: #fff;
        transition: transform .25s ease, opacity .2s ease;
    }
    .wa-topbar__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .wa-topbar__toggle.is-active span:nth-child(2) { opacity: 0; }
    .wa-topbar__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .wa-topbar__links {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        margin-left: 0;
        position: absolute;
        top: calc(100% + .5rem);
        left: 1rem;
        right: 1rem;
        padding: .5rem;
        background: rgba(251,246,243,.97);
        border: 1px solid var(--blush-deep);
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(0,0,0,.15);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .wa-topbar__links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .wa-topbar__links a {
        text-align: center;
        padding: .65rem 1rem;
        border-radius: 8px;
        color: var(--text);
        opacity: 1;
    }
    .wa-topbar__links a::after { display: none; }
    .wa-topbar__links a:hover { background: rgba(185,138,124,.12); color: var(--blush-deep); }

    .wa-hero { margin-bottom: -4.5rem; }
    .wa-couple__grid { --cp-w: clamp(7rem, 26vw, 9rem); gap: 1.25rem; }
    /* nowrap + scroll fallback guarantees all 4 units stay on one row down to
       360px, instead of flex-wrap letting them fall to a 2x2 block once
       their min-width no longer fits. */
    .wa-countdown__timer {
        padding: 1.5rem 1rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .wa-countdown__timer::-webkit-scrollbar { display: none; }
    .wa-countdown__unit { padding: 1.1rem 0.5rem; min-width: 62px; flex-shrink: 0; }
    .wa-poem__card { padding: 2rem 1.5rem; }
    .wa-dress-code .wa-container { padding: 2rem 1.5rem; }
    .wa-tl-item { grid-template-columns: 56px 1fr; }
    .wa-tl-time { font-size: .9rem; padding: 1rem .25rem; }

}

/* Standardized horizontal gutter across every content section on mobile
   (padding-x: 1rem), matching wedding-romantic-bloom's convention — several
   sections here otherwise use a wider desktop-only gutter (1.25rem/1.5rem)
   that just eats into already-limited mobile width. Appended at the very end
   of the file (not folded into an earlier @media block) so equal-specificity
   source order guarantees this wins over each section's own base padding
   rule, which is declared later in the file than this file's other,
   topbar-only 600px media query. */
@media (max-width: 600px) {
.wa-hero,
.wa-poem,
.wa-story,
.wa-closing,
.wa-album,
.wa-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}