/* ================================================
   Romantic Bloom — Premium Wedding Theme
   Palette: blush · rose · dusty-pink · cream · ivory
   Fonts:   Cormorant Garamond (serif) + Jost (sans)
   Style:   Glassmorphism · Falling petals · Feminine
   ================================================ */

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

:root {
    --blush:        #f5c6c0;
    --rose:         #d4748a;
    --rose-deep:    #b05070;
    --petal:        #e8a4b0;
    --cream:        #fdf6f0;
    --ivory:        #faf5ef;
    --ivory-bright: #fdf9f5;
    --text:         #3d2c30;
    --muted:        #8a6e72;
    --border:       rgba(212,116,138,.2);
    --accent-color: #d4748a;
    --btn-radius:   10px;

    --ff-serif: 'Cormorant Garamond', Georgia, serif;
    --ff-sans:  'Jost', system-ui, sans-serif;

    --glass-bg:     rgba(255,252,249,.55);
    --glass-border: rgba(255,255,255,.6);
    --glass-shadow: 0 8px 40px rgba(180,100,115,.12);
}

html { scroll-behavior: smooth; }

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

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

/* ── Containers ─────────────────────────────── */
.rb-container     { max-width: 1060px; margin: 0 auto; padding: 0; }
.rb-container--sm { max-width: 640px; }
.rb-container--md { max-width: 820px; }

/*
 * 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. `.rb-rsvp { background: var(--ivory) !important; }`).
 */
.rb-alt-sections > * {
    background: var(--ivory);
}
.rb-alt-sections > *:nth-child(even) {
    background: var(--ivory-bright);
}

/* ── Section helpers ─────────────────────────── */
.rb-section-title {
    font-family: var(--ff-serif);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 400;
    color: var(--text);
    text-align: center;
    line-height: 1.15;
}

.rb-eyebrow {
    font-size: .72rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--rose);
    text-align: center;
    margin-bottom: .6rem;
}

.rb-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: var(--petal);
    font-size: 1rem;
    letter-spacing: .15em;
    margin: .75rem 0 1.75rem;
}
.rb-ornament::before, .rb-ornament::after {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--petal);
    opacity: .55;
}

/* ── Falling petals ───────────────────────────── */
.rb-petals {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.rb-petal {
    position: absolute;
    top: -5%;
    opacity: 0;
    color: var(--blush);
    animation: rb-fall linear infinite;
}

@keyframes rb-fall {
    0%   { transform: translateY(0) rotate(0deg) scale(1);     opacity: .7; }
    80%  { opacity: .5; }
    100% { transform: translateY(105vh) rotate(360deg) scale(.6); opacity: 0; }
}

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

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

.rb-topbar__links a {
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.8);
    transition: color .2s;
}
.rb-topbar__links a:hover { color: #fff; }

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

/* The background-music toggle avoiding .dpb-fab/.dpb-close is now handled
   centrally in resources/views/components/audio-player.blade.php (computes the
   same demo/owner-viewing cases itself), so no per-theme override is needed here. */

/* ── Hero ───────────────────────────────────── */
.rb-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('../wedding-classic/images/hero2.jpg') center/cover no-repeat;
}
.rb-hero--has-image { background: none; }

.rb-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        180deg,
        rgba(253,246,240,.1) 0%,
        rgba(212,116,138,.25) 40%,
        rgba(176,80,112,.45) 100%
    );
}

.rb-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(160,60,90,.3) 100%);
    pointer-events: none;
}

.rb-hero__inner {
    position: relative;
    z-index: 2;
    padding: 4rem 0rem;
}

.rb-hero__tag {
    display: inline-block;
    font-size: .68rem;
    letter-spacing: .45em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50px;
    padding: .35rem 1.25rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(4px);
}

.rb-hero__ornament {
    font-size: 1.1rem;
    color: rgba(255,220,225,.8);
    letter-spacing: .3em;
    margin-bottom: 1.25rem;
}

.rb-hero__names {
    font-family: var(--ff-serif);
    font-size: clamp(3.5rem, 11vw, 7.5rem);
    font-weight: 300;
    color: #fff;
    line-height: 1;
    letter-spacing: -.01em;
}

.rb-hero__amp {
    display: block;
    font-style: italic;
    font-size: .5em;
    color: rgba(255,230,235,.8);
    margin: .2rem 0;
}

.rb-hero__date {
    margin-top: 1.5rem;
    font-size: .9rem;
    letter-spacing: .25em;
    color: rgba(255, 255, 255, .8);
    text-transform: uppercase;
}

.rb-hero__location {
    font-size: .9rem;
    color: rgba(255, 255, 255, .65);
    margin-top: .35rem;
    letter-spacing: .08em;
}

