/* ================================================
   Birthday 18 Theme – Digital Invitation
   ================================================ */

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

:root {
    --gold:       #c9a84c;
    --accent-color: var(--gold);
    --gold-light: #e2c97e;
    --gold-dark:  #a07830;
    --dark:       #0a0a0a;
    --dark-2:     #141414;
    --dark-3:     #1e1e1e;
    --text:       #e8e8e8;
    --muted:      #888;
    --white:      #ffffff;
    --radius:     10px;
    --btn-radius: 999px;
    --ff-serif:   'Playfair Display', Georgia, serif;
    --ff-sans:    'DM Sans', 'Lato', sans-serif;
}

html { scroll-behavior: smooth; }

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

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

/* ---------- Utility ---------- */
.b18-container         { max-width: 1100px; margin: 0 auto; }
.b18-container--narrow { max-width: 680px; }

/*
 * Alternating section backgrounds (3-tone rotation), 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. `.b18-rsvp { background: var(--dark-2) !important; }`).
 */
.b18-alt-sections > * {
    background: var(--dark);
}
.b18-alt-sections > *:nth-child(3n+2) {
    background: var(--dark-2);
}
.b18-alt-sections > *:nth-child(3n) {
    background: var(--dark-3);
}

.b18-section-title {
    font-family: var(--ff-serif);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--gold);
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: .02em;
}

/* ---------- Floating Topbar ---------- */
.b18-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) {
    .b18-topbar.scrolled {
        background: color-mix(in srgb, var(--dark) 92%, transparent);
        backdrop-filter: blur(10px);
    }
}

.b18-topbar__links {
    display: flex;
    gap: 1.25rem;
}
.b18-topbar__links a {
    font-size: .72rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    transition: color .2s;
}
.b18-topbar__links a:hover { color: var(--gold); text-decoration: none; }

.b18-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) {
    /* .b18-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. */
    .b18-topbar { justify-content: flex-start; }
    .b18-topbar__toggle { order: -1; }

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

    .b18-topbar__links {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        position: absolute;
        top: calc(100% + .5rem);
        left: 1rem;
        right: 1rem;
        padding: .5rem;
        background: rgba(10,10,10,.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;
    }
    .b18-topbar__links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .b18-topbar__links a {
        text-align: center;
        padding: .65rem 1rem;
        border-radius: 8px;
        color: rgba(255,255,255,.85);
    }
    .b18-topbar__links a:hover {
        background: rgba(201,168,76,.12);
        color: var(--gold);
    }

}

/* ---------- Hero ---------- */
.b18-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('/themes/birthday-18/hero.jpg') center/cover no-repeat;
    overflow: hidden;
    text-align: center;
    padding: 4rem 1.5rem;
}
.b18-hero--has-image { background: none; }

.b18-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.58);
    pointer-events: none;
}

.b18-hero__content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.b18-hero__pre {
    font-family: var(--ff-sans);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 1.5rem;
}

.b18-hero__numeral {
    font-family: var(--ff-serif);
    font-size: clamp(7rem, 22vw, 14rem);
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 2px var(--gold);
    line-height: 1;
    letter-spacing: -.02em;
    display: block;
    margin-bottom: .25rem;
}

.b18-hero__name {
    font-family: var(--ff-serif);
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 400;
    font-style: italic;
    color: #fff;
    line-height: 1.2;
    margin-bottom: .75rem;
}

.b18-hero__divider {
    width: 80px;
    height: 1px;
    background: var(--gold);
    margin: .75rem auto;
    opacity: .7;
}

.b18-hero__tagline {
    font-size: .95rem;
    color: rgba(255,255,255,.8);
    margin-bottom: 1.5rem;
    letter-spacing: .04em;
}

.b18-hero__meta {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-size: .9rem;
    color: rgba(255,255,255,.75);
    margin-bottom: 2rem;
}

/* 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. */
.b18-hero--has-image .b18-hero__pre,
.b18-hero--has-image .b18-hero__numeral,
.b18-hero--has-image .b18-hero__name,
.b18-hero--has-image .b18-hero__tagline,
.b18-hero--has-image .b18-hero__meta {
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

/* ---------- Countdown ---------- */
.b18-countdown {
    background: var(--dark-2);
    padding: 5rem 1.5rem;
    border-top: 1px solid rgba(201,168,76,.2);
}

.b18-audio {
    padding: 5rem 1.5rem;
}

.b18-countdown__eyebrow {
    text-align: center;
    font-size: .75rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .5rem;
    font-weight: 600;
}

.b18-countdown__timer {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.b18-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--dark-3);
    border: 1px solid rgba(201,168,76,.3);
    border-radius: var(--radius);
    padding: 1.2rem 1.8rem;
    min-width: 80px;
}

