/* ============================================================
   CLASSIC LUXURY - Template stylesheet
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,400;1,500&family=Italiana&family=Outfit:wght@300;400;500;600&display=swap');

/* ---------- Lange-woorden & URL safety ---------- */
html {
    overflow-wrap: anywhere;
    word-break: normal;
}

:where(h1, h2, h3, h4, p, li, blockquote, figcaption,
    .text-content, .form-intro, .form-label,
    .timeline-title, .timeline-description,
    .title-blok-h1, .title-blok-h2, .title-blok-h3,
    .header-namen, .hero-card .couple-names) {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

a, .is-url, .is-email, code, pre {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.countdown-value,
.countdown-number {
    word-break: keep-all;
    hyphens: none;
}

/* ============================================================
   BASE
   ============================================================ */
body {
    margin: 0;
    padding: 0;
    background: var(--color-background);
    font-family: 'Outfit', sans-serif;
    color: var(--color-text);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

main {
    padding-bottom: 60px;
}

/* Section spacing: meer ademruimte tussen blocks dan Tailwind's default py-6 */
[data-card-id] {
    padding: 40px 0 !important;
}
[data-card-id]:first-child {
    padding-top: 0 !important;
}
[data-card-id]:last-child {
    padding-bottom: 0 !important;
}
/* Banner mag NIET extra padding hebben - hij moet flush onder de header */
[data-card-id]:has(.hero-card) {
    padding-top: 0 !important;
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */
header {
    background: var(--color-background);
    position: relative;
    z-index: 50;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
}

#publicNav {
    position: relative;
    padding: 26px 24px 22px;
}

/* Mobile-first: logo links, hamburger rechts */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Logo "A & D" — Italiana serif, navy, decoratief streepje eronder */
.header-namen {
    font-family: 'Italiana', serif;
    font-weight: 400;
    color: var(--color-primary);
    font-size: 38px;
    line-height: 1;
    letter-spacing: 0.12em;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    text-transform: uppercase;
    position: relative;
}
.header-namen .en-teken {
    font-family: 'Italiana', serif;
    font-weight: 400;
    font-size: 0.9em;
    transform: translateY(-0.05em);
    letter-spacing: 0;
}

/* Hamburger (2 navy lijnen, animeert naar X bij open) */
.nav-toggle {
    --size: 38px;
    --line-w: 28px;
    --line-h: 1.2px;
    --gap: 7px;
    --color: var(--color-primary);

    position: relative;
    display: inline-block;
    width: var(--size);
    height: var(--size);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    outline-offset: 4px;
}
.nav-toggle::before,
.nav-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    width: var(--line-w);
    height: var(--line-h);
    background: var(--color);
    transform-origin: center;
    transform: translateX(-50%);
    transition: transform 220ms ease, top 220ms ease;
}
.nav-toggle::before {
    top: calc(50% - (var(--gap) / 2) - var(--line-h));
}
.nav-toggle::after {
    top: calc(50% + (var(--gap) / 2));
}
.nav-toggle.is-open::before {
    top: 50%;
    transform: translateX(-50%) rotate(45deg);
}
.nav-toggle.is-open::after {
    top: 50%;
    transform: translateX(-50%) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
    .nav-toggle::before,
    .nav-toggle::after { transition: none; }
}

/* Nav-menu — mobile (dropdown drawer) */
.nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-background);
    list-style: none;
    margin: 0;
    padding: 14px 28px 26px;
    display: none;
    flex-direction: column;
    gap: 0;
    z-index: 100;
    box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.nav-menu.active { display: flex; }
.nav-menu li { list-style: none; }
.nav-menu .nav-link {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    padding: 14px 0;
    display: block;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}
.nav-menu .nav-link.is-active {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}

/* Mobile drawer scheidingslijnen */
@media (max-width: 899px) {
    .nav-menu {
        border-top: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
    }
    .nav-menu li {
        border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
    }
    .nav-menu li:last-child {
        border-bottom: 0;
    }
}

/* Desktop: logo gecentreerd bovenaan + decoratief streepje + horizontale nav */
@media (min-width: 900px) {
    #publicNav {
        padding: 40px 40px 22px;
        text-align: center;
    }
    .header-container {
        justify-content: center;
    }
    .header-namen {
        font-size: 56px;
        letter-spacing: 0.15em;
    }
    /* Decoratief streepje onder het logo - klassiek stationary detail */
    .header-namen::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -14px;
        transform: translateX(-50%);
        width: 56px;
        height: 1px;
        background: var(--color-primary);
        opacity: 0.5;
    }
    .nav-toggle { display: none; }

    .nav-menu {
        position: static;
        background: transparent;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 40px;
        padding: 32px 0 0;
        margin: 0;
        box-shadow: none;
    }
    .nav-menu .nav-link {
        font-size: 11px;
        padding: 4px 0;
        letter-spacing: 0.32em;
    }
    .nav-menu .nav-link:hover {
        text-decoration: underline;
        text-underline-offset: 6px;
        text-decoration-thickness: 1px;
    }
}

