/* ================================================
   Wedding Classic Theme – Digital Invitation
   ================================================ */

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

:root {
    --gold:        #c9a84c;
    --accent-color: var(--gold);
    --gold-light:  #e8d5a3;
    --charcoal:    #2d2d2d;
    --dark:        #1a1a1a;
    --text:        #333;
    --muted:       #777;
    --bg-light:    #fdf9f3;
    --white:       #ffffff;
    --radius:      6px;
    --btn-radius:  50px;
    --ff-serif:    'Playfair Display', Georgia, serif;
    --ff-sans:     'Lato', sans-serif;
    --border:      #e4d9cc;
    --bg: #fdf9f3;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--ff-sans);
    color: var(--text);
    background: var(--bg-light);
    line-height: 1.7;
}

img { max-width: 100%; display: block; }
a  { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Utility ---------- */
.wc-container         { max-width: 1100px; margin: 0 auto; }
.wc-container--narrow { 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.
 * To pin one specific section to a fixed color regardless of position, target
 * its own class with !important (e.g. `.wc-rsvp { background: var(--bg-light) !important; }`).
 */
.wc-alt-sections > * {
    background: var(--bg-light);
}
.wc-alt-sections > *:nth-child(even) {
    background: var(--white);
}

.wc-section-title {
    font-family: var(--ff-serif);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--dark);
    text-align: center;
    margin-bottom: 1rem;
}
.wc-section-title::after,
.wc-section-title::before {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: var(--gold);
    margin: 0.5rem auto 0;
}

/* ---------- Hero ---------- */
.wc-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('../wedding-classic/images/hero.jpg') center/cover no-repeat;
    color: var(--white);
}
.wc-hero--has-image { background: none; }
.wc-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.28) 50%,
        rgba(0,0,0,.55) 100%
    );
}
.wc-hero__content {
    position: relative;
    z-index: 2;
    padding: 2rem;
}
.wc-hero__subtitle {
    font-size: .75rem;
    letter-spacing: .45em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 1.25rem;
}
.wc-hero__names {
    font-family: var(--ff-serif);
    font-size: clamp(3rem, 10vw, 6.5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.01em;
}
.wc-hero__ampersand {
    font-style: italic;
    color: var(--gold-light);
    display: block;
    font-size: .6em;
}
.wc-hero__meta {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    justify-content: center;
    font-size: .8rem;
    letter-spacing: .08em;
    opacity: .9;
}
.wc-hero__scroll {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    font-size: .7rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold-light);
    animation: bounce 2.4s ease-in-out infinite;
}
.wc-hero__scroll svg {
    width: 20px;
    opacity: .6;
}
.wc-hero__date,
.wc-hero__location {
    font-size: 0.9rem;
    margin-bottom: .25rem;
    letter-spacing: .1em;
}
.wc-hero__meta-divider {
    opacity: .6;
}

/* Text sits over an arbitrary uploaded photo when the swiper is active — force a
   shadow safety net independent of the graduated scrim above, since we can't
   guarantee the photo's brightness at every point behind the text. */
.wc-hero--has-image .wc-hero__subtitle,
.wc-hero--has-image .wc-hero__names,
.wc-hero--has-image .wc-hero__meta,
.wc-hero--has-image .wc-hero__scroll {
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* Hero nav — kept for any legacy references */
.wc-nav { display: none; }

/* Floating topbar */
.wc-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    padding: .9rem 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). 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) {
    .wc-topbar.scrolled {
        background: color-mix(in srgb, var(--dark) 92%, transparent);
        backdrop-filter: blur(10px);
    }
}

.wc-topbar__links {
    display: flex;
    gap: 1.75rem;
}

.wc-topbar__links a {
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    transition: color .2s;
}
.wc-topbar__links a:hover { color: var(--white); text-decoration: none; }

.wc-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;
}

@media (max-width: 600px) {
    /* .wc-topbar is space-between (brand left, toggle right) on desktop — pin the
       toggle to the left instead on mobile, matching baptism-gentle. order:-1
       moves it before the (opacity:0-until-scrolled) brand in visual order. */
    .wc-topbar { justify-content: flex-start; }
    .wc-topbar__toggle { order: -1; }

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

    .wc-topbar__links {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        position: absolute;
        top: calc(100% + .5rem);
        left: 1rem;
        right: 1rem;
        padding: .5rem;
        background: rgba(26,26,26,.97);
        border: 1px solid rgba(201,168,76,.25);
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(0,0,0,.5);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .wc-topbar__links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .wc-topbar__links a {
        text-align: center;
        padding: .65rem 1rem;
        border-radius: 8px;
        color: rgba(255,255,255,.85);
    }
    .wc-topbar__links a:hover {
        background: rgba(201,168,76,.12);
        color: var(--gold);
    }

}

/* ---------- Meet the Couple ---------- */
.wc-couple {
    padding: 5.5rem 1rem;
    text-align: center;
}

.wc-couple__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.wc-couple__person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}

