/*
Theme Name: Marumegh Modern Journal
Theme URI: https://marumegh.com/
Author: Marumegh Team
Description: Aligned, professional agricultural journal with soft pastel palette.
Version: 2.3
*/

/* ---------------------------------------------------------------
1.  CSS CUSTOM PROPERTIES (Pastel Green)
2.  RESET & BASE
3.  TYPOGRAPHY
4.  UNIFIED PAGE WRAPPER (header + content sit inside one card)
5.  HEADER
6.  PRIMARY NAVIGATION (professional, soft greens)
7.  CONTENT AREA (grid: left sidebar + main)
8.  LEFT SIDEBAR (modern, clean, spacious)
9.  MAIN CONTENT
10. WIDGETS
11. FOOTER
12. RESPONSIVE
13. ACCESSIBILITY & PRINT
--------------------------------------------------------------- */

/* ---------------------------------------------------------------
1. CSS CUSTOM PROPERTIES
--------------------------------------------------------------- */
:root {
    --color-primary: #5a9a5a;            /* medium pastel green */
    --color-primary-light: #7aad7a;
    --color-accent: #c9a33e;            /* muted gold */
    --color-accent-soft: #f6f1e0;
    --color-text: #2d3c2d;
    --color-text-muted: #6b7a6b;
    --color-bg-page: #f4f9f4;           /* whisper green */
    --color-bg-card: #ffffff;
    --color-border: #dce8dc;
    --color-sidebar-bg: #f6faf6;
    --color-footer-bg: #2b3d2b;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.08);
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------
2. RESET & BASE
-------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body 11{
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Inter', sans-serif;
    background-color: #f4f9f4;
    color: var(--color-text);
    line-height: 1.7;
    font-size: clamp(0.95rem, 2vw, 1rem);
 
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg transform='translate(12,15) rotate(-20) scale(0.8)' fill='none' stroke='%233c6e3c' stroke-width='0.7' opacity='0.5'%3E%3Cpath d='M0,0 C-4,-2 -5,-6 -3,-9 C-2,-7 1,-4 0,0'/%3E%3Cpath d='M0,0 C4,-2 5,-6 3,-9 C2,-7 -1,-4 0,0'/%3E%3Cline x1='0' y1='0' x2='0' y2='-8' stroke-width='0.4'/%3E%3C/g%3E%3Cg transform='translate(42,22) rotate(140) scale(0.7)' fill='none' stroke='%233c6e3c' stroke-width='0.7' opacity='0.5'%3E%3Cpath d='M0,0 C-4,-2 -5,-6 -3,-9 C-2,-7 1,-4 0,0'/%3E%3Cpath d='M0,0 C4,-2 5,-6 3,-9 C2,-7 -1,-4 0,0'/%3E%3Cline x1='0' y1='0' x2='0' y2='-8' stroke-width='0.4'/%3E%3C/g%3E%3Cg transform='translate(30,45) rotate(60) scale(0.9)' fill='none' stroke='%233c6e3c' stroke-width='0.7' opacity='0.5'%3E%3Cpath d='M0,0 C-4,-2 -5,-6 -3,-9 C-2,-7 1,-4 0,0'/%3E%3Cpath d='M0,0 C4,-2 5,-6 3,-9 C2,-7 -1,-4 0,0'/%3E%3Cline x1='0' y1='0' x2='0' y2='-8' stroke-width='0.4'/%3E%3C/g%3E%3Ccircle cx='20' cy='35' r='0.8' fill='%233c6e3c' opacity='0.4'/%3E%3Ccircle cx='48' cy='12' r='0.6' fill='%233c6e3c' opacity='0.4'/%3E%3Ccircle cx='8' cy='50' r='0.7' fill='%233c6e3c' opacity='0.4'/%3E%3C/svg%3E");
    background-repeat: repeat;
   

  background-image: url('./images/bg2.svg');
   

}

body {
    /* Layered backgrounds: gradient + pattern side by side */
    background-color: #387821;   /* fallback */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg transform='translate(40,30) rotate(-15) scale(0.9)' fill='none'%3E%3Cpath d='M0,0 C-8,-4 -10,-12 -6,-18 C-4,-14 2,-8 0,0' stroke='%232e5e1a' stroke-width='1.8' opacity='0.7'/%3E%3Cpath d='M0,0 C8,-4 10,-12 6,-18 C4,-14 -2,-8 0,0' stroke='%232e5e1a' stroke-width='1.8' opacity='0.7'/%3E%3Cline x1='0' y1='0' x2='0' y2='-16' stroke='%23c9a33e' stroke-width='1' opacity='0.9'/%3E%3Ccircle cx='0' cy='-18' r='2.5' fill='%23c9a33e' opacity='0.9'/%3E%3C/g%3E%3Cg transform='translate(120,55) rotate(110) scale(0.9)' fill='none'%3E%3Cpath d='M0,0 C-8,-4 -10,-12 -6,-18 C-4,-14 2,-8 0,0' stroke='%232e5e1a' stroke-width='1.8' opacity='0.7'/%3E%3Cpath d='M0,0 C8,-4 10,-12 6,-18 C4,-14 -2,-8 0,0' stroke='%232e5e1a' stroke-width='1.8' opacity='0.7'/%3E%3Cline x1='0' y1='0' x2='0' y2='-16' stroke='%23c9a33e' stroke-width='1' opacity='0.9'/%3E%3Ccircle cx='0' cy='-18' r='2.5' fill='%23c9a33e' opacity='0.9'/%3E%3C/g%3E%3Cg transform='translate(170,150) rotate(-40) scale(1)' fill='none'%3E%3Cpath d='M0,0 C-8,-4 -10,-12 -6,-18 C-4,-14 2,-8 0,0' stroke='%232e5e1a' stroke-width='1.8' opacity='0.7'/%3E%3Cpath d='M0,0 C8,-4 10,-12 6,-18 C4,-14 -2,-8 0,0' stroke='%232e5e1a' stroke-width='1.8' opacity='0.7'/%3E%3Cline x1='0' y1='0' x2='0' y2='-16' stroke='%23c9a33e' stroke-width='1' opacity='0.9'/%3E%3Ccircle cx='0' cy='-18' r='2.5' fill='%23c9a33e' opacity='0.9'/%3E%3C/g%3E%3Cg transform='translate(30,140) rotate(75) scale(0.8)' fill='none'%3E%3Cpath d='M0,0 C-8,-4 -10,-12 -6,-18 C-4,-14 2,-8 0,0' stroke='%232e5e1a' stroke-width='1.8' opacity='0.7'/%3E%3Cpath d='M0,0 C8,-4 10,-12 6,-18 C4,-14 -2,-8 0,0' stroke='%232e5e1a' stroke-width='1.8' opacity='0.7'/%3E%3Cline x1='0' y1='0' x2='0' y2='-16' stroke='%23c9a33e' stroke-width='1' opacity='0.9'/%3E%3Ccircle cx='0' cy='-18' r='2.5' fill='%23c9a33e' opacity='0.9'/%3E%3C/g%3E%3Ccircle cx='90' cy='90' r='2' fill='%23c9a33e' opacity='0.8'/%3E%3Ccircle cx='180' cy='20' r='1.8' fill='%23c9a33e' opacity='0.8'/%3E%3Ccircle cx='10' cy='180' r='2.2' fill='%23c9a33e' opacity='0.8'/%3E%3Ccircle cx='160' cy='80' r='1.8' fill='%23c9a33e' opacity='0.8'/%3E%3Ccircle cx='60' cy='180' r='2' fill='%23c9a33e' opacity='0.8'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #387821 0%, #6ba53a 40%, #b5d98b 80%, #d8f4b9 100%);

    background-repeat: repeat, no-repeat;
    background-size: 200px 200px, cover;
    background-attachment: fixed, fixed;
    background-position: 0 0, center;
    min-height: 100vh;

    /* Remove the pseudo-element – it's no longer needed */
}

/* Delete any previous body::after rule */

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

/* ---------------------------------------------------------------
3. TYPOGRAPHY
-------------------------------------------------------------- */
h1, h2, h3, h4, .site-title {
    font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}
h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.5rem, 4vw, 1.9rem); margin: 1.8rem 0 1rem; }
h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); margin: 1.5rem 0 0.75rem; }

