/* ═══════════════════════════════════════════════════════
   Wild Roots — PAGES.CSS — Shared Base Styles
   Fixed 2026-04-13 21:43 — No longer conflicts with page inline styles
   ═══════════════════════════════════════════════════════ */

/* BASE RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.7; overflow-x: hidden; }

/* TYPOGRAPHY — only defaults, pages override via inline styles */
h1, h2, h3, h4, h5, h6 { line-height: 1.3; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* TABLES — safe, no page conflicts */
table { width: 100%; border-collapse: collapse; margin: 2rem 0; }
th, td { padding: 1rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
th { background: rgba(82, 183, 136, 0.1); font-weight: 600; color: var(--color-mint); }
tr:hover { background: rgba(255, 255, 255, 0.02); }

/* RESPONSIVE TABLE */
@media (max-width: 768px) { table { font-size: 0.9rem; } th, td { padding: 0.75rem; } }

/* ═══ WILD ROOTS STANDARD HERO — canonicalized (Batch 8, 2026-04-14) ═══ */
.page-hero {
    position: relative;
    overflow: hidden;
    height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1.5rem;
    color: #fff;
    margin-top: -80px;
    padding-top: 80px;
    /* Fallback-Hintergrund (text-only page-heroes ohne .hero-bg-Image) —
       garantiert dunklen Untergrund, damit das weiße Header-Logo lesbar ist. */
    background: linear-gradient(135deg, var(--color-forest, #1B4332) 0%, #0D1B14 100%);
}
.page-hero .hero-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 1; transform: scale(1.05);
    animation: heroZoom 25s ease-in-out infinite alternate;
}
/* .hero-glass: sometimes used as wrapper for hero content, sometimes as empty overlay */
.page-hero .hero-glass {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}
/* When .hero-glass is empty (only decorative), it must not steal flex-space */
.page-hero .hero-glass:empty {
    position: absolute;
    inset: 0;
    z-index: 2;
    max-width: none;
    padding: 0;
    pointer-events: none;
}
.page-hero .hero-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 3;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(135deg, rgba(27,67,50,0.55) 0%, rgba(45,106,79,0.35) 40%, rgba(13,27,20,0.60) 100%);
    backdrop-filter: blur(3px) saturate(140%) brightness(0.9);
    -webkit-backdrop-filter: blur(3px) saturate(140%) brightness(0.9);
}
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(13,27,20,0.5) 0%, transparent 60%);
    pointer-events: none;
}
.page-hero .section-label {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(82,183,136,0.15); color: var(--color-mint, #52B788);
    padding: 0.35rem 1rem; border-radius: 999px;
    font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgba(82,183,136,0.2);
    margin-bottom: 1rem;
}
.page-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
    line-height: 1.05;
    text-shadow: 0 2px 14px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.8);
}
.page-hero .highlight {
    color: var(--color-sand, #DDA15E);
}
.page-hero .lead {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.9);
    max-width: 700px;
    margin: 0 auto 1.5rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    line-height: 1.5;
}
.page-hero .hero-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.page-hero .hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page-hero .hero-stat .stat-val {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-sand, #DDA15E);
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.page-hero .hero-stat .stat-lbl {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.8);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 0.25rem;
}
@keyframes heroZoom {
    0% { transform: scale(1.05); }
    100% { transform: scale(1.12) translate(-1%, -1%); }
}
@media (max-width: 768px) {
    .page-hero { height: 460px; }
    .page-hero h1 { font-size: 2rem; }
    .page-hero .lead { font-size: 1rem; }
    .page-hero .hero-stats { gap: 1rem; }
    .page-hero .hero-stat .stat-val { font-size: 1.4rem; }
}

/* ═══ FACT CARDS (project.html, etc.) ═══ */
.fact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}
.fact-card {
    background: rgba(82,183,136,0.08);
    border: 1px solid rgba(82,183,136,0.2);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    border-color: rgba(82,183,136,0.4);
}
.fact-card .fact-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    color: var(--color-mint, #52B788);
}
.fact-card .fact-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.fact-card .fact-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}
.fact-card .fact-sub {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    font-style: italic;
}
.heading-section {
    text-align: center;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 1rem;
}

/* ═══ PRINCIPLE-GRID / PRINCIPLE-CARD / P-NUM
   Canonical grid pattern — used on permaculture, about (How It All Began),
   and any other page that needs structured card layout.
   ═══════════════════════════════════════════════════════ */
