/* ============================
   Base Reset
============================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    background: #fff;
    color: #222;
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================
   Layout
============================ */
.container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 16px;
}

header, footer {
    background: #f2f2f2;
    padding: 16px;
}

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

main {
    padding: 20px 0;
}

/* ============================
   Tables
============================ */
table {
    width: 100%;
    border-collapse: collapse;
}

td, th {
    padding: 10px;
    border: 1px solid #ccc;
}

/* ============================
   Footer
============================ */
footer {
    text-align: center;
    font-size: 0.9rem;
    color: #444;
}

/* ============================
   Responsive
============================ */

/* Tablets */
@media (max-width: 900px) {
    nav {
        flex-direction: column;
    }
}

/* Mobile */
@media (max-width: 600px) {
    body {
        font-size: 15px;
    }

    header, footer {
        text-align: center;
    }

    table, thead, tbody, th, td, tr {
        display: block;
    }

    td {
        border: none;
        border-bottom: 1px solid #ddd;
    }
}


/* ============================
   Responsive Navigation
============================ */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hamburger {
    display: none;
    font-size: 26px;
    cursor: pointer;
}

.nav-links {
    display: flex;
    gap: 15px;

    flex-wrap: wrap;
}
/* Apple icons for menu items (restored) */
.nav-links a {
    display: inline-flex;
    align-items: center;
    background-image: url(images/apple.png);
    background-repeat: no-repeat;
    background-position: 6px center;
    background-size: 20px 20px;
    padding: 8px 10px 8px 32px;
    text-decoration: none;
    color: inherit;
}
.nav-links a:hover {
    text-decoration: underline;
}


@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-top: 10px;
    }

    .nav-links.active {
        display: flex;
    }
}


/* Page title (consistent across pages) */
.page-title {
    text-align: center;
    color: red;
    margin: 20px 0 10px;
}


/* === SEMANTIC RESPONSIVE OVERRIDES === */
/* Keep header + body widths consistent */
body {
  margin: 0;
  padding: 0;
}

header, main, footer, nav {
  box-sizing: border-box;
}

