/* ===================================================
   Corporate Clean — Theme Styles
   Palette: slate-navy · steel-blue · white · amber accent
   Font: Inter (sans) — professional, minimal
=================================================== */

/* ── CSS Variables ────────────────────────────── */
:root {
    --accent-color: #f59e0b;
    --btn-radius: 6px;
}

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

body {
    font-family: 'Inter', system-ui, sans-serif;
    color: #374151;
    background: #f9fafb;
    line-height: 1.6;
}

a { color: #2563eb; text-decoration: none; transition: color .2s; }
a:hover { color: #1d4ed8; }

/* ── Container ──────────────────────────────────── */
.cc-container {
    max-width: 820px;
    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. `.cc-rsvp { background: #0f172a !important; }`).
 */
.cc-alt-sections > * {
    background: #fff;
}
.cc-alt-sections > *:nth-child(even) {
    background: #f8fafc;
}

/* ── Section helpers ────────────────────────────── */
.cc-section-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #f59e0b;
    margin-bottom: .5rem;
    display: block;
}
.cc-section-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    color: #0f172a;
    margin-bottom: .5rem;
    line-height: 1.2;
}
.cc-section-sub {
    font-size: .95rem;
    color: #6b7280;
    margin-bottom: 2.5rem;
}
.cc-rule {
    width: 48px;
    height: 3px;
    background: #f59e0b;
    border-radius: 2px;
    margin-bottom: 1.5rem;
}

/* ── Top nav ────────────────────────────────────── */
.cc-topnav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: transparent;
    padding: .9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    transition: background .3s ease, backdrop-filter .3s ease;
}

/* Desktop only: the link row sits directly in the bar with no opaque panel of
   its own (unlike the mobile dropdown below, which has its own solid
   background), so once scrolled past the hero onto a plain white section the
   light-colored links would lose contrast against transparent. Give the bar
   itself a solid/blurred background past the scroll threshold (.scrolled is
   toggled automatically off data-topbar by resources/js/theme.js) — but only
   above the 600px breakpoint where the hamburger is hidden and these links
   are actually visible; on mobile the bar stays transparent unconditionally,
   see the media query near .cc-topnav__toggle below. */