a { color: var(--color-primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--color-accent);}

/* ---------------------------------------------------------------
4. UNIFIED PAGE WRAPPER
   The header and the grid container are merged into one
   seamless, rounded card with consistent width.
-------------------------------------------------------------- */
.site-header,
.container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Header becomes the top part of the card, container the bottom */
.site-header {
    margin-top: 2rem;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
    background: #ffffff;
    border-radius:  48px 48px 12px 12px;
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--color-border);
    /* remove bottom margin so container attaches */
    margin-bottom: 0;
}

.container {
    margin-top: 1rem;
    padding-top: 1rem;
    padding-bottom: 0;
    background: #ffffff;
    border-radius:  12px 12px 48px 48px;
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    /* give bottom breathing room */
    margin-bottom: 2rem;
}

/* smooth transition where header and container meet */
.site-header + .container {
    border-top: none;
}

/* ---------------------------------------------------------------
5. HEADER
-------------------------------------------------------------- */
/* ---------------------------------------------------------------
5. HEADER – logo left, nav right
-------------------------------------------------------------- */
.site-header {
    max-width: 1280px;
    margin: 2rem auto 0;
    padding: 1.2rem 1.5rem;
    background: #dff0df;
    border-radius: 28px 28px 0 0;
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--color-border);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;    /* logo left, nav right */
    flex-wrap: wrap;
    gap: 1.5rem;
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

