/* newsletters/style.css */

/* --- Custom Variables using ARES brand colors --- */
:root {
    /* Primary color: Green from the header/logo, used for links, borders */
    --ares-primary: #0A6424; 
    /* Secondary color: Dark/Black from the main navbar/footer, used for contrast details */
    --ares-secondary: #212529; 
    /* Light background, matching the site's main body/sections */
    --ares-light-bg: #fff; 
}

/* --- Archive Header for Brand Consistency --- */
.newsletter-header {
    background-color: var(--ares-secondary);
    color: white;
    padding: 20px 0;
    text-align: center;
    margin-bottom: 3rem;
}

.newsletter-header h1 {
    font-size: 2.5em;
    margin: 10px 0 0;
}

/* * UPDATED: Container for the Logo (White box) 
* Increased vertical padding (top/bottom) to ensure space for the full height of the wireframe.
* Increased horizontal padding to account for the width.
*/
.logo-white-box {
    display: inline-block;
    background-color: white;
    padding: 25px 50px; /* Increased top/bottom padding (15px -> 25px) to prevent vertical clipping */
    border-radius: 8px;
    margin-bottom: 20px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Set a max width to prevent the box itself from getting too wide on large screens */
    max-width: 90%; 
}

/* * UPDATED: Logo Scaling 
* Fixed the max-height, forcing the image to scale down proportionally based on height, 
* but now the container padding is large enough to show the full graphic.
*/
.header-logo {
    max-height: 80px; /* Set a height limit that controls the size of the graphic */
    max-width: 100%; 
    width: auto;
    height: auto;
    display: block; 
}

/* --- Archive Grid Layout (Matches site's content container width) --- */
.newsletter-grid-container {
    max-width: 1140px; 
    margin: 50px auto;
    padding: 0 1rem; 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}

/* --- Newsletter Card Styling (Card on white background) --- */
.newsletter-card {
    border: 1px solid #dee2e6; 
    border-radius: 0.25rem; 
    padding: 25px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); 
    background-color: var(--ares-light-bg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.newsletter-card:hover {
    transform: translateY(-3px); 
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1); 
}

.newsletter-card h2 {
    font-size: 1.6em;
    color: var(--ares-secondary); 
    margin-top: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ares-primary); 
}

.newsletter-card h2 a {
    text-decoration: none;
    color: inherit;
}

.newsletter-card .date {
    font-size: 0.9em;
    color: #6c757d; 
    margin-bottom: 20px;
}

/* --- Read More Button Styling (Matching btn-primary: Green background) --- */
.read-more.button-style {
    display: inline-block;
    font-weight: 700; 
    text-decoration: none;
    padding: 0.375rem 0.75rem; 
    font-size: 1rem;
    border-radius: 0.25rem;
    color: #fff;
    background-color: var(--ares-primary);
    border: 1px solid var(--ares-primary);
    transition: background-color 0.15s ease-in-out;
}

.read-more.button-style:hover {
    background-color: #084D1D; 
    border-color: #084D1D;
}

/* --- Individual Article Page Container (White page content) --- */
.article-container {
    max-width: 850px;
    margin: 50px auto;
    padding: 20px;
    line-height: 1.6;
    font-size: 1.1em;
}

.article-container h1 {
    color: var(--ares-secondary); 
    border-bottom: 3px solid var(--ares-primary); 
    padding-bottom: 15px;
}

.article-container h2 {
    color: var(--ares-primary); 
    margin-top: 40px;
}

.article-container .meta-info {
    color: #6c757d;
    font-style: italic;
    margin-bottom: 30px;
}

/* --- Footer for consistency (if not including the site's PHP footer) --- */
.site-footer {
    background-color: var(--ares-secondary);
    color: rgba(255, 255, 255, 0.5);
    padding: 1.5rem 0; 
    text-align: center;
}

.site-footer a {
    color: white; 
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

}
<style>
  .ares-btn{
    display:inline-block;
    background:#1B5E20;           /* dark green */
    color:#fff;
    text-decoration:none;
    padding:12px 20px;
    border-radius:10px;           /* rounded corners */
    font:600 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    letter-spacing:.2px;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
    transition:transform .05s ease, filter .15s ease;
  }
  .ares-btn:hover{ filter:brightness(1.08); }
  .ares-btn:active{ transform:translateY(1px); }
</style>
}