/* ==========================================================================
   Layout & spacing — loaded last on every page.
   One vertical rhythm for the whole site. Colors and fonts are not touched
   here; this file only controls alignment and the space between blocks.
   ========================================================================== */

:root {
    --ss-section-y: 72px;   /* space above and below each page section */
    --ss-title-gap: 32px;   /* section title -> the content under it */
    --ss-block-gap: 48px;   /* between stacked blocks inside one section */
    --ss-hero-y: 40px;      /* slim page-title bands (Community Support, Get Involved) */
}
@media (max-width: 991px) {
    :root {
        --ss-section-y: 56px;
        --ss-title-gap: 28px;
        --ss-block-gap: 40px;
    }
}
@media (max-width: 767px) {
    :root {
        --ss-section-y: 44px;
        --ss-title-gap: 24px;
        --ss-block-gap: 32px;
        --ss-hero-y: 28px;
    }
}

/* ---------- Page blocks stack normally ----------
   Most sections were floated, so each one slid underneath the next and their
   padding never added up (e.g. "Testimonials" sat glued to the cards above). */
body > section,
body > .header-main-con,
body > .footer-main-section {
    float: none !important;
    clear: both;
}
body > section {
    display: flow-root;
}

/* ---------- Standard section padding ---------- */
.padding-top {
    padding-top: var(--ss-section-y);
}
.padding-bottom {
    padding-bottom: var(--ss-section-y);
}
.ss-about-section,
.leadership-section,
.campaign-involved,
.xsq-join-mission,
.ss-np-page {
    padding: var(--ss-section-y) 0;
}
.ohlq-personal-section {
    padding: var(--ss-section-y) 0 !important;
}
/* Testimonials has its own (slightly different) background, so it gets the
   same top/bottom space as every other section; the quote card's own bottom
   margin is dropped so it doesn't add to that. */
.ss-testimonial-section {
    padding: var(--ss-section-y) 0;
}
.ss-testimonial-section .ss-partner-quote {
    margin-bottom: 0;
}

/* ---------- Section titles ---------- */
.ss-section-head,
.generic-title {
    margin-bottom: var(--ss-title-gap);
}
.ss-section-head h2,
.ss-section-head h3,
.generic-title h2,
.generic-title h3,
.leadership-title,
.campaign-involved .campaign-title {
    margin-bottom: 0;
}
.ss-testimonial-heading {
    margin-bottom: var(--ss-title-gap);
}

/* ---------- Welcome page ---------- */
.ohlq-title {
    margin-bottom: 20px;
}
.ohlq-text:last-of-type {
    margin-bottom: 0;
}
.ohlq-highlight {
    margin-top: 24px;
}
.ohlq-personal-section .row + .row {
    margin-top: var(--ss-block-gap) !important;
}
/* 3-card rows wrap 2 + 1 on tablets: center the odd card */
.leadership-section .row,
.campaign-involved .row {
    justify-content: center;
}
.ss-plan-list .ss-plan-item:first-child {
    padding-top: 0;
}
.ss-plan-list .text-center.mt-5 {
    margin-top: 32px !important;
}

/* ---------- Community Support (endorsements) ---------- */
.ss-gi-hero {
    padding: var(--ss-hero-y) 0;
}
.ss-gi-hero .ss-gi-heading {
    margin-bottom: 0;
}
.ss-gi-hero-img {
    margin-top: 20px !important;
}
/* Get Involved hero: the photo stands on the section's bottom edge */
.ss-gi-hero:has(.ss-gi-hero-img) {
    padding-bottom: 0;
}
.endo-section {
    padding-top: var(--ss-section-y);
}
/* Cards carry their own bottom gap; cancel it after the last row */
.endo-section > .container > .row {
    margin-bottom: -1.5rem;
    justify-content: center;   /* a short last row sits centered, not stuck left */
}
.endo-card {
    height: 100%;
}
.endo-section .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}
.endo-section .row > [class*="col-"] > .endo-card {
    flex: 1 1 auto;
}

/* ---------- Nonprofit page ---------- */
.ss-np-subheading {
    margin-bottom: 12px;
}
.ss-np-intro {
    margin-bottom: var(--ss-title-gap);
}
.ss-np-intro + .ss-np-subheading {
    margin-bottom: 24px;
}
.ss-np-section,
.ss-np-section:last-child {
    margin: 0 0 var(--ss-block-gap);
    padding-bottom: 0;
}
.ss-np-page .row:last-child {
    margin-bottom: calc(-1 * var(--ss-block-gap));
}
.ss-np-heading {
    line-height: 1.3;
}
.ss-np-desc {
    margin-bottom: 20px;
}
.ss-np-section .ss-partner-quote-np {
    margin-bottom: 20px;
}
.xsq-jm-heading.mb-5 {
    margin-bottom: var(--ss-title-gap) !important;
}

