/* ==========================================================================
   Default Page template
   Used by templates/template-default-page.php — a reusable hero (banner +
   title + optional subtitle) followed by the standard WordPress editor
   content. Styling deliberately mirrors the qwbn-hero pattern used by
   the About / Donation / Bring QWOCMAP pages so generic pages feel
   consistent with the rest of the site.
   ========================================================================== */

/* ---------- Hero ---------- */

.default-page__hero {
    padding-top: 24px;
    padding-bottom: 24px;
}

.default-page__hero-card {
    position: relative;
    margin: 0 auto;
    border-radius: 28px;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: center;
    /* Fallback gradient — visible whenever no banner image is uploaded
       (the --no-img modifier suppresses the dark overlay so it stays
       vivid instead of muddy). */
    background: linear-gradient(135deg, #0b3061 0%, #1869d3 55%, #b04e04 100%);
}

.default-page__hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.default-page__hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2;
}

.default-page__hero-card--no-img .default-page__hero-overlay {
    display: none;
}

.default-page__hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 24px;
}

.default-page__hero-title {
    font-family: "Lexend", "Lexend Fallback", sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.05;
    letter-spacing: -1.2px;
    margin: 0;
    text-align: center;
}

/* Orange accent on the hero title — matches the About / FFA / Workshop /
   QWOCFF pattern so the same admin meta produces the same look across
   every template. */
.default-page__hero-title-accent {
    color: var(--orange-main, #b04e04);
}

.default-page__hero-sub {
    color: #ffffff;
    font-family: "Lexend", "Lexend Fallback", sans-serif;
    font-size: 18px;
    line-height: 28px;
    max-width: 640px;
    margin: 18px auto 0;
}

/* ---------- Body / WP editor content ---------- */

.default-page__body {
    background: #ffffff;
}

/* Gives editor content a comfortable reading column without forcing
   admins to wrap blocks themselves. Block-level images, embeds, and
   shortcodes still respect their own widths via .alignwide / .alignfull
   rules below. */
.default-page__content {
    max-width: 880px;
    margin: 0 auto;
    font-family: "Lexend", "Lexend Fallback", sans-serif;
    color: var(--muted-qwp, #414651);
    font-size: 17px;
    line-height: 1.7;
}

.default-page__content > * + * {
    margin-top: 1.25em;
}

.default-page__content h2,
.default-page__content h3,
.default-page__content h4,
.default-page__content h5,
.default-page__content h6 {
    font-family: "Lexend", "Lexend Fallback", sans-serif;
    color: var(--dark-qwp, #181d27);
    font-weight: 700;
    line-height: 1.2;
    margin-top: 1.6em;
}

.default-page__content h2 { font-size: clamp(28px, 3.5vw, 40px); }
.default-page__content h3 { font-size: clamp(24px, 3vw, 32px); }
.default-page__content h4 { font-size: clamp(20px, 2.5vw, 24px); }
.default-page__content h5 { font-size: 18px; }
.default-page__content h6 { font-size: 16px; }

.default-page__content p {
    margin: 0;
}

.default-page__content a {
    color: var(--orange-main, #b04e04);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.default-page__content a:hover {
    color: var(--dark-qwp, #181d27);
}

.default-page__content ul,
.default-page__content ol {
    padding-left: 1.5em;
}
.default-page__content li + li {
    margin-top: 0.4em;
}

.default-page__content blockquote {
    border-left: 4px solid var(--orange-main, #b04e04);
    background: #fef0e6;
    padding: 18px 24px;
    margin: 1.5em 0;
    font-style: italic;
    color: var(--dark-qwp, #181d27);
    border-radius: 0 14px 14px 0;
}

.default-page__content img,
.default-page__content figure {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.default-page__content figcaption {
    font-size: 14px;
    color: var(--muted-qwp, #414651);
    margin-top: 8px;
    text-align: center;
}

.default-page__content hr {
    border: 0;
    border-top: 1px solid rgba(24, 29, 39, 0.08);
    margin: 2em 0;
}

/* Wide / full-width blocks should escape the reading column. */
.default-page__content .alignwide {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.default-page__content .alignfull {
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ---------- Tablet ---------- */
@media (max-width: 768px) {
    .default-page__hero-card {
        min-height: 320px;
    }
    .default-page__hero-content {
        padding: 48px 20px;
    }
    .default-page__hero-sub {
        font-size: 16px;
        line-height: 26px;
    }
    .default-page__content {
        font-size: 16px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
    .default-page__hero {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .default-page__hero-card {
        min-height: 280px;
        border-radius: 22px;
    }
    .default-page__hero-content {
        padding: 40px 16px;
    }
}

/* ==========================================
   PARAGRAPH RHYTHM (editor-managed copy)
   The rules above zero out `p` margins because these blocks were designed
   around a single paragraph. `p + p` only matches when an editor has actually
   written a second paragraph, so single-paragraph copy is untouched, and it
   outranks the `margin: 0` rules on specificity alone. Same convention as
   accessibility-subpage.css and theory-of-change.css.
   ========================================== */
.default-page__content p + p {
    margin-top: 0.75em;
}