.rb-hero__nav {
    margin-top: 2.5rem;
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem .25rem;
    justify-content: center;
    max-width: calc(100vw - 3rem);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 24px;
    padding: .5rem .75rem;
    backdrop-filter: blur(8px);
}

.rb-hero__nav a {
    color: rgba(255, 255, 255, .85);
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: .3rem .5rem;
    border-radius: 50px;
    transition: all .2s;
}

.rb-hero__nav a:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.rb-hero__scroll {
    position: absolute;
    bottom: 3.5rem; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    color: rgba(255,255,255,.45);
    font-size: .6rem;
    letter-spacing: .3em;
    text-transform: uppercase;
}

.rb-hero__scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,.35), transparent);
    animation: rb-scrollLine 1.8s ease-in-out infinite;
}

@keyframes rb-scrollLine {
    0%, 100% { opacity: .4; }
    50%       { opacity: 1; }
}

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

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

/* Match the glass-card treatment countdown/poem/program already use in this theme.
   .rb-couple's container dropped rb-container--sm (640px) in favor of the base
   1060px cap specifically so these cards can stay full-size and still fit two
   abreast with the amp — see index.blade.php. */
.rb-couple__person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(12px);
    padding: 2.25rem 2rem 1.85rem;
    min-width: 0;
}

.rb-couple__photo {
    position: relative;
    width: clamp(9.5rem, 16vw, 15rem);
    height: clamp(9.5rem, 16vw, 15rem);
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 0 0 8px var(--cream),
        0 0 0 9px var(--border);
}

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

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

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

.rb-couple__name {
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--text);
}

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

/* Raised from the theme's usual 560px stack breakpoint: two full-size cards
   (photo min 9.5rem + padding + gap + amp) need ~580px of content width to stay
   on one line, so anything narrower stacks instead of squeezing/overlapping. */
@media (max-width: 640px) {
    .rb-couple__grid { flex-direction: column; gap: 2.5rem; }
    .rb-couple__amp { display: none; }
}

.rb-countdown {
    padding: 5rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.rb-countdown::before {
    content: '❀';
    position: absolute;
    font-size: 18rem;
    opacity: .03;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: var(--rose);
    line-height: 1;
    pointer-events: none;
}

.rb-countdown__timer {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2.5rem;
}

.rb-countdown__unit {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(12px);
    padding: 1.75rem 2rem;
    min-width: 100px;
    text-align: center;
}

.rb-countdown__number {
    display: block;
    font-family: var(--ff-serif);
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    color: var(--rose-deep);
    line-height: 1;
    font-weight: 300;
}

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

.rb-countdown__sep {
    font-family: var(--ff-serif);
    font-size: 2.5rem;
    color: var(--petal);
    opacity: .45;
}

/* ── Audio player ──────────────────────────── */
.rb-audio {
    padding: 5rem 1rem;
}

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

.rb-poem__card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(12px);
    padding: 3rem 2.5rem;
}

.rb-poem__orn {
    font-size: 1.3rem;
    color: var(--petal);
    letter-spacing: .4em;
    margin-bottom: 1.75rem;
}

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

.rb-poem__sig {
    margin-top: 2rem;
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--rose);
}

/* ── Our Story / Gallery / Guest Wall ─────────── */
.rb-story {
    padding: 5.5rem 1.5rem;
    text-align: center;
}

/* Match the glass-card treatment .rb-couple__person uses — <x-story-timeline>
   is a shared, theme-agnostic component (see resources/views/components/
   story-timeline.blade.php), so this stays scoped under .rb-story rather than
   touching .st-item__card itself, which every other theme also relies on. */
.rb-story .st-item__card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(12px);
}

.rb-story .st-item__photo img {
    border-radius: 24px 24px 0 0;
}
.rb-gallery {
    padding: 5.5rem 1rem;
    text-align: center;
}
.rb-guest-wall {
    padding: 5rem 1rem;
    text-align: center;
}
.rb-gallery-upload {
    padding: 5.5rem 1rem;
    text-align: center;
}

/* Match the glass-card treatment RSVP already uses in this theme. */
.rb-gallery-upload .gu-form {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(14px);
}

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

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

.rb-tl-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(180,100,115,.07);
    backdrop-filter: blur(10px);
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    overflow: hidden;
    transition: box-shadow .2s;
}

.rb-tl-item:hover {
    box-shadow: 0 8px 30px rgba(180,100,115,.15);
}

.rb-tl-time {
    background: rgba(212,116,138,.1);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-serif);
    font-size: 1.05rem;
    color: var(--rose-deep);
    padding: 1.25rem .5rem;
    font-weight: 600;
}

