* {
    /* The * selector means "every single element on the page." box-sizing: border-box
    changes how width/height are calculated: normally, if you set width: 300px and then add
    20px of padding, the element becomes 340px wide total (300 + 20 + 20). With border-box, padding
    is INCLUDED inside the 300px, so the element stays exactly 300px wide. This makes layout math
    far more predictable */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Georgia', serif; /* placehodler font */
    line-height: 1.6; /* space between lines of text, as a multiple of the font size. */
}

/* ============================================================
   PART 2 — THEME VARIABLES (the light/dark mode engine)
   ============================================================ */

   /* :root refers to the <html> element - it's the very top of the document.
    Define variables here so they're available EVERYWHERE on the page. A CSS 
    variable is written --name and read back with var(--name). */

:root {
    /* Default colors used until a theme is picked */
    --bg-color: #1B1D22;        /* page background */
    --text-color: #EDE4D3;      /* main text */
    --text-on-card: #22242A;    /* dark text - for text inside white cards */
    --accent-color: #7A3B2E;    /* brick red - links, boarders */
    --gold-color: #C69A44;      /* buttons, highlights */
    --card-bg: #E4E5E8;         /* section/card backgrounds */
    --muted-text: #6E7580;      /* secondary/lighter text */

}

/* Instead of writing color: #22242A everywhere, we can write color: var(--text-color); ONE time
per rule. Javascript will flip data-theme from "light" to "dark" on <html> every var(--text-color)
on the whole page updates instantly. */

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    /* Every heading and paragraph on the page inherits this LIGHT color by default, since
    most of the page's text sits directly on the dark body background. We'll override it back
    to dark, specifically, inside the white card elements below. */
}

/* ============================================================
   PART 3 — LAYOUT HELPERS
   ============================================================ */

.wrap {
    max-width: 1100px;  /* content never gets wider than this, even on huge monitors */
    margin: 0 auto;     /* auto left/right margin = centers the block horizontally */
    padding: 0 24px;    /* breathing room on the left/right edges on narrower screens */
}

section {
    padding: 64px 24px;
    border-bottom: 1px solid var(--muted-text);
}

h1, h2, h3, h4 {
    font-family: 'Georgia', serif;
    margin-bottom: 12px;
}

p {
    margin-bottom: 12px;
    max-width: 65ch; /* "ch" = the width of the character "0" in the current font. 65ch keeps
                    paragraph lines from stretching too wide to read comfortably - this is a 
                    real typography rule, not a random number. */
}

/* ============================================================
   PART 4 — NAVIGATION
   ============================================================ */

header {
position: sticky; /* the header stays pinned to the top of the screen as you scroll
                    instead of scrolling away with the page. Requires "top: 0" below to say WHERE it sticks. */
top: 0;
background-color: var(--bg-color);
border-bottom: 1px solid var(--muted-text);
z-index: 10;      /* makes sure the header stays ABOVE other content when they overlap, instead
                    of getting covered by it*/
}

.nav-inner {
display: flex;
/* flex turns this element into a "flex container" - its direct children (the workmark, the nav
, the button) line up in a row by default, instead of stacking on separate line like normal
block elements do. */
align-items: center;    /* vertically centers them */
justify-content: space-between; /* pushes the first child to the far left and the last child
                                to the far right, spreading everything else evenly between */
padding: 16px 24px;
}

.wordmark {
font-weight: bold;
font-size: 1.3rem; /* "rem" = relative to the roo font size. 1.3rem means "1.3 times whatever size
                    the <html> element's font is." Using rem instead of px keeps text scaling
                    consistently if a user changes their browser's font size setting - better for
                    accessibility then fixed px. */
}

nav {
    display: flex;
    gap: 20px; /* space between flex children - much cleaner than adding margin to each 
    individual link */

}

nav a {
    color: var(--text-color);
    text-decoration: none; /* removes the default underline */
}

nav a:hover {
    /* :hover is a PSEUDO-CLASS - a selector that only applies in a certain STATE (here: while the
    mouse os over the element). It's not a separate element in your HTML; it's a condition. */
    color: var(--gold-color);
}

#theme-toggle {
    background: none;
    border: 1px solid var(--muted-text);
    border-radius: 50px; /* 50% on a square-ish element makes it a circle */
    width: 38px;
    height: 38px;
    cursor: pointer; /* shows a hand/pointer icon on hover, signaling "this is clickable" */
    font-size: 1.1rem;
}

/* ============================================================
   PART 5 — BUTTONS (shared by hero, give, volunteer)
   ============================================================ */

.btn {
    display: inline-block;
    background-color: var(--gold-color);
    color: var(--text-on-card); /* Buttons have a solid gold background regardless of page theme,
    so they always need the DARK text variant for contrast - never the page's default light text. */
    text-decoration: none;
    padding: 12px 24px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    margin-right: 10px;
}

.btn:hover {
    opacity: 0.85; /* a quick, cheap "hover feedback" effect - makes the button look slightly
                    so users know it registered their mouse being over it */
}

/* ============================================================
   PART 6 - HERO
   ============================================================ */

