/* ==========================================================================
   Walk St. Helena - shared styles (used by every page)
   Sections: 1 Base  2 Header/nav  3 Hero  4 Zigzag  5 Links  6 Footer
             7 Home  8 About  9 Community  10 Donate  11 Mobile (one breakpoint)
   ========================================================================== */

:root {
    --green: #4CAF50;
    --green-hover: #388E3C;
    --green-visited: #2F8C33;
    --orange: #FF8C00;
    --orange-hover: #E57F00;
    --text: #333;
    --rule: #eee;
    --header-offset: 60px;
}

/* ---------- 1. Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Libre Franklin', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--text);
    background-color: #fff;
}
main { margin-top: var(--header-offset); } /* clears the fixed header */

/* ---------- 2. Header and navigation ---------- */
.header {
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background-color: #fff;
    border-bottom: 1px solid var(--rule);
}
.logo a {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--green);
    text-decoration: none;
    letter-spacing: 1px;
}
.logo img { height: 30px; width: auto; margin-right: 10px; }

.nav-menu { list-style: none; display: flex; align-items: center; }
.nav-menu li { margin-left: 25px; }
.nav-menu a {
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    padding: 5px 0;
    transition: color 0.3s;
}
.nav-menu a:hover,
.nav-menu a[aria-current="page"] { color: var(--green); } /* site.js sets aria-current */

