/* ── Fonts ───────────────────────────────────────────────── */
@font-face {
    font-family: 'NT Fabulous';
    src: url('../fonts/NT Fabulous.woff2') format('woff2'),
         url('../fonts/NT Fabulous.woff')  format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

:root {
    --green:   rgb(7, 100, 82);
    --green-d: rgb(5, 78, 64);
    --sage:    rgb(207, 214, 202);
    --sage-d:  rgb(185, 196, 178);
    --white:   #ffffff;
    --muted:   rgba(207, 214, 202, 0.65);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'NT Fabulous', sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--green); /* startkleur, Barba hook past aan */
}

/* ── Transitiesluier ─────────────────────────────────────── */
.el-veil {
    position: fixed;
    inset: 0;
    background: var(--green);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    will-change: transform;
}

.el-veil-amp {
    font-family: 'NT Fabulous', sans-serif;
    font-size: clamp(5rem, 15vw, 9rem);
    color: var(--sage);
    opacity: 0;
    will-change: opacity;
    user-select: none;
}

/* ── Barba wrapper: geen layout opleggen ─────────────────── */
[data-barba="wrapper"] { display: block; }

/* ════════════════════════════════════════════════════════════
   LANDING PAGE  (namespace: home)
   ════════════════════════════════════════════════════════════ */
[data-barba-namespace="home"] {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green);
    padding: 1.5rem;
}

/* Schermkader: 1cm van de rand, rondom het volledige scherm */
.el-frame {
    position: fixed;
    inset: 1cm;
    border: 1px solid rgba(207, 214, 202, 0.45);
    pointer-events: none;
    z-index: 100;
}

.el-card {
    text-align: center;
    padding: 3.5rem 2.5rem;
    max-width: 420px;
    width: 100%;
}

.el-pre {
    font-size: 1.54rem;
    color:var(--sage);
    color: #FFF;
    margin-bottom: 0.4rem;
}

.el-ja {
    font-family: 'Corinthia', cursive;
    font-size: 160px;;
    color: var(--white);
    line-height: 1;
    margin-bottom: 4rem;
}

.el-divider {
    width: 32px;
    height: 1px;
    background: var(--sage);
    opacity: 0.25;
    margin: 0 auto 1.6rem;
}

.el-label {
    display: block;
    font-size: 1rem;
    font-weight: bolder;
    color: #fff;
    margin-bottom: 0.7rem;
}

.el-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: 'NT Fabulous', sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--green);
    background: var(--sage);
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
    -webkit-appearance: none;
}

.el-input::placeholder { color: rgba(7,100,82,0.45); letter-spacing: 0.08em; }
.el-input:focus        { border-color: var(--white); }
.el-input.error        { border-color: #f28b82; }

.el-error {
    margin-top: 0.6rem;
    font-size: 0.72rem;
    color: #f28b82;
    letter-spacing: 0.04em;
}

.el-btn {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem;
    font-family: 'NT Fabulous', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--green);
    background: var(--sage);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.el-btn:hover { background: var(--sage-d); }

.el-names {
    font-size: 2rem;
    font-weight: 300;
    color: var(--sage);
    margin-top: 1.2rem;
}

/* ════════════════════════════════════════════════════════════
   RSVP PAGE  (namespace: rsvp)
   ════════════════════════════════════════════════════════════ */
[data-barba-namespace="rsvp"] {
    background: var(--sage);
    color: var(--green);
}

.fade-up { opacity: 0; }

/* Hero */
.hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    position: relative;
    background: var(--green);
}

.hero::after {
    content: '';
    position: absolute;
    inset: 1cm;
    border: 1px solid rgba(207, 214, 202, 0.45);
    pointer-events: none;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 30%, rgba(255,255,255,0.05) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 80% 70%, rgba(255,255,255,0.03) 0%, transparent 70%);
    pointer-events: none;
}

.hero-label {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--sage);
    margin-bottom: 1.5rem;
}

.hero-names {
    font-family: 'NT Fabulous';
    font-size: clamp(3rem, 10vw, 5.5rem);
    font-weight: 400;
    line-height: 1.05;
    color: var(--sage);
}

.hero-ampersand {
    font-size: 0.55em;
    font-weight: 600;
    color: var(--sage);
    line-height: 1.3;
}

.hero-date {
    margin-top: 1.8rem;
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--sage);
}

.hero-scroll {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
}
.hero-scroll svg { animation: bounce 2s ease-in-out infinite; }

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(4px); }
}

/* ── Stacking cards sectie ──────────────────────────────── */
.cards-stack {
    background: var(--sage);
    padding-top: 12dvh;
    padding-bottom: 18dvh;
}

.cards-stack .container {
    max-width: 90em;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2em;
    padding-right: 2em;
}

