/* ============================================ */
    /* PAGE BACKGROUND - SAGE GREEN ONLY           */
    /* ============================================ */
    
    html, body {
        background: #a6ab84 !important;
        background-color: #a6ab84 !important;
    }
    
    /* Header and footer - match green background */
    header, footer, nav, .admin-menu, .top-menu, .col1-menu {
        background: #a6ab84 !important;
    }
    
    header a, footer a, nav a {
        color: #1a2a2a !important;
    }
    
    /* ============================================ */
    /* MAIN CONTAINER - TRANSPARENT                */
    /* ============================================ */
    
    .articles-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 2rem;
        background: transparent !important;
    }
    
    /* ============================================ */
    /* PAGE HEADER - WHITE TEXT ON GREEN           */
    /* ============================================ */
    
    .page-header {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .page-header h1 {
        font-family: 'Abril Fatface', serif;
        font-size: 3rem;
        color: #ffffff;
        margin-bottom: 0.5rem;
    }
    
    .page-header .subtitle {
        color: rgba(255,255,255,0.9);
        font-family: 'Montserrat', sans-serif;
        font-size: 1rem;
    }
    
    /* ============================================ */
    /* SEARCH BOX - WHITE CONTAINER                */
    /* ============================================ */
    
 .search-section {
    max-width: 1200px;
    margin: 2rem auto 1rem;
    padding: 0 1rem;
}

.search-box {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.search-box input {
    flex: 1;
    min-width: 180px;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    border: 1px solid #ddd;
    background: #fff;
    font-family: inherit;
    border-radius: 4px;
}

.search-box button {
    padding: 0.8rem 1.5rem;
    background: #a6ab84;
    color: white;
    border: none;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 1rem;
    transition: opacity 0.2s;
    white-space: nowrap;
    border-radius: 4px;
    font-weight: 600;
}

.search-box button:hover {
    opacity: 0.85;
}

/* Responsive breakpoints for search */
@media (max-width: 600px) {
    .search-box input {
        min-width: 150px;
        padding: 0.7rem 0.8rem;
        font-size: 0.95rem;
    }
    
    .search-box button {
        padding: 0.7rem 1.2rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .search-box {
        flex-direction: column;
    }
    
    .search-box input,
    .search-box button {
        width: 100%;
        min-width: auto;
    }
    
    .search-box button {
        padding: 0.8rem;
    }
}




/* ============================================ */
/* TWO COLUMN LAYOUT                           */
/* ============================================ */

.two-columns {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
}

/* ============================================ */
/* ARTICLE CARDS - WHITE CONTAINERS            */
/* ============================================ */

.articles-list {
    background: transparent;
}

.article-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #e0e0e0;
}

.article-title {
    font-family: 'Abril Fatface', serif;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* ARTICLE HEADERS */
.article-title a {
    color: #787c60;
    text-decoration: none;
}

.article-title a:hover {
    color: #5e6248;
}

.article-meta {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    color: #888888;
    margin-bottom: 1rem;
}

.article-image img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.article-intro {
    color: #555555;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.read-more {
    display: inline-block;
    color: #787c60;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
}

.read-more:hover {
    text-decoration: underline;
    color: #5e6248;
}

/* ============================================ */
/* SIDEBAR WIDGETS - WHITE CONTAINERS          */
/* ============================================ */

.sidebar {
    align-self: start;
}

.sidebar-widget {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #e0e0e0;
}

/* SIDEBAR TITLES (Archive & About) */
.sidebar-widget h3 {
    font-family: 'Abril Fatface', serif;
    font-size: 1.3rem;
    color: #787c60;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #787c60;
}

.archive-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.archive-list li {
    margin-bottom: 0.5rem;
}

.archive-list li a {
    display: block;
    padding: 0.4rem 0;
    color: #555555;
    text-decoration: none;
    font-size: 0.9rem;
}

.archive-list li a:hover {
    color: #787c60;
    padding-left: 0.5rem;
}

.archive-count {
    color: #888888;
    font-size: 0.7rem;
}

/* ============================================ */
/* NO RESULTS - WHITE CONTAINER                */
/* ============================================ */

.no-results {
    text-align: center;
    padding: 3rem;
    background: #ffffff;
    border-radius: 12px;
    color: #666666;
}

.no-results a {
    color: #787c60;
    text-decoration: none;
}

.no-results a:hover {
    color: #5e6248;
    text-decoration: underline;
}

/* ============================================ */
/* RESPONSIVE                                  */
/* ============================================ */

@media (max-width: 768px) {
    .two-columns {
        grid-template-columns: 1fr;
    }
    .articles-container {
        padding: 1rem;
    }
    .page-header h1 {
        font-size: 2rem;
    }
    
    /* Smaller min-width on mobile */
    .search-box {
        min-width: 250px;
    }
}
Key change:
Added to the .search-box class:

css
.search-box {
    max-width: 500px;
    min-width: 300px;  /* Minimum width added */
    width: 100%;
    margin: 0 auto 2rem auto;
}
And on mobile (responsive):

css
@media (max-width: 768px) {
    .search-box {
        min-width: 250px;  /* Slightly smaller on mobile */
    }
}
What this does:
Breakpoint	Min Width	Max Width
Desktop (≥768px)	300px	500px
Mobile (<768px)	250px	500px
The search box will now:

Never shrink below 300px on desktop

Never shrink below 250px on mobile

Always be centered with margin: 0 auto

Take up full available width up to 500px

Now we have almost all the colours correct on articles, how do we change the background colour of the hamburger menu.
Great question! The hamburger menu is typically controlled by JavaScript/CSS in your header.cfm file or a separate mobile navigation CSS file.

Here's how to find and change the hamburger menu background:
Step 1: Identify where the hamburger menu is styled
The hamburger menu is likely in one of these locations:

/includes/header.cfm - Inline styles or embedded CSS

/css/universal.css - Global mobile navigation styles

/css/navigation.css - Dedicated nav styles

Inline styles - Directly in the header file

Step 2: Common hamburger menu CSS selectors to change
Add these to your article_style.css (or the relevant CSS file):

css
/* ============================================ */
/* HAMBURGER MENU - MOBILE NAVIGATION          */
/* ============================================ */

/* Hamburger button/icon */
.menu-icon, 
.hamburger,
.navbar-toggler,
.mobile-menu-toggle,
.nav-toggle {
    background: #787c60 !important;
}

/* Hamburger lines (the three bars) */
.menu-icon span,
.hamburger span,
.navbar-toggler-icon {
    background-color: #ffffff !important;
}

/* Mobile menu panel (when open) */
.mobile-menu,
.nav-menu,
.side-menu,
.mobile-nav {
    background: #a6ab84 !important;
}

/* Mobile menu links */
.mobile-menu a,
.nav-menu a,
.side-menu a,
.mobile-nav a {
    color: #1a2a2a !important;
}

.mobile-menu a:hover,
.nav-menu a:hover,
.side-menu a:hover,
.mobile-nav a:hover {
    color: #787c60 !important;
}
Step 3: If you can't find the selector, use browser inspector
Right-click on the hamburger menu icon

Select Inspect or Inspect Element

Look for the class name of the hamburger button (e.g., .hamburger, .menu-icon, .navbar-toggler)

Note the class name and any child elements

Step 4: Once you have the class name, add this to article_style.css:
css
/* Replace .hamburger with your actual class name */
.hamburger {
    background: #787c60 !important;
}

.hamburger .bar,
.hamburger span,
.hamburger div {
    background-color: #ffffff !important;
}

/* Mobile menu background when open */
.mobile-menu.active,
.nav-menu.open {
    background: #a6ab84 !important;
}
Step 5: If the hamburger is in header.cfm, add inline style:
html
<div class="hamburger" style="background: #787c60;">
    <span style="background: #ffffff;"></span>
    <span style="background: #ffffff;"></span>
    <span style="background: #ffffff;"></span>
</div>
Quick fix - Add to your article_style.css:
css
/* ============================================ */
/* HAMBURGER MENU OVERRIDES                    */
/* ============================================ */

/* Common hamburger class names */
.hamburger,
.hamburger-menu,
.menu-trigger,
.navbar-toggler,
.mobile-nav-trigger,
[class*="hamburger"],
[class*="menu-trigger"],
[class*="navbar-toggler"] {
    background: #787c60 !important;
    border: none !important;
}

/* Hamburger icon lines */
.hamburger span,
.hamburger div,
.hamburger i,
.navbar-toggler-icon {
    background-color: #ffffff !important;
}

/* Mobile menu container */
.mobile-menu,
.menu-panel,
.nav-collapse,
.sidebar-menu {
    background: #a6ab84 !important;
}

/* Mobile menu links */
.mobile-menu a,
.menu-panel a {
    color: #1a2a2a !important;
}

.mobile-menu a:hover,
.menu-panel a:hover {
    color: #787c60 !important;
}


    /* ============================================ */
    /* TWO COLUMN LAYOUT                           */
    /* ============================================ */
    
    .two-columns {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 2rem;
    }
    
    /* ============================================ */
    /* ARTICLE CARDS - WHITE CONTAINERS            */
    /* ============================================ */
    
    .articles-list {
        background: transparent;
    }
    
    .article-card {
        background: #ffffff;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border: 1px solid #e0e0e0;
    }
    
    .article-title {
        font-family: 'Abril Fatface', serif;
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    /* ARTICLE HEADERS */
    .article-title a {
        color: #787c60 !important;
        text-decoration: none;
    }
    
    .article-title a:hover {
        color: #ff9900 !important;
    }
    
    .article-meta {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.8rem;
        color: #888888;
        margin-bottom: 1rem;
    }
    
    .article-image img {
        width: 100%;
        max-height: 300px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 1rem;
    }
    
    .article-intro {
        color: #555555;
        line-height: 1.6;
        margin-bottom: 1rem;
    }
    
    .read-more {
        display: inline-block;
        color: #787c60;
        text-decoration: none;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 0.85rem;
    }
    
    .read-more:hover {
        text-decoration: plain;
    }
    
    /* ============================================ */
    /* SIDEBAR WIDGETS - WHITE CONTAINERS          */
    /* ============================================ */
    
    .sidebar {
        align-self: start;
    }
    
    .sidebar-widget {
        background: #ffffff;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border: 1px solid #e0e0e0;
    }
    
    /* SIDEBAR TITLES (Archive & About) */
    .sidebar-widget h3 {
        font-family: 'Abril Fatface', serif;
        font-size: 1.3rem;
        color: #787c60 !important;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #787c60 !important;
    }
    
    .archive-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .archive-list li {
        margin-bottom: 0.5rem;
    }
    
    .archive-list li a {
        display: block;
        padding: 0.4rem 0;
        color: #555555;
        text-decoration: none;
        font-size: 0.9rem;
    }
    
    .archive-list li a:hover {
        color: #ff9900;
        padding-left: 0.5rem;
    }
    
    .archive-count {
        color: #888888;
        font-size: 0.7rem;
    }
    
    /* ============================================ */
    /* NO RESULTS - WHITE CONTAINER                */
    /* ============================================ */
    
    .no-results {
        text-align: center;
        padding: 3rem;
        background: #ffffff;
        border-radius: 12px;
        color: #666666;
    }
    
    /* ============================================ */
    /* RESPONSIVE                                  */
    /* ============================================ */


    @media (max-width: 768px) {
        .two-columns {
            grid-template-columns: 1fr;
        }
        .search-box {
        min-width: 250px;  /* Slightly smaller on mobile */
        }
        .articles-container {
            padding: 1rem;
        }
        .page-header h1 {
            font-size: 2rem;
        }
    }