/* Donate button (declared after the rules above so it wins on equal specificity) */
.nav-menu .donate-button a {
    background-color: var(--orange);
    color: #fff;
    padding: 8px 15px;
    border-radius: 6px;
    font-weight: 700;
    transition: background-color 0.3s;
}
.nav-menu .donate-button a:hover,
.nav-menu .donate-button a[aria-current="page"] { background-color: var(--orange-hover); color: #fff; } /* darker orange = you're on this page */

.hamburger-menu {
    display: none;
    background: none;
    border: none;
    font-size: 30px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    color: var(--text);
}

/* ---------- 3. Hero ---------- */
.hero-section {
    position: relative;
    width: 100%;
    height: 80vh;
    min-height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    background-size: cover;
    background-position: center;
    margin-bottom: 30px;
}
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}
.hero-tall { height: 100vh; }          /* home page */
.hero-flush { margin-bottom: 0; }      /* when the next block supplies its own spacing */
.hero-content { position: relative; z-index: 2; padding: 0 5%; max-width: 900px; }
.hero-content h1 {
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* ---------- 4. Zigzag (image + text, alternating) ----------
   Markup is always: image first, then content.
   Add .zigzag-reverse to put the image on the right on desktop.
   On mobile everything stacks with the image on top. */
.zigzag-section {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 40px auto;
    border-bottom: 1px solid var(--rule);
}
.zigzag-section:last-of-type { border-bottom: none; }
.zigzag-section:last-child { margin-bottom: 60px; }
.zigzag-section.no-rule { border-bottom: none; } /* heading blocks that introduce a list below */
.zigzag-reverse { flex-direction: row-reverse; }

.zigzag-image {
    flex: 1;
    height: 400px;
    background-size: cover;
    background-position: center;
}
.zigzag-content {
    flex: 1;
    min-height: 400px;
    padding: 40px 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.zigzag-content h2 { font-size: 2em; color: var(--green); margin-bottom: 20px; }
.zigzag-content p { font-size: 1.3em; margin-bottom: 15px; }
.zigzag-content p:last-child { margin-bottom: 0; }
.zigzag-content.text-left p { text-align: left; } /* heading stays centered, paragraphs left-aligned */
.zigzag-content ul {
    list-style: none;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.3em;
    line-height: 1.8;
}
.zigzag-content ul.bulleted-list {
    list-style: disc;
    text-align: left;
    padding-left: 20px;
}

/* Plain text block with a green heading (About: mission) */
.text-block { max-width: 1000px; margin: 0 auto 30px; padding: 40px 5%; }
.text-block h2 { font-size: 2em; color: var(--green); margin-bottom: 20px; text-align: center; }
.text-block p { font-size: 1.3em; margin-bottom: 15px; text-align: left; }

/* ---------- 5. Links inside main content ---------- */
main a { color: var(--green); text-decoration: none; transition: color 0.3s; }
main a:visited { color: var(--green-visited); }
main a:hover { color: var(--green-hover); text-decoration: underline; }

/* ---------- 6. Footer ---------- */
.footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px 5%;
    background-color: #333;
    color: #fff;
    font-size: 0.9em;
    text-align: left;
}
.footer-column { width: 50%; padding: 0 10px; line-height: 1.8; }
.footer-column.right { text-align: right; }
.footer a { color: #fff; text-decoration: underline; transition: opacity 0.3s; }
.footer a:hover { opacity: 0.8; }

/* ---------- 7. Home page ---------- */
.intro-band { padding: 80px 10%; text-align: center; background-color: #f8f8f8; }
.intro-band h2 { font-size: 2.5em; color: var(--text); margin-bottom: 15px; }
.home .zigzag-content p { font-size: 1.5em; }
.home main { padding-bottom: 50px; }

/* ---------- 8. About page ---------- */
.about-content { max-width: 1000px; margin: 0 auto; padding: 0 5%; }
.about-content p { font-size: 1.1em; margin-bottom: 10px; }

.timeline { position: relative; padding: 20px 0; list-style: none; }
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    background-color: #ddd;
}
.timeline-item { position: relative; width: 50%; margin-bottom: 30px; padding: 10px 40px; }
.timeline-item::after {
    content: '';
    position: absolute;
    top: 15px;
    right: -7.5px;
    z-index: 1;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--green);
    border: 3px solid #fff;
}
.timeline-item:nth-child(even) { left: 50%; }
.timeline-item:nth-child(even)::after { left: -7.5px; right: auto; }
.timeline-item:nth-child(odd) { left: 50%; transform: translateX(-100%); text-align: right; }
.timeline-year { font-size: 1.5em; font-weight: 700; color: var(--green); margin-bottom: 10px; }

.news-feed { margin: 20px 0 60px; }
.news-item {
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid var(--rule);
    border-left: 5px solid var(--green);
    background-color: #f9f9f9;
}
.news-item strong { display: block; margin-bottom: 5px; color: var(--text); }
.news-item p, .news-item strong { font-size: 1.3em; }

/* ---------- 9. Community page ---------- */
.text-section { max-width: 1200px; margin: 40px auto; padding: 40px 5%; text-align: center; }
.text-section p { font-size: 1.3em; }
.text-section a { font-weight: 700; }

.form-container {
    max-width: 500px;
    margin: 40px auto;
    padding: 30px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background-color: #f9f9f9;
}
.form-container h3 { text-align: center; color: var(--text); margin-bottom: 10px; font-size: 1.5em; }
.form-container p { text-align: center; margin-bottom: 25px; }
.form-container .privacy-note { font-size: 0.8em; margin-bottom: 0; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 700; color: #555; }
.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.submit-button {
    width: 100%;
    padding: 12px;
    background-color: var(--green);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s;
}
.submit-button:hover { background-color: #45a049; }

/* ---------- 10. Donate page ---------- */
.donate-section { max-width: 1000px; margin: 0 auto; padding: 60px 5%; }
.donate-section p { font-size: 1.1em; margin-bottom: 20px; text-align: center; }
.donate-section .donate-intro { font-size: 1.3em; } /* same as thank-you message */

.givelively-widget-placeholder {
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.2em;
    color: var(--green);
    margin-bottom: 40px;
    padding: 20px 0;
}

.mail-in-donation {
    margin: 40px 0;
    padding: 20px;
    text-align: center;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.mail-in-donation p { font-size: 1.1em; line-height: 1.5; margin: 5px 0; }
.mail-in-donation .address-line { font-weight: 700; }
.mail-in-donation .fine-print { font-size: 0.9em; margin-top: 25px; }

.other-orgs { padding: 40px 0; text-align: center; }
.other-orgs p { font-weight: 700; font-size: 1.2em; margin-bottom: 20px; }
.other-orgs ul { list-style: none; max-width: 400px; margin: 0 auto; }
.other-orgs li { margin-bottom: 10px; }
.other-orgs a { font-weight: 400; }

/* ---------- 10b. Simple message pages (Thank-you, Shop) ---------- */
.message-block { max-width: 1000px; margin: 0 auto; padding: 80px 5%; text-align: center; }
.message-block p { font-size: 1.3em; margin-bottom: 20px; } /* same as .text-block p on About */

/* ---------- 11. Mobile (single breakpoint) ---------- */
/* .zigzag-reverse only applies on desktop; below 900px everything stacks image-first */
@media (max-width: 900px) {
    /* Nav collapses to hamburger */
    .hamburger-menu { display: block; }
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        background-color: #fff;
        border-top: 1px solid var(--rule);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 999;
    }
    .nav-menu.active { display: flex; }
    .nav-menu li { margin: 0; border-bottom: 1px solid #f8f8f8; }
    .nav-menu a { display: block; padding: 15px 20px; text-align: left; }
    .nav-menu .donate-button a { border-radius: 0; }

    /* Hero */
    .hero-section { height: 50vh; min-height: 300px; margin-bottom: 20px; }
    .hero-tall { height: 60vh; }
    .hero-flush { margin-bottom: 0; }

    /* Zigzag stacks, image on top */
    .zigzag-section,
    .zigzag-reverse { flex-direction: column; margin: 20px auto; }
    .zigzag-image { width: 100%; height: 300px; min-height: 250px; }
    .zigzag-content { width: 100%; min-height: unset; padding: 30px 5%; }
    .zigzag-section:last-child { margin-bottom: 40px; }

    .intro-band { padding: 50px 5%; }

    /* Timeline: single column on the left */
    .timeline::before { left: 20px; }
    .timeline-item,
    .timeline-item:nth-child(even),
    .timeline-item:nth-child(odd) {
        width: 100%;
        left: 0;
        transform: none;
        text-align: left;
        padding-left: 60px;
        padding-right: 15px;
    }
    .timeline-item::after,
    .timeline-item:nth-child(even)::after { left: 12.5px; right: auto; }
}