.hero {
    text-align: center;
    padding: 100px 24px;
    background-color: var(--bg-color);
    background-image: linear-gradient(rgba(27, 29, 34, 0.6), rgba(27, 29, 34, 0.6)),
    url('images/house_upon_a_rock.png');
    background-size: cover;
    background-position: center;
    color: var(--text-color);
    border: 3px solid var(--gold-color);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.hero .verse {
    font-style: italic;
    font-weight: bold;
    font-size: 1.4rem;
    color: var(--gold-color);
    margin-top: 60px;
    margin-bottom: 28px;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    /* clamp(min, preffered, max) is a 3-value function: it picks the preferred size (5vw - 5% of the
    viewport width) UNLESS that would be smaller than the min or larger than the max. Result: your heading
    scalessmoothly with screen size but never gets unreadably tiny on phones or absurdly huge on giant
    monitors - all in one line, no media query needed. */
    margin: 0 auto 20px;
    max-width: 20ch;
}

.hero p {
    margin: 0 auto 28px;
}

/* ============================================================
   PART 7 - MISSION /PILLARS
   ============================================================ */

.pillars {
    display: grid;
    /* grid is like flex's more powerful sibling - better suited for two- dimensional layouts (rows
    AND columns at once). */
    grid-template-columns: repeat(3, 1fr);
    /* repeat(3, 1fr) = "makes 3 columns, each taking an equal (1fr = 1 fraction) share of the
    available width. */
    gap: 24px;
    margin-top: 32px;
}

.pillar {
    background-color: var(--card-bg);
    color: var(--text-on-card);
    padding: 24px;
    border-top: 3px solid var(--gold-color);
}

/* ============================================================
   PART 8 - TESTIMONIES
   ============================================================ */

.testimony-grid {
    /* testimony cards laid out the same way as pillars */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}

.testimony-card {
    background-color: var(--card-bg);
    color:  var(--text-on-card);
    padding: 24px;
    margin-bottom: 16px;
    border-left: 4px solid var(--accent-color);
}

.play-btn, .ep-play {
    background-color: var(--accent-color);
    color: #fff;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    margin-top: 8px;
}

/* ============================================================
   PART 9 - EVENTS
   ============================================================ */

.event-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 0;
    border-top: 1px solid var(--muted-text);
}

.event-date {
    font-weight: bold;
    color: var(--gold-color);
    min-width: 70px; /* keeps every date lined up in a neat column even if some events have
                        longer titles next to them */
}

/* ============================================================
   PART 10 — VOLUNTEER FORM
   ============================================================ */

form {
    max-width: 500px;
    margin-top: 24px;
}

form label {
    display: block; /* forces the label onto its own line, above its input, instead of sitting
    inline next to it */
    font-weight: bold;
    margin-bottom: 6px;
    margin-top: 16px;
}

form input,
form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--muted-text);
    background-color: var(--card-bg);
    color: var(--text-on-card);
    font-family: inherit; /* form elements don't inherit the page font by default in most browsers
    - this line fixes that */
}

form button[type="submit"] {
    /* [type="submit"] is another attribute selector - this only targets the button that submits
    the form, not other buttons that might exist elsewhere on the page. */
    margin-top: 20px;
    background-color: var(--accent-color);
    color: #fff;
    border: none;
    padding: 12px 24px;
    cursor: pointer;
    font-weight: bold;
}

#v-confirm {
    margin-top: 16px;
    padding: 12px;
    background-color: var(--card-bg);
    color: var(--text-on-card);
    border-left: 4px solid var(--gold-color);
}

/* ============================================================
   PART 11 — PODCAST
   ============================================================ */

.episode {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--muted-text);
}

/* ============================================================
   PART 12 — FOOTER
   ============================================================ */

footer {

    text-align: center;
    padding: 40px 24px;
    background-color: var(--card-bg);
    color: var(--text-on-card);
}

.parent-brand {
    font-size: 0.85rem;
    color: var(--muted-text);
    margin-top: 16px;
}

.parent-brand a {
    color: var(--muted-text);
}

/* ============================================================
   PART 12 — FOOTER
   ============================================================ */

.modal {
    display: none; /* hidden by default */
    position: fixed; /* stays in place even if the page scrolls behind it - unlike "sticky". Which still
    moves once it hits its ffset, "fixed" never moves at all relative to the screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* dark overlay covering the whole page behind the video */
    z-index: 100; /* sits above everything else, including the sticky header*/
    align-items: center;
    justify-content: center;
}

.modal.open {
    display: flex;
}

.modal-inner {
    position: relative;
    width: min(90vw, 800px);
    aspect-ratio: 16/9;
}

#modal-video-wrap {
    width: 100%;
    height: 100%;
}

#modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}
/* ============================================================
   PART 13 — MOBILE (media query)
   Everything above this point applies at ALL screen sizes.
   A media query says "only apply the rules INSIDE these braces
   when the screen matches this condition" — here, screens
   narrower than 700px (most phones).
   ============================================================ */

@media (max-width: 700px) {
    .nav-inner {
        flex-wrap: wrap; /* lets the nav links drop to a second line instead of squishing 
        or overflowing off-screen */
        gap: 10px;
    }

    nav {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pillars,
    .testimony-grid {
        grid-template-columns: 1fr; /* stack from 3 columns down to 1, so each pillar is full-width
                                    and readable on a narrow screen instead of squeezed into a
                                    third of it */
    }

    .hero {
        padding: 60px 20px;
    }

    section {
        padding: 48px 20px;
    }
}