.logo a {
    text-decoration: none;
    display: block;
}

.logo-img {
    height: 50px;          /* adjust as needed */
    width: auto;
    display: block;
}

.logo small {
    font-size: 0.7rem;
    letter-spacing: 0.8px;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

/* Navigation container (no longer full width) */
.main-navigation {
    margin-top: 0;
}

/* ---------------------------------------------------------------
6. PRIMARY NAVIGATION (soft greens, professional)
-------------------------------------------------------------- */
.main-navigation {
    position: relative;
 background-image: linear-gradient(180deg, #51bc2b 0%, #6ba53a 40%, #6c933f 80%, #74ab38 100%);
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    padding: 0.35rem 1rem;
  
}

.main-navigation::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('./images/pattern.svg');
    background-repeat: repeat;
    background-size: 100px 100px;
    opacity: 1;         /* subtle background for menu */
    z-index: 1;
}

.nav-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
}

.nav-menu li { position: relative; }

.nav-menu a {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 0.65rem 1.1rem;
    display: inline-block;
    color: #ffffff;
    border-radius: var(--radius-sm);
    transition: all 0.25s ease;
    position: relative;
    z-index: 1;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0.35rem;
    transform: translateX(-50%) scaleX(0);
    width: 60%; height: 2px;
    background-color: #2b571a;
    transition: transform 0.25s ease;
    border-radius: 1px;
}

.nav-menu a:hover {
    background: #fff;
    text-decoration: none;
    transform: translateY(-1px);
	color:#2b571a;
}
.nav-menu a:hover::after { transform: translateX(-50%) scaleX(1); }

.current-menu-item > a,
.current_page_item > a {
    background: rgba(255,255,255,0.7);
    color: #2b571a;
    font-weight: 700;
}
.current-menu-item > a::after { transform: translateX(-50%) scaleX(1); }

/* Dropdown */
.nav-menu .sub-menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: #ffffff;
    min-width: 230px;
    list-style: none;
    padding: 0.6rem 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(0,0,0,0.04);
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s ease;
    z-index: 100;
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-menu .sub-menu a {
    display: block; padding: 0.65rem 1.5rem;
    text-transform: none; font-size: 0.85rem; font-weight: 500;
    color: var(--color-text); letter-spacing: 0;
    border-radius: 0; background: transparent;
}
.nav-menu .sub-menu a:hover {
    background: var(--color-accent-soft);
    color: var(--color-primary);
    padding-left: 1.8rem; transform: none;
}
.nav-menu .sub-menu a::after { display: none; }

/* ---------------------------------------------------------------
7. CONTENT AREA (sidebar + main)
-------------------------------------------------------------- */
#secondary { grid-column: 1 / 2; 
margin-bottom: 12px;
padding-bottom:0;
}
.content  { grid-column: 2 / 3; padding: 1.5rem 0 2rem 0; }

/* Base content card */
.content {
    position: relative;
    background: #ffffff;
    border: 12px solid #f6faf6;          /* wide gold band */
    border-radius: 1rem;
    box-shadow: none;                    /* remove previous shadow */
    padding: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: 12px;                          /* keep layout intact */
}

/* Inner thin green ring */
.content::before {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    right: 2px; bottom: 2px;
    border: 1px solid #dce8dc;          /* thin green */
    border-radius: 0.75rem;             /* slightly smaller to follow curve */
    pointer-events: none;
    z-index: 0;
}

/* Outer thin green ring */
.content::after {
    content: "";
    position: absolute;
    top: -12px; left:-12px;              /* offset = gold border width */
    right: -12px; bottom: -12px;
    border: 1px solid #dce8dc;          /* thin green */
    border-radius: 1.2rem;              /* slightly larger */
    pointer-events: none;
    z-index: 0;                        /* behind the card */
}

