/* Page background — ivory, out to the screen edges */
.blog,
.archive {
    background-color: #FFFFF0;
}

/* Force full-width blocks to the true page edges */
.entry-content .alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}

/* Optional: lift each card on hover */
.blog .ast-article-post:hover,
.archive .ast-article-post:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}


/* Global values */
:root {
    --header-box-bg:   #EDFDE7;
    --content-box-bg:  #E8EEFF;
    --box-border:      1px solid #002EFA55;
    --box-radius:      15px;
    --box-padding:     20px 30px;
    --box-gap:         20px;
}

/* Header box — for an H3 heading */
.my-header-box {
    background-color: var(--header-box-bg);
    border: var(--box-border);
    border-radius: var(--box-radius);
    padding: var(--box-padding);
    margin-bottom: var(--box-gap);
}

.my-header-box h3 {
    margin: 0;   /* stops the heading adding its own extra gap inside the box */
}

/* Content box — for paragraph text */
.my-content-box {
    background-color: var(--content-box-bg);
    border: var(--box-border);
    border-radius: var(--box-radius);
    padding: var(--box-padding);
    margin-bottom: var(--box-gap);
}

.my-content-box p:last-child {
    margin-bottom: 0;   /* trims the trailing gap under the last paragraph */
}

.main-header-menu,
.ast-nav-menu {
    border-radius: 15px;
    overflow: hidden;
}

/* Thin coloured border along the bottom of the header */
.site-header,
.ast-primary-header-bar {
    border-bottom: .5px solid #000000;
}

/* Four resource buttons — black text on pale blue */
.resource-nav .wp-block-button__link {
    background-color: #E8EEFF;
    color: #000000;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Hover — slightly deeper blue */
.resource-nav .wp-block-button__link:hover {
    background-color: #D6E0FF;
    color: #000000;
}

/* 1. Panel behind the whole set of cards — darker brown */
.blog #primary.content-area,
.archive #primary.content-area {
    background-color: #F5E1D1 !important;
    padding: 2em;
    border-radius: 12px;
}

/* 2. Each card — pale blue */
.ast-blog-layout-4-grid .ast-article-inner {
    background-color: #E8EEFF !important;
}

/* 3. Inside each card (behind the text) — pale blue */
.ast-blog-layout-4-grid .ast-article-inner .post-content {
    background-color: #E8EEFF !important;
}

/* Brown "News" box above the cards — always renders */
.blog #primary.content-area::before,
.archive #primary.content-area::before {
    content: "News";
    display: block;
    background-color: #F5E1D1;
    color: #000000;
    font-size: 32px;
    font-weight: 600;
    text-align: left;
    padding: 5px 2em;
    margin-bottom: 30px;
    border-radius: 12px;
}

/* Make the news page's container brown, not ivory */
.blog .ast-separate-container,
.archive .ast-separate-container {
    background-color: #F5E1D1 !important;
}

/* News/blog page background — target the PLAIN container + body */
body.blog.ast-plain-container,
body.archive.ast-plain-container,
.ast-plain-container .site-content,
.ast-plain-container #content {
    background-color: #F5E1D1 !important;
}

.blog #primary.content-area,
.archive #primary.content-area {
    padding: 2em !important;
    margin-top: 20px !important;    /* ← this is the top gap */
}


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

/* Every layer of the mobile drawer — force orange */
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
.ast-mobile-popup-drawer.active .ast-mobile-popup-content,
.ast-mobile-popup-drawer.active .ast-mobile-header-content,
.ast-mobile-popup-drawer.active .main-header-menu,
.ast-mobile-popup-drawer.active .ast-nav-menu,
.ast-mobile-popup-drawer.active .menu-item,
.ast-mobile-popup-drawer.active .sub-menu {
    background-color: #F15A24 !important;
}

/* All menu link text — black */
.ast-mobile-popup-drawer.active .menu-item a,
.ast-mobile-popup-drawer.active .ast-nav-menu .menu-link,
.ast-mobile-popup-drawer.active .sub-menu .menu-item a {
    color: #000000 !important;
    background-color: transparent !important;   /* let the orange from the item show, no double layer */
}

/* Hover / current page */
.ast-mobile-popup-drawer.active .menu-item a:hover,
.ast-mobile-popup-drawer.active .menu-item.current-menu-item > a {
    color: #000000 !important;
    background-color: rgba(0, 0, 0, 0.10) !important;
}

/* Expand (+) arrows and the close (✕) button — black */
.ast-mobile-popup-drawer.active .ast-menu-toggle,
.ast-mobile-popup-drawer.active .menu-toggle-close {
    color: #000000 !important;
}

/* Keep the brown panel's top space on mobile */
@media (max-width: 921px) {
    .blog #primary.content-area,
    .archive #primary.content-area {
        padding: 2em !important;
        margin-top: 40px !important;
    }

    .blog #primary .ast-row,
    .archive #primary .ast-row {
        margin-top: 40px !important;
    }
}

/* Add breathing room above the page title on mobile only */
@media (max-width: 921px) {
    .ast-single-post .entry-header,
    .ast-single-post .entry-title,
    .ast-plain-container .site-content .ast-container:first-child {
        padding-top: 10px !important;
    }
}