/* ===================================================
   Baptism Gentle — Theme Styles
   Palette: white · sky-blue · soft gold · dove-grey
   Font: Cormorant Garamond (serif) + Lato (sans)
=================================================== */

/* ── CSS Variables ────────────────────────────── */
:root {
    --accent-color: #5b9cc7;
    --btn-radius: 999px;
}

/* ── Reset & base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Lato', sans-serif;
    color: #4a4a5a;
    background: #f8f9fc;
    line-height: 1.7;
}

a { color: #5b9cc7; text-decoration: none; transition: color .2s; }
a:hover { color: #3a7eaa; }

/* ── Shared container ─────────────────────────── */
.bg-container {
    max-width: 780px;
    margin: 0 auto;
}

/*
 * 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.
 * To pin one specific section to a fixed color regardless of position, target
 * its own class with !important (e.g. `.bg-rsvp { background: #fff !important; }`).
 */
.bg-alt-sections > * {
    background: #f4f9fd;
}
.bg-alt-sections > *:nth-child(even) {
    background: #fff;
}

/* ── Section titles ───────────────────────────── */
.bg-section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 600;
    color: #2f5978;
    text-align: center;
    margin-bottom: 0.35rem;
    letter-spacing: .03em;
}
.bg-section-subtitle {
    text-align: center;
    font-size: .9rem;
    color: #8a9bb0;
    margin-bottom: 2.5rem;
    font-style: italic;
}
.bg-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #aed6f1, #c9a227);
    margin: .5rem auto 2rem;
    border-radius: 2px;
}

/* ── Nav bar ──────────────────────────────────── */
.bg-topnav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 1px solid transparent;
    padding: 1rem;
    display: flex;
    justify-content: start;
    gap: 1.5rem;
    flex-wrap: wrap;
    transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
}

/* Desktop only (mobile hides these links behind the hamburger toggle, which
   has its own self-contained dark-blur backdrop below — the bar itself stays
   transparent unconditionally there). Above the hamburger breakpoint the link
   row sits directly in the bar with no opaque panel of its own, so once
   scrolled past the hero onto a plain section the light link text would lose
   contrast against transparent — give the bar a solid/blurred background past
   the scroll threshold (.scrolled toggled by data-topbar in theme.js). */
@media (min-width: 601px) {
    .bg-topnav.scrolled {
        background: color-mix(in srgb, #18181b 92%, transparent);
        backdrop-filter: blur(10px);
        border-bottom-color: rgba(255,255,255,.08);
    }
}
.bg-topnav a {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    transition: color .2s;
}
.bg-topnav a:hover { color: #fff; }

/* Desktop: .bg-topnav__links is `display:contents` so its <a> children flex-flow
   directly inside .bg-topnav exactly as if the wrapper weren't there, and the
   hamburger toggle stays hidden. */
.bg-topnav__links { display: contents; }
.bg-topnav__toggle { display: none; }
/* .dpb-switch and .dpb-fab (demo Basic/Standard control + "create yours" badge) are
   styled globally in layouts/theme.blade.php — fixed at opposite bottom corners.
   Deliberately NOT scoped under .bg-topnav — they're rendered as siblings of <nav>
   in index.blade.php precisely so nothing about the nav (e.g. its scrolled-state
   backdrop-filter, which creates a containing block for position:fixed
   descendants) can affect their positioning. 2.5rem switch height matches the
   hamburger's touch-target size closely enough to read as one consistent row. */
.dpb-switch,
.dpb-fab {
    position: fixed;
    bottom: 1rem;
    z-index: 9999;
}
.dpb-fab { right: 1rem; }
/* .dpb-close sits just to the left of the cart, before it in both markup and
   reading order — same fixed row, not stacked on top of it. */
.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;
}

/* Mobile: a wrapped or horizontally-scrolling link row eats fixed vertical space
   over the hero and looks cluttered — collapse it behind a bordered, transparent
   hamburger button instead, opening a dropdown panel with the same links stacked. */
@media (max-width: 600px) {
    /* Always the same dark-translucent-blur treatment — same idea as
       .dpb-switch/.dpb-fab. The nav bar itself stays transparent at every
       scroll position now (no .scrolled styling at all), so as the page
       scrolls past the hero, this button sits over whatever section color
       comes next (dark countdown, white details, ...); a self-contained dark
       backdrop reads against anything regardless. */
    .bg-topnav__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(24,24,27,.55);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        cursor: pointer;
        transition: background .2s;
    }
    .bg-topnav__toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 1px;
        background: #fff;
        transition: transform .25s ease, opacity .2s ease;
    }
    .bg-topnav__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .bg-topnav__toggle.is-active span:nth-child(2) { opacity: 0; }
    .bg-topnav__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .bg-topnav__links {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        position: absolute;
        top: calc(100% + .5rem);
        left: 1rem;
        right: 1rem;
        padding: .5rem;
        background: rgba(255,255,255,.97);
        border: 1px solid #d9eaf5;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(47,89,120,.18);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .bg-topnav__links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .bg-topnav__links a {
        color: #2f5978;
        text-align: center;
        padding: .65rem 1rem;
        border-radius: 8px;
    }
    .bg-topnav__links a:hover {
        color: #3a7eaa;
        background: #f4f9fd;
    }

}

