/* =========================================================
   We Feed the People with Love
   Design language drawn from the org's promo material:
   espresso-brown wood background, bold red banners,
   gold/amber headings, warm cream text.
   ========================================================= */

/* ---------- Reset & base ---------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --red: #b81d2a;
    --red-dark: #8f1420;
    --gold: #e6a52c;
    --gold-light: #f4c75d;
    --cream: #f8f2e9;
    --muted: #e6d6bd;
    --bg-dark: #4d3120;
    --bg-mid: #5e3c28;
    --panel: #6d4a33;
    --panel-2: #7c5639;
    --panel-border: rgba(232, 170, 90, 0.30);
    --max-width: 1080px;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
}

html {
    scroll-behavior: smooth;
    background-color: #43301d;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--cream);
    background: var(--bg-dark);
    background-image: linear-gradient(160deg, #8f5a3e 0%, #744631 48%, #5e3826 100%);
    background-attachment: fixed;
    line-height: 1.65;
}

a {
    color: var(--gold-light);
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3rem;
}

h1, h2, h3 {
    line-height: 1.2;
    color: var(--cream);
}

/* ---------- Header / nav ---------- */
header {
    background: rgba(70, 44, 28, 0.82);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--panel-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.navbar {
    max-width: 100%;
    margin: 0 auto;
    padding: 1.8rem clamp(1rem, 2.5vw, 2.5rem);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
    flex-wrap: nowrap;
}

.brand {
    font-size: clamp(1.3rem, 2.7vw, 2.3rem);
    font-weight: 800;
    letter-spacing: 0.2px;
    color: var(--cream);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
    white-space: nowrap;
    flex-shrink: 0;
}

.brand-text {
    white-space: nowrap;
}

.brand-logo {
    height: clamp(52px, 5.5vw, 84px);
    width: clamp(52px, 5.5vw, 84px);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

.brand b {
    color: var(--gold);
}

/* Highlight just the "Love" in the org name wherever it appears as a title. */
.love {
    color: var(--gold);
}

/* The header sizes fluidly via clamp() above, staying on one row as the
   window narrows. On very small screens, drop the brand wordmark (keeping
   the logo) so the nav still fits comfortably. */
@media (max-width: 560px) {
    .brand-text { display: none; }
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 1.6vw, 1.6rem);
    flex-wrap: nowrap;
}

.nav-links a {
    color: var(--cream);
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(1rem, 2vw, 1.9rem);
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.nav-links a:hover {
    color: var(--gold);
}

.nav-cta {
    background: var(--red);
    color: #fff !important;
    padding: clamp(0.5rem, 0.9vw, 0.8rem) clamp(1rem, 1.8vw, 1.8rem);
    border-radius: 999px;
}

.nav-cta:hover {
    background: var(--red-dark);
    color: #fff !important;
}

.nav-cta-outline {
    border: 2px solid var(--gold);
    color: var(--gold) !important;
    padding: clamp(0.5rem, 0.9vw, 0.8rem) clamp(1rem, 1.8vw, 1.8rem);
    border-radius: 999px;
}

.nav-cta-outline:hover {
    background: var(--gold);
    color: #2a1a0c !important;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 1.4rem 3rem;
    font-size: 1.3rem;
    background: var(--red);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 0.08s ease, background 0.15s ease;
}

.btn:hover {
    background: var(--red-dark);
    color: #fff;
}

.btn:active {
    transform: translateY(1px);
}

.btn-gold {
    background: var(--gold);
    color: #2a1a0c;
}

.btn-gold:hover {
    background: var(--gold-light);
    color: #2a1a0c;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--gold);
    color: var(--gold);
}

.btn-outline:hover {
    background: var(--gold);
    color: #2a1a0c;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    min-height: clamp(420px, 58vh, 560px);
    display: flex;
    align-items: center;
    padding: 2rem 0;
    /* Bleed 1px into the sections above and below so subpixel rounding at
       certain zoom levels never reveals a gap at the hero's edges. */
    margin-top: -1px;
    margin-bottom: -1px;
}

.hero-slides,
.hero-slide {
    position: absolute;
    inset: 0;
}

.hero-slide {
    background-size: cover;
    background-position: right center;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.hero-slide.is-active {
    opacity: 1;
}

/* Diagonal background-colored panel over the left side. The angled
   right edge is the "cut" that reveals the photo carousel behind it. */
.hero-overlay-wrap {
    position: absolute;
    /* Extend a few px past the top and bottom. The hero's overflow:hidden
       clips this back to the exact hero edges, so the brown panel always
       ends on the same pixel row as the photo (no 1px gap at any zoom). */
    inset: -4px 0;
    /* The drop-shadow must live on a PARENT of the clipped element. If
       clip-path and filter share an element, the filter is applied before
       the clip, so the shadow gets clipped away (that's why it was
       invisible). With clip-path on the child and drop-shadow here, the
       shadow follows the clipped diagonal and lands on the photo. */
    filter: drop-shadow(5px 0 14px rgba(0, 0, 0, 0.8));
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #8f5a3e 0%, #744631 55%, #5e3826 100%);
    clip-path: polygon(0 0, 35% 0, 45% 100%, 0 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 40%;
    min-width: 320px;
    max-width: 900px;
    text-align: center;
    padding: 1.75rem clamp(1rem, 2vw, 2rem);
    /* Depth on all hero text (inherited by headings, lead,
       eyebrow, buttons, and pills). */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.hero-logo {
    display: block;
    width: clamp(200px, 22vw, 320px);
    height: auto;
    border-radius: 50%;
    margin: 0 auto 1rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

.hero .eyebrow {
    display: inline-block;
    background: var(--red);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.78rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
}

.hero h1 {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    margin-bottom: 1rem;
}

.hero h1 .accent {
    color: var(--gold);
}

.hero .lead {
    max-width: none;
    margin: 0 auto 1.75rem;
    color: var(--muted);
    font-size: 1.15rem;
}

.hero-actions {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* The buttons sit on solid fills, so the inherited hero text-shadow
   muddies their labels. Remove it just for them. */
.hero-actions .btn {
    text-shadow: none;
}

.tagline-pills {
    margin-top: 2rem;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.pill {
    border: 1px solid var(--panel-border);
    color: var(--cream);
    background: rgba(40, 27, 15, 0.35);
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
}

/* On narrow screens the diagonal would crowd out the photo, so cover the
   hero with a near-opaque panel and center the content instead. */
@media (max-width: 820px) {
    .hero-overlay {
        clip-path: none;
        opacity: 0.92;
        box-shadow: none;
    }
    .hero-content {
        text-align: center;
        margin: 0 auto;
        width: 100%;
        max-width: 640px;
    }
    .hero-logo { margin-left: auto; margin-right: auto; }
    .hero-actions,
    .tagline-pills { justify-content: center; }
}

/* ---------- Side hero (Contact / Get Involved) ----------
   Mirror of the homepage hero: image carousel on the LEFT, brown panel on
   the RIGHT with a gentle diagonal cut over the image. */
.side-hero {
    position: relative;
    overflow: hidden;
    min-height: clamp(476px, 64vh, 672px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Bleed 1px above/below so subpixel rounding never reveals a gap. */
    margin-top: -1px;
    margin-bottom: -1px;
}

.side-hero-slides {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 0;
    width: 60%;
}

.side-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.side-hero-slide.is-active {
    opacity: 1;
}

.side-hero-overlay-wrap {
    position: absolute;
    inset: 0;
    /* drop-shadow on the parent so it follows the clipped diagonal and
       casts onto the image to the left. */
    filter: drop-shadow(-5px 0 14px rgba(0, 0, 0, 0.8));
}

.side-hero-overlay {
    position: absolute;
    inset: -4px 0;
    background: linear-gradient(160deg, #8f5a3e 0%, #744631 55%, #5e3826 100%);
    /* Right-side panel with a gentle (half-sloped) diagonal left edge. */
    clip-path: polygon(44% 0, 100% 0, 100% 100%, 49% 100%);
}

.side-hero-content {
    position: relative;
    z-index: 2;
    width: 50%;
    padding: 2rem clamp(1.5rem, 4vw, 3.5rem);
    text-align: left;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.side-hero-content h1 {
    color: var(--gold);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    margin-bottom: 0.75rem;
}

.side-hero-content p {
    color: var(--cream);
    font-size: 1.05rem;
}

@media (max-width: 820px) {
    .side-hero-slides { width: 100%; }
    .side-hero-overlay {
        clip-path: none;
        opacity: 0.9;
    }
    .side-hero-content {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
        text-align: center;
    }
}

/* ---------- Section headings ---------- */
.section-head {
    text-align: center;
    margin-bottom: 2rem;
}

.section-head h2 {
    color: var(--gold);
    font-size: clamp(1.6rem, 3.5vw, 2.1rem);
}

.section-head p {
    color: var(--muted);
    max-width: 640px;
    margin: 0.5rem auto 0;
}

/* ---------- Cards / grids ---------- */
.grid {
    display: grid;
    gap: 1.25rem;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 820px) {
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.card .icon {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 0.6rem;
}

.card h3 {
    color: var(--gold-light);
    margin-bottom: 0.4rem;
    font-size: 1.15rem;
}

.card p {
    color: var(--muted);
}

/* ---------- Programs ---------- */
.programs {
    margin-top: 1rem;
}

/* ---------- Founders ---------- */
.founder {
    text-align: left;
}

.founder-photo {
    display: block;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
    border-radius: 14px;
    margin: 0 auto 1.1rem;
    box-shadow: var(--shadow);
}

.founder .name {
    text-align: center;
    font-size: 1.15rem;
    color: var(--cream);
    font-weight: 700;
}

.founder .role {
    text-align: center;
    color: var(--gold);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.founder p {
    color: var(--muted);
    font-size: 0.97rem;
    margin-bottom: 0.75rem;
}

/* ---------- Drop-off / banner callout ---------- */
.callout {
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow);
    margin-top: 2.5rem;
}

.callout h2 {
    color: #fff;
    margin-bottom: 0.4rem;
}

.callout .address {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold-light);
    margin: 0.5rem 0 0.25rem;
}

.callout .hours {
    color: #fff;
}

.callout .partner {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-top: 0.75rem;
}

/* ---------- Get involved link cards ---------- */
.link-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.1s ease, border-color 0.15s ease;
}

.link-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
}

.link-card .arrow {
    margin-top: auto;
    color: var(--gold);
    font-weight: 700;
    padding-top: 0.75rem;
}

/* ---------- Generic page content ---------- */
.page-header {
    text-align: center;
    margin-bottom: 2rem;
}

.page-header h1 {
    color: var(--gold);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
}

.content {
    max-width: 760px;
    margin: 0 auto;
}

.content h2 {
    color: var(--gold-light);
    margin: 1.75rem 0 0.6rem;
}

.content p {
    color: var(--cream);
    margin-bottom: 1rem;
}

.contact-details {
    list-style: none;
    margin-top: 1rem;
}

.contact-details li {
    margin-bottom: 0.6rem;
    color: var(--cream);
}

.error-page {
    text-align: center;
    padding: 3rem 0;
}

/* ---------- Flash messages ---------- */
.flashes {
    list-style: none;
    margin-bottom: 1.5rem;
}

.flash {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border: 1px solid transparent;
}

.flash-success { background: #1f3a26; border-color: #2f6b41; color: #cdeccf; }
.flash-info    { background: #243349; border-color: #3a5680; color: #cfe0f5; }
.flash-warning { background: #4a3a1a; border-color: #8a6a1c; color: #f5e0a8; }
.flash-danger  { background: #4a2020; border-color: #8a2b2b; color: #f5c2c2; }

/* ---------- Auth forms ---------- */
.auth-form {
    max-width: 420px;
    margin: 2rem auto;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    padding: 2rem;
    box-shadow: var(--shadow);
}

.field { margin-bottom: 1rem; }

.field label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    color: var(--cream);
}

.field-inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.field-inline label { margin-bottom: 0; font-weight: 400; }

.input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #6b513a;
    border-radius: 8px;
    font-size: 1rem;
    background: #593824;
    color: var(--cream);
}

.input:focus { outline: none; border-color: var(--gold); }

.field-error {
    display: block;
    color: #f3b2b2;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.auth-alt { margin-top: 1rem; text-align: center; color: var(--muted); }

/* ---------- Footer ---------- */
footer {
    border-top: 1px solid var(--panel-border);
    background: rgba(56, 35, 22, 0.5);
    margin-top: 3rem;
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2.5rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
}

.footer-inner .about {
    max-width: 420px;
}

.footer-inner h4 {
    color: var(--gold);
    margin-bottom: 0.6rem;
}

.footer-links {
    list-style: none;
}

.footer-links li { margin-bottom: 0.4rem; }

.footer-links a {
    color: var(--muted);
    text-decoration: none;
}

.footer-links a:hover { color: var(--gold); }

.footer-bottom {
    text-align: center;
    padding: 1rem;
    color: var(--muted);
    font-size: 0.85rem;
    border-top: 1px solid var(--panel-border);
}

.footer-bottom a {
    color: var(--muted);
    text-decoration: underline;
}