/* ===================================================
   Celebration Simple — Theme Styles
   Palette: warm-white · sage-green · terracotta · gold
   Font: DM Serif Display (headlines) + DM Sans (body)
   Purpose: versatile "other" event template
=================================================== */

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

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

body {
    font-family: 'DM Sans', system-ui, sans-serif;
    color: #3d3d3d;
    background: #fdfcf9;
    line-height: 1.7;
}

a { color: #7a9e7e; text-decoration: none; transition: color .2s; }
a:hover { color: #5a7e5e; }

/* ── Container ──────────────────────────────────── */
.cs-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
}

/*
 * 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. `.cs-rsvp { background: #fff !important; }`).
 */
.cs-alt-sections > * {
    background: #fdfcf9;
}
.cs-alt-sections > *:nth-child(even) {
    background: #fff;
}

/* ── Section helpers ────────────────────────────── */
.cs-section-title {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    font-weight: 400;
    color: #2c3e2d;
    text-align: center;
    margin-bottom: .4rem;
}
.cs-section-sub {
    text-align: center;
    font-size: .9rem;
    color: #9aaa99;
    margin-bottom: 2.5rem;
    font-style: italic;
}
.cs-ornament {
    text-align: center;
    color: #c9864a;
    font-size: 1.1rem;
    letter-spacing: .4em;
    margin-bottom: 1.5rem;
    display: block;
}

/* ── Top nav ────────────────────────────────────── */
.cs-topnav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 1px solid transparent;
    padding: .8rem 1rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
    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) {
    .cs-topnav.scrolled {
        background: color-mix(in srgb, #18181b 92%, transparent);
        backdrop-filter: blur(10px);
        border-bottom-color: rgba(255,255,255,.08);
    }
}
.cs-topnav a {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    transition: color .2s;
}
.cs-topnav a:hover { color: #fff; }

/* Desktop: .cs-topnav__links is `display:contents` so its <a> children flex-flow
   directly inside .cs-topnav exactly as if the wrapper weren't there, and the
   hamburger toggle stays hidden. */
.cs-topnav__links { display: contents; }
.cs-topnav__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;
}

/* Mobile: collapse the link row behind a bordered hamburger button, opening a
   dropdown panel with the same links stacked. The dark-translucent hamburger
   treatment stays fixed regardless of what's beneath it (no .scrolled state
   exists anymore for the nav bar itself to swap between). */
@media (max-width: 600px) {
    /* .cs-topnav is centered by default (desktop link row) — pin the toggle to
       the left on mobile instead, matching baptism-gentle. */
    .cs-topnav { justify-content: flex-start; }

    .cs-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(40,45,35,.55);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        cursor: pointer;
        transition: background .2s;
    }
    .cs-topnav__toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 1px;
        background: #fff;
        transition: transform .25s ease, opacity .2s ease;
    }
    .cs-topnav__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .cs-topnav__toggle.is-active span:nth-child(2) { opacity: 0; }
    .cs-topnav__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .cs-topnav__links {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        position: absolute;
        top: calc(100% + .5rem);
        left: 1rem;
        right: 1rem;
        padding: .5rem;
        background: rgba(253,252,249,.97);
        border: 1px solid #ece8e0;
        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;
    }
    .cs-topnav__links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .cs-topnav__links a {
        color: #5a6e5a;
        text-align: center;
        padding: .65rem 1rem;
        border-radius: 8px;
    }
    .cs-topnav__links a:hover {
        color: #c9864a;
        background: #f4f1ea;
    }

}

