/* Restore overrides for the static rebuild of globalpasturesfoundation.com (loaded after global.css). */

/* Headings that were <h1> (demoted to keep one H1) or invalid <h> tags: keep their original look.
   :where() = zero specificity, so every original class rule still wins. */
:where(h2.gp-h1, h3.gp-h1) { font-size: 2em; margin: 0.67em 0; font-weight: bold; }
:where(h2.gp-h) { display: inline; margin: 0; font-size: inherit; font-weight: inherit; }

/* in-page targets sit below the fixed 12rem header */
#events, #news, #contact { scroll-margin-top: 13rem; }

.box2a a { display: inline-block; }
.box2 i.fa-bars { cursor: pointer; }

/* ---- footer: two remaining columns (Quick Links + Contact Info) in normal flow ---- */
.box9 {
    height: auto;
    display: flex;
    justify-content: center;
    gap: 12rem;
    padding: 6rem 2rem 6rem;
}
.box9 .boxf1, .box9 .boxf3 {
    position: static;
    margin: 0;
    height: auto;
    padding: 0;
}
.box9 .boxf3 { width: 32rem; }
.box9 .boxf3 .h { display: block; margin-bottom: 1.5rem; }
.box9 .boxf1 .h { display: block; margin-bottom: 1.5rem; }
.box9 .boxf3 a.gp-tel { color: #fff; font-style: normal; font-size: 1.4rem; }

/* ---- contact card (replaces the unarchived Contact / Donation pages and payment links) ---- */
.gp-contact {
    background: #066130;
    padding: 7rem 2rem;
    box-sizing: border-box;
}
.gp-contact__card {
    max-width: 64rem;
    margin: 0 auto;
    background: #fff;
    border-radius: 1.5rem;
    padding: 4rem 4rem 4.5rem;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.18);
}
.gp-contact__title {
    font-family: My Font3, Georgia, serif;
    color: #066130;
    font-size: 3rem;
    margin: 0 0 1.5rem;
    font-weight: normal;
}
.gp-contact__lead {
    font-family: My Font1, sans-serif;
    font-size: 1.5rem;
    line-height: 1.6;
    color: #333;
    margin: 0 auto 2.5rem;
    max-width: 48rem;
}
.gp-contact__list {
    list-style: none;
    margin: 0 0 3rem;
    padding: 0;
    font-family: My Font1, sans-serif;
    font-size: 1.5rem;
    line-height: 2;
    color: #222;
}
.gp-contact__list i { color: #c29500; width: 2rem; }
.gp-contact__list a { color: #066130; text-decoration: none; }
.gp-contact__list a:hover { text-decoration: underline; }
.gp-contact__btn {
    display: inline-block;
    background: #c29500;
    color: #fff;
    font-family: My Font2, sans-serif;
    font-size: 1.5rem;
    text-decoration: none;
    padding: 1.4rem 4rem;
    border-radius: 0.4rem;
}
.gp-contact__btn:hover { background: #a37d00; }

/* News & Articles: original grid (3 x 40rem + 21rem left padding) overflowed the 126rem page by 300px */
.box8b { box-sizing: border-box; padding-left: 0; }
.box8b .grid-container { grid-template-columns: repeat(2, 40rem); gap: 3rem; }

/* removed "Read More" button under the Events cards (Events.html never archived) */
.box6 { height: 60rem; }

@media screen and (max-width: 430px) {
    /* The mobile layout was drawn for exactly 430px (rem + a few px widths). Scale the rem unit with the
       viewport so 360-414px phones get the same layout instead of text cut off on the right. */
    html { font-size: calc(100vw / 43); }
    html, body { width: 100%; max-width: 100%; }
    .box3, .box3a, .box3ai { width: 100%; }
    .box2a img { width: 20rem; }
    .box2 { padding: 1rem 2rem; }
    /* original parked this photo off-screen (left: 70rem) on phones; hide it instead of widening the page */
    .box5b { display: none; }
    /* removed "Read More" buttons */
    .box4 { height: 53rem; }
    .box6 { height: 70rem; }
    /* 50rem-wide absolute text column / 45rem card grid were wider than the screen (empty space only) */
    .box4b { width: auto; right: 1rem; }
    .box4b .content { width: auto; }
    .box6b { width: 100%; box-sizing: border-box; }
    .box8b .grid-container { grid-template-columns: none; gap: 0; }
    #events, #news, #contact { scroll-margin-top: 9rem; }

    .box9 {
        flex-direction: column;
        align-items: flex-start;
        gap: 4rem;
        padding: 5rem 3rem;
    }
    .box9 .boxf1, .box9 .boxf3 { width: 100%; }

    .gp-contact { padding: 5rem 1.6rem; }
    .gp-contact__card { padding: 3rem 2rem 3.5rem; }
    .gp-contact__title { font-size: 2.6rem; }
    .gp-contact__list { font-size: 1.4rem; }
}