.cards-stack__collection {
    display: flex;
    justify-content: center;
}

.cards-stack__list {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    gap: 4em;
}

.cards-stack__item {
    flex: none;
    width: 100%;
    max-width: 22em;
    position: sticky;
    top: 5em;
}

.cards-stack-card {
    aspect-ratio: 2 / 3;
    position: relative;
    background-color: var(--green);
    border: 5px solid var(--sage);
    border-radius: 200px;
    flex-flow: column;
    justify-content: space-between;
    align-items:center;
    width: 100%;
    padding: 4em;
    display: flex;
    color: var(--white);
    text-align:center;
}

/* Inset border — ~1cm van de rand, volgt de afgeronde hoeken */
.cards-stack-card::before {
    content: '';
    position: absolute;
    inset: 0.5cm;
    border: 1px solid rgba(207, 214, 202, 0.4);
    border-radius: calc(200px - 0.5cm);
    pointer-events: none;
}

.cards-stack-card__label {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sage);
    opacity: 0.6;
}

.cards-stack-card__title {
    font-size: 48px;
    line-height: 1;
    color: var(--white);
    margin: 0;
    font-family: 'Corinthia', cursive;
}

.cards-stack-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.cards-stack-card__value {
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--white);
    margin: 0;
}

.cards-stack-card__sub {
    font-size: 0.78rem;
    color: var(--white);
    margin: 0;
    line-height: 1.4;
}

.section-label {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--green);
    opacity: 0.6;
    margin-bottom: 0.8rem;
}

.section-title {
    font-family: 'Corinthia', cursive;
    font-size: 32px;
    text-align: center;
    color: var(--green);
}

@media (max-width: 767px) {
    .cards-stack-card { font-size: 0.85em; }
    .gift-card__iban{flex-direction:column;}
}

/* RSVP formulier */
.rsvp-section {
    padding: 5rem 2rem 6rem;
    max-width: 680px;
    margin: 0 auto;
}

.rsvp-intro {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--green);
    opacity: 0.75;
    margin-bottom: 3rem;
}

/* WPForms overrides */
.rsvp-section .wpforms-container { font-family: 'NT Fabulous', sans-serif !important; }

.rsvp-section .wpforms-field-label {
    font-size: 1kan rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--green) !important;
    margin-bottom: 0.5rem !important;
}

.rsvp-section .wpforms-field input[type="text"],
.rsvp-section .wpforms-field input[type="email"],
.rsvp-section .wpforms-field select,
.rsvp-section .wpforms-field textarea {
    font-family: 'NT Fabulous', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 300 !important;
    border: 1px solid var(--sage-d) !important;
    border-radius: 3px !important;
    padding: 0.8rem 1rem !important;
    background: var(--white) !important;
    color: var(--green) !important;
    transition: border-color 0.2s !important;
    width: 100% !important;
}

.rsvp-section .wpforms-field input:focus,
.rsvp-section .wpforms-field textarea:focus {
    border-color: var(--green) !important;
    outline: none !important;
    box-shadow: none !important;
}

.rsvp-section .wpforms-submit-container .wpforms-submit {
    font-family: 'NT Fabulous', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    background: var(--green) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 3px !important;
    padding: 0.85rem 2.5rem !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.rsvp-section .wpforms-submit:hover { background: var(--green-d) !important; }

/* Cadeaukaart */
.gift-section {
    padding: 0 2rem 6rem;
    max-width: 680px;
    margin: 0 auto;
}

.gift-card {
    position: relative;
    background-color: var(--green);
    border: 5px solid var(--sage);
    border-radius: 200px;
    padding: 3.5em 4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1em;
    color: var(--white);
}

.gift-card::before {
    content: '';
    position: absolute;
    inset: 0.5cm;
    border: 1px solid rgba(207, 214, 202, 0.4);
    border-radius: calc(200px - 0.5cm);
    pointer-events: none;
}

.gift-card__label {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sage);
    opacity: 0.6;
}

.gift-card__title {
    font-family: 'Corinthia', cursive;
    font-size: clamp(2.8rem, 7vw, 4rem);
    line-height: 1;
    color: var(--white);
    margin: 0;
}

.gift-card__body {
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--muted);
    max-width: 38em;
}

.gift-card__iban {
    display: flex;
    align-items: center;
    justify-content:center;
    gap: 0.5em;
    color: var(--sage);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    color:#FFF;
    white-space:nowrap;
}

.link{
    color:#FFF !important;
}

.cards-stack-card__tip {
    display: inline-block;
    margin-top: 0.8em;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--white) !important;
    opacity: 0.5;
    text-decoration: none;
    transition: opacity 0.2s;

}


/* Footer */
.site-footer {
    text-align: center;
    padding: 2.5rem;
    background: var(--green);
    font-size: 0.72rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--muted);
}