/* =============================================================================
   wave1.css — privacy-policy, dark-sky, and homepage outreach section.
   Pages link to this file with a ?v=<filemtime> cache buster. Match the
   existing CVAS dark theme via the global CSS variables defined in style.css.
   ========================================================================== */

/* ---------- Shared legal-doc / longform article styling -------------------- */

.legal-doc,
.darksky-doc {
    max-width: 760px;
    margin: 0 auto 2.5rem;
    color: var(--text);
    line-height: 1.6;
}

.legal-doc-head {
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.legal-doc-head h1 {
    margin: 0 0 0.4rem;
    color: var(--text-strong);
}

.legal-doc h2,
.darksky-doc h2 {
    color: var(--accent);
    margin-top: 2rem;
    margin-bottom: 0.6rem;
    font-size: 1.35rem;
}

.legal-doc h2:first-child,
.darksky-doc h2:first-child {
    margin-top: 0;
}

.legal-doc section,
.darksky-section {
    margin-bottom: 1.5rem;
}

.legal-doc ul,
.darksky-doc ul {
    padding-left: 1.25rem;
}

.legal-doc li,
.darksky-doc li {
    margin-bottom: 0.4rem;
}

.legal-doc a,
.darksky-doc a {
    color: var(--link);
}

.legal-doc a:hover,
.darksky-doc a:hover {
    color: var(--link-hover);
}

.legal-doc-effective {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.9em;
    text-align: right;
}

/* ---------- Dark sky hero -------------------------------------------------- */

.darksky-hero {
    position: relative;
    margin: 0 auto 2rem;
    max-width: 1100px;
    min-height: 240px;
    padding: 3rem 1.5rem;
    border-radius: var(--radius);
    overflow: hidden;
    background-color: #1a1310;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}

.darksky-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 20, 25, 0.55) 0%, rgba(15, 20, 25, 0.85) 100%);
    z-index: 0;
}

.darksky-hero-text {
    position: relative;
    z-index: 1;
    max-width: 640px;
}

.darksky-hero-text h1 {
    margin: 0 0 0.5rem;
    color: var(--text-strong);
    font-size: 2rem;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}

.darksky-hero-text p.muted {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text);
}

@media (max-width: 600px) {
    .darksky-hero {
        padding: 2rem 1rem;
        min-height: 180px;
    }

    .darksky-hero-text h1 {
        font-size: 1.5rem;
    }
}

/* ---------- Homepage outreach section -------------------------------------- */

.outreach-showcase {
    margin: 2.5rem 0;
}

.outreach-showcase-head {
    margin-bottom: 1.25rem;
}

.outreach-showcase-head h2 {
    margin: 0 0 0.25rem;
    color: var(--text-strong);
}

.outreach-showcase-head p.muted {
    margin: 0;
}

.outreach-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.outreach-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(28, 35, 44, 0.92);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.outreach-card:hover,
.outreach-card:focus-visible {
    background: rgba(36, 45, 56, 0.98);
    border-color: var(--border-strong);
    transform: translateY(-1px);
    text-decoration: none;
}

.outreach-card-date {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    padding: 0.4rem 0;
    background: rgba(232, 177, 98, 0.12);
    border: 1px solid rgba(232, 177, 98, 0.35);
    border-radius: calc(var(--radius) - 4px);
    color: var(--accent);
}

.outreach-card-month {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.outreach-card-day {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-strong);
}

.outreach-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.outreach-card-body h3 {
    margin: 0 0 0.25rem;
    color: var(--accent);
    font-size: 1.05rem;
    line-height: 1.25;
}

.outreach-card-meta {
    margin: 0 0 0.4rem;
    font-size: 0.85em;
}

.outreach-card-summary {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.45;
    color: var(--muted);
}

@media (max-width: 600px) {
    .outreach-showcase-grid {
        grid-template-columns: 1fr;
    }
}