/* ============================================================
   ARCHER HOME
   Styling for /archers-main/
   ============================================================ */


/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */

.ArchersHome {
    --archers-green: #315d32;
    --archers-dark-green: #234625;
    --archers-light-green: #edf3e8;
    --archers-cream: #f7f3e8;
    --archers-warm-white: #fffdf8;
    --archers-gold: #b28a43;
    --archers-text: #343434;
    --archers-muted: #6b6b63;
    --archers-border: #d9d5c8;

    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--archers-text);
    background: var(--archers-warm-white);
    font-size: 17px;
    line-height: 1.7;
}


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


.ArchersHomeInner {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
}


.ArchersHomeNarrow {
    max-width: 820px;
}


.ArchersHomeSection {
    padding: 70px 0;
}


.ArchersHome h2 {
    margin: 0 0 24px;
    color: var(--archers-dark-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    font-weight: 500;
    text-align: center;
}


.ArchersHome h3 {
    color: var(--archers-dark-green);
    font-family: Georgia, "Times New Roman", serif;
}


.ArchersHome p {
    margin: 0 0 1.25em;
}


.ArchersEyebrow {
    margin-bottom: 10px !important;
    color: var(--archers-gold);
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-align: center;
}


.ArchersLead {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25em;
    line-height: 1.65;
    color: #45453f;
}


.ArchersSectionIntro {
    max-width: 700px;
    margin: -8px auto 35px !important;
    text-align: center;
    color: var(--archers-muted);
    font-size: 1.08em;
}


/* ------------------------------------------------------------
   ACCESSIBLE H1
   ------------------------------------------------------------ */

.ArchersScreenReaderHeading {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

.ArchersHero {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #283c25;
}


.ArchersHeroImage {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}


.BBCHero {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #283c25;
}


.BBCHeroImage {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}


/* ------------------------------------------------------------
   LOGIN STRIP
   ------------------------------------------------------------ */

.ArchersLoginStrip {
    padding: 13px 0;
    color: #fff;
    background: var(--archers-dark-green);
}


.ArchersLoginStrip .ArchersHomeInner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}


.ArchersLoginText {
    font-size: 1em;
    font-weight: 600;
}


/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */

.BBCActionButtons {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
    margin-right:1em;
    margin-left:1em;
}

.BBCButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    font-size: 0.94em;
    line-height: 1.3;
    font-weight: 700;
    text-decoration: none !important;
    text-align: center;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.BBCButton:hover,
.BBCButton:focus {
    transform: translateY(-2px);
    text-decoration: none !important;
}


.BBCButtonPrimary {
    color: #fff !important;
    background: var(--archers-green);
    border-color: var(--archers-green);
}


.BBCButtonPrimary:hover,
.BBCButtonPrimary:focus {
    color: #fff !important;
    background: var(--archers-dark-green);
    border-color: var(--archers-dark-green);
}


.BBCButtonSecondary {
    color: var(--archers-dark-green) !important;
    background: transparent;
    border-color: var(--archers-green);
}


.BBCButtonSecondary:hover,
.BBCButtonSecondary:focus {
    color: #fff !important;
    background: var(--archers-green);
}


.BBCButtonLight {
    color: var(--archers-dark-green) !important;
    background: #fff;
    border-color: #fff;
}


.BBCButtonLight:hover,
.BBCButtonLight:focus {
    color: var(--archers-dark-green) !important;
    background: var(--archers-cream);
    border-color: var(--archers-cream);
}


.BBCButtonOutline {
    color: #fff !important;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.8);
}


.BBCButtonOutline:hover,
.BBCButtonOutline:focus {
    color: var(--archers-dark-green) !important;
    background: #fff;
    border-color: #fff;
}










.ArchersActionButtons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
}


.ArchersButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 5px;
    font-size: 0.94em;
    line-height: 1.3;
    font-weight: 700;
    text-decoration: none !important;
    text-align: center;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.ArchersButton:hover,
.ArchersButton:focus {
    transform: translateY(-2px);
    text-decoration: none !important;
}


.ArchersButtonPrimary {
    color: #fff !important;
    background: var(--archers-green);
    border-color: var(--archers-green);
}