.wc-couple__photo {
    position: relative;
    width: clamp(9.5rem, 16vw, 15rem);
    height: clamp(9.5rem, 16vw, 15rem);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow:
        0 0 0 8px var(--bg-light),
        0 0 0 9px rgba(201,168,76,.55),
        0 20px 45px rgba(26,26,26,.22);
}

.wc-couple__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wc-couple__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--gold-light);
    background: var(--charcoal);
}

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

.wc-couple__name {
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--dark);
}

.wc-couple__amp {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: clamp(2.25rem, 3.5vw, 3rem);
    color: var(--gold);
    align-self: center;
    margin: 0 .5rem;
    padding-bottom: 2.5rem;
}

@media (max-width: 560px) {
    .wc-couple__grid { flex-direction: column; gap: 2.5rem; }
    .wc-couple__amp { display: none; }
}

/* ---------- Countdown ---------- */
.wc-countdown {
    padding: 5rem 1rem;
    background: var(--charcoal);
    color: var(--white);
    text-align: center;
}

.wc-audio {
    padding: 5.5rem 1.5rem;
}
.wc-countdown .wc-section-title {
    font-size: .7rem;
    font-family: Lato, sans-serif;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 2.5rem;
}
.wc-countdown .wc-section-title::after,
.wc-countdown .wc-section-title::before {
    background: transparent;
}
.wc-countdown__timer {
    display: flex;
    gap: 1.5rem 3rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2.5rem;
}
.wc-countdown__unit { text-align: center; }
.wc-countdown__number {
    display: block;
    font-family: var(--ff-serif);
    font-size: clamp(3rem, 8vw, 5rem);
    color: var(--gold);
    line-height: 1;
}
.wc-countdown__label {
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-light);
}

/* ---------- Event Details ---------- */
.wc-details {
    padding: 5rem 1.5rem;
    background: var(--white);
    text-align: center;
}
.wc-details__description {
    max-width: 640px;
    margin: 0 auto 3rem;
    color: var(--muted);
    font-size: 1.05rem;
}
.wc-details__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.wc-details__card {
    padding: 2.5rem 1.5rem;
    border: 1px solid #e8e0d5;
    border-radius: var(--radius);
    transition: box-shadow .2s;
}
.wc-details__card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.wc-details__icon { font-size: 2rem; margin-bottom: 1rem; }
.wc-details__card h3 {
    font-family: var(--ff-serif);
    font-size: 1.25rem;
    margin-bottom: .75rem;
    color: var(--dark);
}
.wc-details__card p { color: var(--muted); margin-bottom: .25rem; }
.wc-details__qr {
    width: 120px;
    height: 120px;
    margin: 1rem auto 0;
    border: 2px solid var(--gold-light);
    border-radius: var(--radius);
}

/* ---------- Poem / Message ---------- */
.wc-poem {
    padding: 5.5rem 1.5rem;
    text-align: center;
}

.wc-poem__ornament {
    font-size: 1.25rem;
    color: var(--gold);
    margin-bottom: 1.75rem;
    letter-spacing: .5em;
}

.wc-poem__text {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: clamp(1.05rem, 2.5vw, 1.25rem);
    line-height: 2;
    color: var(--text);
    white-space: pre-line;
}

.wc-poem__heart {
    margin-top: 1.75rem;
    font-size: 1.25rem;
    color: var(--gold);
    opacity: .45;
}

/* ---------- Our Story / Gallery / Guest Wall ---------- */
.wc-story {
    padding: 5.5rem 1.5rem;
    text-align: center;
}
.wc-gallery {
    padding: 5.5rem 1.5rem;
    text-align: center;
}
.wc-guest-wall {
    padding: 5rem 1.5rem;
    text-align: center;
}
.wc-gallery-upload {
    padding: 5.5rem 1rem;
    text-align: center;
}

/* No card here — same borderless layout as RSVP in this theme, same width. */
.wc-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 ---------- */
.wc-dress-code {
    padding: 5.5rem 1.5rem;
    text-align: center;
}
.wc-good-to-know {
    padding: 5.5rem 1.5rem;
    text-align: center;
}

/* ---------- Closing ---------- */
.wc-closing {
    padding: 4rem 1.5rem;
    text-align: center;
}