.rb-tl-body { padding: 1.1rem 1.5rem; text-align: left; }
.rb-tl-label { font-weight: 500; font-size: .95rem; color: var(--text); }
.rb-tl-loc { font-size: .8rem; color: var(--muted); margin-top: .2rem; }

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

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

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

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

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

.rb-location__btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 2rem;
    padding: .75rem 2rem;
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--rose);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    transition: all .2s;
}

.rb-location__btn:hover {
    background: var(--rose);
    color: #fff;
    border-color: var(--rose);
}

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

.rb-closing__text {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--muted);
}

.rb-closing__heart {
    font-size: 1.5rem;
    color: var(--petal);
    margin-top: .75rem;
    display: block;
}

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

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

.rb-rsvp .rsvp-layout-wrap .rsvp-form-col {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(14px);
    padding: 1.25rem 1rem;
}

/* Attend/decline CTA buttons and form field colors/radius are handled by the
   shared rsvp-form component (currentColor + $buttonClass + --btn-radius), so
   this theme doesn't need to redeclare them. Only the label style below is a
   genuine per-theme touch (small-caps look) worth keeping. */
.rb-form .form__group label {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .4rem;
}

/* Submit button */
.rb-btn {
    display: inline-block;
    padding: .9rem 2.5rem;
    background: linear-gradient(135deg, var(--rose), var(--rose-deep));
    color: #fff !important;
    font-family: var(--ff-sans);
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    margin-top: .5rem;
    transition: transform .15s, box-shadow .15s;
}
.rb-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(180,80,112,.28);
    text-decoration: none;
}

/* QR strip override */
.rb-rsvp .rsvp-qr-strip__inner {
    border-color: var(--border);
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
}
.rb-rsvp .rsvp-qr-img {
    background: linear-gradient(135deg, #f5e6e8, #ead5cc) !important;
}
.rb-rsvp .rsvp-qr-calendar { color: var(--rose); }
.rb-rsvp .rsvp-qr-calendar:hover { border-color: var(--rose); color: var(--rose-deep); }

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

.rb-tl-loc a { margin-left: .4em; opacity: .7; font-size: .85em; color: inherit; }

/* ── Footer ──────────────────────────────────── */
.rb-footer {
    background: linear-gradient(135deg, #3d2c30, #2a1f22);
    color: rgba(255,255,255,.4);
    text-align: center;
    padding: 3rem 1.5rem;
    font-size: .82rem;
    line-height: 2.2;
}
.rb-footer a { color: rgba(245,198,192,.65); }
.rb-footer__names {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 1.4rem;
    color: rgba(255,255,255,.7);
    display: block;
    margin-bottom: .35rem;
}
.rb-footer__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    max-width: 14rem;
    margin: 0 auto 1.25rem;
    color: rgba(245,198,192,.75);
}
.rb-footer__ornament-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, currentColor);
}
.rb-footer__ornament-line:last-child {
    background: linear-gradient(to left, transparent, currentColor);
}
.rb-footer__ornament-mark {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
}
.rb-footer__signoff {
    margin: 1rem auto 0;
    max-width: 22rem;
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 1rem;
    color: rgba(245,198,192,.8);
}
.rb-footer__cal {
    width: auto;
    margin-top: 1.75rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.rb-footer__cal-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 600px) {
    /* Always the same dark-translucent treatment. .rb-topbar is space-between
       on desktop — pin the toggle to the left instead on mobile, matching
       every other theme. */
    .rb-topbar { justify-content: flex-start; }
    .rb-topbar__toggle { order: -1; }

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

    .rb-topbar__links {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        position: absolute;
        top: calc(100% + .5rem);
        left: 1rem;
        right: 1rem;
        padding: .5rem;
        background: rgba(253,246,240,.97);
        border: 1px solid var(--rose-deep);
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(180,100,115,.2);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .rb-topbar__links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .rb-topbar__links a {
        text-align: center;
        padding: .65rem 1rem;
        border-radius: 8px;
        color: var(--text);
        opacity: 1;
    }
    .rb-topbar__links a:hover { background: rgba(212,116,138,.12); color: var(--rose); }

    /* 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. */
    .rb-countdown__timer {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .rb-countdown__timer::-webkit-scrollbar { display: none; }
    .rb-countdown__unit { padding: 1.25rem 0.5rem; min-width: 67px; flex-shrink: 0; }
    .rb-countdown__sep { display: none; }
    .rb-poem__card { padding: 2rem 1.5rem; }
    .rb-tl-item { grid-template-columns: 56px 1fr; }
    .rb-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) {
.rb-poem,
.rb-story,
.rb-closing,
.rb-album,
.rb-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}