.b18-countdown__number {
    font-family: var(--ff-serif);
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
}

.b18-countdown__label {
    font-family: var(--ff-sans);
    font-size: .7rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: .35rem;
}

/* ---------- Poem / Message ---------- */
.b18-poem {
    padding: 5rem 1.5rem;
    text-align: center;
    border-top: 1px solid rgba(201,168,76,.1);
}

.b18-poem__ornament {
    color: var(--gold);
    font-size: 1rem;
    opacity: .7;
    letter-spacing: .4em;
    margin-bottom: 1.5rem;
}

.b18-poem__text {
    font-family: var(--ff-serif);
    font-size: clamp(1.05rem, 2.5vw, 1.3rem);
    font-style: italic;
    line-height: 2;
    white-space: pre-line;
    color: rgba(255,255,255,.85);
}

/* ---------- Our Story ---------- */
.b18-story {
    padding: 5rem 1.5rem;
    text-align: center;
    border-top: 1px solid rgba(201,168,76,.15);
}

.b18-story .st-item__card {
    background: rgba(201,168,76,.06);
    border-color: rgba(201,168,76,.25);
}

.b18-story .st-item__photo img {
    border: 1px solid rgba(201,168,76,.3);
    box-shadow: 0 16px 32px rgba(0,0,0,.5);
}

.b18-story .st-item__period {
    color: var(--gold-light);
}

.b18-story .st-item__title {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--white);
}

/* ---------- Gallery / Guest Wall ---------- */
.b18-gallery {
    padding: 5rem 1.5rem;
    text-align: center;
    border-top: 1px solid rgba(201,168,76,.15);
}
.b18-guest-wall {
    padding: 5rem 1.5rem;
    text-align: center;
    border-top: 1px solid rgba(201,168,76,.15);
}
.b18-gallery-upload {
    padding: 5rem 1.5rem;
    text-align: center;
    border-top: 1px solid rgba(201,168,76,.15);
}

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

/* ---------- Program ---------- */
.b18-program {
    padding: 5rem 1.5rem;
    border-top: 1px solid rgba(201,168,76,.15);
}

.b18-timeline { margin-top: 1rem; }

.b18-timeline__item {
    display: grid;
    grid-template-columns: 80px 20px 1fr;
    gap: 0 1rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

.b18-timeline__time {
    font-family: var(--ff-serif);
    font-weight: 700;
    font-size: .88rem;
    color: var(--gold);
    text-align: right;
    padding-top: .15rem;
}

.b18-timeline__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gold);
    margin-top: .3rem;
    position: relative;
}

.b18-timeline__dot::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: rgba(201,168,76,.25);
    height: calc(100% + 1.5rem + 12px);
}

.b18-timeline__item:last-child .b18-timeline__dot::after { display: none; }

.b18-timeline__label {
    font-weight: 600;
    font-size: .95rem;
    color: var(--text);
}

.b18-timeline__location {
    display: block;
    font-size: .82rem;
    color: var(--muted);
    margin-top: .15rem;
}

/* ---------- Dress Code / Good to Know ---------- */
.b18-dress-code {
    padding: 5rem 1.5rem;
    text-align: center;
    border-top: 1px solid rgba(201,168,76,.15);
}
.b18-good-to-know {
    padding: 5rem 1.5rem;
    text-align: center;
    border-top: 1px solid rgba(201,168,76,.15);
}

/* ---------- Map ---------- */
.b18-location {
    padding: 5rem 1.5rem;
    border-top: 1px solid rgba(201,168,76,.1);
}

.b18-location__address {
    text-align: center;
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.b18-map iframe {
    width: 100%;
    height: 380px;
    border: 0;
    border-radius: var(--radius);
    display: block;
    filter: grayscale(20%) invert(90%) hue-rotate(180deg);
}

/* ---------- Closing ---------- */
.b18-closing {
    padding: 2.5rem 1.5rem;
    text-align: center;
    border-top: 1px solid rgba(201,168,76,.1);
}

.b18-closing p {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--gold);
    opacity: .8;
    margin: 0;
}

/* ---------- RSVP ---------- */
.b18-rsvp {
    padding: 5rem 1.5rem;
    border-top: 1px solid rgba(201,168,76,.2);
}

