/*
Theme Name: FC2S 2026
Theme URI: https://www.fc2success.org/
Author: FC2S
Description: Simple single-page theme announcing CommunityNow. Hero photo + three sections (Why We Evolved, Our Legacy, Our Impact).
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: fc2s-2026
*/

:root {
    --ink: #1f2a37;
    --ink-soft: #46586b;
    --accent: #1a5276;
    --accent-warm: #b9770e;
    --paper: #ffffff;
    --paper-alt: #f4f6f8;
    --max-text: 46rem;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--ink);
    background: var(--paper);
    /* Sticky footer: short pages (410) keep the footer at the
       bottom of the viewport instead of floating mid-page. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* On the 410 page, center the short content in the leftover space. */
.error404 main {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

h1, h2, h3 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 1rem;
}

p {
    margin: 0 0 1.25rem;
}

a {
    color: var(--accent);
}

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

.hero {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4rem 1.5rem;
    color: #fff;
    /* Drop a photo at assets/hero.jpg — the gradient shows until then
       (and acts as the overlay once it exists). */
    background-image:
        linear-gradient(rgba(20, 40, 60, 0.55), rgba(20, 40, 60, 0.7)),
        url("assets/hero.jpg");
    background-size: cover;
    background-position: center;
    background-color: #1a3a52;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: #fff;
    margin-bottom: 1.5rem;
}

.hero .lede {
    max-width: var(--max-text);
    font-size: clamp(1.125rem, 2vw, 1.35rem);
    color: rgba(255, 255, 255, 0.95);
}

.hero strong {
    color: #ffd98e;
}

.hero strong a {
    color: inherit;
    text-decoration-color: rgba(255, 217, 142, 0.6);
    text-underline-offset: 0.2em;
}

.hero--compact {
    min-height: 40vh;
}

/* ---- Section tabs ------------------------------------------ */

.section-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: var(--paper-alt);
    border-bottom: 1px solid #e2e7ec;
}

.section-tabs [role="tab"] {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.6rem 1.1rem;
    cursor: pointer;
}

.section-tabs [role="tab"]:hover {
    color: var(--accent);
}

.section-tabs [role="tab"][aria-selected="true"] {
    color: var(--accent);
    border-bottom-color: var(--accent-warm);
}

/* ---- Sections ---------------------------------------------- */

.section {
    padding: 4.5rem 1.5rem;
}

.section[hidden] {
    display: none;
}

.section .inner {
    max-width: var(--max-text);
    margin: 0 auto;
}

.section h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.25rem);
    margin-bottom: 1.75rem;
}

.section h2::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 3px;
    margin-top: 0.75rem;
    background: var(--accent-warm);
}

.kicker {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-warm);
    margin-bottom: 0.5rem;
}

/* ---- Footer ------------------------------------------------- */

.site-footer {
    padding: 2.5rem 1.5rem;
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    color: #fff;
    background: var(--ink);
}

.site-footer p {
    margin: 0.25rem 0;
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin-bottom: 1rem;
}

.footer-links a {
    color: #9fc3dd;
    text-decoration: none;
}

.footer-links a:hover {
    color: #fff;
    text-decoration: underline;
}

.site-footer a {
    color: #9fc3dd;
}

@media (max-width: 600px) {
    .section {
        padding: 3rem 1.25rem;
    }
}