.ArchersButtonPrimary:hover,
.ArchersButtonPrimary:focus {
    color: #fff !important;
    background: var(--archers-dark-green);
    border-color: var(--archers-dark-green);
}


.ArchersButtonSecondary {
    color: var(--archers-dark-green) !important;
    background: transparent;
    border-color: var(--archers-green);
}


.ArchersButtonSecondary:hover,
.ArchersButtonSecondary:focus {
    color: #fff !important;
    background: var(--archers-green);
}


.ArchersButtonLight {
    color: var(--archers-dark-green) !important;
    background: #fff;
    border-color: #fff;
}


.ArchersButtonLight:hover,
.ArchersButtonLight:focus {
    color: var(--archers-dark-green) !important;
    background: var(--archers-cream);
    border-color: var(--archers-cream);
}


.ArchersButtonOutline {
    color: #fff !important;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.8);
}


.ArchersButtonOutline:hover,
.ArchersButtonOutline:focus {
    color: var(--archers-dark-green) !important;
    background: #fff;
    border-color: #fff;
}


/* ------------------------------------------------------------
   WELCOME
   ------------------------------------------------------------ */

.ArchersWelcome {
    background: var(--archers-warm-white);
}


.ArchersWelcome .ArchersHomeNarrow > p:not(.ArchersEyebrow) {
    text-align: center;
}


/* ------------------------------------------------------------
   FEATURE CARDS
   ------------------------------------------------------------ */

.ArchersFeatures {
    padding-top: 20px;
    background: var(--archers-warm-white);
}

.FeatureGrid {
    display: grid;
    grid-template-rows: 40px 55px 1fr;
    align-items: center;
    justify-items: center;
    flex: 1 1 0;
    min-width: 0;
    height: 300px;
    margin: 0;
    border: 1px solid var(--archers-border);
    border-radius: 8px;
    background: #fff;
    text-align: justify;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
    padding:1.5em 1em 0em 1em;
    border:1px solid red;
}


.ArchersFeatureGrid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 48px;
    width: 100%;
}


.BBCFeatureCard {
    display: grid;
    grid-template-rows: 40px 55px 1fr;
    align-items: center;
    justify-items: center;
    flex: 1 1 0;
    min-width: 0;
    min-height: 100px;
    margin: 0;
    padding: 34px 35px;
    border: 1px solid var(--archers-border);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
}


.ArchersFeatureCard {
    display: grid;
    grid-template-rows: 90px 55px 1fr;
    align-items: center;
    justify-items: center;
    flex: 1 1 0;
    min-width: 0;
    min-height: 200px;
    margin: 0;
    border: 1px solid var(--archers-border);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
}


.BBCFeatureIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 35px;
    margin: 0;
    padding: 0;
    border-radius: 5%;
    color: #fff;
    background: var(--archers-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2em;
    line-height: 1;
    text-align: center;
}


.ArchersFeatureContent {
    padding:1em;
    text-align: justify;
    color: var(--archers-muted);
}


/* ------------------------------------------------------------
   ARCHIVE YEARS
   ------------------------------------------------------------ */

.ArchersYears {
    background: var(--archers-cream);
    border-top: 1px solid #e7e0cf;
    border-bottom: 1px solid #e7e0cf;
}


.ArchersYearGrid {
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: 1000px !important;

    margin: 0 auto !important;
}


/*
 * WordPress may insert paragraph wrappers when page content is
 * processed. This keeps all 18 year links in the same grid.
 */

.ArchersYearGrid > p {
    display: contents !important;
}


.ArchersYearGrid > a,
.ArchersYearGrid > p > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    position: static !important;
    float: none !important;
    clear: none !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #ccd3c6;
    border-radius: 5px;

    color: var(--archers-dark-green) !important;
    background: #fff;

    font-size: 1.05em;
    font-weight: 700;
    line-height: 1;

    text-align: center;
    text-decoration: none !important;

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


.ArchersYearGrid > a:hover,
.ArchersYearGrid > a:focus,
.ArchersYearGrid > p > a:hover,
.ArchersYearGrid > p > a:focus {
    color: #fff !important;
    background: var(--archers-green);
    transform: translateY(-2px);
}


/* ------------------------------------------------------------
   CHARITY
   ------------------------------------------------------------ */

