html, body {
    overflow-x: hidden;
}

/* 1. GLOBAL VARIABLES & RESET */
:root {
    --dark-green: #013220;
    --white-gold: #E1C158;
    --deep-gold: #D4AF37;
    --black: #000000;
    --white: #FFFFFF;
    --off-white: #fcfcfc;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--white);
    color: var(--black);
}

/* 2. TYPOGRAPHY & SHARED COMPONENTS */
h1, h2, h3, h4, .gold-text, .signature, .closing-quote {
    font-family: 'Playfair Display', serif;
}

h1 {
    font-size: clamp(2rem, 4vw, 4rem);
    margin: 15px 0;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.eyebrow-dark {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    letter-spacing: 5px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    background: linear-gradient(to right, #B8860B, #D4AF37, #B8860B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.15));
}

.eyebrow {
    display: block;
    font-family: 'Playfair Display', serif; /* Keeps it classy */
    font-size: 0.9rem;
    letter-spacing: 5px;
    margin-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;

    /* The Metallic Gold Gradient */
    background: linear-gradient(to right, #E1C158, #F9F1D0, #E1C158);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; 

    /* Makes it pop against the Dark Green */
    filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.3));
}

.gold-divider { height: 1px; width: 40px; background-color: var(--white-gold); margin: 20px auto; }
.gold-divider-center { height: 2px; width: 50px; background-color: var(--white-gold); margin: 0 auto 50px auto; }

.cta-button {
    text-decoration: none;
    color: var(--white-gold);
    border: 1px solid var(--white-gold);
    padding: 10px 25px;
    font-size: 0.75rem;
    letter-spacing: 3px;
    transition: 0.3s ease;
    display: inline-block;
}

.cta-button:hover { background-color: var(--white-gold); color: var(--dark-green); }

/* 3. NAVIGATION */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.nav-logo {
    font-weight: 700;
    text-transform: uppercase;
    background: linear-gradient(to right, #E1C158, #F9F1D0, #E1C158);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links { list-style: none; display: flex; gap: 20px; align-items: center; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; color: var(--white); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; transition: 0.3s; }
.nav-links a:hover { color: var(--white-gold); }
.nav-links .nav-rsvp { border: 1px solid var(--white-gold); padding: 8px 15px; color: var(--white-gold); }
.nav-links a {
    color: var(--white); /* Static state */
    transition: 0.3s;
}

.nav-links a:hover {
    color: var(--white-gold); /* Interaction state */
}

.active-link {
    color: var(--white-gold) !important;
}

/* 4. HOME PAGE (TRIPTYCH HERO) */
.triptych-hero { display: flex; height: 100vh; width: 100%; overflow: hidden; }
.side-image { flex: 1; position: relative; }
.side-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-image::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); }

.center-content {
    flex: 1.2;
    background-color: var(--dark-green);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 2;
    text-align: center;
    border-left: 1px solid rgba(225, 193, 88, 0.3);
    border-right: 1px solid rgba(225, 193, 88, 0.3);
    color: var(--white-gold);
}

.center-content .text-wrapper {
    padding-top: 60px; /* This prevents the text from hiding under the fixed navbar */
}

.details-section { background-color: var(--white); padding: 100px 5%; text-align: center; }
.details-grid { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.detail-card { flex: 1; min-width: 250px; padding: 20px; }
.detail-card h3 { color: var(--dark-green); text-transform: uppercase; letter-spacing: 1px; }
.detail-card h3::after { content: ''; display: block; width: 30px; height: 1px; background-color: var(--white-gold); margin: 10px auto; }

/* 5. DETAILS PAGE */
.details-page .sub-hero { padding: 100px 20px 20px; text-align: center; }
.content-container { max-width: 800px; margin: 0 auto; padding: 40px 20px; }
.info-block { padding: 30px 0; text-align: center; border-bottom: 1px solid rgba(212, 175, 55, 0.2); }
.alternate-bg { background-color: #fcfcfc; width: 100vw; margin-left: calc(-50vw + 50%); }

.faq-section { background-color: var(--white); padding: 80px 10%; text-align: center; }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 60px; max-width: 1000px; margin: 40px auto 0; text-align: left; }

/* 6. ABOUT US PAGE */
.about-page .sub-hero { padding: 80px 20px 20px; text-align: center; }
.about-container { max-width: 1100px; margin: 0 auto; padding: 60px 20px 100px; }
.about-grid { display: flex; align-items: flex-start; gap: 60px; }
.about-image-column { flex: 1.2; display: flex; flex-direction: column; gap: 15px; }
.featured-photo { width: 100%; height: auto; border: 1px solid var(--white-gold); padding: 10px; background: var(--white); box-shadow: 10px 10px 0px var(--dark-green); }

.photo-strip { display: flex; gap: 10px; justify-content: flex-start; }
.gallery-item { width: 70px; height: 70px; overflow: hidden; cursor: pointer; border: 1px solid rgba(212, 175, 55, 0.4); transition: 0.3s ease; }
.gallery-item:hover { transform: scale(1.1); border-color: var(--white-gold); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

.about-text { flex: 1; text-align: left; padding-top: 10px; }
.gold-text { color: #D4AF37; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }

.letter-container { display: flex; max-width: 1000px; margin: 0 auto; gap: 40px; }
.letter-box { flex: 1; padding: 20px; text-align: center; }
.border-left { border-left: 1px solid var(--white-gold); }

/* 7. REGISTRY PAGE */
.registry-page .sub-hero { padding: 80px 20px 20px; text-align: center; }
.registry-container { padding: 60px 20px 120px; }
.registry-grid { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; }
.registry-card { flex: 1; min-width: 300px; padding: 40px; text-align: center; border: 1px solid rgba(225, 193, 88, 0.2); background-color: var(--white); transition: 0.3s; }
.registry-card:hover { transform: translateY(-5px); border-color: var(--white-gold); }
.registry-card .cta-button { background-color: var(--dark-green); border: none; }

.honeymoon-fund-container { display: flex; justify-content: center; padding-top: 40px; }
.registry-card.single-card { min-width: 400px; max-width: 450px; }

/* 8. SCHEDULE (DARK THEME) */
.dark-theme { background-color: var(--dark-green); color: var(--white); }
.sub-hero-dark { padding: 80px 20px 40px; text-align: center; }
.sub-hero-dark h2 { font-size: 3rem; color: var(--white); margin-top: 10px; }

.timeline-container { position: relative; max-width: 1100px; margin: 40px auto 100px; padding: 40px 0; }
.timeline-line { position: absolute; left: 50%; width: 1px; height: 100%; background: var(--white-gold); transform: translateX(-50%); }
.timeline-item { position: relative; width: 50%; padding: 20px 80px; box-sizing: border-box; margin-bottom: 40px; }
.timeline-item.left { left: 0; text-align: right; }
.timeline-item.right { left: 50%; text-align: left; }

.branch-line { position: absolute; top: 35px; width: 60px; height: 1px; background-color: var(--white-gold); }
.left .branch-line { right: 0; }
.right .branch-line { left: 0; }

/* 9. RSVP PAGE */
.rsvp-container { max-width: 650px; margin: 0 auto; padding: 0 20px 100px; }
.modern-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: flex; gap: 20px; }
.modern-form input, .modern-form select, .modern-form textarea {
    width: 100%; padding: 15px; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(225, 193, 88, 0.3); color: var(--white-gold) !important;
    font-family: 'Montserrat', sans-serif; outline: none;
}

/* PLACEHOLDERS */
.modern-form input::placeholder, .modern-form textarea::placeholder { color: var(--white-gold); opacity: 0.5; }

/* SELECT BOX FIXES */
.modern-form select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org' viewBox='0 0 24 24' fill='none' stroke='%23E1C158' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 15px center; background-size: 15px;
    background-color: var(--dark-green); cursor: pointer;
}
.modern-form select option { background-color: var(--white); color: var(--black); }

.gold-fill { background-color: var(--white-gold); color: var(--dark-green) !important; font-weight: 700; width: 100%; border: none; height: 50px; cursor: pointer; }

/* 10. MODALS & FOOTER */
.lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(1, 50, 32, 0.95); justify-content: center; align-items: center; }
.lightbox-content { max-width: 90%; max-height: 80vh; border: 2px solid var(--white-gold); }
.close-btn { position: absolute; top: 20px; right: 30px; color: var(--white-gold); font-size: 3rem; cursor: pointer; }

.main-footer { background-color: var(--dark-green); padding: 20px 0; text-align: center; border-top: 1px solid rgba(225, 193, 88, 0.3); width: 100%; }
.main-footer p { font-size: 0.7rem; letter-spacing: 3px; color: #D4AF37; margin: 0; text-transform: uppercase; }



h2, h3, h4 {
    color: var(--dark-green);
}

/* This keeps them white on the dark green pages specifically */
.dark-theme h2, .dark-theme h3, .dark-theme h4 {
    color: var(--white);
}








/* Specifically for the RSVP Page to fix the footer */
.rsvp-page .rsvp-container {
    min-height: 70vh; /* This forces the area to be tall, pushing the footer down */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Keeps the form centered in that tall space */
}

/* Ensure the RSVP footer stays a thin strip */
.rsvp-page .main-footer {
    position: relative;
    margin-top: auto; /* Pushes it to the absolute bottom of the container */
    padding: 20px 0;
}




/* FORCING THE RSVP DROPDOWN COLORS */
.modern-form select {
    background-color: var(--dark-green) !important;
    color: var(--white-gold) !important;
    border: 1px solid rgba(225, 193, 88, 0.3);
}

/* This targets the actual list when it pops open */
.modern-form select option {
    background-color: var(--dark-green) !important;
    color: var(--white-gold) !important;
}

/* Fix for the custom arrow disappearance */
.modern-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org' viewBox='0 0 24 24' fill='none' stroke='%23E1C158' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px;
}




/* Container for the label + input combo */
.input-group {
    flex: 1; /* Makes both groups take up equal 50/50 space */
    display: flex;
    flex-direction: column;
}

.field-label {
    display: block;
    text-align: left;
    font-size: 0.65rem; /* Slightly smaller for the side-by-side look */
    color: var(--white-gold);
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Ensure the number boxes don't look weirdly different from other inputs */
.modern-form input[type="number"] {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--white-gold);
    border: 1px solid rgba(225, 193, 88, 0.3);
    padding: 15px;
    width: 100%;
}





.rsvp-portal-container {
    text-align: center;
    padding: 40px 20px;
}

.portal-text {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.large-btn {
    padding: 20px 50px !important;
    font-size: 1rem !important;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
}

.portal-subtext {
    margin-top: 30px;
    color: var(--white-gold);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    opacity: 0.8;
}






/* 11. RESPONSIVE MOBILE */
@media (max-width: 768px) {
    /* 1. Navbar Visibility */
  
.navbar { 
    display: flex !important;
    flex-wrap: nowrap !important; /* ABSOLUTELY prevent stacking */
    justify-content: space-between; 
    align-items: center;
    padding: 10px 10px;        /* Minimal padding to maximize space */
    width: 100%;               
    box-sizing: border-box;    
    background-color: rgba(0, 0, 0, 0.95);
    -webkit-text-size-adjust: none; /* Stops the phone from enlarging text */
}

/* 2. Fix the Logo size so it leaves room */
.logo, .navbar img { 
    width: 70px !important;    /* Small but fixed width */
    height: auto;
    flex-shrink: 0;            /* Do not let the logo get squished */
}

/* 3. Fix the Links to be tiny and right-aligned */
.nav-links { 
    display: flex !important;
    flex-wrap: nowrap !important; /* Force them to stay on one line */
    gap: 6px;                  /* Very tight gap */
    margin-left: auto;         /* Push to the far right */
    flex-shrink: 0;            /* Prevent the container from shrinking */
}

.nav-links a {
    font-size: 8px !important;  /* Tiny text to ensure it fits */
    text-transform: uppercase;
    white-space: nowrap;        /* Prevent text from wrapping inside the link */
    padding: 0px 2px;           /* Minimal internal padding */
    letter-spacing: 0px;        /* No extra width from spacing */
}





    
    /* 2. Home Page (Triptych) Stacking */
    .triptych-hero { 
        flex-direction: column; 
        height: auto;
        overflow: visible;
    }

    .side-image { 
        height: 40vh; 
        width: 100%;
    } 

    .center-content { 
        height: auto;
        padding: 60px 20px;
        width: 100%; 
    }







    /* 3. Global Text & Layout Fixes */
    h1 { 
        font-size: 2.5rem !important; 
    }

    .about-grid, 
    .letter-container, 
    .form-row { 
        flex-direction: column; 
    }

    .faq-grid { 
        grid-template-columns: 1fr; 
    }







    /* 4. Timeline Fixes */
    .timeline-line { 
        left: 30px; 
    }
    
    .timeline-item { 
        width: 100%; 
        left: 0 !important; 
        text-align: left !important; 
        padding-left: 70px; 
        padding-right: 20px; 
    }
    
    .branch-line { 
        left: 30px; 
        width: 30px; 
    }







    /* 5. Registry & About Page Fixes */
    .border-left { 
        border-left: none; 
        border-top: 1px solid var(--white-gold); 
        padding-top: 40px; 
    }
    
    .registry-card, 
    .registry-card.single-card { 
        min-width: 100%; 
    }
}



/* --- CLEANED RSVP PORTAL SECTION --- */

.rsvp-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Forces body to be full screen height */
}

/* 1. The Wrapper: Anchors the footer to the bottom */
.rsvp-portal-wrapper {
    min-height: calc(100vh - 250px); /* Fill screen minus header/footer */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pushes content down to meet footer */
    padding-top: 120px;
    text-align: center;
}

/* 2. The Container: Full width */
.rsvp-portal-container {
    width: 100%;
    margin: 0 auto;
}

/* 3. Text Elements */
.portal-text {
    color: var(--white-gold); /* Your requested gold text */
    font-size: 1.1rem;
    padding: 0 30px;
    margin-bottom: 10px;
}

.portal-subtext {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.1rem;
    
    /* THE SPACING FIX */
    margin-top: 25px !important;    /* Pushes it DOWN from the gold instructions */
    margin-bottom: 40px !important; /* Pushes it AWAY from the gold bar button */
    
    display: table; 
    width: fit-content; 
    margin-left: auto;              /* Keeps it centered */
    margin-right: auto;             /* Keeps it centered */
    white-space: nowrap;

    /* THE SHIMMER */
    background: linear-gradient(to right, #E1C158, #F9F1D0, #E1C158) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.3)) !important;
    font-weight: 700;
}

.full-bleed-btn {
    display: block;
    /* This forces the button to ignore parent padding and hit the screen edges */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    padding: 30px 0 !important;
    font-size: 1.1rem;
    font-weight: 700;
    border: none !important;
    border-radius: 0;
    background-color: var(--white-gold);
    color: var(--dark-green) !important;
    text-align: center;
    text-decoration: none;
}

.full-bleed-btn:hover {
    background-color: var(--white);
    color: var(--dark-green) !important;
}

/* 5. The Footer: Locked to the button */
.main-footer {
    margin-top: 0;
    padding: 20px 0;
    background-color: var(--dark-green);
    border-top: 1px solid rgba(225, 193, 88, 0.3);
}


/* 1. Center everything on the page */
.rsvp-hero-container {
    flex: 1; /* MAGIC LINE: Grows to fill empty space, pushing footer down */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px; 
    text-align: center;
}

/* 2. Fix the Gold Leaf Icon */
.gold-leaf-icon {
    display: block;
    font-size: 2.5rem;
    margin-bottom: 10px;
    
    /* RESTORE THE SHIMMER */
    background: linear-gradient(to right, #E1C158, #F9F1D0, #E1C158);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.2));
}

/* 3. The Vertical Line */
.vertical-gold-line {
    width: 1px;
    height: 40px;           /* Slightly shorter line */
    background: linear-gradient(to bottom, var(--white-gold), transparent);
    margin: 0 auto 20px;
}

/* 4. Full-Width Button specifically for this container */
.rsvp-hero-container .full-bleed-btn {
    width: 100vw;
    text-align: center;
    padding: 30px 0;
    margin-top: 20px;
    border-radius: 0;
}

.rsvp-flourish {
    margin-top: -10px;      /* Pulls the leaf even closer to the header divider */
    margin-bottom: 20px;
}

/* 6. Mobile Footer Text Fix */
@media (max-width: 768px) {
    .main-footer p {
        font-size: 0.55rem !important;
        white-space: nowrap;
        letter-spacing: 1px;
        /* 1. Force the leaf to stay Gold and Centered */
.gold-leaf-icon {
    display: block !important;
    text-align: center !important;
    margin: 0 auto 10px !important;
    
    /* RE-APPLY THE SHIMMER (It likely got overwritten) */
    background: linear-gradient(to right, #E1C158, #F9F1D0, #E1C158) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.2)) !important;
}

/* 2. Force the Portal Text back to Gold */
.portal-text {
    color: var(--white-gold) !important;
    text-align: center !important;
    padding: 0 20px !important;
}

/* 3. Re-center the container just in case */
.rsvp-hero-container {
    align-items: center !important;
    text-align: center !important;
}
    }
}