/* ============================================
   STYLES.CSS — Master stylesheet for all pages
   
   How CSS works:
   You "select" an HTML element (like h1, p, nav)
   then tell it how to look inside curly braces { }

   ============================================ */
/* --- GLOBAL STYLES (applies to the whole page) --- */

/* The body tag is the entire visible page — 
   this is like setting the default paint and flooring 
   for every room in the house */
body {
    font-family: 'Optima', 'Candara', 'Segoe UI', sans-serif;  /* Classic, elegant font */
    font-weight: bold;
    text-transform: uppercase;
    color: #997F58;               /* Dark gray text — easier to read than pure black */
    margin: 0;                    /* Removes default white border around the page */
    padding: 0;
    background-color: #e7d9bf;
}


/* --- NAVIGATION BAR --- */

/* --- NAVIGATION BAR --- */

nav {
    background-color: #4d4b0e;          /* Your olive/dark gold background */
    padding: 15px 20px;
    display: flex;                       /* Puts children side by side in a row */
    justify-content: space-between;      /* Pushes nav-links left and RSVP right */
    align-items: center;                 /* Vertically centers everything */
}

/* Hamburger icon — hidden on desktop, shown only on mobile */
.hamburger {
    display: none;
    cursor: pointer;
    user-select: none;
}

/* The container holding your 6 page links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;                           /* Even spacing between each link */
}