.principle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}
.principle-card {
    background: rgba(27, 67, 50, 0.15);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: transform 0.4s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
    border-left: 4px solid var(--color-mint, #52B788);
}
.principle-card:hover {
    transform: translateY(-4px);
}
.principle-card .p-num,
.p-num {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-mint, #52B788);
    margin-bottom: 0.25rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.principle-card h4 {
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.principle-card p {
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 0;
}

/* SECTION-HEADER — canonical centered header above grids */
.section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.section-header h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.section-header p {
    max-width: 650px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* SECTION — canonical content block with light/dark variants */
.section {
    padding: 4rem 0;
}
.section:not(.section--alt):not(.section--dark) {
    background: #0d1b14;
    color: rgba(255, 255, 255, 0.88);
}
.section:not(.section--alt):not(.section--dark) h2,
.section:not(.section--alt):not(.section--dark) h3,
.section:not(.section--alt):not(.section--dark) h4 {
    color: #fff;
}
.section:not(.section--alt):not(.section--dark) .section-header p,
.section:not(.section--alt):not(.section--dark) p {
    color: rgba(255, 255, 255, 0.88);
}
/* ═══════════════════════════════════════════════════════
   HARD CONTRAST RULES — black on light, white on dark.
   Keep design-accent classes (badges, chips, highlights) as designed.
   ═══════════════════════════════════════════════════════ */

/* LIGHT SECTIONS — everything black / near-black */
.section.section--alt,
.section--alt {
    background: #f0ebe3;
    color: #000;
}
.section.section--alt,
.section.section--alt h1,
.section.section--alt h2,
.section.section--alt h3,
.section.section--alt h4,
.section.section--alt h5,
.section.section--alt h6,
.section.section--alt p,
.section.section--alt li,
.section.section--alt td,
.section.section--alt th,
.section.section--alt strong,
.section.section--alt em,
.section.section--alt dt,
.section.section--alt dd,
.section.section--alt figcaption,
.section.section--alt label,
.section.section--alt blockquote,
.section.section--alt .chart-desc,
.section.section--alt .img-caption,
.section.section--alt .caption,
.section.section--alt .subtitle,
.section.section--alt .lead,
.section.section--alt .newsletter-note,
.section.section--alt .team-role,
.section.section--alt .stat-lbl,
.section.section--alt .fact-lbl,
.section.section--alt .fact-sub,
.section.section--alt .weather-label {
    color: #111 !important;
}

/* Remove muddy dark-green semi-transparent backgrounds on ANY tile/card inside
   cream sections. They stack with the cream to produce low-contrast surfaces. */
.section.section--alt .principle-card,
.section.section--alt .fact-card,
.section.section--alt .team-card,
.section.section--alt .restore-card,
.section.section--alt .system-card,
.section.section--alt .zone-row,
.section.section--alt .zone-content,
.section.section--alt .hero-stat,
.section.section--alt [class*="card"],
.section.section--alt [class*="-block"],
.section.section--alt [class*="-tile"],
.section.section--alt .about-team-card-body,
.section.section--alt .value-block,
.section.section--alt .timeline-item,
.section.section--alt .principle-grid > *,
.section.section--alt .story-grid > *,
.section.section--alt ul.stats-grid > li,
.section.section--alt .stats-grid > * {
    background: #fff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
}
.section.section--alt .principle-card *,
.section.section--alt .fact-card *,
.section.section--alt .team-card *,
.section.section--alt .restore-card *,
.section.section--alt .system-card *,
.section.section--alt .zone-row *,
.section.section--alt .zone-content *,
.section.section--alt .hero-stat *,
.section.section--alt [class*="card"] *,
.section.section--alt [class*="-block"] *,
.section.section--alt [class*="-tile"] *,
.section.section--alt .about-team-card-body *,
.section.section--alt .value-block *,
.section.section--alt .timeline-item * {
    color: #111 !important;
}
/* Nuclear failsafe: any element inside .section--alt that has a dark semi-transparent
   green background (pattern rgba(27,67,50,*) or similar) gets white bg instead. */
.section.section--alt > *,
.section.section--alt > * > * {
    background-color: transparent;
}
.section.section--alt .container > .principle-grid > *,
.section.section--alt .container > .restore-grid > *,
.section.section--alt .container > .systems-grid > *,
.section.section--alt .container > .values-grid > *,
.section.section--alt .container > .about-team-grid > *,
.section.section--alt .container > .timeline > * {
    background: #fff !important;
}

/* ═══════════════════════════════════════════════════════
   SPECIFIC CLASS OVERRIDES — page-specific contrast failures
   Each rule targets a pattern flagged by the contrast audit.
   ═══════════════════════════════════════════════════════ */

/* BLOG newsletter-section — cream-on-cream in newsletter footer strip */
.newsletter-section,
.newsletter-strip,
section.newsletter,
[class*="newsletter"][class*="section"],
[class*="newsletter"][class*="strip"] {
    background: #1B4332 !important;
}
.newsletter-section p,
.newsletter-section h2,
.newsletter-section h3,
.newsletter-strip p,
.newsletter-strip h2,
.newsletter-strip h3,
[class*="newsletter"] p,
[class*="newsletter"] h2,
[class*="newsletter"] h3,
.newsletter-note {
    color: #fff !important;
}
.newsletter-note {
    opacity: 0.88;
}

/* GEOLOGY soil-profile: horizon labels — white on white inside section--alt */
.section--alt .horizon-label,
.section--alt .depth-mark,
.section--alt .soil-profile *,
.section--alt .soil-horizon * {
    color: #111 !important;
}
/* Soil-profile horizon blocks keep their colored bars, but text is black on cream card */
.section--alt .soil-profile,
.section--alt .soil-horizon {
    background: #fff !important;
}

/* CONTACT map-note — white on cream form area */
.map-note,
.contact-map-note,
.form-note {
    color: #1B4332 !important;
}
/* Success message: green text on pale-green bg is too low */
.form-success,
.contact-section .form-success,
section.contact p.form-success {
    color: #0b3b25 !important;
    background: #d7f0df;
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

/* BUTTONS: enforce contrast regardless of section context */
.btn,
a.btn,
button.btn,
.btn-primary,
a.btn-primary,
button.btn-primary {
    color: #fff !important;
    background: #1B4332 !important;
    border-color: #1B4332 !important;
}
.btn-primary:hover,
a.btn-primary:hover {
    background: #2D6A4F !important;
}
.btn-outline,
.btn-secondary,
a.btn-outline,
a.btn-secondary {
    color: #1B4332 !important;
    background: #fff !important;
    border: 2px solid #1B4332 !important;
}
.btn-outline:hover,
.btn-secondary:hover {
    color: #fff !important;
    background: #1B4332 !important;
}
/* Buttons INSIDE cream sections: same rules apply — above !important ensures it */
/* Buttons INSIDE dark sections: same rules ensure white text on dark-green filled btn */

/* REGULATORY timeline dates: orange tl-date on dark bg → lighten */
.tl-date {
    color: #DDA15E !important;  /* sand, higher contrast on forest */
    font-weight: 700;
}

/* FLORA-FAUNA partner-badge-name: forest on forest */
.partner-badge-name,
.partner-badge [class*="name"],
.partner-list-item [class*="name"] {
    color: #fff !important;
}
.partner-badge,
.partner-list-item {
    background: #1B4332 !important;
}

/* Leaflet map attributions are third-party; style for legibility over any map tile */
.leaflet-control-attribution,
.leaflet-bottom.leaflet-right,
.leaflet-bottom.leaflet-right a {
    color: #222 !important;
    background: rgba(255,255,255,0.92) !important;
    padding: 2px 6px;
    font-size: 11px !important;
}

/* Last-resort safety: ALL elements within cream sections that look like "text on own bg"
   situations get a sensible dark color. */
.section.section--alt *:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-secondary):not(.badge):not(.chip):not(.section-label):not(.koppen-badge):not(.highlight):not(.accent) {
    color: #111 !important;
}

/* ═══════════════════════════════════════════════════════
   UNIVERSAL CARD RULE — cards are ALWAYS white with black text,
   regardless of the surrounding section's color.
   This ensures readability in mixed dark/light section contexts.
   ═══════════════════════════════════════════════════════ */
.card,
.soil-type,
.zone-row,
.principle-card,
.restore-card,
.fact-card,
.team-card,
.about-team-card,
.value-block,
.hero-stat,
.system-card,
.feature-card,
.info-card,
[class*="-card"]:not([class*="fab"]):not([class*="btn"]) {
    background: #fff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: none;
}
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card p, .card li, .card td, .card th, .card span, .card strong,
.soil-type h1, .soil-type h2, .soil-type h3, .soil-type h4, .soil-type h5, .soil-type h6, .soil-type p, .soil-type li, .soil-type td, .soil-type th, .soil-type span, .soil-type strong,
.zone-row h1, .zone-row h2, .zone-row h3, .zone-row h4, .zone-row h5, .zone-row h6, .zone-row p, .zone-row li, .zone-row td, .zone-row th, .zone-row span, .zone-row strong,
.principle-card h1, .principle-card h2, .principle-card h3, .principle-card h4, .principle-card h5, .principle-card h6, .principle-card p, .principle-card li, .principle-card td, .principle-card th, .principle-card span, .principle-card strong,
.restore-card h1, .restore-card h2, .restore-card h3, .restore-card h4, .restore-card h5, .restore-card h6, .restore-card p, .restore-card li, .restore-card td, .restore-card th, .restore-card span, .restore-card strong,
.fact-card h1, .fact-card h2, .fact-card h3, .fact-card h4, .fact-card h5, .fact-card h6, .fact-card p, .fact-card li, .fact-card td, .fact-card th, .fact-card span, .fact-card strong,
.team-card h1, .team-card h2, .team-card h3, .team-card h4, .team-card h5, .team-card h6, .team-card p, .team-card li, .team-card td, .team-card th, .team-card span, .team-card strong,
.about-team-card h1, .about-team-card h2, .about-team-card h3, .about-team-card h4, .about-team-card h5, .about-team-card h6, .about-team-card p, .about-team-card li, .about-team-card td, .about-team-card th, .about-team-card span, .about-team-card strong,
.value-block h1, .value-block h2, .value-block h3, .value-block h4, .value-block h5, .value-block h6, .value-block p, .value-block li, .value-block td, .value-block th, .value-block span, .value-block strong,
.hero-stat h1, .hero-stat h2, .hero-stat h3, .hero-stat h4, .hero-stat h5, .hero-stat h6, .hero-stat p, .hero-stat li, .hero-stat td, .hero-stat th, .hero-stat span, .hero-stat strong,
.system-card h1, .system-card h2, .system-card h3, .system-card h4, .system-card h5, .system-card h6, .system-card p, .system-card li, .system-card td, .system-card th, .system-card span, .system-card strong {
    color: #111 !important;
}
/* Preserve accent colors (mint/sand) inside cards for badges etc. */
.card .section-label, .card .badge, .card .chip, .card .highlight, .card .accent,
[class*="-card"] .section-label, [class*="-card"] .badge, [class*="-card"] .chip, [class*="-card"] .highlight, [class*="-card"] .accent,
.soil-type .highlight, .zone-row .highlight {
    color: var(--color-mint, #52B788) !important;
}

/* ═══════════════════════════════════════════════════════
   FORM ELEMENTS — always legible regardless of container
   ═══════════════════════════════════════════════════════ */
form,
.contact-form,
.newsletter-form {
    background: transparent;
}
form label,
.contact-form label,
.newsletter-form label,
.contact-section label,
section form label {
    color: #111 !important;
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}
/* On dark sections, form labels must be WHITE, not black */
.section:not(.section--alt):not(.section--dark) form label,
.section:not(.section--alt):not(.section--dark) .contact-form label,
.section:not(.section--alt):not(.section--dark) label {
    color: #fff !important;
}
form input, form textarea, form select,
.contact-form input, .contact-form textarea, .contact-form select {
    color: #111 !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.2);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
}
form input::placeholder, form textarea::placeholder {
    color: rgba(0,0,0,0.45) !important;
}

/* Preserve accent/highlight design on cream (mint/sand chips stay colored) */
.section.section--alt .section-label,
.section.section--alt .chip,
.section.section--alt .badge,
.section.section--alt .koppen-badge {
    color: var(--color-forest, #1B4332) !important;
}
.section.section--alt .highlight,
.section.section--alt .accent {
    color: #2D6A4F !important;
}
/* Links inside cream sections: distinguishable forest color */
.section.section--alt a:not(.btn) {
    color: #2D6A4F !important;
}

/* DARK SECTIONS — everything white / near-white */
.section:not(.section--alt):not(.section--dark),
.section:not(.section--alt):not(.section--dark) h1,
.section:not(.section--alt):not(.section--dark) h2,
.section:not(.section--alt):not(.section--dark) h3,
.section:not(.section--alt):not(.section--dark) h4,
.section:not(.section--alt):not(.section--dark) h5,
.section:not(.section--alt):not(.section--dark) h6,
.section:not(.section--alt):not(.section--dark) p,
.section:not(.section--alt):not(.section--dark) li,
.section:not(.section--alt):not(.section--dark) td,
.section:not(.section--alt):not(.section--dark) th,
.section:not(.section--alt):not(.section--dark) strong,
.section:not(.section--alt):not(.section--dark) em,
.section:not(.section--alt):not(.section--dark) figcaption,
.section:not(.section--alt):not(.section--dark) .chart-desc,
.section:not(.section--alt):not(.section--dark) .img-caption,
.section:not(.section--alt):not(.section--dark) .caption,
.section:not(.section--alt):not(.section--dark) .lead,
.section:not(.section--alt):not(.section--dark) .newsletter-note {
    color: #fff !important;
}
/* Design-accent classes keep their colors on dark sections too */
.section:not(.section--alt):not(.section--dark) .section-label,
.section:not(.section--alt):not(.section--dark) .chip,
.section:not(.section--alt):not(.section--dark) .badge,
.section:not(.section--alt):not(.section--dark) .koppen-badge {
    color: var(--color-mint, #52B788) !important;
}
.section:not(.section--alt):not(.section--dark) .highlight,
.section:not(.section--alt):not(.section--dark) .accent {
    color: var(--color-sand, #DDA15E) !important;
}