.wc-closing p {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--muted);
    margin: 0;
}

.location__btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 2rem;
    padding: .75rem 2rem;
    border: 1.5px solid var(--gold);
    border-radius: 50px;
    color: var(--gold);
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: all .2s;
}
a.location__btn { text-decoration: none; }

.location__btn:hover {
    background: var(--gold);
    color: var(--white);
}
/* ---------- Location ---------- */
.wc-location {
    padding: 5.5rem 1.5rem 2.5rem;
    text-align: center;
}
.wc-location__address {
    color: var(--muted);
    margin-bottom: 2rem;
}
.wc-map {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .1);
    background: #e8e0d5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: .9rem;
    letter-spacing: .1em;
}
.wc-map iframe {
    width: 100%;
    height: 400px;
    border: none;
}

/* ---------- RSVP ---------- */
.wc-rsvp {
    padding: 5rem 1rem;
    text-align: center;
}
.wc-rsvp__subtitle {
    color: var(--muted);
    margin-bottom: 2.5rem;
}

/* Form — input/select/textarea styling lives in the shared rsvp-form component
   (currentColor-based, so it already adapts to this theme's palette). */
.wc-form { text-align: left; }

.wc-btn {
    display: inline-block;
    padding: .875rem 2.5rem;
    background: var(--gold);
    color: var(--white);
    font-family: var(--ff-sans);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background .2s;
    width: 100%;
    margin-top: .5rem;
}
.wc-btn:hover { background: #b8943e; }

/* ---------- Album ---------- */
.wc-album { padding: 5.5rem 1rem; text-align: center; }
.wc-album__text { color: var(--muted); margin-bottom: 2rem; }
.wc-timeline__location a { margin-left: .4em; opacity: .7; font-size: .85em; color: inherit; }

/* ---------- Footer ---------- */
.wc-footer {
    padding: 3rem 1.5rem;
    background: var(--dark);
    color: var(--muted);
    text-align: center;
    font-size: .875rem;
    line-height: 2;
}
.wc-footer a { color: var(--gold-light); }
.wc-footer__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    max-width: 14rem;
    margin: 0 auto 1rem;
    color: var(--gold);
}
.wc-footer__ornament-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, currentColor);
}
.wc-footer__ornament-line:last-child {
    background: linear-gradient(to left, transparent, currentColor);
}
.wc-footer__ornament-mark {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
}
.wc-footer__signoff {
    margin: .5rem auto 0;
    max-width: 22rem;
    font-family: var(--ff-serif);
    font-style: italic;
    color: var(--gold-light);
}
.wc-footer__cal {
    width: auto;
    margin-top: 1.75rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
}
.wc-footer__cal-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    /* 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. */
    .wc-countdown__timer {
        gap: 1rem 2rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .wc-countdown__timer::-webkit-scrollbar { display: none; }
    .wc-countdown__number { font-size: 2.5rem; }
    .topbar__nav {
        display: none;
    }

    .wc-countdown__unit {
        padding: .75rem 1.25rem;
        flex-shrink: 0;
    }
}

@media (max-width: 400px) {
    .wc-countdown__timer { gap: .5rem 1rem; }
    .wc-countdown__number { font-size: 2rem; }
    .wc-countdown__unit { padding: .6rem .75rem; }
}

/* ---------- Program / Timeline ---------- */
.wc-program {
    padding: 5.5rem 1.5rem;
}
.wc-timeline {
   max-width: 620px;
    margin: 3rem auto 0;
    position: relative;
    text-align: left;
}
.wc-timeline::before {
    content: '';
    position: absolute;
    left: 80px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
}
.wc-timeline__item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 0 1.75rem;
    margin-bottom: 2.5rem;
    position: relative;
}
.wc-timeline__time {
       text-align: right;
    font-family: var(--ff-serif);
    font-size: .95rem;
    color: var(--gold);
    padding-top: .15rem;
    padding-right: 1.25rem;
}
.wc-timeline__dot {
    position: absolute;
    left: 73px;
    top: .35rem;
    width: 15px;
    height: 15px;
    background: var(--gold);
    border: 3px solid var(--bg);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--gold);
}
.wc-timeline__label {
    font-weight: 700;
    color: var(--dark);
    font-size: .95rem;
}
.wc-timeline__location {
    font-size: .825rem;
    color: var(--muted);
    margin-top: .2rem;
}
/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    .wc-timeline::before {
        left: 60px;
    }

    .wc-timeline__item {
        grid-template-columns: 60px 1fr;
    }

    .wc-timeline__dot {
        left: 53px;
    }
}
@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

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