/* Individual nav links */
nav a {
    color: #89853a;                      /* Your muted gold text */
    text-decoration: none;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Link hover effect */
nav a:hover {
    color: #d4af37;                      /* Bright gold on hover */
}

/* RSVP button in the nav — styled to stand out */
.rsvp-btn {
    background-color: #89853a;           /* Bright gold background */
    color: #4d4b0e !important;           /* Dark text matching your nav background */
    padding: 10px 25px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 14px;
}

.rsvp-btn:hover {
    background-color: #ffffff;           /* White on hover */
    color: #4d4b0e !important;           /* Keeps dark text */
}



/* --- HEADINGS --- */

/* Your big page title — the name plate on the front door */
h1 {
    font-family: 'Pinyon Script', 'Geographica Script', sans-serif;
    font-size: 48px;
    text-align: center;
    color: #312a22;                  /* Matches the nav bar color */
    margin-top: 20px;
    text-transform: none;                   /* Keeps the title in normal case for elegance */
}

/* Section titles — like room labels */
h2 {
    font-family: 'Pinyon Script', 'Geographica Script', sans-serif;
    font-size: 32px;
    text-align: center;
    color: #312a22;
    border-bottom: 2px solid #4d4b0e;   /* Gold underline for elegance */
    padding-bottom: 10px;               /* Space between text and underline */
    max-width: 300px;                   /* Keeps the underline short, not full width */
    margin: 40px auto 20px auto;        /* Centers it and adds space above/below */
    text-transform: none; 
}

/* Sub-headings like "Ceremony", "Hotel", individual FAQ questions */
h3 {
    font-family: 'Optima', 'Candara', 'Segoe UI', sans-serif;  /* Classic, elegant font */
    font-weight: bold;
    text-transform: uppercase; 
    font-size: 20px;
    color: #312a22;
}

header h1, header h3 {
    margin: 15px 0;       /* Shrinks the gap to 5px above and below each line */
}


/* --- PARAGRAPHS AND TEXT --- */

p {
    font-size: 16px;
    line-height: 1.6;               /* Space between lines — makes text breathable */
    max-width: 700px;
    width: 90%;               /* Keeps text from stretching too wide on big screens */
    margin-left: auto;              /* These two auto margins center the text block */
    margin-right: auto;
}

.centered {
    text-align: center;
}

/* --- SECTIONS --- */

/* Each <section> gets some breathing room */
section {
    padding: 20px 30px;             /* Space inside: top/bottom 20px, sides 30px */
    max-width: 1200px;               /* Keeps content from stretching too wide */
    margin: 0 auto;                 /* Centers the section on the page */
}


/* --- HEADER (Home page hero area) --- */

header {
    text-align: center;
    padding: 80px 20px;
    background-color: #4d4b0e;          /* Your olive — makes a bold hero section */
    color: #d4af37;
}

header h1 {
    color: #faf9f6;
    margin: 5px 0;
}

.header-subtitle {
    font-size: 16px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #d4af37;                     /* Gold accent */
    margin-bottom: 15px;
}

.header-and {
    font-family: 'Pinyon Script', cursive;
    font-size: 36px;
    color: #faf9f6;
    margin: 5px auto;
    font-weight: normal;
    text-align: center;
}

.header-date {
    margin-top: 20px;
    font-size: 18px;
    letter-spacing: 2px;
    color: #d4af37;
}

.header-location {
    font-size: 16px;
    letter-spacing: 2px;
    color: #d4af37;
    margin-top: 5px;
}

/* --- FAQ PAGE BACKGROUND --- */

.faq-page {
    background-image: url('images/park_bw.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: #e7d9bf; /* fallback if image fails to load */
}

/* --- COLLAPSIBLE FAQs --- */

/* Each FAQ item — the outer container */
details {
    max-width: 700px;                      /* Matches your paragraph width for consistency */
    margin: 15px auto;                     /* Centers on page with vertical breathing room */
    padding: 15px 20px;
    background-color: rgba(255, 255, 255, 0.72); /* ~28% transparent */
    border-left: 4px solid #d4af37;       /* Gold accent stripe on the left — ties to your palette */
    border-radius: 4px;                    /* Slightly rounded corners */
    cursor: pointer;                       /* Shows a hand icon on hover to signal it's clickable */
}

/* The clickable question */
summary {
    font-size: 18px;
    color: #4d4b0e;                        /* Your olive color for the question text */
    font-weight: bold;
    list-style: none;                      /* Removes the default triangle/arrow */
    position: relative;                    /* Lets us position a custom arrow */
    padding-right: 30px;                   /* Leaves room for the arrow on the right */
}

/* Custom arrow indicator on the right side */
summary::after {
    content: "+";                          /* Plus sign when closed */
    position: absolute;
    right: 0;
    font-size: 24px;
    color: #d4af37;                        /* Gold arrow */
    transition: transform 0.2s;            /* Smooth animation when toggling */
}

/* Change the plus to a minus when the FAQ is open */
details[open] summary::after {
    content: "−";                          /* Minus sign when open */
}

/* The answer paragraph — add a bit of top spacing when revealed */
details p {
    margin-top: 15px;
    font-weight: normal;                   /* Overrides the bold from body — answers look softer */
    color: #333333;
}
/* --- RSVP BUTTON --- */

/* The button itself */
button {
    background-color: #2c3e50;      /* Navy background matching your theme */
    color: #ffffff;                  /* White text */
    font-size: 20px;
    padding: 15px 40px;             /* Makes the button big and clickable */
    border: none;                   /* Removes default button border */
    cursor: pointer;                /* Shows a hand icon when hovering */
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 20px;
}

/* Button hover effect */
button:hover {
    background-color: #d4af37;      /* Turns gold when hovered */
}


/* --- LINKS (inside paragraphs, like registry links) --- */

a {
    color: #89863a;
}

a:hover {
    color: #d4af37;
}

/* --- BANNER (home page) --- */

.banner {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* --- SECTION HEADER IMAGES (replaces h2 on schedule, travel, recs pages) --- */

.section-header-img {
    display: block;
    margin: 30px auto 20px auto;
    max-width: 400px;
    width: 100%;
    height: auto;
}

/* --- STORY DIVIDER PHOTO (between Welcome and Our Story) --- */

.story-divider {
    max-width: 700px;
    width: 90%;
    margin: 0 auto;
}

.story-divider img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* --- HERO PHOTO --- */

.hero-photo {
    display: block;          /* Allows centering with auto margins */
    max-width: 500px;        /* Caps size on desktop */
    width: 100%;             /* Shrinks to fit smaller screens */
    height: auto;            /* Keeps proportions intact */
    margin: 30px auto;       /* Centers the photo horizontally */
    border-radius: 8px;      /* Slightly rounded corners for elegance */
}

/* --- OUR STORY PHOTOS --- */

.story-photo-left {
    float: left;                /* Photo sits on the left, text wraps around it */
    width: 200px;
    height: auto;
    margin: 10px 20px 10px 0;  /* Space: top, right, bottom, left */
    border-radius: 8px;
}

.story-photo-right {
    float: right;               /* Photo sits on the right, text wraps around it */
    width: 200px;
    height: auto;
    margin: 10px 0 10px 20px;
    border-radius: 8px;
}

.photo-caption-left {
    float: left;
    clear: left;                /* Keeps caption directly under its photo */
    width: 200px;
    font-size: 14px;
    font-style: italic;
    color: #888888;
    margin: 0 20px 10px 0;
}

.photo-caption-right {
    float: right;
    clear: right;
    width: 200px;
    font-size: 14px;
    font-style: italic;
    color: #888888;
    margin: 0 0 10px 20px;
}

/* ============================================
   MOBILE STYLES
   
   Everything inside this block ONLY applies 
   when the screen is 768px wide or smaller 
   (phones and small tablets).
   
   Think of this as: "if the room is small, 
   rearrange the furniture to fit."
   ============================================ */

@media (max-width: 768px) {

    /* --- HAMBURGER NAV --- */
    .hamburger {
        display: block;
        font-size: 36px;
        line-height: 1;
        padding: 4px 8px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .nav-links.open {
        display: flex;
    }

    nav {
        flex-wrap: wrap;
        padding: 10px 15px;
    }

    nav a {
        padding: 12px 0;
        font-size: 14px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .rsvp-btn {
        margin-top: 10px;
        text-align: center;
        width: 100%;
        padding: 14px;
        box-sizing: border-box;
        display: block;
        min-height: 44px;
    }

    /* --- BANNER (home page) --- */
    .banner {
        aspect-ratio: 4 / 3;
    }

    /* --- STORY DIVIDER PHOTO --- */
    .story-divider {
        width: 100%;
        max-width: 100%;
    }

    .story-divider img {
        border-radius: 0;
    }

    /* --- HEADER HERO --- */
    header {
        padding: 50px 20px;
    }

    .header-subtitle {
        letter-spacing: 1px;
        font-size: 14px;
    }

    .header-and {
        font-size: 28px;
    }

    .header-date {
        font-size: 15px;
        letter-spacing: 1px;
    }

    .header-location {
        font-size: 14px;
        letter-spacing: 1px;
    }

    /* --- HEADINGS --- */
    h1 {
        font-size: 28px;
        margin-top: 20px;
    }

    h2 {
        font-size: 22px;
    }

    /* --- CONTENT --- */
    section {
        padding: 15px;
    }

    p {
        font-size: 16px;
    }

    button {
        width: 100%;
        font-size: 18px;
        padding: 15px 20px;
        min-height: 44px;
    }

    /* --- FAQS / COLLAPSIBLES --- */
    details {
        padding: 12px 15px;
        word-break: break-word;
    }

    summary {
        font-size: 16px;
    }

    /* --- STORY PHOTOS --- */
    .story-photo-left, .story-photo-right {
        float: none;
        width: 100%;
        margin: 15px 0;
    }

    .photo-caption-left, .photo-caption-right {
        float: none;
        width: 100%;
        text-align: center;
    }
}