/* Ensure centered content area is consistent site-wide */
main.most, .most, .container {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Make header table follow the same width as content area */
header table {
  width: 100%;
}

/* Narrow nav compared to header on desktop */
nav {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Add left/right padding to links so the nav doesn't look too wide */
.nav-links a {
  padding: 0.4em 0.9em;
}

/* Ensure logo images don't overflow */
header img {
  max-width: 100%;
  height: auto;
}


/* === HEADER+NAV CONSISTENCY OVERRIDES v2 === */
/* Constrain overall page content */
main.most, .most, .container {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Header table: consistent alignment */
table.site-header{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border-collapse: collapse;
  table-layout: fixed;
}
table.site-header td{
  vertical-align: middle;
  padding: 10px 8px;
}
table.site-header td.hdr-left,
table.site-header td.hdr-right{
  width: 140px;
}
table.site-header td.hdr-center{
  text-align: center;
}
table.site-header img.logo{
  max-height: 90px;
  width: auto;
  height: auto;
  display: inline-block;
}

/* Nav: slightly narrower than header on desktop */
nav{
  max-width: 950px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Ensure apple icon displays cleanly */
.nav-links a{
  background-image: url(images/apple.png);
  background-repeat: no-repeat;
  background-position: 6px center;
  background-size: 20px 20px;
  padding-left: 32px;
}


/* ===== Consolidated page-specific styles ===== */


/* Page: index.html */
body.page-index /* Specific enhancements for index page photos */
        .officer-box{
            background-color: #ffffff;
            border: 5px solid red;
            padding: 15px;
            margin-bottom: 25px;
            text-align: center;
            color: #000;
        }body.page-index .officer-box img{
            border: 10px solid #FF9900;
            /* Added max-width to prevent the FREA photo from being too large */
            max-width: 500px; 
            width: 100%;
            height: auto;
            object-fit: contain;
        }body.page-index .info-text{
            background-color: white;
            padding: 20px;
            border: 5px solid #FF9900;
            color: black;
            margin-bottom: 20px;
        }body.page-index .info-text b{ color: red; font-size: 1.2em; }


/* Page: application.html */
body.page-application .application-container{
            background-color: #ffffff;
            border: 10px solid #FF9900;
            padding: 30px;
            color: #000000;
        }body.page-application /* Box container */
        .app-box{
            border: 5px solid red;
            background-color: #f9f9f9;
            padding: 25px;
            margin-bottom: 30px;
        }body.page-application /* Section titles - No outlines, body.page-application centered highlight */
        .app-box h3{
            color: red;
            background-color: #FFFFE6; 
            padding: 10px;
            margin-top: -5px; 
            margin-bottom: 20px;
            font-family: 'Comic Sans MS', cursive;
            text-align: center;
            border: none; /* Removed outlines as requested */
        }body.page-application /* Form Field Styling - Added Outlines */
        .form-row{
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 15px;
            align-items: center;
        }body.page-application .form-row label{
            width: 140px;
            font-weight: bold;
            color: #000080;
        }body.page-application .form-row input[type="text"]{
            flex: 1;
            border: 1px solid #FF9900; /* Added outline to form fields */
            background: #fff;
            padding: 5px;
            font-family: 'Comic Sans MS', cursive;
        }body.page-application /* Outlines for Checkbox Items */
        .checkbox-group{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }body.page-application .checkbox-item{
            display: flex;
            align-items: center;
            border: 1px solid #ccc; /* Subtle outline for checkbox groups */
            padding: 5px;
            background: #fff;
        }body.page-application .checkbox-item input{ margin-right: 10px; }body.page-application .instruction-text{
            text-align: center;
            font-weight: bold;
            color: red;
            background-color: #FFFFE6;
            padding: 15px;
            border: 2px dashed red;
        }


/* Page: happenings.html */
body.page-happenings /* Specific enhancements for Happenings layout */
        .meeting-box{
            background-color: #ffcc00;
            border: 5px solid #00cc00;
            padding: 20px;
            color: #000;
            margin-bottom: 30px;
        }body.page-happenings .fundraiser-box{
            background-color: #ccffff;
            border: 5px solid #00cc00;
            padding: 20px;
            color: #000;
            margin-bottom: 30px;
        }body.page-happenings .program-list-box{
            background-color: #99ffcc;
            border: 5px solid red;
            padding: 20px;
            color: #000;
            margin-top: 30px;
        }body.page-happenings .gallery-grid{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            background-color: #CCFFCC;
            border: 5px solid #33CC33;
            padding: 20px;
            text-align: center;
        }body.page-happenings .gallery-grid img{
            border: 2px solid #6699CC;
            max-width: 100%;
            height: auto;
        }body.page-happenings .meeting-details-table{
            width: 100%;
            border-collapse: collapse;
        }body.page-happenings .meeting-details-table td{
            padding: 10px;
            vertical-align: top;
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }


/* Page: history.html */
body.page-history .history-container{
            background-color: #ffffff;
            border: 10px solid #FF9900;
            padding: 30px;
            color: #000000;
            line-height: 1.6;
            display: block;
        }body.page-history /* Top Group Photo - Smaller and Floated Right */
        .top-group-photo{
            float: right;
            width: 300px;
            border: 5px solid #FF9900;
            margin-left: 20px;
            margin-bottom: 15px;
            text-align: center;
        }body.page-history /* Edna Jacobs Photo - Floated Left with Text Wrap */
        .founder-frame{
            float: left;
            border: 5px solid #FF9900;
            margin-right: 20px;
            margin-bottom: 10px;
        }body.page-history /* Ensures text wraps and doesn't break layout */
        .history-container p{
            display: block;
            margin-bottom: 15px;
            clear: none; 
        }body.page-history .president-table{
            width: 80%;
            margin: 20px auto;
            border: 5px solid #33cc33;
            border-collapse: collapse;
            background-color: #99ccff;
            clear: both; /* Table starts only after floated images/text end */
        }body.page-history .president-table th, body.page-history .president-table td{
            border: 1px solid #ff0066;
            padding: 8px;
            text-align: center;
            color: #000;
        }body.page-history .photo-gallery{
            text-align: center;
            margin-top: 30px;
            clear: both;
        }body.page-history .photo-gallery img{
            border: 5px solid #FF9900;
            margin: 5px;
            height: 180px;
            width: auto;
        }body.page-history .caption{
            font-size: 0.85em;
            margin-top: 5px;
            font-weight: bold;
            line-height: 1.2;
            padding: 5px;
            color: #000;
        }


/* Page: culturalaffairs.html */
body.page-culturalaffairs /* Specific enhancements for Cultural Affairs layout */
        .cultural-header{
            display: flex;
            align-items: center;
            background-color: #ffffff;
            border: 5px solid red;
            padding: 20px;
            margin-bottom: 25px;
            color: #000;
        }body.page-culturalaffairs .cultural-header img{
            border: 5px solid #FF9900;
            margin-right: 20px;
        }body.page-culturalaffairs .cultural-content{
            background-color: #ffffff;
            border: 5px solid #FF9900;
            padding: 30px;
            color: #000000;
            line-height: 1.6;
        }body.page-culturalaffairs .cultural-content h3{
            color: red;
            border-bottom: 2px solid green;
            padding-bottom: 5px;
            margin-top: 0;
        }body.page-culturalaffairs .contact-highlight{
            background-color: #FFFFE6;
            border: 2px dashed red;
            padding: 15px;
            margin-top: 25px;
            text-align: center;
        }body.page-culturalaffairs .museum-list{
            column-count: 2;
            column-gap: 20px;
            list-style-type: square;
            padding-left: 20px;
        }
        
@media (max-width: 800px) {
body.page-culturalaffairs .museum-list{ column-count: 1; }
        
}


/* Page: legislative.html */
body.page-legislative /* Specific enhancements for Legislative layout */
        .legislative-section{
            background-color: #ffffff;
            border: 5px solid red;
            margin-bottom: 30px;
            padding: 20px;
            color: #000000;
        }body.page-legislative .legislative-section h3{
            color: red;
            text-align: left;
            border-bottom: 2px solid green;
            padding-bottom: 5px;
            margin-top: 0;
            font-weight: bold;
        }body.page-legislative .legislative-link-box{
            background-color: #f9f9f9;
            border-left: 5px solid #FF9900;
            padding: 15px;
            margin: 15px 0;
        }


/* Page: bcreascholarshipapplication.html */
body.page-bcreascholarshipapplication /* Specific enhancements for Scholarship layout */
        .scholarship-section{
            background-color: #ffffff;
            border: 5px solid red;
            margin-bottom: 30px;
            padding: 20px;
            color: #000000;
        }body.page-bcreascholarshipapplication .scholarship-section h3{
            color: red;
            text-align: left;
            border-bottom: 2px solid green;
            padding-bottom: 5px;
            margin-top: 0;
            font-weight: bold;
        }body.page-bcreascholarshipapplication .download-list{
            list-style-type: none;
            padding-left: 0;
        }body.page-bcreascholarshipapplication .download-list li{
            margin-bottom: 15px;
            padding: 10px;
            background-color: #f9f9f9;
            border-left: 5px solid #FF9900;
        }body.page-bcreascholarshipapplication .morris-grant-box{
            background-color: #FFFFE6;
            border: 5px solid #FF9900;
            padding: 20px;
            margin-top: 20px;
            color: #000;
        }


/* Page: archives.html */
body.page-archives /* Archive-specific Styles */
        .spotlight-entry{
            background-color: #ffffff;
            border: 5px solid red;
            margin-bottom: 30px;
            padding: 20px;
            color: #000000;
            overflow: auto; /* Clears floats so the next box starts below */
        }body.page-archives /* Updated wrapping styles */
        .spotlight-img-right{
            float: right;
            display: block;
            margin-left: 20px;
            margin-bottom: 10px;
            border: 3px solid green;
            max-width: 200px;
            height: auto;
        }body.page-archives .spotlight-img-left{
            float: left;
            display: block;
            margin-right: 20px;
            margin-bottom: 10px;
            border: 3px solid green;
            max-width: 400px;
            height: auto;
        }body.page-archives /* Ensure paragraphs do NOT clear the float */
        .spotlight-entry p{
            clear: none !important; 
            margin-bottom: 10px;
            display: block;
        }body.page-archives .spotlight-entry h3{
            color: red;
            text-align: left;
            border-bottom: 2px solid green;
            padding-bottom: 5px;
            margin-top: 0;
        }body.page-archives .death-notice{
            font-style: italic;
            color: #555;
            display: block;
            margin-top: 10px;
            font-size: 0.9em;
            clear: both; /* Puts death notice below the wrapped text/image */
        }body.page-archives .gallery-container{
            background-color: #3300FF;
            padding: 20px;
            border: 5px solid red;
            text-align: center;
        }body.page-archives .gallery-row{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
        }body.page-archives .gallery-row img{
            border: 2px solid white;
            max-height: 200px;
            width: auto;
            object-fit: contain; 
        }body.page-archives .eternal-entry{
            margin-bottom: 25px;
            line-height: 1.5;
            overflow: auto;
        }


/* Page: whatwedo.html */
body.page-whatwedo /* Specific enhancements for What We Do layout */
        .activity-gallery{
            background-color: #ffffff;
            border: 10px solid #FF9900;
            padding: 20px;
            margin-bottom: 30px;
            text-align: center;
            color: #000;
        }body.page-whatwedo .activity-gallery img{
            border: 5px solid #FF9900;
            max-width: 100%;
            height: auto;
            margin-bottom: 10px;
        }body.page-whatwedo .section-header{
            color: #FFFF00;
            font-family: "Comic Sans MS", cursive;
            font-size: 1.5em;
            margin-bottom: 20px;
        }body.page-whatwedo .scholarship-box{
            background-color: #ffffff;
            border: 10px solid #FF9900;
            padding: 20px;
            margin-bottom: 30px;
            color: #000;
        }


/* Page: literacy.html */
body.page-literacy /* Specific enhancements for Literacy layout */
        .literacy-header{
            display: flex;
            align-items: center;
            background-color: #ffffff;
            border: 5px solid red;
            padding: 20px;
            margin-bottom: 25px;
            color: #000;
        }body.page-literacy .literacy-header img{
            border: 5px solid #FF9900;
            margin-right: 20px;
        }body.page-literacy .essay-content{
            background-color: #ffffff;
            border: 10px solid #FF9900;
            padding: 30px;
            color: #000000;
            line-height: 1.6;
        }body.page-literacy .essay-content h2, body.page-literacy .essay-content h3{
            color: lime;
            text-align: center;
            font-family: 'Comic Sans MS', cursive;
        }body.page-literacy .contact-highlight{
            background-color: #FFFFE6;
            border: 2px dashed red;
            padding: 15px;
            margin-top: 25px;
            text-align: center;
        }body.page-literacy .download-links{
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            padding: 15px;
            margin-top: 25px;
            text-align: center;
        }


/* Page: newsletter.html */
body.page-newsletter .newsletter-container{
            background-color: #ffffff;
            border: 10px solid #FF9900;
            padding: 30px;
            color: #000000;
            line-height: 1.6;
            overflow: auto;
        }body.page-newsletter /* Top Group Photo - Smaller and Floated Right */
        .top-group-photo{
            float: right;
            width: 300px;
            border: 5px solid #FF9900;
            margin-left: 20px;
            margin-bottom: 15px;
            text-align: center;
            background: white;
        }body.page-newsletter .caption{
            font-size: 0.85em;
            margin-top: 5px;
            font-weight: bold;
            line-height: 1.2;
            padding: 5px;
            color: #000;
        }body.page-newsletter /* Alert Box */
        .alert-box{
            background-color: #FFFFE6;
            border: 2px solid red;
            padding: 15px;
            margin-bottom: 20px;
            text-align: center;
        }body.page-newsletter .alert-text{
            font: italic 22px Arial;
            color: red;
            font-weight: bold;
        }body.page-newsletter .newsletter-item{
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            text-align: center;
        }body.page-newsletter .newsletter-item a{
            font-weight: bold;
            text-decoration: none;
            color: red;
        }body.page-newsletter .newsletter-item a:hover{
            color: green;
        }body.page-newsletter .latest-news-box{
            background-color: #ffffff;
            border: 5px solid green;
            padding: 20px;
            margin-top: 30px;
            color: #000;
            clear: both;
        }


/* ===== Utility helpers (from inline styles) ===== */
.text-red{color:red;}
.text-lime{color:lime;}
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.mb-5{margin-bottom:5px;}
.mt-20{margin-top:20px;}
.pt-0{padding-top:0;}
.pb-0{padding-bottom:0;}
.w-100{width:100%;}



/* ===== Semantic helpers (from remaining inline styles) ===== */
.style1{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.style2{ font-size: 1.2em; font-family: 'Comic Sans MS'; }



/* ===== Dark mode support ===== */
/* Enable native form controls to adapt */
:root { color-scheme: light dark; }

/* Light theme defaults (CSS variables) */
:root{
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #111111;
  --muted-text: #333333;
  --link: #0645ad;
  --link-visited: #0b0080;
  --border: rgba(0,0,0,0.15);
  --nav-bg: #ffffff;
  --nav-text: #111111;
  --nav-hover-bg: rgba(0,0,0,0.06);
}

/* Auto dark theme */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #071a2f;
    --surface: #0b2542;
    --text: #e8eaf0;
    --muted-text: #c8ccda;
    --link: #8ab4f8;
    --link-visited: #c58af9;
    --border: rgba(255,255,255,0.18);
    --nav-bg: #141824;
    --nav-text: #e8eaf0;
    --nav-hover-bg: rgba(255,255,255,0.10);
  }
}

/* Apply theme */
html, body{
  background: var(--bg);
  color: var(--text);
}

a{ color: var(--link); }
a:visited{ color: var(--link-visited); }

/* Common containers */
header, main, footer, nav, .most, .container{
  background: transparent;
  color: inherit;
}

/* Tables and boxed areas */
table{
  border-color: var(--border);
}
td, th{
  border-color: var(--border);
}

/* Navigation */
nav{
  background: var(--nav-bg);
  color: var(--nav-text);
}

.nav-links a{
  color: var(--nav-text);
  border-radius: 6px;
}

.nav-links a:hover,
.nav-links a:focus{
  background: var(--nav-hover-bg);
}

/* Make “red/lime” helper colors readable in dark mode */
@media (prefers-color-scheme: dark){
  .text-red{ color: #ff6b6b; }
  .text-lime{ color: #7CFC98; }
}



/* Manual theme override support */
html[data-theme="light"]{
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #111111;
  --muted-text: #333333;
  --link: #0645ad;
  --link-visited: #0b0080;
  --border: rgba(0,0,0,0.15);
  --nav-bg: #ffffff;
  --nav-text: #111111;
  --nav-hover-bg: rgba(0,0,0,0.06);
}
html[data-theme="dark"]{
  --bg: #071a2f;
  --surface: #0b2542;
  --text: #e8eaf0;
  --muted-text: #c8ccda;
  --link: #8ab4f8;
  --link-visited: #c58af9;
  --border: rgba(255,255,255,0.18);
  --nav-bg: #141824;
  --nav-text: #e8eaf0;
  --nav-hover-bg: rgba(255,255,255,0.10);
}



/* Theme toggle button */
.nav-container{
  justify-content: flex-start;
}
.nav-links{
  margin-left: auto;
}
.theme-toggle{
  margin-left: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  line-height: 1;
  font-size: 16px;
}
.theme-toggle:hover,
.theme-toggle:focus{
  background: var(--nav-hover-bg);
}
@media (max-width: 768px){
  /* keep toggle accessible when menu collapses */
  .theme-toggle{ margin-left: auto; }
}



/* Ensure key containers pick up theme surfaces */
header, header.container, main.most, .most, .container{
  background: var(--surface);
}



/* Header table: remove grid/borders */
table.site-header, table.site-header td, table.site-header th{
  border: none !important;
}
table.site-header{
  border-collapse: collapse;
}



/* Theme toggle bar (top-right, above header) */
.theme-toggle-bar{
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 16px 0 16px;
  display: flex;
  justify-content: flex-end;
}
/* Slightly smaller button for top bar */
.theme-toggle{
  margin-left: 0;
}



/* Ensure .most responds to theme toggle */
.most{
  background-color: var(--surface);
  color: var(--text);
}
html[data-theme="light"] .most{
  background-color: var(--surface);
  color: var(--text);
}
html[data-theme="dark"] .most{
  background-color: var(--surface);
  color: var(--text);
}



/* ===== Dark mode contrast tuning for tables & forms ===== */
@media (prefers-color-scheme: dark){
  table{
    background-color: #0b2542;
  }
  th{
    background-color: #10355f;
    color: #e8eaf0;
  }
  td{
    background-color: #0b2542;
    color: #e8eaf0;
  }
  table tr:nth-child(even) td{
    background-color: #0e2e52;
  }
  table, th, td{
    border-color: rgba(255,255,255,0.25);
  }

  /* Form controls */
  input, textarea, select{
    background-color: #0b2542;
    color: #e8eaf0;
    border: 1px solid rgba(255,255,255,0.35);
  }
  input::placeholder,
  textarea::placeholder{
    color: #c8ccda;
  }
  input:focus, textarea:focus, select:focus{
    outline: none;
    border-color: #8ab4f8;
    box-shadow: 0 0 0 2px rgba(138,180,248,0.35);
  }

  /* Buttons */
  button, input[type="submit"], input[type="button"]{
    background-color: #10355f;
    color: #e8eaf0;
    border: 1px solid rgba(255,255,255,0.35);
  }
  button:hover,
  input[type="submit"]:hover,
  input[type="button"]:hover{
    background-color: #164a85;
  }
}

/* Manual override (dark) */
html[data-theme="dark"] table{
  background-color: #0b2542;
}
html[data-theme="dark"] th{
  background-color: #10355f;
  color: #e8eaf0;
}
html[data-theme="dark"] td{
  background-color: #0b2542;
  color: #e8eaf0;
}
html[data-theme="dark"] table tr:nth-child(even) td{
  background-color: #0e2e52;
}
html[data-theme="dark"] table, 
html[data-theme="dark"] th, 
html[data-theme="dark"] td{
  border-color: rgba(255,255,255,0.25);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background-color: #0b2542;
  color: #e8eaf0;
  border: 1px solid rgba(255,255,255,0.35);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color: #c8ccda;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus{
  border-color: #8ab4f8;
  box-shadow: 0 0 0 2px rgba(138,180,248,0.35);
}



/* Newsletter archive */
.newsletter-list {
  list-style: none;
  padding-left: 1rem;
}
.newsletter-list li {
  margin: 0.3rem 0;
}
details summary {
  cursor: pointer;
  font-size: 1.1rem;
  margin: 0.75rem 0;
}

/* Newsletter highlight box */
.newsletter-highlight{
  margin: 1rem 0 1.25rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
}
.newsletter-highlight__label{
  font-size: 0.9rem;
  opacity: 0.85;
  margin-bottom: 0.35rem;
}
.newsletter-highlight__title{
  font-size: 1.2rem;
  font-weight: 700;
}
@media (prefers-color-scheme: dark){
  .newsletter-highlight{ background: rgba(255,255,255,0.06); }
}
html[data-theme="dark"] .newsletter-highlight{ background: rgba(255,255,255,0.06); }



/* ===== True dark mode "dark boxes" styling ===== */
/* Darker page background */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #041428;          /* darker blue page background */
    --surface: #0b2542;     /* card surface */
    --surface-2: #0e2f55;   /* zebra / alt surface */
    --card-shadow: 0 10px 30px rgba(0,0,0,0.35);
  }

  /* Give the page a subtle depth */
  body{
    background: radial-gradient(1200px 600px at 15% 10%, rgba(255,255,255,0.06), rgba(255,255,255,0.0) 55%),
                linear-gradient(180deg, #061a33 0%, #041428 100%);
  }

  /* Make main content feel like a "dark box" */
  main.most, .most{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--card-shadow);
  }

  /* Header and nav as dark surfaces too */
  header, header.container{
    background: var(--surface);
  }
  nav{
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }

  /* Override legacy light backgrounds applied via HTML bgcolor attributes */
  [bgcolor], table[bgcolor], td[bgcolor], th[bgcolor]{
    background-color: var(--surface) !important;
    color: var(--text) !important;
  }

  /* Make common boxed sections dark as well */
  fieldset, .newsletter-highlight{
    background: var(--surface);
    border: 1px solid var(--border);
  }

  /* Any element with an explicit white background gets darkened */
  [style*="background:#fff"], [style*="background: #fff"], 
  [style*="background:#ffffff"], [style*="background: #ffffff"],
  [style*="background-color:#fff"], [style*="background-color: #fff"],
  [style*="background-color:#ffffff"], [style*="background-color: #ffffff"]{
    background: var(--surface) !important;
    color: var(--text) !important;
  }

  /* Ensure images/figures in boxes don't look like they're floating */
  img{
    background: transparent;
  }
}

/* Manual theme override: dark boxes */
html[data-theme="dark"] body{
  background: radial-gradient(1200px 600px at 15% 10%, rgba(255,255,255,0.06), rgba(255,255,255,0.0) 55%),
              linear-gradient(180deg, #061a33 0%, #041428 100%);
}
html[data-theme="dark"] main.most,
html[data-theme="dark"] .most{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
html[data-theme="dark"] header,
html[data-theme="dark"] header.container,
html[data-theme="dark"] nav{
  background: var(--surface);
}
html[data-theme="dark"] [bgcolor],
html[data-theme="dark"] table[bgcolor],
html[data-theme="dark"] td[bgcolor],
html[data-theme="dark"] th[bgcolor]{
  background-color: var(--surface) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] fieldset,
html[data-theme="dark"] .newsletter-highlight{
  background: var(--surface);
  border: 1px solid var(--border);
}



/* ===== Dark mode: convert content boxes to dark surfaces ===== */
@media (prefers-color-scheme: dark){
  .spotlight-entry,
  .cultural-content,
  .scholarship-box,
  .activity-gallery{
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
  }
}

/* Manual override */
html[data-theme="dark"] .spotlight-entry,
html[data-theme="dark"] .cultural-content,
html[data-theme="dark"] .scholarship-box,
html[data-theme="dark"] .activity-gallery{
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}



/* ===== Make inline/background-color attributes responsive to theme ===== */
/* In dark mode, override legacy inline background colors so they don't stay light. */
@media (prefers-color-scheme: dark){
  /* HTML bgcolor attributes (old-school tables/td) */
  [bgcolor], table[bgcolor], td[bgcolor], th[bgcolor], tr[bgcolor]{
    background-color: var(--surface) !important;
    color: var(--text) !important;
  }

  /* Inline background/background-color styles */
  [style*="background-color"],
  [style*="background:"]{
    background-color: var(--surface) !important;
    color: var(--text) !important;
  }
}

/* Manual toggle override */
html[data-theme="dark"] [bgcolor],
html[data-theme="dark"] table[bgcolor],
html[data-theme="dark"] td[bgcolor],
html[data-theme="dark"] th[bgcolor],
html[data-theme="dark"] tr[bgcolor]{
  background-color: var(--surface) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] [style*="background-color"],
html[data-theme="dark"] [style*="background:"]{
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

/* Keep intentional accent elements readable if they use bright backgrounds */
@media (prefers-color-scheme: dark){
  .nav-links a, .theme-toggle, .hamburger{ background-color: transparent !important; }
}
html[data-theme="dark"] .nav-links a,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .hamburger{
  background-color: transparent !important;
}


/* ===== HARD OVERRIDE: eliminate white backgrounds in dark mode ===== */
@media (prefers-color-scheme: dark){
  .history-container,
  .info-text,
  .officer-box,
  .scholarship-section,
  .morris-grant-box,
  .literacy-header,
  .essay-content,
  .legislative-section,
  .cultural-header,
  .contact-highlight,
  .application-container,
  .app-box,
  .instruction-text{
    background-color: var(--surface) !important;
    color: var(--text) !important;
  }
}

/* Manual toggle */
html[data-theme="dark"] .history-container,
html[data-theme="dark"] .info-text,
html[data-theme="dark"] .officer-box,
html[data-theme="dark"] .scholarship-section,
html[data-theme="dark"] .morris-grant-box,
html[data-theme="dark"] .literacy-header,
html[data-theme="dark"] .essay-content,
html[data-theme="dark"] .legislative-section,
html[data-theme="dark"] .cultural-header,
html[data-theme="dark"] .contact-highlight,
html[data-theme="dark"] .application-container,
html[data-theme="dark"] .app-box,
html[data-theme="dark"] .instruction-text{
  background-color: var(--surface) !important;
  color: var(--text) !important;
}



/* ===== Dark mode overrides for legacy page-specific box styles ===== */
/* Some page-scoped rules set hard-coded light backgrounds (e.g., history-container). Force theme variables in dark mode. */
@media (prefers-color-scheme: dark){
  body .info-text,
  body .officer-box,
  body .scholarship-section,
  body .morris-grant-box,
  body .literacy-header,
  body .essay-content,
  body .legislative-section,
  body .cultural-header,
  body .contact-highlight,
  body .history-container,
  body .application-container,
  body .app-box,
  body .instruction-text{
    background-color: var(--surface) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
  }
}
html[data-theme="dark"] body .info-text,
html[data-theme="dark"] body .officer-box,
html[data-theme="dark"] body .scholarship-section,
html[data-theme="dark"] body .morris-grant-box,
html[data-theme="dark"] body .literacy-header,
html[data-theme="dark"] body .essay-content,
html[data-theme="dark"] body .legislative-section,
html[data-theme="dark"] body .cultural-header,
html[data-theme="dark"] body .contact-highlight,
html[data-theme="dark"] body .history-container,
html[data-theme="dark"] body .application-container,
html[data-theme="dark"] body .app-box,
html[data-theme="dark"] body .instruction-text{
  background-color: var(--surface) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}



/* ===== Dark mode legibility fixes & extended overrides ===== */

/* Extend dark-surface overrides */
@media (prefers-color-scheme: dark){
  body .download-links,
  body .legislative-link-box{
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
  }

  /* President table text */
  .president-table,
  .president-table td,
  .president-table th{
    color: var(--text) !important;
    background: var(--surface) !important;
    border-color: var(--border) !important;
  }

  /* Photo gallery captions */
  .photo-gallery figcaption,
  .photo-gallery .caption{
    color: var(--muted-text) !important;
    background: transparent !important;
  }

  /* Application page readability */
  .application-container,
  .app-box,
  .instruction-text{
    background: var(--surface) !important;
    color: var(--text) !important;
  }
  .application-container p,
  .app-box p,
  .instruction-text{
    line-height: 1.6;
  }
}

/* Manual toggle overrides */
html[data-theme="dark"] body .download-links,
html[data-theme="dark"] body .legislative-link-box{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

html[data-theme="dark"] .president-table,
html[data-theme="dark"] .president-table td,
html[data-theme="dark"] .president-table th{
  color: var(--text) !important;
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .photo-gallery figcaption,
html[data-theme="dark"] .photo-gallery .caption{
  color: var(--muted-text) !important;
}

html[data-theme="dark"] .application-container,
html[data-theme="dark"] .app-box,
html[data-theme="dark"] .instruction-text{
  background: var(--surface) !important;
  color: var(--text) !important;
}



/* ===== Dark mode: top-group-photo caption legibility ===== */
@media (prefers-color-scheme: dark){
  .top-group-photo,
  .top-group-photo p,
  .top-group-photo figcaption,
  .top-group-photo .caption{
    color: var(--muted-text) !important;
  }
  /* If caption sits on image, give it a subtle backing for contrast */
  .top-group-photo figcaption,
  .top-group-photo .caption{
    background: rgba(0,0,0,0.35);
    padding: 6px 10px;
    border-radius: 10px;
    display: inline-block;
  }
}
html[data-theme="dark"] .top-group-photo,
html[data-theme="dark"] .top-group-photo p,
html[data-theme="dark"] .top-group-photo figcaption,
html[data-theme="dark"] .top-group-photo .caption{
  color: var(--muted-text) !important;
}
html[data-theme="dark"] .top-group-photo figcaption,
html[data-theme="dark"] .top-group-photo .caption{
  background: rgba(0,0,0,0.35);
  padding: 6px 10px;
  border-radius: 10px;
  display: inline-block;
}



/* ===== Dark mode: application headings & labels legibility ===== */
@media (prefers-color-scheme: dark){
  body.page-application h3,
  body.page-application label,
  body.page-application .form-label,
  body.page-application legend{
    color: var(--text) !important;
  }
  body.page-application small,
  body.page-application .help-text{
    color: var(--muted-text) !important;
  }
}
html[data-theme="dark"] body.page-application h3,
html[data-theme="dark"] body.page-application label,
html[data-theme="dark"] body.page-application .form-label,
html[data-theme="dark"] body.page-application legend{
  color: var(--text) !important;
}
html[data-theme="dark"] body.page-application small,
html[data-theme="dark"] body.page-application .help-text{
  color: var(--muted-text) !important;
}



/* ===== Dark mode: application.html background fixes ===== */
/* application.html has legacy hard-coded light backgrounds (#FFFFE6, #fff). Force theme surfaces. */
@media (prefers-color-scheme: dark){
  body.page-application .app-box,
  body.page-application .application-container,
  body.page-application .instruction-text,
  body.page-application .checkbox-item{
    background-color: var(--surface) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
  }

  /* Headings: remove light background fill */
  body.page-application h3{
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text) !important;
  }

  /* Form controls: never white in dark mode */
  body.page-application input,
  body.page-application select,
  body.page-application textarea{
    background-color: var(--input-bg) !important;
    background: var(--input-bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--input-border) !important;
  }

  body.page-application input[type="checkbox"],
  body.page-application input[type="radio"]{
    accent-color: #8ab4f8;
  }
}

/* Manual toggle override */
html[data-theme="dark"] body.page-application .app-box,
html[data-theme="dark"] body.page-application .application-container,
html[data-theme="dark"] body.page-application .instruction-text,
html[data-theme="dark"] body.page-application .checkbox-item{
  background-color: var(--surface) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] body.page-application h3{
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text) !important;
}
html[data-theme="dark"] body.page-application input,
html[data-theme="dark"] body.page-application select,
html[data-theme="dark"] body.page-application textarea{
  background-color: var(--input-bg) !important;
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--input-border) !important;
}



/* ===== Dark mode: input fields match checkbox-item outlines (application.html) ===== */
@media (prefers-color-scheme: dark){
  body.page-application input[type="text"],
  body.page-application input[type="email"],
  body.page-application input[type="tel"],
  body.page-application input[type="number"],
  body.page-application input[type="date"],
  body.page-application select,
  body.page-application textarea{
    border: 2px solid var(--border) !important;
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--input-bg) !important;
    color: var(--text) !important;
  }

  body.page-application input:focus,
  body.page-application select:focus,
  body.page-application textarea:focus{
    box-shadow: 0 0 0 3px rgba(138,180,248,0.45);
    border-color: rgba(138,180,248,0.9) !important;
    outline: none;
  }
}

html[data-theme="dark"] body.page-application input[type="text"],
html[data-theme="dark"] body.page-application input[type="email"],
html[data-theme="dark"] body.page-application input[type="tel"],
html[data-theme="dark"] body.page-application input[type="number"],
html[data-theme="dark"] body.page-application input[type="date"],
html[data-theme="dark"] body.page-application select,
html[data-theme="dark"] body.page-application textarea{
  border: 2px solid var(--border) !important;
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--input-bg) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] body.page-application input:focus,
html[data-theme="dark"] body.page-application select:focus,
html[data-theme="dark"] body.page-application textarea:focus{
  box-shadow: 0 0 0 3px rgba(138,180,248,0.45);
  border-color: rgba(138,180,248,0.9) !important;
  outline: none;
}



/* ===== Navigation hover fix: keep apple icons visible ===== */

/* Remove background-image changes on hover that hide apple icons */
.nav-links a:hover,
.nav-links a:focus{
  background-image: inherit !important;
  background-color: var(--nav-hover-bg);
  color: var(--link) !important;
}

/* Explicitly keep apple icon visible */
.nav-links a::before,
.nav-links a:hover::before,
.nav-links a:focus::before{
  opacity: 1 !important;
}

/* Dark mode: adjust hover text color for contrast */
@media (prefers-color-scheme: dark){
  .nav-links a:hover,
  .nav-links a:focus{
    color: #8ab4f8 !important;
  }
}
html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a:focus{
  color: #8ab4f8 !important;
}



/* ===== Dark mode: Make Print Form button distinct (application.html) ===== */
@media (prefers-color-scheme: dark){
  body.page-application .print-form,
  body.page-application button.print,
  body.page-application input.print,
  body.page-application .print-button{
    background: linear-gradient(180deg, #1b4f8a, #163f6e) !important;
    color: #ffffff !important;
    border: 2px solid #8ab4f8 !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  }
  body.page-application .print-form:hover,
  body.page-application button.print:hover,
  body.page-application input.print:hover,
  body.page-application .print-button:hover{
    background: linear-gradient(180deg, #2566b0, #1d558f) !important;
  }
}
html[data-theme="dark"] body.page-application .print-form,
html[data-theme="dark"] body.page-application button.print,
html[data-theme="dark"] body.page-application input.print,
html[data-theme="dark"] body.page-application .print-button{
  background: linear-gradient(180deg, #1b4f8a, #163f6e) !important;
  color: #ffffff !important;
  border: 2px solid #8ab4f8 !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* ===== Navigation: lock apple icons + text color hover ===== */
/* Apples are background-images on links — never override background-image */
.nav-links a{
  background-repeat: no-repeat;
  background-position: left center;
}

.nav-links a:hover,
.nav-links a:focus{
  background-image: inherit !important;
  background-color: var(--nav-hover-bg) !important;
  color: var(--link) !important;
}

/* Force apples to remain visible */
.nav-links a:hover,
.nav-links a:focus{
  background-size: inherit !important;
}

/* Dark mode hover text color */
@media (prefers-color-scheme: dark){
  .nav-links a:hover,
  .nav-links a:focus{
    color: #8ab4f8 !important;
  }
}
html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a:focus{
  color: #8ab4f8 !important;
}



/* ===== Fix nav hover: keep apple icon + change text color ===== */
/* Some earlier rules used 'background:' shorthand which resets background-image. Force icon to persist on hover/focus. */
.nav-links a:hover,
.nav-links a:focus{
  background-color: var(--nav-hover-bg) !important;
  background-image: url(images/apple.png) !important;
  background-repeat: no-repeat !important;
  background-position: 6px center !important;
  background-size: 20px 20px !important;
  color: var(--link) !important;
  text-decoration: none;
}

/* Dark mode hover text color for contrast */
@media (prefers-color-scheme: dark){
  .nav-links a:hover,
  .nav-links a:focus{
    color: #8ab4f8 !important;
  }
}
html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a:focus{
  color: #8ab4f8 !important;
}

/* ===== Application: make Print Form button distinct in dark mode ===== */
@media (prefers-color-scheme: dark){
  body.page-application input[onclick*="window.print"],
  body.page-application input[value="Print Form"]{
    background: linear-gradient(180deg, rgba(138,180,248,0.95), rgba(138,180,248,0.75)) !important;
    color: #061a33 !important;
    border: 2px solid rgba(255,255,255,0.35) !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35) !important;
  }
  body.page-application input[onclick*="window.print"]:hover,
  body.page-application input[value="Print Form"]:hover{
    filter: brightness(1.06);
  }
}
html[data-theme="dark"] body.page-application input[onclick*="window.print"],
html[data-theme="dark"] body.page-application input[value="Print Form"]{
  background: linear-gradient(180deg, rgba(138,180,248,0.95), rgba(138,180,248,0.75)) !important;
  color: #061a33 !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35) !important;
}

/* ===== Chair photo styling (match Cultural Affairs layout) ===== */
.chair-photo{
  float: left;
  margin: 0 20px 15px 0;
  border: 4px solid orange;
  border-radius: 4px;
  max-width: 180px;
}



/* ===== Reusable chair header component ===== */
.chair-header{
  display: block;
  overflow: auto; /* clearfix for floated image */
  padding: 10px 10px 0 10px;
}

.chair-photo{
  float: left;
  margin: 0 20px 15px 0;
  border: 4px solid orange;
  border-radius: 4px;
  max-width: 180px;
  height: auto;
}

/* Chair header text */
.chair-title{
  margin: 0;
}
.chair-name{
  margin: 6px 0 0 0;
}

/* Mobile: stack image above text */
@media (max-width: 700px){
  .chair-photo{
    float: none;
    display: block;
    margin: 0 auto 12px auto;
  }
  .chair-header{
    text-align: center;
  }
}



/* Chair header theme surfaces */
.chair-header{
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 12px 0 18px 0;
}
@media (prefers-color-scheme: dark){
  .chair-header{
    background: var(--surface);
    color: var(--text);
  }
}
html[data-theme="dark"] .chair-header{
  background: var(--surface);
  color: var(--text);
}
html[data-theme="light"] .chair-header{
  background: rgba(255,255,255,0.85);
  color: var(--text);
}



/* ===== BCREA Links page styling ===== */
.links-intro{
  font-size: 1.1rem;
  line-height: 1.55;
  margin: 0 0 1rem 0;
}
.links-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.link-box{
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}
.link-box-title{
  margin: 0 0 10px 0;
  font-size: 1.15rem;
}
.links-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.links-list li{
  margin: 8px 0;
}
.links-list a{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.links-list a:hover,
.links-list a:focus{
  color: #8ab4f8;
}
@media (max-width: 800px){
  .links-grid{ grid-template-columns: 1fr; }
}

/* Dark mode surfaces */
@media (prefers-color-scheme: dark){
  .link-box{
    background: var(--surface);
    color: var(--text);
  }
}
html[data-theme="dark"] .link-box{
  background: var(--surface);
  color: var(--text);
}



/* ===== Newsletter Flexbox layout ===== */
.newsletter-year{
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,0.85);
}

.newsletter-year summary{
  cursor: pointer;
  padding: 12px 14px;
  font-size: 1.2rem;
  font-weight: bold;
}

.newsletter-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px;
  background: transparent; /* prevent white blocks in dark mode */
}

.newsletter-grid a{
  flex: 0 1 calc(33.333% - 14px);
  max-width: calc(33.333% - 14px);
  padding: 12px 14px;
  text-align: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  text-decoration: none;
  background: rgba(255,255,255,0.9);
}

.newsletter-grid a:hover{
  text-decoration: underline;
}

/* Tablet */
@media (max-width: 900px){
  .newsletter-grid a{
    flex: 0 1 calc(50% - 14px);
    max-width: calc(50% - 14px);
  }
}

/* Mobile */
@media (max-width: 550px){
  .newsletter-grid a{
    flex: 0 1 100%;
    max-width: 100%;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .newsletter-year{
    background: var(--surface);
    color: var(--text);
  }
  .newsletter-grid a{
    background: var(--surface-2);
    color: var(--text);
  }
}

html[data-theme="dark"] .newsletter-year{
  background: var(--surface);
  color: var(--text);
}

html[data-theme="dark"] .newsletter-grid a{
  background: var(--surface-2);
  color: var(--text);
}


/* ===== Newsletter layout FINAL FIX ===== */
body.page-newsletter .newsletter-grid{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px;
  padding: 16px;
  background: transparent !important;
}

body.page-newsletter .newsletter-grid a{
  flex: 0 0 calc(33.333% - 16px) !important;
  max-width: calc(33.333% - 16px) !important;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

/* Tablet */
@media (max-width: 900px){
  body.page-newsletter .newsletter-grid a{
    flex: 0 0 calc(50% - 16px) !important;
    max-width: calc(50% - 16px) !important;
  }
}

/* Mobile */
@media (max-width: 550px){
  body.page-newsletter .newsletter-grid a{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  body.page-newsletter .newsletter-grid a{
    background: var(--surface-2) !important;
    color: var(--text) !important;
  }
}

html[data-theme="dark"] body.page-newsletter .newsletter-grid a{
  background: var(--surface-2) !important;
  color: var(--text) !important;
}






/* ===== Page Newsletter: year cards in 3 columns ===== */
body.page-newsletter .newsletter-years-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

body.page-newsletter details.newsletter-year{
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.85);
}

body.page-newsletter details.newsletter-year summary{
  cursor: pointer;
  padding: 12px 14px;
  font-size: 1.15rem;
  font-weight: 800;
}

body.page-newsletter .newsletter-list{
  list-style: none;
  margin: 0;
  padding: 10px 14px 14px 14px;
}

body.page-newsletter .newsletter-list li{
  margin: 8px 0;
}

body.page-newsletter .newsletter-list a{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  text-decoration: none;
  background: rgba(255,255,255,0.9);
  overflow-wrap: anywhere;
}

body.page-newsletter .newsletter-list a:hover,
body.page-newsletter .newsletter-list a:focus{
  text-decoration: underline;
  color: var(--link);
}

/* Responsive */
@media (max-width: 1000px){
  body.page-newsletter .newsletter-years-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px){
  body.page-newsletter .newsletter-years-grid{
    grid-template-columns: 1fr;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  body.page-newsletter details.newsletter-year{
    background: var(--surface);
    color: var(--text);
  }
  body.page-newsletter .newsletter-list a{
    background: var(--surface-2);
    color: var(--text);
  }
  body.page-newsletter .newsletter-list a:hover,
  body.page-newsletter .newsletter-list a:focus{
    color: #8ab4f8;
  }
}
html[data-theme="dark"] body.page-newsletter details.newsletter-year{
  background: var(--surface);
  color: var(--text);
}
html[data-theme="dark"] body.page-newsletter .newsletter-list a{
  background: var(--surface-2);
  color: var(--text);
}
html[data-theme="dark"] body.page-newsletter .newsletter-list a:hover,
html[data-theme="dark"] body.page-newsletter .newsletter-list a:focus{
  color: #8ab4f8;
}



/* ===== PDF badge for newsletter issues ===== */
.pdf-badge{
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 6px;
  margin-right: 8px;
  border-radius: 6px;
  background: #c00;
  color: #fff;
  vertical-align: middle;
}
.pdf-label{
  vertical-align: middle;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark){
  .pdf-badge{
    background: #e05555;
    color: #000;
  }
}
html[data-theme="dark"] .pdf-badge{
  background: #e05555;
  color: #000;
}



/* ===== Newsletter notes formatting ===== */
body.page-newsletter .newsletter-notes{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 12px 0 14px 0;
  background: rgba(255,255,255,0.85);
}
body.page-newsletter .newsletter-notes-title{
  margin: 0 0 10px 0;
  font-size: 1.15rem;
}
body.page-newsletter .newsletter-notes-body p{
  margin: 0 0 10px 0;
  line-height: 1.6;
}
body.page-newsletter .newsletter-notes-body hr{
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

body.page-newsletter .pdf-label{
  vertical-align: middle;
}

@media (prefers-color-scheme: dark){
  body.page-newsletter .newsletter-notes{
    background: var(--surface);
    color: var(--text);
  }
}
html[data-theme="dark"] body.page-newsletter .newsletter-notes{
  background: var(--surface);
  color: var(--text);
}