/* ── Hero ─────────────────────────────────────── */
.bg-hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 7rem 1.5rem 4rem;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(174,214,241,.35) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(201,162,39,.12) 0%, transparent 55%),
        #f8f9fc;
    position: relative;
    overflow: hidden;
}
.bg-hero--has-image { background: none; }
.bg-hero--has-image .bg-container { position: relative; z-index: 2; }
/* Subtle cross watermark */
.bg-hero::before {
    content: '✝';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 28rem;
    color: rgba(174,214,241,.08);
    pointer-events: none;
    line-height: 1;
}
.bg-hero__symbol {
    font-size: 3.5rem;
    margin-bottom: .75rem;
    display: block;
    animation: bg-float 4s ease-in-out infinite;
}
@keyframes bg-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
.bg-hero__eyebrow {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #c9a227;
    margin-bottom: .75rem;
}
.bg-hero__name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.8rem, 8vw, 5rem);
    font-weight: 600;
    color: #1c3d55;
    line-height: 1.1;
    margin-bottom: .5rem;
}
.bg-hero__parents {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    color: #6a7f8e;
    margin-bottom: 1.5rem;
    font-style: italic;
}
.bg-hero__godparent {
    display: inline-block;
    font-size: .85rem;
    background: rgba(174,214,241,.25);
    border: 1px solid #aed6f1;
    color: #2f5978;
    border-radius: 999px;
    padding: .35rem 1rem;
    margin-bottom: 1.75rem;
}
.bg-hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1.5rem;
    font-size: .85rem;
    color: #6a7f8e;
    margin-bottom: 2rem;
}
.bg-hero__meta span { display: flex; align-items: center; gap: .3rem; }

/* When a photo fills the hero, the text sits over an arbitrary uploaded image
   instead of the flat gradient above — force light, shadowed text and frosted
   chips here so legibility never depends on what colors that photo contains.
   The scrim in x-hero-swiper's overlay prop provides the contrast floor; the
   text-shadow is a second, independent safety net. */