/* Hide decoration helper (voor 'namen' toggle) */
.hide-deco-namen .header-namen { display: none !important; }

/* ---------- LANGUAGE SWITCHER (in nav) ---------- */
.language-switcher { position: relative; display: inline-flex; align-items: center; }
.lang-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 14px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase;
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    cursor: pointer;
    transition: background 180ms ease;
}
.lang-toggle:hover {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
}
.lang-toggle svg { width: 10px; height: 10px; stroke: currentColor; }
.lang-dropdown {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    margin: 0 !important;
    background: var(--color-background) !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
    min-width: 200px !important;
    z-index: 100;
    overflow: hidden;
}
.lang-option {
    display: block !important;
    padding: 12px 16px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    letter-spacing: 0.06em !important;
    transition: background 150ms ease;
}
.lang-option:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent) !important;
}

@media (max-width: 899px) {
    .nav-menu .language-switcher { padding: 8px 0; }
    /* Taalknop staat onderaan de mobiele menu-drawer; dropdown OMHOOG openen
       zodat het niet onder de drawer valt en afgesneden wordt. */
    .lang-dropdown {
        left: 0 !important;
        right: auto !important;
        top: auto !important;
        bottom: calc(100% + 6px) !important;
    }
}

/* ---------- TITLE ---------- */
.title-blok-h1,
.title-blok-h2,
.title-blok-h3 {
    font-family: 'Italiana', serif;
    color: var(--color-primary);
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
}

/* H1 */
.title-blok-h1 {
    font-size: clamp(34px, 5.2vw, 60px);
    line-height: 1.1;
    letter-spacing: 0.18em;
    margin: 40px 0 24px;
}

/* H2 */
.title-blok-h2 {
    font-size: clamp(26px, 3.8vw, 42px);
    line-height: 1.15;
    letter-spacing: 0.14em;
    margin: 32px 0 20px;
}

/* H3 */
.title-blok-h3 {
    font-size: clamp(18px, 2.4vw, 26px);
    line-height: 1.2;
    letter-spacing: 0.22em;
    margin: 28px 0 16px;
}

/* ---------- TEXT ---------- */
.text-card {
    display: flex;
    justify-content: center;
    padding: 0 24px;
}
.text-card .text-content {
    max-width: 640px;
    width: 100%;
    font-family: 'Outfit', sans-serif;
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.8;
    font-weight: 300;
    text-align: left;
    letter-spacing: 0.01em;
}
.text-card .text-content p { margin: 0 0 1.1em; }
.text-card .text-content p:last-child { margin-bottom: 0; }
.text-card .text-content strong { font-weight: 500; }
.text-card .text-content em { font-style: italic; }
.text-card .text-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
.text-card .text-content ul,
.text-card .text-content ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.text-card .text-content li { margin: 0.35em 0; }
.text-card .text-content h1,
.text-card .text-content h2,
.text-card .text-content h3 {
    font-family: 'Italiana', serif;
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.12em;
    margin: 1.5em 0 0.6em;
}

/* ---------- DIVIDER ---------- */

/* ---------- WHITESPACE ---------- */
/* Tailwind h-4/h-10/h-20 doen het werk */

/* ---------- BANNER ---------- */
.hero-card {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.hero-card img {
    display: block;
    width: 100%;
    height: 88vh;
    min-height: 540px;
    object-fit: cover;
}
.hero-card .hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.08) 35%, rgba(0,0,0,0.08) 65%, rgba(0,0,0,0.28) 100%);
}