/* ---------- Forms (Get Involved, Donate) ---------- */
.index2-form-outer-con .generic-title h3 {
    margin: 0;
}
.donate-online-intro {
    margin-bottom: 24px !important;
}

/* ---------- Footer ---------- */
.copyright-inner-con {
    border-top: 0;
}

@media (min-width: 992px) {
    /* Start the first donate-side card level with "Donate Online" */
    .col-lg-4 > .donate-by-check-con:first-child {
        padding-top: 39px;
    }
}
@media (max-width: 991px) {
    /* Donate-side cards drop under the form: give the first one the same gap */
    .col-lg-4 > .donate-by-check-con:first-child {
        margin-top: var(--ss-block-gap);
    }
    /* Stacked columns (credentials list -> About text) */
    .ss-about-section .row > [class*="col-"] + [class*="col-"] {
        margin-top: 24px;
    }
}
@media (max-width: 767px) {
    /* One card per row: photo fills the card width at a fixed height
       (the old max-height + 4:5 ratio shrank the photo to 2/3 width) */
    .endo-img-wrap {
        aspect-ratio: auto;
        max-height: none;
        height: 320px;
    }
    .endo-img {
        object-position: center top;
    }
    .endo-img-placeholder {
        aspect-ratio: auto;
        height: 100%;
    }
    /* Nonprofit sign-up fields stack: keep a gap between them */
    .xsq-jm-field + .xsq-jm-field {
        margin-top: 16px;
    }
}

/* ==========================================================================
   Home page polish — one type scale and cleaner section layout.
   (Brand colors unchanged; only size, weight, alignment and spacing.)
   ========================================================================== */
:root {
    --ss-h2: 36px;          /* every section title */
    --ss-h3: 20px;          /* every card / item title */
    --ss-body: 18px;        /* paragraph text */
}
@media (max-width: 991px) { :root { --ss-h2: 30px; } }
@media (max-width: 767px) { :root { --ss-h2: 26px; --ss-h3: 19px; --ss-body: 17px; } }

/* Section titles: same size and weight everywhere */
.leadership-section .leadership-title,
.ss-testimonial-section .ss-testimonial-heading,
.ohlq-personal-section .ohlq-title,
#priorities-con .generic-title h2,
.campaign-involved .campaign-title {
    font-size: var(--ss-h2);
    line-height: 1.2;
    font-weight: 700;
}

/* Card / item titles */
.leadership-card .leadership-name,
.ss-plan-item h3,
.campaign-involved .campaign-card-title {
    font-size: var(--ss-h3);
    line-height: 1.3;
    font-weight: 700;
}

/* Body text: large for readability, but normal weight (was 19px at 510,
   which made every paragraph look semi-bold) */
.ss-readable-text,
.ss-readable-text p,
.ss-readable-text li,
.ohlq-text,
.leadership-text,
.ss-plan-item p,
.campaign-involved .campaign-card-text {
    font-size: var(--ss-body);
    line-height: 1.7;
    font-weight: 400;
}

/* Hero: photo sits centered in its column instead of pinned to the far edge */
.banner-welcome-top .banner-right-con figure {
    margin-left: auto;
    margin-right: auto;
}

/* About: both columns start at the same line; credentials read as one card */
.ss-about-section .row {
    align-items: flex-start !important;
}
.ss-about-section .ss-credentials-list {
    background: #f7f8fb;
    border: 1px solid #e3e6ec;
    border-radius: 12px;
    padding: 24px 28px;
}
.ss-about-section .ss-credentials-list h4 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
}
.ss-about-section .ss-credentials-list li {
    font-size: 17px;
    font-weight: 500;
}
.ss-about-section .ss-credentials-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.ss-about-section .ss-readable-text p:last-child {
    margin-bottom: 0;
}

/* Leadership cards: titles take the same height, so the paragraphs line up */
@media (min-width: 992px) {
    .leadership-card .leadership-name {
        min-height: 2.6em;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
}

/* Testimonials alternates with the grey Leadership block above
   (the two near-identical greys made a visible seam) */
.ss-testimonial-section {
    background: #ffffff;
}

/* "Why Sonia Believes in Ohlone": left-aligned text reads better beside the photo */
@media (min-width: 992px) {
    .ohlq-personal-section .ohlq-content,
    .ohlq-personal-section .ohlq-highlight p,
    .ohlq-personal-section .ss-source-note {
        text-align: left !important;
    }
}
.ohlq-support-box {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}