/* =========================================================
   =========================================================
   WCMH SHARED COMPONENT LIBRARY
   REUSABLE SITE-WIDE STYLES
   =========================================================
   ========================================================= */

.WCMH {

    /* -----------------------------------------------------
       BRAND COLORS
       ----------------------------------------------------- */

    --wcmh-primary: #006635;
    --wcmh-secondary: #79C043;

    --wcmh-green: #059669;
    --wcmh-green-dark: #047857;

    --wcmh-navy: #1c2c4c;
    --wcmh-navy-dark: #14213a;

    /* -----------------------------------------------------
       TEXT COLORS
       ----------------------------------------------------- */

    --wcmh-text: #555555;
    --wcmh-muted: #667085;

    /* -----------------------------------------------------
       SURFACE COLORS
       ----------------------------------------------------- */

    --wcmh-light: #f7f9fb;
    --wcmh-border: #e1e6ec;

    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   GLOBAL BOX SIZING
   ========================================================= */

.WCMH *,
.WCMH *::before,
.WCMH *::after {
    box-sizing: border-box;
}


/* =========================================================
   CONTENT CONTAINER
   ========================================================= */

.WCMH .wcmh-container {

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.WCMH .wcmh-section-header {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    width: 100%;
    max-width: 950px;
    color: var(--wcmh-navy);
    margin: 0 auto 55px auto;

    text-align: center;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.WCMH .wcmh-eyebrow {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    margin: 70px 0 18px 0;

    color: var(--wcmh-primary);

    font-size: 13px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}


.WCMH .wcmh-eyebrow::before,
.WCMH .wcmh-eyebrow::after {

    content: "";

    display: block;

    width: 65px;
    height: 1px;

    background: rgba(0, 102, 53, 0.30);

    flex-shrink: 0;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.WCMH .wcmh-section-title {

    margin: 0;

    color: var(--wcmh-navy);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.08;

    font-weight: 600;

    letter-spacing: -0.02em;
}


/* =========================================================
   SECTION ACCENT
   ========================================================= */

.WCMH .wcmh-section-accent {

    width: 50px;
    height: 4px;

    margin: 22px auto 25px auto;

    background: var(--wcmh-primary);

    border-radius: 999px;
}


/* =========================================================
   SECTION SUBTITLE
   ========================================================= */

.WCMH .wcmh-section-subtitle {

    max-width: 800px;

    margin: 0 auto;

    color: var(--wcmh-muted);

    font-size: 18px;
    line-height: 1.65;

    font-weight: 400;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.WCMH .wcmh-content {

    max-width: 1050px;

    margin: 0 auto;
}


/* =========================================================
   MAIN CONTENT PARAGRAPHS
   Standard WCMH paragraph typography
   ========================================================= */

.WCMH .wcmh-content p {

    margin: 0 0 2rem 0;

    color: var(--wcmh-text);

    font-size: 1.15rem;
    line-height: 1.8;

    font-weight: 400;
}


/* =========================================================
   STRONG TEXT
   ========================================================= */

.WCMH .wcmh-content strong {

    color: var(--wcmh-navy);

    font-weight: 700;
}


/* =========================================================
   CONTENT H3
   ========================================================= */

.WCMH .wcmh-content h3 {

    margin: 50px 0 20px 0;

    color: var(--wcmh-navy);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 34px;
    line-height: 1.2;

    font-weight: 600;
}


.WCMH .wcmh-content h3:first-child {

    margin-top: 0;
}


/* =========================================================
   CONTENT H4
   ========================================================= */

.WCMH .wcmh-content h4 {

    margin: 30px 0 14px 0;

    color: var(--wcmh-navy);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 24px;
    line-height: 1.3;

    font-weight: 600;
}


/* =========================================================
   ICON
   ========================================================= */

.WCMH .wcmh-icon {

    margin-right: 10px;

    color: var(--wcmh-primary);

    font-size: 0.8em;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.WCMH .wcmh-divider {

    height: 1px;

    margin: 70px 0;

    border: 0;

    background:
        linear-gradient(
            to right,
            transparent,
            #d9dde3 15%,
            #d9dde3 85%,
            transparent
        );
}


/* =========================================================
   CHECK LIST
   ========================================================= */

.WCMH .wcmh-check-list {

    margin: 25px 0 35px 0;
    padding: 0;

    list-style: none;
}


.WCMH .wcmh-check-list li {

    position: relative;

    margin: 0 0 16px 0;

    padding-left: 34px;

    color: var(--wcmh-text);

    font-size: 1.05rem;
    line-height: 1.7;
}


.WCMH .wcmh-check-list li::before {

    content: "\f00c";

    position: absolute;

    left: 0;
    top: 4px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background: rgba(0, 102, 53, 0.10);

    color: var(--wcmh-primary);

    font-family: "Font Awesome 6 Free";
    font-size: 10px;

    font-weight: 900;
}


/* =========================================================
   INFO BOX
   ========================================================= */

.WCMH .wcmh-info-box {

    margin: 35px 0 40px 0;

    padding: 30px 32px;

    border: 1px solid var(--wcmh-border);

    border-left: 4px solid var(--wcmh-primary);

    border-radius: 8px;

    background: var(--wcmh-light);

    box-shadow:
        0 8px 25px rgba(28, 44, 76, 0.04);
}


.WCMH .wcmh-info-box h4 {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0 0 12px 0;

    color: var(--wcmh-navy);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;
    line-height: 1.3;

    font-weight: 600;
}


.WCMH .wcmh-info-box h4 i {

    color: var(--wcmh-primary);

    font-size: 18px;
}


.WCMH .wcmh-info-box p {

    margin: 0 !important;

    color: var(--wcmh-text);

    font-size: 16px !important;
    line-height: 1.7 !important;
}


/* =========================================================
   STATUTE / AUTHORITY BOX
   ========================================================= */

.WCMH .wcmh-authority-box {

    position: relative;

    width: 100%;

    margin: 40px 0;

    padding: 34px 36px;

    overflow: hidden;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--wcmh-navy) 0%,
            var(--wcmh-navy-dark) 100%
        );

    box-shadow:
        0 15px 35px rgba(28, 44, 76, 0.13);
}



.WCMH .wcmh-authority-box::after {

    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    right: -90px;
    top: -100px;

    border-radius: 50%;

    background:
        rgba(121, 192, 67, 0.12);
}


.WCMH .wcmh-authority-content {

    position: relative;

    z-index: 2;

    max-width: 850px;
}


.WCMH .wcmh-authority-eyebrow {

    margin: 0 0 10px 0;

    color: #a8d879;

    font-size: 12px;
    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.15em;
    text-transform: uppercase;
}


.WCMH .wcmh-authority-box h3 {

    margin: 0 0 15px 0;

    color: #ffffff !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(28px, 4vw, 38px);

    line-height: 1.2;

    font-weight: 600;
}


.WCMH .wcmh-authority-box p {

    margin: 0 0 22px 0 !important;

    color: rgba(255, 255, 255, 0.88) !important;

    font-size: 17px !important;

    line-height: 1.7 !important;
}


.WCMH .wcmh-authority-link {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 12px 20px;

    border-radius: 6px;

    background: #ffffff;

    color: var(--wcmh-navy);

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.WCMH .wcmh-authority-link:hover {

    background: var(--wcmh-secondary);

    color: var(--wcmh-navy-dark);

    transform: translateY(-2px);

    text-decoration: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .WCMH .wcmh-content {

        max-width: 100%;
    }
}


@media (max-width: 600px) {

    .WCMH .wcmh-eyebrow {

        gap: 12px;

        font-size: 11px;
    }


    .WCMH .wcmh-eyebrow::before,
    .WCMH .wcmh-eyebrow::after {

        width: 35px;
    }


    .WCMH .wcmh-section-title {

        font-size: 40px;
    }


    .WCMH .wcmh-section-subtitle {

        font-size: 16px;

        line-height: 1.55;
    }


    .WCMH .wcmh-content p {

        font-size: 1.05rem;

        line-height: 1.7;
    }


    .WCMH .wcmh-content h3 {

        font-size: 29px;
    }


    .WCMH .wcmh-info-box {

        padding: 25px 22px;
    }


    .WCMH .wcmh-authority-box {

        padding: 30px 25px;
    }
}

/* =========================================================
   AUTHORITY BOX CONTAINER
   Controls the width of the authority component
   independently from the surrounding page section.
   ========================================================= */

.WCMH .wcmh-authority-container {

    width: 100%;
    max-width: 1050px;

    margin: 0 auto;

    padding: 0 25px;
}


/* =========================================================
   WCMH FAQ COMPONENT
   Reusable accordion for funding questions & answers.
   ========================================================= */


/* =========================================================
   FAQ SECTION
   ========================================================= */

.WCMH .wcmh-faq {

    width: 100%;

    margin: 0 auto;

    padding: 70px 0;
}


/* =========================================================
   FAQ INTRO
   ========================================================= */

.WCMH .wcmh-faq-header {

    max-width: 850px;

    margin: 0 auto 45px auto;

    text-align: center;
}


.WCMH .wcmh-faq-header .wcmh-eyebrow {

    margin-bottom: 18px;
}


.WCMH .wcmh-faq-title {

    margin: 0;

    color: var(--wcmh-navy);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(36px, 5vw, 54px);

    line-height: 1.1;

    font-weight: 600;

    letter-spacing: -0.02em;
}


.WCMH .wcmh-faq-accent {

    width: 50px;
    height: 4px;

    margin: 22px auto 24px auto;

    background: var(--wcmh-primary);

    border-radius: 999px;
}


.WCMH .wcmh-faq-intro {

    max-width: 750px;

    margin: 0 auto;

    color: var(--wcmh-muted);

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   FAQ PANEL
   Main surrounding container
   ========================================================= */

.WCMH .wcmh-faq-panel {

    width: 100%;
    max-width: 1050px;

    margin: 0 auto;

    padding: 12px;

    border: 1px solid var(--wcmh-border);

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 18px 45px rgba(28, 44, 76, 0.09);
}


/* =========================================================
   FAQ ITEM
   ========================================================= */

.WCMH .wcmh-faq-item {

    border-bottom: 1px solid #e8ebef;
}


.WCMH .wcmh-faq-item:last-child {

    border-bottom: 0;
}


/* =========================================================
   QUESTION
   ========================================================= */

.WCMH .wcmh-faq-question {

    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    width: 100%;

    padding: 24px 25px;

    cursor: pointer;

    list-style: none;

    color: var(--wcmh-navy);

    font-size: 17px;

    line-height: 1.5;

    font-weight: 700;

    border-radius: 10px;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        padding-left 0.25s ease;
}


/* Remove browser marker */

.WCMH .wcmh-faq-question::-webkit-details-marker {

    display: none;
}


/* =========================================================
   QUESTION ICON
   ========================================================= */

.WCMH .wcmh-faq-question::before {

    content: "\f059";

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: rgba(0, 102, 53, 0.08);

    color: var(--wcmh-primary);

    font-family:
        "Font Awesome 6 Free";

    font-size: 15px;

    font-weight: 900;
}


/* =========================================================
   PLUS / MINUS INDICATOR
   ========================================================= */

.WCMH .wcmh-faq-question::after {

    content: "\2b";

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 30px;
    height: 30px;

    margin-left: auto;

    border-radius: 50%;

    background: var(--wcmh-light);

    color: var(--wcmh-navy);

    font-family:
        "Font Awesome 6 Free";

    font-size: 13px;

    font-weight: 900;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.WCMH .wcmh-faq-question:hover {

    background:
        rgba(0, 102, 53, 0.045);

    color: var(--wcmh-primary);
}


.WCMH .wcmh-faq-question:hover::after {

    background: rgba(0, 102, 53, 0.10);

    color: var(--wcmh-primary);
}


/* =========================================================
   OPEN STATE
   ========================================================= */

.WCMH .wcmh-faq-item[open] .wcmh-faq-question {

    background:
        rgba(0, 102, 53, 0.055);

    color: var(--wcmh-primary);

    border-radius: 10px 10px 0 0;
}


.WCMH .wcmh-faq-item[open] .wcmh-faq-question::after {

    content: "\f068";

    background: var(--wcmh-primary);

    color: #ffffff;
}


/* =========================================================
   FAQ ANSWER ANIMATION
   ========================================================= */

.WCMH .wcmh-faq-answer {

    overflow: hidden;

    height: auto;

    opacity: 1;

    transition:
        height 0.35s ease,
        opacity 0.25s ease;
}



/* =========================================================
   ANSWER PARAGRAPHS
   ========================================================= */

.WCMH .wcmh-faq-answer p {

    margin: 0 0 15px 0;

    color: var(--wcmh-text);

    font-size: 16px;

    line-height: 1.75;
}


.WCMH .wcmh-faq-answer p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   ANSWER EMPHASIS
   ========================================================= */

.WCMH .wcmh-faq-answer strong {

    color: var(--wcmh-navy);

    font-weight: 700;
}


/* =========================================================
   ANSWER NOTE
   Optional small note within an answer.
   ========================================================= */

.WCMH .wcmh-faq-answer-note {

    display: inline-block;

    margin-top: 10px;

    padding: 9px 13px;

    border-left: 3px solid var(--wcmh-secondary);

    background: var(--wcmh-light);

    color: var(--wcmh-muted);

    font-size: 14px;

    line-height: 1.55;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .WCMH .wcmh-faq {

        padding: 50px 0;
    }


    .WCMH .wcmh-faq-header {

        margin-bottom: 30px;
    }


    .WCMH .wcmh-faq-title {

        font-size: 38px;
    }


    .WCMH .wcmh-faq-intro {

        font-size: 16px;

        line-height: 1.6;
    }


    .WCMH .wcmh-faq-panel {

        padding: 8px;

        border-radius: 14px;
    }


    .WCMH .wcmh-faq-question {

        gap: 12px;

        padding: 19px 15px;

        font-size: 16px;
    }


    .WCMH .wcmh-faq-question::before {

        width: 30px;
        height: 30px;

        font-size: 13px;
    }


    .WCMH .wcmh-faq-question::after {

        width: 27px;
        height: 27px;

        font-size: 11px;
    }


    .WCMH .wcmh-faq-answer {

        padding: 0 20px 24px 57px;

        font-size: 15px;

        line-height: 1.7;
    }


    .WCMH .wcmh-faq-answer p {

        font-size: 15px;

        line-height: 1.7;
    }

}

/* =========================================================
   FAQ SMOOTH ACCORDION ANIMATION
   ========================================================= */

.WCMH .wcmh-faq-answer {

    overflow: hidden;

    transition:
        height 0.35s ease,
        opacity 0.25s ease;

    opacity: 1;
}


/* Slightly softer question transition */

.WCMH .wcmh-faq-question {

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        padding-left 0.3s ease;
}


/* Smooth plus/minus transition */

.WCMH .wcmh-faq-question::after {

    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
}


/* Rotate indicator when open */

.WCMH .wcmh-faq-item[open] .wcmh-faq-question::after {

    transform: rotate(180deg);
}