/* Innerlijke frame - klassiek wedding-invitation detail (volgt primary kleur) */
.hero-card .hero-overlay::before {
    content: '';
    position: absolute;
    inset: 24px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
    pointer-events: none;
}
@media (min-width: 768px) {
    .hero-card .hero-overlay::before { inset: 40px; }
}
@media (min-width: 1200px) {
    .hero-card .hero-overlay::before { inset: 56px 80px; }
}

.hero-card .couple-names {
    font-family: 'Italiana', serif !important;
    color: var(--color-primary);
    font-size: clamp(48px, 10vw, 130px) !important;
    font-weight: 400 !important;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-shadow: 0 2px 24px rgba(0,0,0,0.25);
    position: relative;
}
.hero-card .couple-names::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: color-mix(in srgb, var(--color-primary) 70%, transparent);
    margin: 28px auto 0;
}

.hero-card .hero-title {
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-primary);
    font-size: clamp(11px, 1.2vw, 14px) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 0.36em;
    margin: 22px 0 0 !important;
    text-shadow: 0 1px 12px rgba(0,0,0,0.3);
    font-style: normal;
}

/* ---------- IMAGE - foto_tekst ---------- */
.image-card {
    margin: 48px 0;
}
.image-card .foto-tekst {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}
.image-card .foto-tekst .image-side {
    width: 100%;
    max-width: 480px;
}
.image-card .foto-tekst .image-side img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
.image-card .foto-tekst .text-side {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 22px;
}
.image-card .foto-tekst .text-side h2 {
    font-family: 'Italiana', serif;
    color: var(--color-primary);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.1;
    margin: 0;
    letter-spacing: 0.14em;
}
.image-card .foto-tekst .text-side .description {
    font-family: 'Outfit', sans-serif;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.8;
    font-weight: 300;
    letter-spacing: 0.01em;
}
.image-card .foto-tekst .text-side .description p { margin: 0 0 1em; }
.image-card .foto-tekst .text-side .description p:last-child { margin-bottom: 0; }
.image-card .foto-tekst .text-side .description a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (min-width: 900px) {
    .image-card .foto-tekst {
        flex-direction: row;
        gap: 80px;
        align-items: center;
        justify-content: center;
    }
    .image-card .foto-tekst .image-side {
        flex: 0 1 480px;
        max-width: 480px;
    }
    .image-card .foto-tekst .text-side {
        flex: 0 1 440px;
    }
}