.ArchersCharity {
    background: var(--archers-warm-white);
}


.ArchersCharityPanel {
    display: grid;
    grid-template-columns: 0.85fr 1.4fr;
    overflow: hidden;
    border-radius: 10px;
    background: var(--archers-green);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}


.ArchersCharityAmount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 330px;
    padding: 40px 30px;

    color: #fff;
    background: var(--archers-dark-green);

    text-align: center;
}


.ArchersCharityOver {
    margin-bottom: 3px;
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.2em;
}


.ArchersCharityAmount strong {
    display: block;
    margin: 2px 0;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 1;
    font-weight: 500;
}


.ArchersCharityAmount span:last-child {
    font-size: 1.15em;
}


.ArchersCharityText {
    padding: 48px 55px;
    color: #fff;
}


.ArchersCharityText .ArchersEyebrow {
    color: #e6cf96;
    text-align: left;
}


.ArchersCharityText h2 {
    color: #fff;
    text-align: left;
}


.ArchersCharityText p {
    color: #fff;
}


/* ------------------------------------------------------------
   PASSWORD SECTION
   ------------------------------------------------------------ */

.ArchersPassword {
    background: var(--archers-light-green);
}


.ArchersPassword > .ArchersHomeInner > p {
    text-align: left;
}


.ArchersPassword > .ArchersHomeInner > .ArchersEyebrow,
.ArchersPassword > .ArchersHomeInner > .ArchersLead {
    text-align: center;
}


.ArchersPasswordImportant {
    margin: 38px 0 30px;
    padding: 30px;

    border: 1px solid #bdcbb4;
    border-radius: 8px;

    background: #fff;
}


.ArchersPasswordImportant > h3 {
    margin: 0 0 25px;
    font-size: 1.5em;
    text-align: center;
}


.ArchersPasswordPoints {
    display: grid;
    gap: 24px;
}


.ArchersPasswordPoint {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;
    align-items: start;
}


.ArchersPasswordNumber {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    color: #fff;
    background: var(--archers-green);

    font-size: 1.15em;
    font-weight: 700;
}


.ArchersPasswordPoint strong {
    display: block;
    margin: 1px 0 5px;
    color: var(--archers-dark-green);
    font-size: 1.1em;
}


.ArchersPasswordPoint p {
    margin: 0;
    color: var(--archers-muted);
}


.ArchersDonationAmount {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: center;

    margin: 30px 0;
    padding: 22px 28px;

    border-radius: 8px;

    color: #fff;
    background: var(--archers-dark-green);

    text-align: center;
}


.ArchersDonationAmount strong {
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.8em;
    line-height: 1;
}


.ArchersDonationAmount span:first-child {
    text-align: right;
    font-weight: 700;
}


.ArchersDonationAmount span:last-child {
    text-align: left;
}


.ArchersJustGivingNote {
    margin: 30px 0;
    padding: 24px 28px;

    border-left: 5px solid var(--archers-gold);

    background: var(--archers-cream);
}


.ArchersJustGivingNote h3 {
    margin: 0 0 8px;
    font-size: 1.25em;
}


.ArchersJustGivingNote p {
    margin: 0;
}


.ArchersSignature {
    margin-top: 25px !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.1em;
}


/* ------------------------------------------------------------
   STORY
   ------------------------------------------------------------ */

.ArchersStory {
    background: var(--archers-warm-white);
}


.ArchersStory p:not(.ArchersEyebrow) {
    font-size: 1.03em;
}


/* ------------------------------------------------------------
   FINAL CTA
   ------------------------------------------------------------ */

.ArchersFinalCTA {
    padding: 60px 0;

    color: #fff;
    background: var(--archers-green);

    text-align: center;
}


.ArchersFinalCTA h2 {
    margin-bottom: 15px;
    color: #fff;
}


.ArchersFinalCTA p {
    max-width: 650px;
    margin: 0 auto;
    color: #fff;
    font-size: 1.1em;
}


/* ------------------------------------------------------------
   DISCLAIMER
   ------------------------------------------------------------ */

.ArchersDisclaimer {
    padding: 22px 0;

    color: #74746c;
    background: #eeece5;

    border-top: 1px solid #ddd9ce;
}


