/* ==========================================
   1. VARIABLES & CORE RESET
   ========================================== */
html, body { overflow-x: hidden; }
* { box-sizing: border-box; }

:root {
    --dark-green: #013220;
    --white-gold: #E1C158;
    --deep-gold: #D4AF37;
    --black: #000000;
    --white: #FFFFFF;
    --off-white: #fcfcfc;
}

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

    /* THE MOORING BASE: Enables layout mechanics to stretch to the absolute window baseline */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ==========================================
   2. SHARED TYPOGRAPHY & 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;
}

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

.eyebrow, .eyebrow-dark {
    display: block;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
}

.eyebrow {
    font-size: 0.9rem;
    letter-spacing: 5px;
    margin-bottom: 10px;
    font-weight: 700;
    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 1px 1px rgba(0,0,0,0.3));
}

.eyebrow-dark {
    font-size: 1rem;
    letter-spacing: 5px;
    font-weight: 700;
    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));
}

.gold-text { 
    color: #D4AF37; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    margin-bottom: 20px; 
}

.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 & FOOTER
   ========================================== */
.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, .active-link { 
    color: var(--white-gold) !important; 
}
.nav-links .nav-rsvp { 
    border: 1px solid var(--white-gold); padding: 8px 15px; color: var(--white-gold); 
}

.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%; 
    
    /* THE STRUCTURAL MOORING LOCK: Forces the block to sit flat against the browser floor */
    margin-top: auto;
    flex-shrink: 0;
}

.main-footer p { 
    font-size: 0.7rem; letter-spacing: 3px; color: #D4AF37; margin: 0; text-transform: uppercase; 
}

/* ==========================================
   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; 
}

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

.countdown-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: -20px;
    padding: 20px;
}

.timer-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timer-value {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--white-gold);
    line-height: 1;
}

.timer-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--white-gold);
    opacity: 0.8;
    margin-top: 8px;
}

.map-link {
  color: inherit; /* Keeps the color matching whatever text block it's in */
  text-decoration: underline; /* Gives a visual cue that it is clickable */
  transition: opacity 0.3s ease;
}

.map-link:hover {
  color: var(--white-gold); /* Fades nicely to your theme's gold on desktop hover */
  opacity: 0.8;
}


/* ==========================================
   5. DETAILS & ABOUT US PAGE
   ========================================== */
.sub-hero { 
    padding: 100px 20px 20px; text-align: center; 
}
.about-page .sub-hero { 
    padding: 80px 20px 20px; 
}

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

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

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

/* CUSTOM SCROLLBAR FOR ABOUT US STORY TEXT */

/* SHARED SCROLLBAR STYLE */
.custom-scroll {
    overflow-y: scroll !important; 
    padding-right: 20px;
    /* Prevents the browser from auto-hiding the bar */
    -webkit-overflow-scrolling: touch; 
}

/* Custom Gold Scrollbar (Chrome/Safari/Edge) */
.custom-scroll::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 6px;
    height: 6px;
    display: block !important; /* Forces it into the layout */
    background-color: rgba(212, 175, 55, 0.05); /* Keeps the track visible */
}
.custom-scroll::-webkit-scrollbar-track {
    background: rgba(212, 175, 55, 0.1);
}
.custom-scroll::-webkit-scrollbar-thumb {
    background-color: var(--white-gold) !important;
    border-radius: 10px;
    /* This creates a tiny border so it doesn't look squashed */
    border: 2px solid transparent;
    /* This prevents the 'fade out' on mobile */
    min-height: 40px; 
    background-clip: content-box;
}

/* Firefox Style */
.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--white-gold) rgba(212, 175, 55, 0.2) !important;
}

/* This makes sure the track is also visible if you want the 'path' to show */
.custom-scroll::-webkit-scrollbar-track {
    background-color: rgba(212, 175, 55, 0.08); 
    border-radius: 10px;
}

/* A soft gold fade that tells guests 'Scroll for More' */
/* The parent must be relative for the fade to 'stick' to the bottom of the text */
.about-text {
    position: relative;
}

.scroll-indicator-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px; /* Reduced height so it's a subtle hint, not a wall */
    /* This fades from transparent to white to match your page background */
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.9));
    pointer-events: none; /* Crucial: lets you click/scroll through the fade */
    z-index: 5;
}

/* Ensure the scroll box has enough bottom padding so the fade doesn't hide the last line */
.custom-scroll {
    padding-bottom: 20px;
    margin-bottom: 5px;
}



/* The horizontal line that separates letters from family */
.horizontal-family-divider {
    height: 1px;
    width: 80%; /* Stretches across most of the page */
    background: linear-gradient(to right, transparent, var(--white-gold), transparent);
    margin: 80px auto 40px auto; /* Provides top and bottom breathing room */
}

.family-section {
    text-align: center;
    padding: 0 20px 80px;
    max-width: 900px; /* Keeps the entire section contained nicely */
    margin: 0 auto;
}