/* ---------- IMAGE - grote_foto ---------- */
.image-card .grote-foto {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}
.image-card .grote-foto img {
    order: 1;
    width: 100%;
    height: 70vh;
    min-height: 480px;
    max-height: 720px;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
.image-card .grote-foto h2 {
    order: 2;
    font-family: 'Italiana', serif;
    color: var(--color-primary);
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    font-size: clamp(18px, 2.2vw, 26px);
    line-height: 1.2;
    letter-spacing: 0.3em;
    margin: 28px 24px 0;
}
.image-card .grote-foto h2:empty {
    display: none;
}

/* ---------- IMAGE - collage ---------- */
.collage-layout {
    padding: 0 20px;
    max-width: 1280px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .collage-layout { padding: 0 32px; }
}
.collage-layout > h2 {
    font-family: 'Italiana', serif;
    color: var(--color-primary);
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    font-size: clamp(24px, 3.4vw, 36px);
    line-height: 1.15;
    margin: 0 0 36px;
    letter-spacing: 0.16em;
}

.collage-grid {
    display: grid;
    gap: 8px;
    margin-bottom: 8px;
}
.collage-grid:last-child { margin-bottom: 0; }

.collage-grid .tile {
    overflow: hidden;
    border-radius: 0;
}
.collage-grid .tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Layout-varianten op aantal foto's */
.collage-grid.l1 { grid-template-columns: 1fr; }
.collage-grid.l1 .tile { aspect-ratio: 3 / 2; }

.collage-grid.l2 { grid-template-columns: 1fr 1fr; }
.collage-grid.l2 .tile { aspect-ratio: 4 / 5; }

.collage-grid.l3 { grid-template-columns: repeat(3, 1fr); }
.collage-grid.l3 .tile { aspect-ratio: 4 / 5; }

.collage-grid.l4 { grid-template-columns: repeat(2, 1fr); }
.collage-grid.l4 .tile { aspect-ratio: 1; }

.collage-grid.l5,
.collage-grid.l6,
.collage-grid.lmasonry { grid-template-columns: repeat(3, 1fr); }
.collage-grid.l5 .tile,
.collage-grid.l6 .tile,
.collage-grid.lmasonry .tile { aspect-ratio: 4 / 5; }

@media (max-width: 640px) {
    .collage-grid.l3,
    .collage-grid.l5,
    .collage-grid.l6,
    .collage-grid.lmasonry { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- QUOTE ---------- */
.quote-card {
    max-width: 720px;
    margin: 56px auto;
    padding: 0 24px;
    text-align: center;
}
.quote-card .quote-img { display: none; }
.quote-card .quote-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.quote-card blockquote {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    color: var(--color-primary);
    font-size: clamp(20px, 2.6vw, 30px);
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
    max-width: 640px;
}
.quote-card h2 {
    font-family: 'Outfit', sans-serif;
    color: var(--color-primary);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    margin: 0;
}

/* ---------- COUNTDOWN ---------- */
.card-countdown {
    max-width: 900px;
    margin: 56px auto;
    padding: 0 24px;
    text-align: center;
}
.countdown-title {
    font-family: 'Italiana', serif;
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(22px, 2.8vw, 30px);
    line-height: 1.2;
    margin: 0 0 42px;
    letter-spacing: 0.14em;
}

.countdown-timers {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
}
.countdown-unit {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 0 12px;
}
.countdown-value {
    font-family: 'Italiana', serif;
    color: var(--color-primary);
    font-size: clamp(44px, 7vw, 84px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
}
.countdown-label {
    font-family: 'Outfit', sans-serif;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin-top: 20px;
}

@media (max-width: 640px) {
    .countdown-unit { padding: 0 4px; }
    .countdown-value { font-size: clamp(34px, 11vw, 48px); }
    .countdown-label { font-size: 9px; letter-spacing: 0.24em; margin-top: 14px; }
}

/* ---------- SCHEDULE ---------- */
.schedule-wrapper {
    max-width: 760px;
    margin: 56px auto;
    padding: 0 24px;
}
.schedule-container {
    padding: 0 !important;
}
.schedule-heading {
    font-family: 'Italiana', serif;
    color: var(--color-primary);
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.15;
    margin: 0 0 44px;
    letter-spacing: 0.14em;
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline-item {
    padding: 26px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
    position: relative;
}
.timeline-item:first-child { padding-top: 0; }
.timeline-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
/* Hide eventueel default decorations + dot */
.timeline-item::before { display: none !important; }
.timeline-dot { display: none; }

.timeline-content {
    display: grid;
    grid-template-columns: 84px 1fr;
    column-gap: 32px;
    row-gap: 6px;
    align-items: start;
}
.timeline-content img { display: none; }

.timeline-time {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    padding-top: 6px;
    font-family: 'Outfit', sans-serif;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin: 0;
}

.timeline-title {
    grid-column: 2;
    grid-row: 1;
    font-family: 'Italiana', serif;
    color: var(--color-primary);
    font-weight: 400;
    font-size: clamp(18px, 2.4vw, 24px);
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.timeline-description {
    grid-column: 2;
    grid-row: 2;
    font-family: 'Outfit', sans-serif;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.7;
    font-weight: 300;
    margin: 4px 0 0;
}

@media (max-width: 640px) {
    .timeline-content {
        grid-template-columns: 64px 1fr;
        column-gap: 20px;
    }
    .timeline-time {
        font-size: 10px;
        letter-spacing: 0.2em;
        padding-top: 4px;
    }
    .timeline-title { font-size: 18px; }
}

/* ---------- COLUMNS TITLE+TEXT ---------- */
.title-text-section {
    padding: 48px 24px;
}
.title-text-grid {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 900px !important;
    margin: 0 auto;
}
.title-text-grid > h2 {
    font-family: 'Italiana', serif;
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.15;
    margin: 0;
    text-align: center;
    letter-spacing: 0.14em;
    max-width: 20ch;
}
.title-text-grid .text-content {
    font-family: 'Outfit', sans-serif;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.8;
    font-weight: 300;
    text-align: center;
    letter-spacing: 0.01em;
    max-width: 560px;
}
.title-text-grid .text-content p { margin: 0 0 1em; }
.title-text-grid .text-content p:last-child { margin-bottom: 0; }
.title-text-grid .text-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------- COLUMNS COUNTDOWN+MAP ---------- */
.countdown-map {
    box-sizing: border-box;
    max-width: 1100px;
    margin: 56px auto;
    padding: 0 24px;
    display: flex !important;
    flex-direction: column-reverse;
    gap: 32px;
    align-items: center;
    justify-content: center;
}
@media (min-width: 900px) {
    .countdown-map {
        flex-direction: row-reverse;
        gap: 72px;
        align-items: center;
    }
}

/* MAP zijde (visueel links op desktop) - sharp rectangular */
.countdown-map .map {
    width: 100%;
    max-width: 400px;
    flex: 0 1 400px;
    aspect-ratio: 4 / 5;
}
.countdown-map .map > * {
    width: 100% !important;
    height: 100% !important;
}
.countdown-map .map .map-click-area,
.countdown-map .map .forever-map {
    display: block;
    border-radius: 0;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
}

/* COUNTDOWN zijde */
.countdown-map .countdown {
    flex: 0 1 400px;
    max-width: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

/* Reorder: title → location subtitle → 2x2 countdown */
.countdown-map .countdown h2 { order: 1; margin: 0 0 14px; }
.countdown-map .map-link-wrapper { order: 2; margin: 0 0 36px; }
.countdown-map .live-countdown { order: 3; }
.countdown-map .countdown-days { display: none; }

.countdown-map .countdown h2 {
    font-family: 'Italiana', serif;
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.1;
    letter-spacing: 0.14em;
    text-align: center;
}

.countdown-map .map-link-wrapper {
    text-align: center;
}
.countdown-map .map-link {
    font-family: 'Outfit', sans-serif;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-decoration: none;
}
.countdown-map .map-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 2x2 grid zonder borders - alleen whitespace */
.countdown-map .countdown-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 32px;
}
.countdown-map .countdown-item {
    padding: 0;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 0;
}
.countdown-map .countdown-number {
    font-family: 'Italiana', serif;
    color: var(--color-primary);
    font-size: clamp(36px, 4.4vw, 52px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
}
.countdown-map .countdown-text {
    font-family: 'Outfit', sans-serif;
    color: var(--color-primary);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-weight: 500;
    margin-top: 12px;
}

/* ---------- GOOGLEMAPS ---------- */
.googlemaps-card {
    max-width: 1200px;
    margin: 56px auto;
    padding: 0 24px;
}
@media (min-width: 768px) {
    .googlemaps-card { padding: 0 32px; }
}
.googlemaps-card .map-click-area,
.googlemaps-card .forever-map {
    display: block;
    width: 100% !important;
    height: clamp(360px, 50vw, 480px) !important;
    border-radius: 0 !important;
    border: 1px solid var(--color-primary);
    overflow: hidden;
    box-shadow: none !important;
}
.googlemaps-card .map-link-wrapper {
    display: block;
    text-align: center;
    margin-top: 22px;
    padding: 0 20px;
}
.googlemaps-card .map-link {
    font-family: 'Outfit', sans-serif;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    text-decoration: none;
}
.googlemaps-card .map-link:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
}

/* ---------- PERSON ---------- */
.people-grid,
.my-8.max-w-\[1280px\] {
    max-width: 1200px !important;
    margin: 56px auto !important;
    padding: 0 20px;
    gap: 32px !important;
}
@media (min-width: 768px) {
    .people-grid,
    .my-8.max-w-\[1280px\] { padding: 0 32px; }
}
.my-8.max-w-\[1280px\] > .grid { gap: 32px !important; }

/* Force 3-koloms op desktop (override Tailwind lg:grid-cols-4) */
@media (min-width: 1024px) {
    .people-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

.person-card {
    padding: 0;
    text-align: center;
    align-items: center;
}

.person-card img {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 0;
    margin: 0 auto 22px !important;
    display: block;
    height: auto !important;
}

.person-card .avatar {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 4 / 5;
    height: auto;
    border-radius: 0;
    margin: 0 auto 22px;
}

.person-card h3 {
    font-family: 'Italiana', serif;
    color: var(--color-primary);
    font-weight: 400;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.person-card p {
    font-family: 'Outfit', sans-serif;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin: 10px 0 0;
    opacity: 0.85;
}

/* ---------- GUESTBOOK ---------- */
.card-guestbook {
    box-sizing: border-box;
    max-width: 620px;
    margin: 56px auto;
    padding: 0 24px;
}

/* Title (hergebruikt .schedule-heading class) */
.card-guestbook .schedule-heading {
    font-family: 'Italiana', serif;
    color: var(--color-primary);
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.15;
    margin: 0;
    letter-spacing: 0.14em;
}

/* Subtitle */
.card-guestbook .text-content {
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.28em !important;
    line-height: 1.5;
    margin: 12px 0 0 !important;
    opacity: 0.85 !important;
}

/* Inputs, textarea, select - sharp rectangular met navy borders */
.card-guestbook input[type="text"],
.card-guestbook input[type="email"],
.card-guestbook textarea,
.card-guestbook select {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 0 !important;
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    letter-spacing: 0.01em !important;
}
.card-guestbook input::placeholder,
.card-guestbook textarea::placeholder {
    color: var(--color-primary) !important;
    opacity: 0.45 !important;
    font-weight: 300 !important;
}
.card-guestbook input:focus,
.card-guestbook textarea:focus,
.card-guestbook select:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
}
.card-guestbook textarea {
    min-height: 140px !important;
    resize: vertical !important;
}

/* Select met mini caret */
.card-guestbook select {
    background-image: linear-gradient(45deg, transparent 50%, var(--color-primary) 50%),
                      linear-gradient(135deg, var(--color-primary) 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat, no-repeat !important;
    padding-right: 32px !important;
    cursor: pointer;
}

/* Submit button: refined pill */
.card-guestbook button[type="submit"] {
    background: var(--color-primary) !important;
    color: var(--color-background) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    padding: 14px 44px !important;
    cursor: pointer;
    transition: opacity 220ms ease;
}
.card-guestbook button[type="submit"]:hover {
    opacity: 0.85;
}

/* Inline-styled p tags overrulen */
.card-guestbook p[style*="text-align: center"] {
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 13px !important;
    font-weight: 300 !important;
}

/* ---------- FORM (RSVP) ---------- */
.form-container,
.card-form {
    max-width: 640px;
    margin: 48px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.form-title {
    font-family: 'Italiana', serif;
    color: var(--color-primary);
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.15;
    margin: 0 0 12px;
    letter-spacing: 0.14em;
}

.form-intro {
    font-family: 'Outfit', sans-serif;
    color: var(--color-primary);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    margin: 0 0 36px;
    font-weight: 300;
    letter-spacing: 0.01em;
}

.form-success {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    color: var(--color-primary);
    font-size: 22px;
    text-align: center;
    padding: 28px 0;
}

.form-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 0 10px;
}

.form-label {
    font-family: 'Outfit', sans-serif;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin: 0;
}
.form-required {
    color: var(--color-primary);
    margin-left: 4px;
}

/* Underline-only inputs en selects */
.card-form input.form-input,
.card-form select.form-select,
.form-container input.form-input,
.form-container select.form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-primary) !important;
    border-radius: 0 !important;
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    padding: 8px 0 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color 180ms ease;
}
.card-form input.form-input:focus,
.card-form select.form-select:focus,
.form-container input.form-input:focus,
.form-container select.form-select:focus {
    outline: none !important;
    background: transparent !important;
    border-bottom-color: var(--color-primary) !important;
    box-shadow: none !important;
}

/* Select met mini caret */
.card-form select.form-select,
.form-container select.form-select {
    background-image: linear-gradient(45deg, transparent 50%, var(--color-primary) 50%),
                      linear-gradient(135deg, var(--color-primary) 50%, transparent 50%) !important;
    background-position: calc(100% - 14px) 18px, calc(100% - 8px) 18px !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat, no-repeat !important;
    padding-right: 28px !important;
    cursor: pointer;
}

/* Number input arrows verbergen */
.card-form input[type="number"].form-input,
.form-container input[type="number"].form-input {
    -moz-appearance: textfield !important;
}
.card-form input[type="number"].form-input::-webkit-outer-spin-button,
.card-form input[type="number"].form-input::-webkit-inner-spin-button,
.form-container input[type="number"].form-input::-webkit-outer-spin-button,
.form-container input[type="number"].form-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0;
}

/* Textarea: SHARP rectangular border (vs Poppy Red's rounded) */
.form-group.full-width { padding-top: 24px; }
.card-form textarea.form-textarea,
.form-container textarea.form-textarea {
    appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 0 !important;
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    padding: 14px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical;
    min-height: 140px;
    box-shadow: none !important;
}
.card-form textarea.form-textarea:focus,
.form-container textarea.form-textarea:focus {
    outline: none !important;
    background: transparent !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
}

/* Submit button: refined navy pill */
.form-actions {
    margin-top: 36px;
    text-align: center;
}
.form-submit {
    background: var(--color-primary);
    color: var(--color-background);
    border: 0;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    padding: 14px 48px;
    cursor: pointer;
    transition: opacity 220ms ease;
}
.form-submit:hover {
    opacity: 0.85;
}

/* RSVP code-entry error overrulen (inline #e53e3e) */
.card-form .form-error,
.form-container .form-error {
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 12px !important;
    text-align: center !important;
    margin: 12px 0 0 !important;
    padding: 8px 12px !important;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
    border-radius: 0 !important;
}

/* ---------- PASSWORD SCREEN ---------- */
.password-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--color-background);
}
.password-card {
    width: 100%;
    max-width: 480px;
    padding: 56px 32px;
    background: var(--color-background);
    border: 1px solid var(--color-primary);
    border-radius: 0;
    text-align: center;
}
.password-card .couple-names {
    font-family: 'Italiana', serif;
    color: var(--color-primary);
    font-weight: 400;
    font-size: clamp(40px, 7vw, 60px);
    line-height: 1.1;
    margin: 0 0 18px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.password-card .subtitle {
    font-family: 'Outfit', sans-serif;
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.32em;
    margin: 0 0 18px;
}
.password-card .info-text {
    font-family: 'Outfit', sans-serif;
    color: var(--color-primary);
    font-size: 13px;
    line-height: 1.7;
    font-weight: 300;
    margin: 0 0 28px;
    opacity: 0.85;
}
.password-card .error-text {
    font-family: 'Outfit', sans-serif;
    color: var(--color-primary);
    font-size: 12px;
    text-align: center;
    margin: 12px 0 0;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.password-card form { margin-top: 12px; }
.password-card input[type="password"],
.password-card input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid var(--color-primary);
    border-radius: 0;
    font-family: 'Outfit', sans-serif;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 300;
    padding: 14px 16px;
    margin-bottom: 14px;
    appearance: none;
    -webkit-appearance: none;
}
.password-card input::placeholder {
    color: var(--color-primary);
    opacity: 0.45;
}
.password-card input:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.password-card button[type="submit"],
.password-card #inviteBtn {
    width: 100%;
    background: var(--color-primary);
    color: var(--color-background);
    border: 0;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    padding: 14px 32px;
    cursor: pointer;
    transition: opacity 220ms ease;
}
.password-card button[type="submit"]:hover,
.password-card #inviteBtn:hover { opacity: 0.85; }

@keyframes fae-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fae-fade-in 600ms ease-out both;
}

/* ============================================================
   PHOTO ALBUM (public.blade.php) - Classic Luxury overrides
   ============================================================ */
.album-header {
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
    background: var(--color-background) !important;
}
.album-header .couple-names {
    font-family: 'Italiana', serif !important;
    color: var(--color-primary) !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}
.album-header .album-title {
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    opacity: 0.85 !important;
    margin-top: 6px !important;
}
.photo-count {
    background: var(--color-primary) !important;
    color: var(--color-background) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
}
.upload-card {
    background: transparent !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.upload-heading {
    font-family: 'Italiana', serif !important;
    color: var(--color-primary) !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    font-size: 28px !important;
    letter-spacing: 0.14em !important;
}
.upload-subtitle {
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-primary) !important;
    opacity: 0.85 !important;
    font-size: 13px !important;
    font-weight: 300 !important;
}
.name-input {
    background: transparent !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 0 !important;
    color: var(--color-primary) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
}
.name-input::placeholder { color: var(--color-primary) !important; opacity: 0.45 !important; }
.name-input:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
}
.dropzone {
    background: transparent !important;
    border: 1px dashed var(--color-primary) !important;
    border-radius: 0 !important;
    color: var(--color-primary) !important;
}
.dropzone:hover,
.dropzone.drag-over {
    background: color-mix(in srgb, var(--color-primary) 4%, transparent) !important;
    border-color: var(--color-primary) !important;
}
.dropzone-text {
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.dropzone-hint {
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-primary) !important;
    opacity: 0.6 !important;
    font-size: 12px !important;
    font-weight: 300 !important;
}
.btn-primary {
    background: var(--color-primary) !important;
    color: var(--color-background) !important;
    border-radius: 999px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
}
.btn-secondary {
    background: transparent !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 999px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
}
.btn-secondary:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent) !important;
}
.gallery-heading {
    font-family: 'Italiana', serif !important;
    color: var(--color-primary) !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    font-size: 22px !important;
    letter-spacing: 0.14em !important;
}
.masonry-item { border-radius: 0 !important; }
.empty-state,
.closed-card {
    color: var(--color-primary) !important;
    opacity: 0.7 !important;
}
.empty-state p,
.closed-card h2,
.closed-card p {
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-primary) !important;
}
.closed-card h2 {
    font-family: 'Italiana', serif !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    font-size: 24px !important;
    letter-spacing: 0.12em !important;
}
.msg-card p {
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-primary) !important;
}
.progress-bar { background: var(--color-primary) !important; }
.progress-bar-wrap { background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important; }
.album-footer {
    color: var(--color-primary) !important;
    opacity: 0.65 !important;
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: 0.02em;
}
.album-footer a { color: var(--color-primary) !important; }