.bg-hero--has-image .bg-hero__eyebrow,
.bg-hero--has-image .bg-hero__name,
.bg-hero--has-image .bg-hero__parents,
.bg-hero--has-image .bg-hero__meta {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.bg-hero--has-image .bg-hero__eyebrow { color: #f3d98a; }
.bg-hero--has-image .bg-hero__parents { color: rgba(255,255,255,.88); }
.bg-hero--has-image .bg-hero__godparent {
    color: #fff;
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.bg-hero--has-image .bg-hero__meta span {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    padding: .35rem .9rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ── Countdown ────────────────────────────────── */
.bg-countdown {
    padding: 4rem 1.5rem;
    background: linear-gradient(135deg, #1c3d55 0%, #2f5978 100%);
    color: #fff;
}

.bg-audio {
    padding: 5rem 1.5rem;
}
.bg-countdown .bg-section-title { color: #aed6f1; }
.bg-countdown .bg-section-subtitle { color: rgba(255,255,255,.55); }
.bg-countdown .bg-divider { background: linear-gradient(90deg, #aed6f1, #c9a227); }
.bg-countdown__timer {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 1rem 2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.bg-countdown__timer::-webkit-scrollbar { display: none; }
.bg-countdown__unit { text-align: center; }
.bg-countdown__number {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 8vw, 4.5rem);
    font-weight: 600;
    line-height: 1;
    color: #fff;
}
.bg-countdown__label {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #aed6f1;
    margin-top: .25rem;
    display: block;
}
.bg-countdown__sep { font-size: 3rem; color: rgba(255,255,255,.3); align-self: center; padding-bottom: .5rem; }

/* Keep all 4 units on one line rather than wrapping to a second row — shrink the
   numbers/gaps enough that they fit without relying on .bg-countdown__timer's
   overflow-x scroll fallback. */
@media (max-width: 480px) {
    .bg-countdown__timer { gap: 0 .5rem; }
    .bg-countdown__label { font-size: .55rem; letter-spacing: .06em; }
    .bg-countdown__sep { font-size: 1.5rem; padding-bottom: .35rem; }
}

/* ── Details ──────────────────────────────────── */
.bg-details {
    padding: 5rem 1.5rem;
    background: #fff;
}
.bg-details__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-bottom: 2.5rem;
}
.bg-details__card {
    text-align: center;
    padding: 2rem 1.5rem;
    border-radius: 12px;
    background: #f4f9fd;
    border: 1px solid #d9eaf5;
}
.bg-details__card-icon { font-size: 2rem; margin-bottom: .75rem; display: block; }
.bg-details__card-label {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #c9a227;
    font-weight: 700;
    margin-bottom: .35rem;
}
.bg-details__card-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: #1c3d55;
    font-weight: 600;
}
.bg-details__description {
    text-align: center;
    font-size: 1rem;
    color: #6a7f8e;
    max-width: 580px;
    margin: 0 auto;
    font-style: italic;
    line-height: 1.8;
}

/* ── Program / Timeline ───────────────────────── */
.bg-program {
    padding: 5rem 1.5rem;
}
.bg-timeline { list-style: none; max-width: 560px; margin: 0 auto; }
.bg-timeline__item {
    display: flex;
    gap: 1.25rem;
    padding-bottom: 2rem;
    position: relative;
}
.bg-timeline__item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 1.0rem;
    top: 2.2rem;
    bottom: 0;
    width: 1px;
    background: #aed6f1;
}
.bg-timeline__dot {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #aed6f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    margin-top: .1rem;
    z-index: 1;
}
.bg-timeline__time {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: #c9a227;
    text-transform: uppercase;
    margin-bottom: .1rem;
}
.bg-timeline__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    color: #1c3d55;
    font-weight: 600;
}
.bg-timeline__desc { font-size: .85rem; color: #8a9bb0; }

/* ── Poem / Message ──────────────────────────── */
.bg-poem {
    padding: 5rem 1.5rem;
    text-align: center;
}
.bg-poem .bg-container { max-width: 600px; }

.bg-poem__text {
    font-style: italic;
    font-size: 1.1rem;
    line-height: 2;
    white-space: pre-line;
    color: #3a5068;
}

.bg-poem__symbol {
    margin-top: 1.25rem;
    font-size: 1.5rem;
    opacity: .35;
    line-height: 1;
}

/* ── Our Story ─────────────────────────────────── */
.bg-story {
    padding: 5rem 1.5rem;
    text-align: center;
}

/* ── Gallery / Guest Wall ─────────────────────── */
.bg-gallery {
    padding: 5rem 1.5rem;
    text-align: center;
}
.bg-guest-wall {
    padding: 5rem 1.5rem;
    text-align: center;
}
.bg-gallery-upload {
    padding: 5rem 1.5rem;
    text-align: center;
}

/* No card here — same borderless layout as RSVP in this theme, same width. */
.bg-gallery-upload .gu-form {
    max-width: 620px;
    padding: 0 1.5rem;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

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

.bg-closing p {
    font-style: italic;
    font-size: .95rem;
    color: #3a5068;
    opacity: .55;
    margin: 0;
}

/* ── RSVP ─────────────────────────────────────── */
/* Pinned to its own gradient rather than joining the alternation. */
.bg-rsvp {
    padding: 5rem 1.5rem;
    background: linear-gradient(135deg, #eaf4fb 0%, #fdfaf3 100%) !important;
}
.bg-rsvp__form {
    max-width: 520px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 24px rgba(47,89,120,.08);
    border: 1px solid #d9eaf5;
}
.bg-rsvp__form label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6a7f8e;
    margin-bottom: .5rem;
}
.bg-rsvp__form input,
.bg-rsvp__form select {
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid #d9eaf5;
    border-radius: 8px;
    font-size: .95rem;
    background: #f8f9fc;
    color: #1c3d55;
    margin-bottom: 1.25rem;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    appearance: none;
}
.bg-rsvp__form input:focus,
.bg-rsvp__form select:focus {
    border-color: #5b9cc7;
    box-shadow: 0 0 0 3px rgba(91,156,199,.15);
}
.bg-rsvp__submit {
    width: 100%;
    padding: .85rem;
    background: linear-gradient(135deg, #2f5978, #5b9cc7);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .2s, transform .1s;
}
.bg-rsvp__submit:hover { opacity: .9; transform: translateY(-1px); }
.bg-rsvp__alert {
    display: none;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    font-size: .9rem;
    margin-top: 1rem;
}
.bg-rsvp__alert.success { background: #e8f6ee; color: #2d7a4f; border: 1px solid #b2dfca; display: block; }
.bg-rsvp__alert.error   { background: #fdecea; color: #c0392b; border: 1px solid #f5c6c0; display: block; }

/* ── Map ──────────────────────────────────────── */
.bg-dress-code {
    padding: 5rem 1.5rem;
    text-align: center;
}
.bg-good-to-know {
    padding: 5rem 1.5rem;
    text-align: center;
}

.bg-map {
    padding: 5rem 1.5rem;
}
.bg-map__embed {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(47,89,120,.1);
    border: 1px solid #d9eaf5;
    height: 360px;
}
.bg-map__embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.bg-map__address {
    text-align: center;
    margin-top: 1.25rem;
    font-size: .9rem;
    color: #6a7f8e;
}

/* ── Album ───────────────────────────────────── */
.bg-album { padding: 5rem 1.5rem; text-align: center; }
.bg-album__text { opacity: .65; margin-bottom: 2rem; font-size: .9rem; }
.bg-map__cta { text-align: center; margin-top: 1.5rem; }
.bg-timeline__desc a { margin-left: .4em; opacity: .7; font-size: .85em; color: inherit; }

/* ── Footer ───────────────────────────────────── */
.bg-footer {
    background: #1c3d55;
    color: rgba(255,255,255,.5);
    text-align: center;
    padding: 2.75rem 1.5rem;
    font-size: .8rem;
    letter-spacing: .04em;
}
.bg-footer strong { color: #aed6f1; }
.bg-footer__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    max-width: 12rem;
    margin: 0 auto 1rem;
    color: rgba(174,214,241,.6);
}
.bg-footer__ornament-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, currentColor);
}
.bg-footer__ornament-line:last-child {
    background: linear-gradient(to left, transparent, currentColor);
}
.bg-footer__ornament-mark {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
}
.bg-footer__signoff {
    max-width: 22rem;
    margin: .75rem auto 0;
    font-style: italic;
    letter-spacing: .02em;
    color: rgba(255,255,255,.68);
}
.bg-footer__cal {
    margin-top: 1.5rem;
    text-transform: none;
    letter-spacing: .02em;
}
.bg-footer__cal-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ── Premium badges ───────────────────────────── */
.bg-premium-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}
.bg-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1.25rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 2px solid currentColor;
    transition: background .2s, color .2s;
}
.bg-btn--outline { color: #5b9cc7; }
.bg-btn--outline:hover { background: #5b9cc7; color: #fff; }
.bg-btn--gold { color: #c9a227; }
.bg-btn--gold:hover { background: #c9a227; color: #fff; }

/* 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) {
.bg-hero,
.bg-countdown,
.bg-details,
.bg-program,
.bg-poem,
.bg-story,
.bg-gallery,
.bg-guest-wall,
.bg-gallery-upload,
.bg-closing,
.bg-rsvp,
.bg-dress-code,
.bg-good-to-know,
.bg-map,
.bg-album,
.bg-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}