.b18-form { max-width: 560px; margin: 0 auto; }
.b18-form__group { margin-bottom: 1.25rem; }

.b18-form__group label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--gold-light);
    margin-bottom: .4rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.b18-form__group input,
.b18-form__group select,
.b18-form__group textarea {
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid rgba(201,168,76,.3);
    border-radius: var(--radius);
    font-family: var(--ff-sans);
    font-size: .95rem;
    color: var(--text);
    background: var(--dark-3);
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}

.b18-form__group input:focus,
.b18-form__group select:focus,
.b18-form__group textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,.12);
}

.b18-form__group input::placeholder,
.b18-form__group textarea::placeholder { color: #555; }

.b18-form__group--checkbox { display: flex; align-items: center; gap: .6rem; }
.b18-form__group--checkbox input  { width: 18px; height: 18px; flex-shrink: 0; }
.b18-form__group--checkbox label  { margin: 0; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .95rem; color: var(--text); }

.b18-form__error {
    display: block;
    color: #ff6b6b;
    font-size: .82rem;
    margin-top: .3rem;
}

.b18-btn {
    display: block;
    width: 100%;
    padding: .9rem 2rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #0a0a0a;
    font-family: var(--ff-sans);
    font-weight: 800;
    font-size: 1rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 4px 20px rgba(201,168,76,.35);
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-top: .5rem;
}

.b18-location .b18-btn { display: inline-block; width: auto; margin-top: 1.5rem; }
.b18-album { padding: 5rem 1.5rem; text-align: center; }
.b18-album .b18-btn { display: inline-block; width: auto; }
.b18-album__text { color: var(--muted); margin-bottom: 2rem; }
.b18-timeline__location a { margin-left: .4em; opacity: .7; font-size: .85em; color: inherit; }

.b18-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 24px rgba(201,168,76,.5);
}

.b18-summary-card {
    background: var(--dark-3);
    border: 1px solid rgba(201,168,76,.25);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.b18-badge {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.b18-alert--success {
    background: rgba(201,168,76,.1);
    border: 1px solid rgba(201,168,76,.3);
    color: var(--gold-light);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    text-align: center;
}

/* ---------- Footer ---------- */
.b18-footer {
    background: #050505;
    color: rgba(255,255,255,.35);
    text-align: center;
    padding: 2.5rem 1.5rem;
    font-size: .85rem;
    border-top: 1px solid rgba(201,168,76,.1);
}
.b18-footer p { margin-bottom: .35rem; }
.b18-footer a { color: var(--gold); opacity: .7; }
.b18-footer__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    max-width: 13rem;
    margin: 0 auto 1rem;
    color: rgba(201,168,76,.6);
}
.b18-footer__ornament-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, currentColor); }
.b18-footer__ornament-line:last-child { background: linear-gradient(to left, transparent, currentColor); }
.b18-footer__ornament-mark { flex-shrink: 0; font-size: 1rem; line-height: 1; }
.b18-footer__signoff { max-width: 24rem; margin: 0 auto 1.5rem; opacity: .55; }
.b18-footer__cal {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    /* .b18-footer a sets a translucent gold; restore the button's own dark ink. */
    color: #0a0a0a !important;
    opacity: 1;
}
.b18-footer__cal-icon { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ---------- Responsive ---------- */
/* Every section carries its own horizontal gutter (not .b18-container, which
   is bare max-width + centering) — tighten that gutter to 1rem on small
   devices instead of the 1.5rem desktop value. */
@media (max-width: 600px) {
    .b18-hero,
    .b18-countdown,
    .b18-poem,
    .b18-story,
    .b18-gallery,
    .b18-guest-wall,
    .b18-gallery-upload,
    .b18-program,
    .b18-dress-code,
    .b18-good-to-know,
    .b18-location,
    .b18-closing,
    .b18-rsvp,
    .b18-album,
    .b18-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .b18-gallery-upload .gu-form {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 500px) {
    /* A 4-column grid guarantees all 4 units stay on one row regardless of
       viewport width, instead of flex-wrap letting them fall to a 2x2 block
       once their min-width no longer fits. */
    .b18-countdown__timer {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: .5rem;
    }
    .b18-countdown__unit { padding: .7rem .4rem; min-width: 0; }
    .b18-countdown__number { font-size: 1.6rem; }
    .b18-countdown__label { font-size: .6rem; letter-spacing: .04em; }
}

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