/* ---------------------------------------------------------------
8. LEFT SIDEBAR – modern, clean, huge upgrade
-------------------------------------------------------------- */
.widget-area {
    background: var(--color-sidebar-bg);
    border-radius: var(--radius-lg);
    padding: 0.8rem 0;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    height: fit-content;
	
}

/* Menu reset */
.widget-area .menu,
.left-menu-class {
    list-style: none; margin: 0; padding: 0;
}

/* Each menu item */
.widget-area .menu-item,
.left-menu-class li {
    margin: 0;
    border-bottom: 1px solid #e4efe4;
}

/* Links – clean, breathable */
.widget-area .menu-item a,
.left-menu-class a {
    display: block;
    padding: 0.85rem 0.4rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: #3a5a3a;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    line-height: 1.5;
}

/* Hover / focus */
.widget-area .menu-item a:hover,
.left-menu-class a:hover,
.widget-area .menu-item a:focus-visible {
    background: #eef7ee;
    color: #1a4d1a;
    border-left-color:#81be43;
    padding-left: 1.8rem;
    text-decoration: none;
}

/* Current page */
.widget-area .current-menu-item > a {
    background: #dff0df;
    color: #1a4d1a;
    border-left-color: #629d36;
    font-weight: 600;
}

/* Sub-menu – gently indented */
.widget-area .sub-menu,
.left-menu-class .sub-menu {
    list-style: none;
 
    background: rgba(255,255,255,0.5);
}

.widget-area .sub-menu a {
    padding-left: 0.6rem;
    font-size: 0.85rem;
    font-weight: 400;
}
.widget-area .sub-menu a:hover { padding-left: 2.8rem; }

/* ---------------------------------------------------------------
9. MAIN CONTENT
-------------------------------------------------------------- */
.content h1, .content h2, .content h3 {
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
.content p { margin-bottom: 1.25rem; }
.content ul, .content ol { margin: 0 0 1.25rem 1.5rem; }
.content li { margin-bottom: 0.75rem; }

.meta { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 1.5rem; }

.news-event-box {
    background: var(--color-accent-soft);
    border-left: 5px solid var(--color-accent);
    padding: 1rem 1.5rem; border-radius: var(--radius-md);
    margin: 1.5rem 0; font-weight: 500;
}
.scope-list {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1.5rem; list-style: square;
    margin: 1.5rem 0; padding-left: 1.2rem;
}

/* ---------------------------------------------------------------
10. WIDGETS (in sidebar and content)
-------------------------------------------------------------- */
.widget {
    background: #ffffff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    margin: 0 0.8rem 1.2rem;
    overflow: hidden;
}
.widget-title {
    background: var(--color-primary);
    color: white; padding: 0.7rem 1.2rem;
    font-size: 0.85rem; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase;
}
.widget > *:not(.widget-title) { padding: 0.8rem 1.2rem; }
.widget p, .widget ul { margin: 0; padding: 0 0 0.75rem 0.5rem; list-style: none; }
.widget li { padding: 0 0; border-bottom: 1px dashed var(--color-border); }
.widget li:last-child { border-bottom: none; }

.widget h2{
font-size: 16px;
  margin: 0;
  background: #eef7ee;
  padding: 6px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------
11. FOOTER (elevated, clear, with card-like widget blocks)
-------------------------------------------------------------- */
.site-footer {
    background: #1a2e1a;               /* deep forest/chocolate green – high contrast */
    color: #e2e8ea;                     /* near-white text for readability */
    margin-top: 1rem;
    padding: 1rem 0.5rem 0rem;
    border-radius: 20px 20px 0 0;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
	font-size: .75rem;
	line-height: 1.4;
}

.site-footer {
    position: relative;
    background: linear-gradient(135deg, #0e171a 0%, #363d3d 100%);
    border-radius: 20px 20px 0 0;
    /* ... other styles ... */
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('./images/pattern.svg');
    background-repeat: repeat;
    background-size: 100px 100px;
    opacity: 1;         /* very light for footer */
    z-index: 0;
}

/* Ensure content stays above */
.footer-container { position: relative; z-index: 1; }


/* Footer inner grid – responsive columns */
.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

/* Individual footer widget = clean white card on dark background */
.footer-widget {
    background: none;
    border-radius: 0.75rem;
    padding: 1.2rem 1.4rem;
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255,255,255,0.08);
    transition: var(--transition);
}

.footer-widget .current-menu-item > a, .current_page_item > a
{
	background:none;
}
/* Equal‑height footer columns */
.footer-col {
    display: flex;
    flex-direction: column;
    height: 100%;                   /* fill the grid row height */
}

.footer-widget {
    flex: 1;                        /* stretch to fill the column */

    border-radius: 0.75rem;
    padding: 1.2rem 1.4rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    border: 0px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
}

/* Optional: push links list to fill space (if you want the content to top‑align but the card to be full) */
.footer-widget > *:not(.widgettitle) {
    flex: 1;
}

.footer-widget:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.15);
}