@media (min-width: 601px) {
    .cc-topnav.scrolled {
        background: color-mix(in srgb, #0f172a 92%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

.cc-topnav__links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cc-topnav__links a {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #cbd5e1;
}
.cc-topnav__links a:hover { color: #f59e0b; }

.cc-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. .cc-topnav itself stays
   transparent at every scroll position here (the .scrolled background above
   is scoped to min-width:601px, i.e. desktop only) — the links aren't
   directly visible on mobile anyway, so the toggle needs its own
   self-contained dark-blur backdrop below, and .cc-topnav__links keeps its
   own opaque navy background; neither depends on the nav bar behind it for
   contrast. */
@media (max-width: 600px) {
    /* .cc-topnav 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 (always-visible here) brand text in visual order. */
    .cc-topnav { justify-content: flex-start; }
    .cc-topnav__toggle { order: -1; }

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

    .cc-topnav__links {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        position: absolute;
        top: calc(100% + .5rem);
        left: 1rem;
        right: 1rem;
        padding: .5rem;
        background: #17213b;
        border: 1px solid #2a3a5c;
        border-radius: 10px;
        box-shadow: 0 12px 32px rgba(0,0,0,.35);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .cc-topnav__links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .cc-topnav__links a {
        text-align: center;
        padding: .65rem 1rem;
        border-radius: 6px;
    }
    .cc-topnav__links a:hover { background: rgba(245,158,11,.1); }

}

/* ── Hero ────────────────────────────────────────── */
.cc-hero {
    min-height: 100svh;
    background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 60%, #1e3a5f 100%);
    display: flex;
    align-items: center;
    padding: 7rem 1.5rem 4rem;
    position: relative;
    overflow: hidden;
}
.cc-hero--has-image { background: none; }
.cc-hero--has-image .cc-container { position: relative; z-index: 2; }
/* Geometric accent */
.cc-hero::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,158,11,.12) 0%, transparent 70%);
    pointer-events: none;
}
.cc-hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(245,158,11,.1);
    border-radius: 50%;
    pointer-events: none;
}
.cc-hero__eyebrow {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #f59e0b;
    margin-bottom: 1rem;
}
.cc-hero__title {
    font-size: clamp(2.4rem, 7vw, 4.5rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    margin-bottom: .75rem;
    letter-spacing: -.02em;
}
.cc-hero__organizer {
    font-size: 1rem;
    color: #94a3b8;
    margin-bottom: 2rem;
}
.cc-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
    margin-bottom: 2.5rem;
}
.cc-hero__meta-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    padding: .6rem 1rem;
    font-size: .85rem;
    color: #e2e8f0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.cc-hero__meta-item strong { color: #f8fafc; font-weight: 600; display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #f59e0b; }

/* 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. */
.cc-hero--has-image .cc-hero__eyebrow,
.cc-hero--has-image .cc-hero__title,
.cc-hero--has-image .cc-hero__organizer {
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.cc-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #f59e0b;
    color: #0f172a;
    padding: .85rem 2rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background .2s, transform .1s;
}
.cc-hero__cta:hover { background: #d97706; color: #0f172a; transform: translateY(-1px); }

/* ── Countdown ───────────────────────────────────── */
.cc-countdown {
    padding: 4.5rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

.cc-audio {
    padding: 5rem 1.5rem;
}
.cc-countdown__timer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem 3rem;
    margin-top: 2rem;
}
.cc-countdown__unit { text-align: center; }
.cc-countdown__number {
    display: block;
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -.04em;
}
.cc-countdown__label {
    font-size: .65rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-top: .3rem;
    display: block;
}
.cc-countdown__sep {
    font-size: 3rem;
    color: #f59e0b;
    align-self: center;
    padding-bottom: .5rem;
    font-weight: 300;
}

/* 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) {
    .cc-countdown__timer {
        gap: .5rem 1rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cc-countdown__timer::-webkit-scrollbar { display: none; }
    .cc-countdown__unit { flex-shrink: 0; }
    .cc-countdown__number { font-size: 2.2rem; }
    .cc-countdown__sep { font-size: 1.75rem; padding-bottom: .3rem; }
}

/* ── Details ─────────────────────────────────────── */
.cc-details {
    padding: 5rem 1.5rem;
    background: #f9fafb;
}
.cc-details__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.cc-details__card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.75rem;
    border-top: 3px solid #f59e0b;
}
.cc-details__card-icon { font-size: 1.5rem; margin-bottom: .75rem; display: block; }
.cc-details__card-label {
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9ca3af;
    font-weight: 700;
    margin-bottom: .25rem;
}
.cc-details__card-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
}
.cc-details__description {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 1.5rem 1.75rem;
    font-size: .95rem;
    color: #4b5563;
    line-height: 1.75;
}