.family-photo-container {
    margin-bottom: 30px;
}

.family-photo {
    width: 100%;
    height: auto;
    max-height: 400px; /* Prevents giant photos on huge screens */
    object-fit: cover;
    border: 1px solid var(--white-gold);
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.family-text-container h3 {
    margin-bottom: 15px;
}



/* ==========================================
   6. REGISTRY & SCHEDULE
   ========================================== */

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

.second-row-containter { 
    display: flex; justify-content: center; padding-top: 40px; 
}
.registry-card.single-card { 
    min-width: 400px; max-width: 450px; 
}

.dark-theme { 
    background-color: var(--dark-green); color: var(--white); 
}
.dark-theme h2, .dark-theme h3, .dark-theme h4 { 
    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; 
}

/* ==========================================
   7. RSVP FORM & PORTAL
   ========================================== */
   
.rsvp-page { 
    display: flex; flex-direction: column; min-height: 100vh; 
}

.rsvp-container { 
    max-width: 650px; margin: 0 auto; padding: 0 20px 100px; min-height: 70vh; display: flex; flex-direction: column; justify-content: center; 
}

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

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

.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) !important; cursor: pointer;
}

.modern-form select option { 
    background-color: var(--dark-green) !important; color: var(--white-gold) !important; 
}

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

/* Input Portal Elements */
.input-group { 
    flex: 1; display: flex; flex-direction: column; 
}
.field-label { 
    display: block; text-align: left; font-size: 0.65rem; color: var(--white-gold); letter-spacing: 2px; margin-bottom: 8px; text-transform: uppercase; opacity: 0.8; 
}

.rsvp-portal-wrapper { 
    min-height: calc(100vh - 250px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 120px; text-align: center; 
}
.rsvp-portal-container { 
    text-align: center; padding: 40px 20px; width: 100%; margin: 0 auto; 
}
.portal-text { 
    color: var(--white-gold); font-size: 1.1rem; padding: 0 30px; margin-bottom: 10px; max-width: 500px; margin-left: auto; margin-right: auto; 
}

.portal-subtext {
    font-family: 'Playfair Display', serif;
    font-style: italic; font-size: 1.1rem; font-weight: 700;
    margin: 25px auto 40px !important;
    display: table; width: fit-content; white-space: nowrap;
    background: linear-gradient(to right, #E1C158, #F9F1D0, #E1C158) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.3)) !important;
}

.full-bleed-btn {
    display: block; 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;
    background-color: var(--white-gold); color: var(--dark-green) !important; text-align: center; text-decoration: none;
}
.full-bleed-btn:hover { 
    background-color: var(--white); 
}

.rsvp-hero-container { 
    flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: 20px; text-align: center; 
}

.gold-leaf-icon {
    display: block; font-size: 2.5rem; margin: 0 auto 10px;
    background: linear-gradient(to right, #E1C158, #F9F1D0, #E1C158);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.2));
}

.vertical-gold-line { 
    width: 1px; height: 40px; background: linear-gradient(to bottom, var(--white-gold), transparent); margin: 0 auto 20px; 
}

/* ==========================================
   8. MODALS & LIGHTBOX
   ========================================== */
.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; 
}

/* ==========================================
   9. RESPONSIVE MOBILE (CONSOLIDATED)
   ========================================== */
@media (max-width: 768px) {
    .navbar { 
        display: flex !important; padding: 10px; width: 100%; background-color: rgba(0, 0, 0, 0.95);
    }
    .nav-links { gap: 6px; margin-left: auto; }
    .nav-links a { font-size: 8px !important; padding: 0 2px; letter-spacing: 0px; }

    .triptych-hero { flex-direction: column; height: auto; overflow: visible; }
    .side-image { height: 40vh; width: 100%; } 
    .center-content {
        padding-top: 80px !important; 
        justify-content: flex-start !important; /* Pulls text toward top of green box */
    }
    .center-content h1 {
        font-size: 2rem !important; /* Smaller names on phone */
        margin-bottom: 10px;
    }
    .about-grid, .letter-container, .form-row { 
        flex-direction: column; align-items: center; 
    }
    .faq-grid { 
        grid-template-columns: 1fr; 
    }

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

    .border-left { 
        border-left: none; border-top: 1px solid var(--white-gold); padding-top: 40px; 
    }
    .registry-card, .registry-card.single-card { 
        min-width: 100%; 
    }

    .main-footer p { 
        font-size: 0.55rem !important; white-space: nowrap; letter-spacing: 1px; 
    }

    .horizontal-family-divider { 
        width: 90%; margin: 40px auto; 
    }

    .countdown-container {
        gap: 12px !important; /* Tightens the horizontal space */
        margin-top: 10px !important;
        padding: 0 !important;
        margin-bottom: 30px !important;
    }
    .timer-value {
        font-size: 1.5rem !important; /* Smaller numbers */
    }
    .timer-label {
        font-size: 0.6rem !important; /* Smaller labels */
        margin-top: 4px !important;
    }
}