/* Footer widget title – clean gold underline, no background */
.footer-widget .widget-title {
    background: none;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--color-accent);
    display: inline-block;
    text-transform: none;
}

/* Footer links */
.footer-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-widget li {
    margin-bottom: 0.6rem;
}

.footer-widget a {
    color: #ccd6dd;
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
    display: inline-block;
    padding: 0.15rem 0;
}

.footer-widget a:hover {
    color: var(--color-accent);
    transform: translateX(4px);
    text-decoration: none;
}

.footer-widget .widgettitle{
margin: 0;
font-size: 1.2rem;
}
}
/* Copyright bar – separated and subtle */
.copyright {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    font-size: 0.8rem;
    color: #a0b0a0;
    letter-spacing: 0.3px;
}

/* ---------------------------------------------------------------
12. RESPONSIVE
-------------------------------------------------------------- */
@media (max-width: 860px) {
    .container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }
    #secondary { grid-column: 1 / -1; }
    .content  { grid-column: 1 / -1; padding: 1rem 0; }
    .scope-list { grid-template-columns: 1fr; }

    .widget-area {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 640px) {
    .nav-menu { flex-direction: column; align-items: center; gap: 1rem; }
    .nav-menu li { width: 100%; text-align: center; }
    .nav-menu .sub-menu {
        position: static; transform: none;
        opacity: 1; visibility: visible;
        box-shadow: none; border: none;
        background: rgba(90,154,90,0.1);
        border-radius: 0; padding: 0.3rem 0;
        display: none;
    }
    .nav-menu li:hover > .sub-menu,
    .nav-menu li:focus-within > .sub-menu,
    .nav-menu li.submenu-open > .sub-menu { display: block; }

    .container { padding: 0 0.75rem; }
}

/* ---------------------------------------------------------------
13. ACCESSIBILITY & UTILITIES
-------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

.skip-link {
    position: absolute; top: -100%; left: 1rem;
    background: var(--color-primary); color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: 1000; transition: top 0.2s;
}
.skip-link:focus { top: 0; }

button, .button, input[type="submit"] {
    background: var(--color-primary); color: white;
    border: none; padding: 0.6rem 1.2rem;
    border-radius: 2rem; font-weight: 600;
    cursor: pointer; transition: var(--transition);
}
button:hover, .button:hover, input[type="submit"]:hover {
    background: var(--color-primary-light); transform: translateY(-1px);
}

@media print {
    .site-header, .site-footer, #secondary, .main-navigation { display: none; }
    body { background: white; }
}




/* ---------------------------------------------------------------
3. TYPOGRAPHY – Playfair Display + Lato Magazine Edition
-------------------------------------------------------------- */

/* Headings – Playfair Display, elegant and bold */
h1, h2, h3, h4, .site-title {
    font-family: 'Playfair Display', 'Merriweather', Georgia, serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
 
}



/* Body & article content – Lato, warm and extremely readable */
body,
.content,
.entry-content,
.content p,
.content li,
.meta,
.news-event-box,
.copyright {
    font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    font-size: 1.1rem;            /* generous size for comfortable reading */
    line-height: 1.5;
    color: #1f2e1f;
}

/* Navigation & sidebar – Lato, crisp but not cold */
.widget-area .menu-item a,
.left-menu-class a,
.nav-menu a,
.footer-widget a {
    font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* Main navigation – slightly bolder, uppercased, refined */
.nav-menu a {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Footer links – clear and understated */
.footer-widget a {
    font-weight: 400;
    font-size: 0.95rem;
}

/* Meta text (dates, small notes) */
.meta {
    font-size: 0.9rem;
    color: #6b7a6b;
    font-weight: 400;
}

/* Optional: Accent class for pull quotes using Playfair Display italic */
.pull-quote {
    font-family: 'Playfair Display', 'Merriweather', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.3;
    color: #5a9a5a;
}