.ArchersDisclaimer p {
    max-width: 900px;
    margin: 0 auto;

    font-size: 0.78em;
    line-height: 1.5;

    text-align: center;
}


/* ============================================================
   TABLET
   ============================================================ */

@media screen and (max-width: 900px) {

    .ArchersHomeSection {
        padding: 55px 0;
    }


    .ArchersFeatureCard {
        grid-template-rows: 80px 50px 1fr;
        min-height: 320px;
        padding: 24px 16px;
    }


    .ArchersFeatureCard h3 {
        font-size: 1.2em;
    }


    .ArchersFeatureCard p {
        font-size: 0.92em;
    }


    /*
     * Do not change the year grid.
     * It remains nine columns / two rows.
     */


    .ArchersCharityPanel {
        grid-template-columns: 1fr;
    }


    .ArchersCharityAmount {
        min-height: 0;
        padding: 38px 25px;
    }


    .ArchersCharityText {
        padding: 40px;
    }


    .ArchersCharityText .ArchersEyebrow,
    .ArchersCharityText h2 {
        text-align: center;
    }

}


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

@media screen and (max-width: 600px) {

    .ArchersHome {
        font-size: 16px;
    }


    .ArchersHomeInner {
        width: min(100% - 28px, 1120px);
    }


    .ArchersHomeSection {
        padding: 45px 0;
    }


    .ArchersHome h2 {
        font-size: 2em;
    }


    .ArchersLead {
        font-size: 1.12em;
    }


    /* --------------------------------------------------------
       HERO
       -------------------------------------------------------- */

    .ArchersHeroImage {
        width: 100%;
        height: auto;
    }


    /* --------------------------------------------------------
       LOGIN
       -------------------------------------------------------- */

    .ArchersLoginStrip .ArchersHomeInner {
        flex-direction: column;
        gap: 10px;
        padding: 5px 0;
        text-align: center;
    }


    /* --------------------------------------------------------
       BUTTONS
       -------------------------------------------------------- */

    .ArchersActionButtons {
        flex-direction: column;
        align-items: stretch;
    }


    .ArchersActionButtons .ArchersButton {
        width: 100%;
    }


    /* --------------------------------------------------------
       FEATURE BOXES
       Keep all three on one row
       -------------------------------------------------------- */

    .ArchersFeatureGrid {
        gap: 6px;
    }


    .ArchersFeatureCard {
        grid-template-rows: 65px 42px 1fr;
        min-height: 250px;
        padding: 16px 7px;
    }


    .ArchersFeatureIcon {
        width: 50px;
        height: 50px;
        margin-bottom: 12px;
        font-size: 1.4em;
    }


    .ArchersYearIcon {
        font-size: 0.78em;
    }


    .ArchersFeatureCard h3 {
        margin-bottom: 8px;
        font-size: 0.95em;
        line-height: 1.2;
    }


    .ArchersFeatureCard p {
        font-size: 0.75em;
        line-height: 1.4;
    }


    /* --------------------------------------------------------
       CHARITY
       -------------------------------------------------------- */

    .ArchersCharityText {
        padding: 32px 22px;
    }


    .ArchersCharityAmount strong {
        font-size: 3.4em;
    }


    /* --------------------------------------------------------
       PASSWORD
       -------------------------------------------------------- */

    .ArchersPasswordImportant {
        padding: 24px 18px;
    }


    .ArchersPasswordPoint {
        grid-template-columns: 40px 1fr;
        gap: 13px;
    }


    .ArchersPasswordNumber {
        width: 40px;
        height: 40px;
    }


    .ArchersDonationAmount {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 24px 18px;
    }


    .ArchersDonationAmount span:first-child,
    .ArchersDonationAmount span:last-child {
        text-align: center;
    }


    .ArchersJustGivingNote {
        padding: 20px;
    }


    /* --------------------------------------------------------
       FINAL CTA
       -------------------------------------------------------- */

    .ArchersFinalCTA {
        padding: 45px 0;
    }

}

/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media screen and (max-width: 380px) {

    .ArchersFeatureGrid {
        gap: 4px;
    }


    .ArchersFeatureCard {
        padding-left: 5px;
        padding-right: 5px;
    }

}