/* ---------- FOOTER ---------- */
footer {
    margin-top: 0 !important;
    padding: 28px 24px;
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
    text-align: center;
    background: var(--color-background);
}
footer p {
    font-family: 'Outfit', sans-serif;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.85;
}

/* Volledige foto tonen (niet bijsnijden) - opt-in per image-card (full_image) */
.image-card .grote-foto img.full-image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Volledige foto ook voor foto-tekst en collage (full_image) */
.image-card .foto-tekst .image-side img.full-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}
/* "Toon de hele foto" in de collage: leg elke rij op dezelfde hoogte en laat
   de breedte de verhouding volgen (net als een fotogalerij). Zo staan liggende
   en staande foto's even groot in beeld, in plaats van dat liggende foto's
   klein wegvallen. Niets wordt bijgesneden; de hele foto blijft zichtbaar. */
.collage-grid.full-photos {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start !important;
    justify-content: center;
    gap: 12px;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
}
.collage-grid.full-photos .tile {
    grid-area: auto !important;
    aspect-ratio: auto !important;
    height: clamp(200px, 24vw, 340px);
    max-height: none !important;
    max-width: 100%;
    overflow: hidden !important;
    border-radius: 10px;
}
.collage-grid.full-photos .tile img {
    position: static !important;
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    display: block !important;
}
@media (max-width: 640px) {
    .collage-grid.full-photos .tile { height: auto; width: 100%; }
    .collage-grid.full-photos .tile img { width: 100%; height: auto; }
}