/* ── Agenda / Program ────────────────────────────── */
.cc-agenda {
    padding: 5rem 1.5rem;
}
.cc-agenda__list { max-width: 640px; }
.cc-agenda__item {
    display: flex;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid #f3f4f6;
    align-items: flex-start;
}
.cc-agenda__item:last-child { border-bottom: none; }
.cc-agenda__time {
    flex-shrink: 0;
    min-width: 72px;
    font-size: .78rem;
    font-weight: 700;
    color: #f59e0b;
    letter-spacing: .06em;
    padding-top: .15rem;
}
.cc-agenda__dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5e7eb;
    border: 2px solid #f59e0b;
    margin-top: .4rem;
}
.cc-agenda__title {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: .15rem;
}
.cc-agenda__desc { font-size: .85rem; color: #6b7280; }

/* ── Message ---------- */
.cc-message {
    padding: 3.5rem 1.5rem 2.5rem;
    text-align: center;
}
.cc-message .cc-container { max-width: 700px; }
.cc-message__text {
    font-size: 1.05rem;
    line-height: 2;
    white-space: pre-line;
    color: #334155;
}

/* ── Our Story ---------- */
.cc-story {
    padding: 5rem 1.5rem;
}

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

/* Match the accent-topped card language used elsewhere in this theme
   (details/agenda cards) rather than RSVP's dark card, since this section
   sits on a light background instead of RSVP's dark one. Stretched to the
   full .cc-container measure and left-aligned, same as every other section
   — the shared component centers this narrower by default. */
.cc-gallery-upload .gu-form {
    max-width: none;
    margin: 0 0 2.5rem;
    text-align: left;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: 3px solid #f59e0b;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
}

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

/* ── Closing ---------- */
.cc-closing {
    padding: 2rem 1.5rem;
    text-align: center;
}
.cc-closing p {
    font-style: italic;
    font-size: .9rem;
    color: #475569;
    opacity: .7;
    margin: 0;
}

/* ── RSVP ────────────────────────────────────────── */
/* Pinned dark rather than joining the alternation. */
.cc-rsvp {
    padding: 5rem 1.5rem;
    background: #0f172a !important;
    color: #e2e8f0;
}
.cc-rsvp .cc-section-title { color: #f8fafc; }
.cc-rsvp .cc-section-sub { color: #64748b; }
/* Match the same 820px measure and left edge as every other section
   (.cc-container) — by default .rsvp-layout-wrap centers itself narrower
   and independently of .cc-container, which throws off left alignment. */
.cc-rsvp .rsvp-layout-wrap {
    max-width: 820px;
    padding: 0 1.5rem;
}

.cc-rsvp-form {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 2.5rem;
}

.cc-rsvp-form .form__group input:not([type="radio"]),
.cc-rsvp-form .form__group textarea,
.cc-rsvp-form .form__group select {
    width: 100%;
    padding: .75rem 1rem;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #f1f5f9;
    font-size: .95rem;
    outline: none;
    appearance: none;
    transition: border-color .2s, box-shadow .2s;
}
.cc-rsvp-form legend {
    color: #fff;
}
.cc-rsvp-form .form__group input:focus,
.cc-rsvp-form .form__group select:focus,
.cc-rsvp-form .form__group textarea:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}
.cc-rsvp-form .form__radio-label,
.cc-rsvp-form .form__radio-label:hover {
    background: #0f172a;
    border: 1px solid #334155;
}
.cc-rsvp-form .form__radio-label:hover {
    border: 1px solid #f59e0b;
}
.cc-rsvp-form .form__radio-label:has(input[type="radio"]:checked) {
    border: 1px solid #f59e0b;
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--accent-color) 10%, #0f172a),
            color-mix(in srgb, var(--accent-color) 5%, #0f172a));
}
.cc-rsvp-form .form__radio-text {
    color: #e2e8f0;
}
.cc-rsvp-form .form__radio-label:hover
.cc-rsvp__submit {
    width: 100%;
    padding: .85rem;
    background: #f59e0b;
    color: #0f172a;
    border: none;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, transform .1s;
}
.cc-rsvp__submit:hover { background: #d97706; transform: translateY(-1px); }
.cc-rsvp__alert {
    display: none;
    padding: 1rem;
    border-radius: 8px;
    font-size: .9rem;
    text-align: center;
    margin-top: 1rem;
}
.cc-rsvp__alert.success { background: rgba(16,185,129,.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); display: block; }
.cc-rsvp__alert.error   { background: rgba(239,68,68,.15); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); display: block; }

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

/* ── Footer ──────────────────────────────────────── */
.cc-footer {
    background: #0f172a;
    color: #475569;
    text-align: center;
    padding: 2rem 1.5rem;
    font-size: .8rem;
    letter-spacing: .04em;
    border-top: 1px solid #1e293b;
}
.cc-footer strong { color: #94a3b8; }
.cc-footer__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    max-width: 11rem;
    margin: 0 auto 1rem;
    color: #475569;
}
.cc-footer__ornament-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, currentColor); }
.cc-footer__ornament-line:last-child { background: linear-gradient(to left, transparent, currentColor); }
.cc-footer__ornament-mark { flex-shrink: 0; width: 7px; height: 7px; }
.cc-footer__signoff { max-width: 22rem; margin: .75rem auto 0; letter-spacing: .02em; color: #94a3b8; }
.cc-footer__cal {
    margin-top: 1.5rem;
    text-transform: none;
    letter-spacing: .02em;
    /* .cc-footer a sets slate; restore the button's own near-black on amber. */
    color: #0f172a !important;
}
.cc-footer__cal-icon { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ── Premium actions ─────────────────────────────── */
.cc-premium-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}
/*
 * Solid amber fill + dark text — same treatment as .cc-hero__cta. Deliberately
 * NOT the translucent-white style this used to have: that only reads on a dark
 * background, but this class is also used on light sections (guest-gallery,
 * location, photo album), where it went nearly invisible. Solid amber has
 * enough contrast to work on any background this theme uses, light or dark.
 */
.cc-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.25rem;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid transparent;
    color: #0f172a;
    transition: background .2s, color .2s, transform .1s;
    background: #f59e0b;
}
.cc-btn:hover { background: #d97706; color: #0f172a; transform: translateY(-1px); }

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