/* ── Hero ────────────────────────────────────────── */
.cs-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 20% 15%, rgba(122,158,126,.15) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 85%, rgba(201,134,74,.12) 0%, transparent 50%),
        #fdfcf9;
    position: relative;
    overflow: hidden;
}
.cs-hero--has-image { background: none; }
.cs-hero--has-image .cs-container { position: relative; z-index: 2; }
/* Subtle botanical circles */
.cs-hero::before,
.cs-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(122,158,126,.25);
    pointer-events: none;
}
.cs-hero::before { width: 400px; height: 400px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.cs-hero::after  { width: 560px; height: 560px; top: 50%; left: 50%; transform: translate(-50%,-50%); }

.cs-hero__eyebrow {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #c9864a;
    margin-bottom: .75rem;
}
.cs-hero__symbol {
    font-size: 3rem;
    display: block;
    margin-bottom: .75rem;
    animation: cs-float 5s ease-in-out infinite;
}
@keyframes cs-float {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%       { transform: translateY(-10px) rotate(3deg); }
}
.cs-hero__title {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(2.8rem, 8vw, 5rem);
    font-weight: 400;
    color: #2c3e2d;
    line-height: 1.1;
    margin-bottom: .5rem;
}
.cs-hero__cohost {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    color: #7a8e7a;
    margin-bottom: 1.75rem;
    font-style: italic;
}
.cs-hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
    font-size: .85rem;
    color: #7a8e7a;
    margin-bottom: 2.25rem;
}
.cs-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. */
.cs-hero--has-image .cs-hero__eyebrow,
.cs-hero--has-image .cs-hero__title,
.cs-hero--has-image .cs-hero__cohost,
.cs-hero--has-image .cs-hero__meta {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.cs-hero--has-image .cs-hero__eyebrow { color: #f0c98a; }
.cs-hero--has-image .cs-hero__cohost { color: rgba(255,255,255,.88); }
.cs-hero--has-image .cs-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);
}
.cs-hero__rsvp-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #7a9e7e;
    color: #fff;
    padding: .8rem 2rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background .2s, transform .1s;
}
.cs-hero__rsvp-btn:hover { background: #5a7e5e; color: #fff; transform: translateY(-1px); }

/* ── Countdown ───────────────────────────────────── */
.cs-countdown {
    padding: 4.5rem 1.5rem;
    background: #2c3e2d;
    color: #fff;
}

.cs-audio {
    padding: 5rem 1.5rem;
}
.cs-countdown .cs-section-title { color: #d4e8d5; }
.cs-countdown .cs-section-sub   { color: rgba(255,255,255,.4); }
.cs-countdown .cs-ornament       { color: #c9864a; }
.cs-countdown__timer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
}
.cs-countdown__unit { text-align: center; }
.cs-countdown__number {
    display: block;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(3rem, 8vw, 4.5rem);
    color: #fff;
    line-height: 1;
}
.cs-countdown__label {
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-top: .3rem;
    display: block;
}
.cs-countdown__sep {
    font-size: 2.5rem;
    color: rgba(201,134,74,.5);
    align-self: center;
    padding-bottom: .4rem;
}

/* Shrink the numbers/gaps enough that all 4 units fit on one row down to
   360px, with nowrap + scroll as a fallback instead of letting them wrap to
   a 2x2 block. */
@media (max-width: 500px) {
    .cs-countdown__timer {
        gap: .5rem 1rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cs-countdown__timer::-webkit-scrollbar { display: none; }
    .cs-countdown__unit { flex-shrink: 0; }
    .cs-countdown__number { font-size: 2.2rem; }
    .cs-countdown__sep { font-size: 1.5rem; padding-bottom: .25rem; }
}

/* ── Details ─────────────────────────────────────── */
.cs-details {
    padding: 5rem 1.5rem;
    background: #fff;
}
.cs-details__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.cs-details__card {
    text-align: center;
    padding: 2rem 1.25rem;
    border-radius: 16px;
    background: #fdfcf9;
    border: 1px solid #ece8e0;
}
.cs-details__card-icon { font-size: 1.8rem; margin-bottom: .75rem; display: block; }
.cs-details__card-label {
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #c9864a;
    font-weight: 700;
    margin-bottom: .3rem;
}
.cs-details__card-value {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.15rem;
    color: #2c3e2d;
}
.cs-details__description {
    text-align: center;
    font-size: .95rem;
    color: #6b7a6b;
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.85;
}

/* ── Program ─────────────────────────────────────── */
.cs-program {
    padding: 5rem 1.5rem;
}
.cs-timeline { list-style: none; max-width: 580px; margin: 0 auto; }
.cs-timeline__item {
    display: flex;
    gap: 1.25rem;
    padding-bottom: 2rem;
    position: relative;
}
.cs-timeline__item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 1rem;
    top: 2rem;
    bottom: 0;
    width: 1px;
    background: #dde8dd;
}
.cs-timeline__dot {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #7a9e7e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    z-index: 1;
    margin-top: .1rem;
}
.cs-timeline__time {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: #c9864a;
    text-transform: uppercase;
    margin-bottom: .1rem;
}
.cs-timeline__title {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.05rem;
    color: #2c3e2d;
}
.cs-timeline__desc { font-size: .85rem; color: #8a9a8a; margin-top: .1rem; }
/* ── Poem / Message ─────────────────────────── */
.cs-poem {
    padding: 5rem 1.5rem;
    text-align: center;
}
.cs-poem .cs-container { max-width: 620px; }

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

.cs-poem__ornament {
    display: block;
    margin-top: 1.25rem;
    font-size: 1.25rem;
    opacity: .4;
}

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

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

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

/* ── Dress Code / Good to Know ───────────────── */
.cs-dress-code {
    padding: 5rem 1.5rem;
    text-align: center;
}
.cs-good-to-know {
    padding: 5rem 1.5rem;
    text-align: center;
}

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

.cs-closing p {
    font-style: italic;
    font-size: .95rem;
    color: #5a6e5a;
    opacity: .55;
    margin: 0;
}
/* ── RSVP ────────────────────────────────────────── */
/* Pinned to its own gradient rather than joining the alternation. */
.cs-rsvp {
    padding: 5rem 1.5rem;
    background: linear-gradient(160deg, #eef4ee 0%, #fdf6ef 100%) !important;
}
.cs-rsvp__form {
    max-width: 500px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 4px 30px rgba(44,62,45,.07);
    border: 1px solid #dde8dd;
}
.cs-rsvp__form label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7a8e7a;
    margin-bottom: .5rem;
}
.cs-rsvp__form input,
.cs-rsvp__form select {
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid #dde8dd;
    border-radius: 10px;
    font-size: .95rem;
    background: #fdfcf9;
    color: #2c3e2d;
    margin-bottom: 1.25rem;
    outline: none;
    appearance: none;
    transition: border-color .2s, box-shadow .2s;
}
.cs-rsvp__form input:focus,
.cs-rsvp__form select:focus {
    border-color: #7a9e7e;
    box-shadow: 0 0 0 3px rgba(122,158,126,.15);
}
.cs-rsvp__submit {
    width: 100%;
    padding: .85rem;
    background: #7a9e7e;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, transform .1s;
}
.cs-rsvp__submit:hover { background: #5a7e5e; transform: translateY(-1px); }
.cs-rsvp__alert {
    display: none;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    font-size: .9rem;
    margin-top: 1rem;
}
.cs-rsvp__alert.success { background: #e8f4e9; color: #2d6a34; border: 1px solid #b2d8b5; display: block; }
.cs-rsvp__alert.error   { background: #fdecea; color: #b83c34; border: 1px solid #f5c6c0; display: block; }

/* ── Map ─────────────────────────────────────────── */
.cs-map {
    padding: 5rem 1.5rem;
}
.cs-map__embed {
    border-radius: 16px;
    overflow: hidden;
    height: 360px;
    border: 1px solid #ece8e0;
    box-shadow: 0 2px 16px rgba(44,62,45,.06);
}
.cs-map__embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.cs-map__address { text-align: center; margin-top: 1.25rem; font-size: .9rem; color: #7a8e7a; }
.cs-map__cta { text-align: center; margin-top: 1.5rem; }
.cs-album { padding: 5rem 1.5rem; text-align: center; }
.cs-album__text { opacity: .65; margin-bottom: 2rem; }
.cs-timeline__desc a { margin-left: .4em; opacity: .7; font-size: .85em; color: inherit; }

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

/* ── Premium actions ─────────────────────────────── */
.cs-premium-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}
.cs-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.25rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    border: 2px solid currentColor;
    transition: background .2s, color .2s;
}
.cs-btn--sage  { color: #7a9e7e; }
.cs-btn--sage:hover  { background: #7a9e7e; color: #fff; }
.cs-btn--terra { color: #c9864a; }
.cs-btn--terra:hover { background: #c9864a; 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) {
.cs-hero,
.cs-countdown,
.cs-details,
.cs-program,
.cs-poem,
.cs-story,
.cs-gallery,
.cs-guest-wall,
.cs-gallery-upload,
.cs-dress-code,
.cs-good-to-know,
.cs-closing,
.cs-rsvp,
.cs-map,
.cs-album,
.cs-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}