/* ══════════════════════════════════════════════════════════════════════
   EIGEN NAVIGATIE (aug 2026) — verfijnd: twee brede haarlijnen met een
   korte middenlijn (drukwerk-gevoel); mobiel menu gecentreerd.
   ══════════════════════════════════════════════════════════════════ */
.nav-toggle {
    width: 46px; height: 44px; border: 0; position: relative; cursor: pointer;
    background: linear-gradient(var(--color-primary), var(--color-primary)) 50% 50% / 18px 1px no-repeat;
}
.nav-toggle::before,
.nav-toggle::after {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    width: 30px; height: 1px; border-radius: 0; background: var(--color-primary);
    transition: top 0.2s ease, transform 0.2s ease;
}
.nav-toggle::before { top: calc(50% - 8px); }
.nav-toggle::after  { top: calc(50% + 8px); }
.nav-toggle:hover::before { top: calc(50% - 9px); }
.nav-toggle:hover::after  { top: calc(50% + 9px); }
.nav-toggle.is-open { background-image: none; }
.nav-toggle.is-open::before { top: 50%; transform: translateX(-50%) rotate(45deg); }
.nav-toggle.is-open::after  { top: 50%; transform: translateX(-50%) rotate(-45deg); }
@media (max-width: 899px) {
    .nav-menu { text-align: center; align-items: center; padding: 18px 16px 22px; border-top: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); box-shadow: 0 24px 32px -26px rgba(0, 0, 0, 0.3); }
    .nav-menu li { margin: 4px 0; }
    .nav-menu li a { border-bottom: 0; }
}