/**
 * CFRO Component — Shared Page Patterns
 * Section Title, White Container, Values Grid
 * @package CFRO
 * @since   4.2.0
 */

/* ── Section Title ───────────────────────────── */
.cfro-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cfro-charcoal-light);
    margin: 0 0 1.5rem;
}

/* ── White Container ─────────────────────────── */
.cfro-white-container {
    background: var(--cfro-white, #fff);
    border: 1px solid rgba(27,122,90,0.1);
    border-radius: 0.375rem;
}
@media (min-width: 768px) {
    .cfro-white-container {
        padding: 2.5rem !important;
    }
}
.cfro-white-container__text {
    color: var(--cfro-charcoal-light);
    line-height: 1.625;
    margin: 0 0 1rem 0;
}

/* ── Values Grid ─────────────────────────────── */
.cfro-values-grid {
    gap: 1.5rem !important;
}
@media (max-width: 1024px) {
    .cfro-values-grid {
        flex-wrap: wrap !important;
    }
    .cfro-values-grid > .wp-block-column {
        flex-basis: calc(50% - 0.75rem) !important;
    }
}
@media (max-width: 600px) {
    .cfro-values-grid > .wp-block-column {
        flex-basis: 100% !important;
    }
}

.cfro-value-card {
    text-align: center;
    padding: 1.5rem;
    background: var(--cfro-white, #fff);
    border: 1px solid rgba(27,122,90,0.1);
    border-radius: 0.375rem;
}

/* Icon circles */
.cfro-value-card__icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem !important;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}
.cfro-value-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}
/* Color variants */
.cfro-value-card__icon--coral {
    background: var(--cfro-coral-light);
    color: var(--cfro-coral);
}
.cfro-value-card__icon--teal {
    background: var(--cfro-teal-light);
    color: var(--cfro-teal);
}
.cfro-value-card__icon--violet {
    background: var(--cfro-violet-light);
    color: var(--cfro-violet);
}
.cfro-value-card__icon--amber {
    background: var(--cfro-amber-light);
    color: var(--cfro-amber);
}

/* Card text */
.cfro-value-card__title {
    font-size: 1.125rem;
    color: var(--cfro-charcoal);
    margin: 0 0 0.5rem !important;
}
.cfro-value-card__desc {
    font-size: 0.875rem;
    color: var(--cfro-charcoal-light);
    margin: 0 !important;
}

/* ── Content Section wrapper ─────────────────── */
/* Used to wrap sections on pages like About, Contact */
.cfro-page-section {
    max-width: 80rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}
.cfro-page-section + .cfro-page-section {
    padding-top: 0;
}

/* ── Content Section wrapper for Front Page ─────────────────── */
/* Used to wrap sections on the front page */
.cfro-page-section.cfro-front-page {
    padding: 0rem 1.5rem;
}


/* ── Mission Block ───────────────────────────── */
.cfro-mission-block {
    background: var(--cfro-forest) !important;
    color: #fff;
    border-radius: 0.375rem;
}
@media (min-width: 768px) {
    .cfro-mission-block {
        padding: 3.5rem !important;
    }
}
.cfro-mission-block__label {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--cfro-amber) !important;
    margin: 0 0 1rem;
}
.cfro-mission-block__primary {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    line-height: 1.625;
    color: #fff !important;
    margin: 0 0 1.5rem;
}
.cfro-mission-block__secondary {
    font-size: 1.125rem;
    line-height: 1.625;
    color: rgba(255,255,255,0.7) !important;
    margin: 0;
}

/* ── Forest Button (reusable CTA) ────────────── */
.cfro-btn--forest .wp-block-button__link,
.cfro-btn--forest.wp-block-button__link {
    background: var(--cfro-forest);
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
}
.cfro-btn--forest .wp-block-button__link:hover,
.cfro-btn--forest.wp-block-button__link:hover {
    background: var(--cfro-forest-dark);
    transform: translateY(-1px);
}
.cfro-btn--forest .wp-block-button__link:focus-visible,
.cfro-btn--forest.wp-block-button__link:focus-visible {
    outline: 2px solid var(--cfro-forest);
    outline-offset: 2px;
}

/* ── Content Block (card with colored header bar) ── */
.cfro-content-block {
    overflow: hidden;
    border-radius: 0.375rem;
}
.cfro-content-block__header {
    border-bottom: 1px solid rgba(27,122,90,0.1);
}
.cfro-content-block__header--green {
    background: var(--cfro-sage-pale) !important;
}
.cfro-content-block__header--red {
    background: color-mix(in srgb, var(--cfro-coral) 8%, #fff) !important;
}
.cfro-content-block__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 !important;
}

/* ── Coral Button (reusable CTA) ─────────────── */
.cfro-btn--coral .wp-block-button__link,
.cfro-btn--coral.wp-block-button__link {
    background: var(--cfro-coral);
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
}
.cfro-btn--coral .wp-block-button__link:hover,
.cfro-btn--coral.wp-block-button__link:hover {
    background: var(--cfro-rose);
    transform: translateY(-1px);
}
.cfro-btn--coral .wp-block-button__link:focus-visible,
.cfro-btn--coral.wp-block-button__link:focus-visible {
    outline: 2px solid var(--cfro-coral);
    outline-offset: 2px;
}

/* ── Two-Column Content Block ────────────────── */
.cfro-content-block-two-col {
    gap: 1.5rem !important;
}
@media (max-width: 600px) {
    .cfro-content-block-two-col > .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ── Board & Staff lists ─────────────────────── */
.cfro-page-section .wp-block-list {
    padding-left: 1.25rem;
    margin: 0;
}
.cfro-page-section .wp-block-list li {
    font-size: 0.9375rem;
    color: var(--cfro-charcoal-light);
    line-height: 1.75;
}