/* =========================================================
   SIAYA COUNTY GOVERNMENT THEME
   ENHANCED MAIN.CSS - FULLY RESPONSIVE WITH BRAND COLORS
   Version: 3.0.0 - CLEANED (Removed aggressive hiding rules)
   ========================================================= */

/* =========================================================
   ROOT VARIABLES - BRAND COLORS
   ========================================================= */
:root {
    --primary: #60bb46;
    --primary-dark: #4a9236;
    --primary-light: #7dcc66;
    --secondary: #d4ae67;
    --secondary-dark: #b89550;
    --secondary-light: #e2c489;
    --accent: #1a3e6f;
    --accent-light: #2a5a9f;
    --accent-dark: #0f2a4d;
    
    --text-dark: #1a1a1a;
    --text-grey: #555555;
    --text-light: #ffffff;
    --text-muted: #888888;
    
    --bg-light: #f4f6f8;
    --bg-white: #ffffff;
    --bg-gray: #f9f9f9;
    --bg-dark: #1a3e6f;
    
    --border: #e5e5e5;
    --border-light: #f0f0f0;
    --border-dark: #d0d0d0;
    
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 15px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.15);
    
    --transition: all 0.3s ease-in-out;
    --transition-slow: all 0.5s ease-in-out;
    
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    --container-width: 1280px;
    --header-height-desktop: 100px;
    --header-height-mobile: 70px;
}

/* =========================================================
   RESET & BASE STYLES
   ========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-dark);
    background: var(--bg-light);
    line-height: 1.6;
    overflow-x: hidden;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul, ol {
    list-style: none;
}

button,
input,
textarea,
select {
    font-family: inherit;
    outline: none;
    border: none;
}

iframe {
    width: 100%;
    border: none;
}

/* =========================================================
   TYPOGRAPHY - BRAND COLORS
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary-dark);
    margin-bottom: 1rem;
}

h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.8rem); }
h4 { font-size: clamp(1rem, 2.5vw, 1.4rem); }
h5 { font-size: clamp(0.9rem, 2vw, 1.1rem); }
h6 { font-size: clamp(0.85rem, 1.5vw, 1rem); }

p {
    margin-bottom: 1rem;
    color: var(--text-grey);
}

/* =========================================================
   CONTAINER & LAYOUT
   ========================================================= */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
}

.section-padding {
    padding: var(--spacing-3xl) 0;
}

@media (max-width: 768px) {
    .section-padding {
        padding: var(--spacing-2xl) 0;
    }
}

.section-header {
    margin-bottom: var(--spacing-2xl);
    border-left: 4px solid var(--secondary);
    padding-left: var(--spacing-lg);
}

.section-header h4 {
    color: var(--primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--spacing-xs);
}

.section-header h2 {
    margin-bottom: 0;
}

/* =========================================================
   BUTTONS - BRAND COLORS
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 12px 28px;
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--transition);
    border: none;
}

.btn-primary {
    background: var(--secondary);
    color: #fff;
    box-shadow: 0 4px 15px rgba(212, 174, 103, 0.3);
}

.btn-primary:hover {
    background: var(--secondary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 174, 103, 0.4);
}

.btn-outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.9);
    color: #fff;
}

.btn-outline:hover {
    background: #fff;
    color: var(--primary);
    transform: translateY(-2px);
}

.btn-green {
    background: var(--primary);
    color: #fff;
}

.btn-green:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

@media (max-width: 576px) {
    .btn {
        width: 100%;
        padding: 10px 20px;
    }

    /* Keep the two hero buttons side by side on one line on mobile,
       instead of inheriting the full-width stacked .btn style above. */
    .hero-buttons {
        flex-wrap: nowrap;
    }

    .hero-buttons .btn {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 12px;
        font-size: 0.72rem;
        white-space: nowrap;
    }
}

/* =========================================================
   TOP BAR - BRAND COLORS
   ========================================================= */
.top-bar {
    background: var(--primary-dark);
    color: #e0e0e0;
    font-size: 0.85rem;
    padding: 10px 0;
    border-bottom: 3px solid var(--secondary);
    position: relative;
    z-index: 1001;
}

.top-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.top-info {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.top-info span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-info i {
    color: var(--secondary);
    font-size: 0.9rem;
}

.top-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.top-links a {
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    transition: var(--transition);
}

.top-links a:hover {
    color: var(--secondary);
}

@media (max-width: 768px) {
    .top-bar .container {
        flex-direction: column;
        text-align: center;
    }
    
    .top-info, .top-links {
        justify-content: center;
    }
}

/* =========================================================
   HEADER & NAVIGATION - BRAND COLORS
   ========================================================= */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-white);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

header.header-sticky {
    box-shadow: var(--shadow-lg);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height-desktop);
    gap: var(--spacing-lg);
}

/* Logo Styles */
.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img,
.custom-logo {
    height: 75px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
}

/* Main Navigation */
.main-navigation {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 8px;
    height: var(--header-height-desktop);
    color: var(--text-dark);
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    transition: var(--transition);
    white-space: nowrap;
}

/* First nav item (Home) - closer to logo */
.nav-menu > .nav-item:first-child .nav-link {
    padding-left: 0;
}

.nav-link:hover {
    color: var(--primary);
}

/* Narrower desktop/laptop widths (992-1300px): the full nav bar is
   tightest here, so shrink padding/font a bit further to guarantee
   every item - including "Investments & Partnership" and "Resource
   Centre" - stays fully visible instead of getting cut off. */
@media (min-width: 992px) and (max-width: 1300px) {
    .nav-link {
        padding: 0 5px;
        font-size: 0.6rem;
        letter-spacing: 0.1px;
        gap: 2px;
    }
}

.nav-link i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.nav-item:hover .nav-link i {
    transform: rotate(180deg);
}

/* Active menu item - plain bold color, no underline bar, matching
   a simple bold-caps active state rather than a colored pill. */
.nav-item.current-menu-item .nav-link,
.nav-item.active .nav-link {
    color: var(--primary);
    position: relative;
}

.nav-item.current-menu-item .nav-link::after,
.nav-item.active .nav-link::after {
    content: none;
}

/* =========================================================
   DROPDOWN MENU - BRAND COLORS
   ========================================================= */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 300px;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0,0,0,.04);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.97);
    transform-origin: top left;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1000;
    padding: 10px;
    border-top: 3px solid var(--secondary);
}

/* Hover-to-open is a DESKTOP behaviour only. Unguarded, it also fires
   below 992px - with a mouse in a narrow window, or the sticky :hover
   phones apply after a tap - and its transform/opacity beat the mobile
   accordion's own rules (see the mega-menu rule below). */
@media (min-width: 992px) {
    .nav-item:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }
}

.dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 10px 10px;
    border-radius: var(--radius-md);
    color: var(--text-grey);
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--transition);
}

.dropdown-item:hover {
    background: rgba(96, 187, 70, 0.08);
}

/* Current-page state for submenu items - brand green, matching the
   hover tint, so the active page reads clearly in dropdowns and
   mega-menus too (previously only the top-level nav had this). */
li.current-menu-item > .dropdown-item,
li.current-menu-item > .mega-link,
.mega-col ul li.current-menu-item > a {
    background: rgba(96, 187, 70, 0.1);
    color: var(--primary);
}

li.current-menu-item > .dropdown-item .menu-item-title,
li.current-menu-item > .mega-link .menu-item-title,
.mega-col ul li.current-menu-item > a .menu-item-title {
    color: var(--primary);
}

/* ---------------------------------------------------------------
   ENHANCED MENU ITEMS - "icon box + title + description" tile,
   used by every dropdown item, mega-menu tile, and mega-column link
   the walker renders (dropdown-item / mega-link / .mega-col ul li a).
   --------------------------------------------------------------- */
.menu-item-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: var(--bg-gray);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.7rem;
    transition: var(--transition);
}

.dropdown-item:hover .menu-item-icon,
.mega-col ul li a:hover .menu-item-icon,
.mega-link:hover .menu-item-icon {
    background: var(--primary);
    color: var(--text-light);
    transform: scale(1.05);
}

.menu-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.menu-item-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    transition: var(--transition);
}

.menu-item-desc {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--text-muted);
    transition: var(--transition);
}

.dropdown-item:hover .menu-item-title,
.mega-col ul li a:hover .menu-item-title,
.mega-link:hover .menu-item-title {
    color: var(--primary);
}

.dropdown-item:hover .menu-item-desc,
.mega-col ul li a:hover .menu-item-desc,
.mega-link:hover .menu-item-desc {
    color: var(--primary-dark);
}

/* Intro line under a mega column heading (e.g. "Health & Sanitation") */
.mega-col-desc {
    margin: 0;
    padding: 0 20px 12px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
}

/* Long imported dropdowns (e.g. a flattened Departments list) shouldn't
   run off the bottom of the screen. */
.dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
}

/* Give every dropdown <li> a positioning context so a 3rd-level
   (nested) submenu can flyout correctly instead of inheriting the
   top-level dropdown's "open downward" position. */
.dropdown-menu > li {
    position: relative;
}

.dropdown-menu-nested {
    top: -10px !important;
    left: 100% !important;
    margin-left: 2px;
}

@media (min-width: 992px) {
    .dropdown-menu > li:hover > .dropdown-menu-nested {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* Keep a nested flyout on-screen if it's the last couple of items */
.dropdown-menu > li:nth-last-child(-n+2) .dropdown-menu-nested {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 2px;
}

/* =========================================================
   MEGA MENU - BRAND COLORS
   ========================================================= */
.mega-menu-item {
    position: static;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px) scale(0.98);
    transform-origin: top center;
    width: 90vw;
    max-width: 1200px;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0,0,0,.04);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1000;
    padding: 28px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    border-top: 3px solid var(--secondary);
}

/* This is the rule that shoved the mobile Department panel half its
   width off the LEFT edge of the screen whenever the pointer was over
   it: (0,3,0) specificity beat the mobile accordion's transform:none,
   and nothing limited it to desktop widths. */
@media (min-width: 992px) {
    .mega-menu-item:hover .mega-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.mega-col {
    background: var(--bg-gray);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition);
}

.mega-col:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.mega-col h5 {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: var(--text-light);
    padding: 15px 20px;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    position: relative;
}

.mega-col h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    width: 40px;
    height: 3px;
    background: var(--secondary);
}

.mega-col ul {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mega-col ul li a {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 8px;
    border-radius: var(--radius-sm);
    color: var(--text-grey);
    font-size: 0.85rem;
    transition: var(--transition);
}

.mega-col ul li a:hover {
    background: rgba(96, 187, 70, 0.08);
}

/* A depth-1 item with no children of its own (e.g. a flat imported
   list) sits directly in the mega-menu grid as its own tile, next
   to any grouped .mega-col columns. */
.mega-link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--bg-gray);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    color: var(--text-grey);
    font-size: 0.85rem;
    font-weight: 500;
    align-self: start;
    transition: var(--transition);
    border-left: 3px solid transparent;
}

.mega-link:hover {
    color: var(--primary);
    background: rgba(96, 187, 70, 0.08);
    border-left-color: var(--secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* =========================================================
   SELF SERVICE BUTTON - BRAND COLORS
   ========================================================= */
.btn-self-service {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--text-light);
    padding: 8px 22px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--transition);
    white-space: nowrap;
    margin-left: 10px;
    box-shadow: var(--shadow-sm);
}

.btn-self-service:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--text-light);
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}

/* =========================================================
   SEARCH - BRAND COLORS
   ========================================================= */
.search-item .nav-link {
    border-left: 1px solid var(--border);
    padding: 0 18px;
}

.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 9999;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-box-container {
    width: 100%;
    max-width: 700px;
    padding: 0 20px;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.search-overlay.active .search-box-container {
    transform: translateY(0);
}

.search-input {
    width: 100%;
    padding: 20px 60px 20px 25px;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--secondary);
    color: #fff;
    font-size: clamp(1rem, 3vw, 1.5rem);
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-submit {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    background: transparent;
    color: var(--secondary);
    font-size: 1.5rem;
    cursor: pointer;
}

.close-search {
    position: absolute;
    top: 30px;
    right: 30px;
    background: transparent;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    transition: var(--transition);
}

.close-search:hover {
    color: var(--secondary);
    transform: rotate(90deg);
}

/* =========================================================
   MOBILE TOGGLE BUTTON - BRAND COLORS
   ========================================================= */
.mobile-toggle {
    display: none;
    background: var(--primary);
    color: var(--text-light);
    width: 45px;
    height: 45px;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.3rem;
    transition: var(--transition);
}

/* The mobile menu backdrop only exists on small screens (shown by the
   max-width:991px block below). Must be display:none by default so it
   isn't an invisible extra flex child of .navbar on desktop (it would
   add a stray gap there). */
.mobile-nav-backdrop {
    display: none;
}

/* =========================================================
   MOBILE RESPONSIVE (max-width: 991px)
   ========================================================= */
@media (max-width: 991px) {
    :root {
        --header-height-desktop: 70px;
    }

    /* The logo graphic was fixed at 75px tall everywhere, which fit
       fine in the 100px desktop header row but is literally taller
       than this 70px mobile row - it was spilling out the bottom of
       the header into the section below. Shrink it (and its width
       cap, proportionally) so it sits fully inside the row. */
    .logo img,
    .custom-logo {
        height: 50px;
        max-width: 170px;
    }
    
    .mobile-toggle {
        display: flex !important;
    }
    
    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 400px;
        height: 100vh;
        background: var(--bg-white);
        box-shadow: var(--shadow-xl);
        transition: right 0.3s ease-in-out;
        z-index: 9999;
        overflow-y: auto;
        overflow-x: hidden;
        /* Don't let a scroll at the end of the menu chain through to the
           page behind it. */
        overscroll-behavior: contain;
        /* Smoother native-feeling momentum scrolling inside the drawer
           on iOS, instead of the default choppy scroll. */
        -webkit-overflow-scrolling: touch;
        padding: 0 0 30px;
        /* The base .main-navigation is a horizontal desktop flex row
           (align-items:center). Without these, the drawer's children -
           the "Menu / X" header and the list - were laid out SIDE BY
           SIDE and vertically centred, instead of header on top and
           list underneath. */
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex: none;
    }

    .main-navigation > .mobile-nav-header {
        flex: 0 0 auto;
    }

    .main-navigation > .nav-menu {
        flex: 0 0 auto;
        width: 100%;
    }
    
    .main-navigation.active {
        right: 0;
    }

    /* Sticky header inside the slide-in panel: always-visible title +
       a real close (X) button, so closing the menu doesn't depend on
       remembering where the little hamburger icon is once you've
       scrolled down a long open menu. */
    .mobile-nav-header {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        background: var(--bg-white);
        border-bottom: 1px solid var(--border-light);
    }

    .mobile-nav-header-title {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--text-dark);
    }

    .mobile-nav-close {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: none;
        background: var(--bg-gray);
        color: var(--text-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        cursor: pointer;
        transition: var(--transition);
        flex-shrink: 0;
    }

    .mobile-nav-close:hover,
    .mobile-nav-close:focus-visible {
        background: var(--primary);
        color: var(--text-light);
    }
    
    body.menu-open {
        overflow: hidden;
    }
    
    /* Backdrop is a real element INSIDE #site-header (see header.php),
       not a body::before pseudo. #site-header is position:sticky with a
       z-index, so it forms its own stacking context and the drawer's
       z-index:9999 only counts *within* it - a body::before at 9998
       sat above the whole header, i.e. ON TOP of the open menu: it
       dimmed the drawer and swallowed every tap (target = body, "outside
       the nav"), closing the menu instead of following the link. Here
       the backdrop (9998) and drawer (9999) share one context, so the
       drawer is correctly above it. */
    .mobile-nav-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    body.menu-open .mobile-nav-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* Floating buttons shouldn't sit over an open menu. */
    body.menu-open #back-to-top {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Real viewport height on phones (100vh includes the collapsing
       browser toolbar and cuts off the bottom of the menu). */
    .main-navigation {
        height: 100vh;
        height: 100dvh;
    }

    /* Logged-in admins: keep the drawer below the WP admin toolbar. */
    body.admin-bar .main-navigation {
        top: 32px;
        height: calc(100vh - 32px);
        height: calc(100dvh - 32px);
    }

    @media (max-width: 782px) {
        body.admin-bar .main-navigation {
            top: 46px;
            height: calc(100vh - 46px);
            height: calc(100dvh - 46px);
        }
    }

    /* Open submenu reads as a nested group: soft background + accent
       rail, instead of items floating at the same level as the parent. */
    .dropdown-menu.active,
    .mega-menu.active {
        background: var(--bg-light);
        /* Reset the desktop dropdown's gold 3px top border (it clashed
           with the green side rail on mobile). */
        border: 0;
        border-left: 3px solid var(--primary);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        margin: 0 0 12px;
        padding: 6px 4px 6px 8px;
    }
    
    .nav-menu {
        flex-direction: column;
        width: 100%;
        padding: 8px 20px 0;
    }
    
    .nav-item {
        width: 100%;
        border-bottom: 1px solid var(--border-light);
    }
    
    /* The base .nav-link rule is tuned for cramming 7 items into a
       narrow horizontal desktop bar: 0.68rem, uppercase, tight
       letter-spacing, nowrap. None of those constraints apply in a
       full-width vertical mobile list - reset to normal, comfortable
       menu typography here instead of inheriting the squeezed
       desktop sizing. */
    .nav-link {
        height: auto;
        padding: 15px 0;
        justify-content: space-between;
        width: 100%;
        font-size: 1rem;
        font-weight: 600;
        text-transform: none;
        letter-spacing: normal;
        white-space: normal;
    }
    
    .nav-menu > .nav-item:first-child .nav-link {
        padding-left: 0;
    }
    
    .dropdown-menu,
    .mega-menu {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        min-width: 0;
    }
    
    .dropdown-menu.active,
    .mega-menu.active {
        display: block;
        animation: mobileDropdownOpen 0.2s ease;
    }

    @keyframes mobileDropdownOpen {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .dropdown-toggle-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        background: var(--bg-gray);
        border-radius: var(--radius-sm);
        cursor: pointer;
        flex-shrink: 0;
    }

    /* Every item with a submenu prints a plain chevron inline in the
       link text (used for the desktop hover-rotate effect) AND a
       second chevron inside the boxed .dropdown-toggle-mobile button
       that JS adds for tap-to-expand. On mobile that showed two
       arrows per row - hide the plain one and keep only the boxed,
       functional toggle. (>i targets just that direct child icon,
       not the one nested inside .dropdown-toggle-mobile.) */
    .nav-link > i {
        display: none;
    }
    
    .mega-menu {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 6px 0 10px;
    }

    /* ---------------------------------------------------------
       PLAIN DROPDOWN ON MOBILE
       Tap a top-level item -> a simple indented list of links opens
       beneath it. None of the desktop mega-menu presentation applies
       here: no card tiles, no green gradient column banners, no
       hover-lift, no icon boxes or description text. Everything
       below resets those desktop styles to a flat, readable list.
       --------------------------------------------------------- */

    /* Column groups (a child that has its own children) become a
       small quiet label above their links - not a coloured banner. */
    .mega-col {
        background: transparent;
        border-radius: 0;
        overflow: visible;
        margin: 0;
        transition: none;
    }

    .mega-col:hover {
        transform: none;
        box-shadow: none;
    }

    .mega-col h5 {
        background: none;
        color: var(--text-muted, #6b7280);
        margin: 0;
        padding: 12px 14px 4px;
        font-family: inherit;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: default;
    }

    .mega-col h5::after {
        display: none;
    }

    .mega-col ul {
        display: block;
        padding: 0;
        gap: 0;
    }

    /* Every sub-link: one flat row, comfortable tap height, hairline
       divider between rows. */
    .dropdown-item,
    .mega-col ul li a,
    .mega-link {
        display: block;
        padding: 12px 14px;
        border-radius: 0;
        border: 0;
        border-bottom: 1px solid var(--border-light);
        background: transparent;
        color: var(--text-dark);
        font-size: 0.95rem;
        line-height: 1.35;
        box-shadow: none;
        transform: none;
    }

    .dropdown-menu li:last-child .dropdown-item,
    .mega-col ul li:last-child a,
    .mega-menu > .mega-link:last-child {
        border-bottom: 0;
    }

    .dropdown-item:hover,
    .mega-col ul li a:hover,
    .mega-link:hover {
        background: rgba(96, 187, 70, 0.08);
        color: var(--primary-dark);
        transform: none;
        box-shadow: none;
        border-left-color: transparent;
    }

    .menu-item-icon,
    .menu-item-desc {
        display: none;
    }

    .menu-item-title {
        font-size: inherit;
        font-weight: 500;
        color: inherit;
    }
    
    .btn-self-service {
        display: block;
        text-align: center;
        margin: 15px 0;
    }
    
    .search-item {
        margin-top: 20px;
        border-top: 2px solid var(--border);
        padding-top: 20px;
    }
    
    .search-item .nav-link {
        justify-content: center;
        background: var(--primary);
        color: var(--text-light);
        border-radius: var(--radius-sm);
    }
}

/* Desktop: the panel header/close button only ever exist for mobile. */
@media (min-width: 992px) {
    .mobile-nav-header {
        display: none;
    }
}

/* =========================================================
   HERO SLIDER - BRAND COLORS
   ========================================================= */
.hero-slider {
    position: relative;
    /* Sized so the quick-access bar (now a flat strip sitting flush
       below the hero, not overlapping it - roughly 55px tall) always
       lands within the viewport on desktop, no scrolling needed to
       see it. 100px = the desktop header height, plus a safety
       buffer. Floor of 340px so it never collapses to nothing on
       unusually short windows. */
    height: calc(100vh - 200px);
    min-height: 340px;
    overflow: hidden;
    background: var(--primary-dark);
}

/* Logged-in admins see the WordPress admin toolbar (~32px, fixed at
   the very top), which pushes the whole page down by that much and
   was eating into the space above - shrink the hero a bit further
   so the bar still clears the fold while testing. */
body.admin-bar .hero-slider {
    height: calc(100vh - 232px);
}

@media (max-width: 768px) {
    .hero-slider {
        height: 40vh;
        min-height: 320px;
    }

    .slide {
        align-items: center;
    }

    .slide .container {
        padding-bottom: 0;
    }

    /* Prev/next arrow buttons are hidden on mobile - dots (and swipe)
       remain as the navigation method. !important because the base
       .slider-controls { display: flex; } rule below this block is
       unconditional and would otherwise win on source order. */
    .slider-controls {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .hero-slider {
        height: 35vh;
        min-height: 260px;
    }
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Always fill the banner box completely and crop to fit, regardless
       of the uploaded image's original width/height/aspect ratio -
       never stretched, never leaving gaps. !important guards this
       against any inline style or later override. */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1s ease, transform 6s ease;
    /* Every slide sits at the exact same position with no z-index, so
       without this, stacking falls back to DOM order - not which one
       is actually visible. An inactive (opacity:0, but still fully
       interactive) slide that comes after the active one in the loop
       would sit invisibly on top of it and swallow every click meant
       for the visible slide's buttons underneath. z-index below +
       pointer-events:none makes an inactive slide fully inert. */
    z-index: 1;
    pointer-events: none;
}

.slide.active {
    z-index: 2;
    pointer-events: auto;
}

.slide .container {
    /* Desktop only (reset back to centered on mobile below): keep the
       title/tag/buttons anchored near the bottom of the slide rather
       than vertically centered, with enough clearance to clear the
       prev/next arrows. Nudged a little closer to the bottom edge
       than before (130px -> was previously kept further up). */
    padding-bottom: 80px;
}

.slide.active {
    opacity: 1;
    transform: scale(1);
}

/* Gradient/dark wash removed entirely per feedback - the photo should
   render sharp and clear with no dimming. The title text below still
   carries its own strong text-shadow for legibility. */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 750px;
    color: var(--text-light);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease 0.3s;
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slide.active .hero-content {
    opacity: 1;
    transform: translateY(0);
}

.hero-tag {
    display: inline-block;
    background: var(--secondary);
    color: #000;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 4px;
    margin-bottom: 20px;
}

.hero-slider h1 {
    color: var(--text-light);
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-slider p {
    color: #f0f0f0;
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 2rem;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
}

.slider-controls {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    gap: 15px;
    z-index: 3;
}

.slider-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.slider-btn:hover {
    background: var(--secondary);
    color: #000;
}

/* =========================================================
   QUICK ACCESS - BRAND COLORS
   ========================================================= */
.access-bar {
    margin-top: -60px;
    position: relative;
    z-index: 10;
    padding-bottom: 60px;
    /* This section uses the shared .container class (max-width:1280px,
       centered) by default - override that here so the card spans the
       full page width instead of being capped/gutter-boxed. Padding
       matches .container's own 20px exactly, so the first icon lines
       up with the hero content (e.g. the FEATURED tag) above it. */
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.access-grid {
    background: var(--bg-white);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    border-top: 4px solid var(--primary);
    box-shadow: var(--shadow-lg);
    display: grid;
    /* Fixed column counts per breakpoint (not auto-fit) so items always
       land evenly across the row instead of an odd one wrapping alone. */
    grid-template-columns: repeat(6, 1fr);
    gap: 6px 16px;
}

.access-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.access-item:hover {
    background: var(--bg-light);
    transform: translateY(-5px);
}

/* Title/description font sizes: reduced 2px from the original theme
   default, then a further 5% off both bounds per feedback that they
   were still too large. */
.access-item h4 {
    font-size: clamp(0.83rem, 2.4vw, 1.21rem);
    margin-bottom: 3px;
}

.access-item span {
    font-size: 0.83rem;
}

.access-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(96, 187, 70, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 6px;
    transition: var(--transition);
}

.access-item:hover .access-icon {
    background: var(--primary);
    color: var(--secondary);
}

@media (min-width: 769px) {
    /* Client wants the flat, single-row utility-bar format (icon +
       label inline, thin dividers, search box) instead of the
       floating stacked-card grid used below on mobile. */
    .access-bar {
        margin-top: 0;
        padding-bottom: 0;
    }

    .access-grid {
        background: var(--bg-light);
        padding: 14px 0;
        border-radius: 0;
        border-top: none;
        border-bottom: 1px solid var(--border-light);
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }

    /* No left padding on the first item - the bar's own 20px (matching
       .container's 20px) is the only inset needed, so this icon lines
       up exactly with the hero content (e.g. the FEATURED tag) above. */
    .access-item:first-child {
        padding-left: 0;
    }

    .access-item {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 10px;
        padding: 4px 20px;
        border-right: 1px solid var(--primary);
        position: relative;
    }

    .access-item:last-of-type {
        border-right: none;
    }

    .access-item:hover {
        background: rgba(74, 146, 54, 0.08);
    }

    .access-item-text {
        display: flex;
        flex-direction: column;
    }

    .access-item h4 {
        font-size: 18.56px;
        margin-bottom: 0;
        white-space: nowrap;
        color: #4A9236;
        transition: color 0.2s ease;
    }

    .access-item:hover h4 {
        color: #D4AE67;
    }

    /* Description line dropped in this flat format - the reference
       style shows the label only, next to its icon. */
    /* Description, shown as a popup tooltip above the item on hover
       instead of a permanent second line (keeps the bar flat/slim). */
    .access-item span {
        display: block;
        position: absolute;
        bottom: calc(100% + 12px);
        left: 50%;
        transform: translateX(-50%) translateY(6px);
        background: var(--bg-white);
        color: var(--text-dark);
        font-size: 0.872rem;
        font-weight: 500;
        white-space: nowrap;
        padding: 8px 14px;
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        z-index: 20;
    }

    .access-item span::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: var(--bg-white);
    }

    .access-item:hover span {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    /* Laptop/smaller-desktop safety net: items had a fixed 20px
       padding each side + fixed 18.56px labels + a 200px search box,
       which didn't fit on common 1366-1440px laptop screens and just
       spilled past the edge of the browser window uncontained. Scale
       everything down smoothly with the available width instead of a
       fixed size, so it always fits without being cut off. */
    .access-grid {
        gap: 0 clamp(4px, 1.2vw, 20px);
    }

    .access-item {
        padding: 4px clamp(6px, 1.2vw, 20px);
    }

    .access-item h4 {
        font-size: clamp(13px, 1.15vw, 18.56px);
    }

    .access-icon {
        font-size: clamp(1rem, 1.6vw, 1.3rem);
    }

    .access-search input {
        width: clamp(90px, 12vw, 200px);
    }

    .access-icon {
        width: auto;
        height: auto;
        border-radius: 0;
        background: none;
        color: #D4AE67;
        font-size: 1.3rem;
        margin-bottom: 0;
        transition: color 0.2s ease;
    }

    .access-item:hover .access-icon {
        background: none;
        color: #4A9236;
    }

    .access-search {
        display: flex;
        margin-left: 20px;
        flex-shrink: 0;
    }

    .access-search input {
        padding: 9px 12px;
        border: 1px solid var(--border-light);
        border-right: none;
        border-radius: var(--radius-sm) 0 0 var(--radius-sm);
        font-size: 0.85rem;
    }

    .access-search button {
        padding: 0 16px;
        background: var(--primary);
        color: #fff;
        border: none;
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        cursor: pointer;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    /* Tightest part of the desktop range - drop the search box here
       so the 6 labels themselves always have room to breathe. */
    .access-search {
        display: none;
    }
}

.access-search {
    display: none;
}

@media (max-width: 768px) {
    .access-bar {
        margin-top: 0;
        padding-bottom: 40px;
    }

    .access-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 20px;
    }
}

/* =========================================================
   NEWS SECTION - BRAND COLORS
   ========================================================= */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.news-card {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border-bottom: 3px solid transparent;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-bottom-color: var(--secondary);
}

.news-img {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-img img {
    transform: scale(1.1);
}

.news-date {
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--secondary);
    color: #000;
    padding: 8px 15px;
    font-size: 0.8rem;
    font-weight: 700;
}

.news-content {
    padding: 25px;
}

.news-cat {
    display: inline-block;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.news-content h3 {
    font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 15px;
}

.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-light);
    padding-top: 15px;
    margin-top: 15px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* =========================================================
   FOOTER - BRAND COLORS
   ========================================================= */
footer {
    background: #111;
    color: #bbb;
    padding: var(--spacing-3xl) 0 var(--spacing-lg);
    border-top: 5px solid var(--secondary);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    padding-bottom: 50px;
    margin-bottom: 30px;
    border-bottom: 1px solid #333;
}

.footer-col h3 {
    color: var(--secondary);
    font-size: 1.2rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--secondary);
}

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

.footer-links li {
    display: block;
    margin-bottom: 12px;
}

.footer-links a {
    color: #ccc;
    transition: var(--transition);
    display: inline-block;
}

.footer-links a:hover {
    color: var(--secondary);
    padding-left: 5px;
}

/* A real menu picked in Appearance -> Menus has no per-item icon like
   the fallback list did - give every legislator link the same
   landmark icon uniformly, so it still looks populated/finished
   rather than plain text once a real menu is assigned. */
.legislators-links a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f19c';
    margin-right: 8px;
    color: var(--secondary);
    font-size: 0.85em;
}

.contact-info li {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.contact-info i {
    color: var(--secondary);
    margin-top: 4px;
    min-width: 20px;
}

/* Emergency contacts: label and number stacked on separate lines so
   the number is never awkwardly split across two lines mid-way
   through itself. */
.emergency-contacts .contact-label,
.emergency-contacts .contact-number {
    display: block;
}

.emergency-contacts .contact-label {
    color: var(--secondary, #d4ae67);
    font-size: 0.85rem;
    margin-bottom: 2px;
}

.emergency-contacts .contact-number {
    white-space: nowrap;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icons a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #222;
    color: #fff;
    border-radius: 50%;
    transition: var(--transition);
}

.social-icons a:hover {
    background: var(--secondary);
    color: #000;
    transform: translateY(-3px);
}

.copyright {
    text-align: center;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    footer {
        padding: var(--spacing-2xl) 0 var(--spacing-md);
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* =========================================================
   FORMS & TABLES - BRAND COLORS
   ========================================================= */
input, textarea, select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    background: var(--bg-white);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(96, 187, 70, 0.1);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    overflow-x: auto;
    display: block;
}

table th, table td {
    border: 1px solid var(--border);
    padding: 12px;
    text-align: left;
}

table th {
    background: var(--primary);
    color: #fff;
}

@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
    }
}

/* =========================================================
   PAGINATION - BRAND COLORS
   ========================================================= */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.pagination a, .pagination span {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-white);
    transition: var(--transition);
}

.pagination .current {
    background: var(--primary);
    color: #fff;
}

.pagination a:hover {
    background: var(--secondary);
    color: #fff;
}

/* =========================================================
   SIDEBAR WIDGETS - BRAND COLORS
   ========================================================= */
.sidebar-widget {
    background: var(--bg-white);
    padding: 25px;
    margin-bottom: 30px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.sidebar-widget h3 {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--secondary);
}

/* =========================================================
   UTILITY CLASSES
   ========================================================= */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: var(--spacing-sm); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mb-3 { margin-bottom: var(--spacing-lg); }

.hidden-mobile {
    display: block;
}

@media (max-width: 768px) {
    .hidden-mobile {
        display: none;
    }
}

.hidden-desktop {
    display: none;
}

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

/* EMERGENCY MEGA MENU FIX - desktop only. The desktop mega-menu panel
   hangs below the header, so its ancestors must not clip it. Unguarded,
   this also forced overflow:visible !important onto the MOBILE drawer
   (.main-navigation), silently cancelling its overflow-y:auto - so a
   long open submenu could not scroll and the items below the fold were
   unreachable. */
@media (min-width: 992px) {
    header, .container, .navbar, .main-navigation, .nav-menu {
        overflow: visible !important;
    }
}

@media (min-width: 992px) {
    .mega-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        background: white !important;
        padding: 40px !important;
        z-index: 9999 !important;
        border-top: 3px solid #d4ae67 !important;
        box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
    }
    
    .mega-menu-item {
        position: static !important;
    }
    
    .mega-menu-item:hover .mega-menu {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* =========================================================
   SIAYA COUNTY DEPARTMENTS - BRAND COLORS
   ========================================================= */

/* Department Banner */
.dept-inner-banner {
    width: 100%;
    height: 437px;
    position: relative;
    /* Always fill the banner box completely and crop to fit, regardless
       of the uploaded image's original size/aspect ratio. */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 40px;
}

/* Brightness bump applied only to the photo layer (via this pseudo,
   which copies the same background image/position/size) rather than
   to .dept-inner-banner itself - filtering the parent would also wash
   out the dark overlay and white title sitting on top of it. */
.dept-inner-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center center;
    filter: brightness(1.15);
    z-index: 0;
}

.banner-content {
    position: relative;
    z-index: 2;
    max-width: 1250px;
    margin: 0 auto;
    /* "At the edge" of the banner - tighter than before (was 25px). */
    padding: 0 20px 14px;
    width: 100%;
    text-align: center;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Flat, even dark wash across the whole banner (not just behind
       the title) so the photo is uniformly dimmed and the white
       title reads clearly no matter where it's placed. */
    background: rgba(0,0,0,0.45);
}

.banner-content h1 {
    margin: 0;
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.55);
}

/* Main Container */
.siaya-dept-single-container {
    max-width: 1250px;
    margin: 0 auto 60px;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

/* Left Column - Main Content */
.siaya-dept-main {
    flex: 2;
    min-width: 300px;
}

/* Right Column - Sidebar */
.siaya-dept-sidebar {
    flex: 1;
    min-width: 280px;
}

/* Featured Image */
.dept-featured-row {
    margin-bottom: 30px;
}

.dept-featured-wrapper {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #f9f9f9;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.dept-featured-image {
    width: 100%;
}

.dept-featured-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Services Box - BRAND COLORS */
.dept-services-row {
    margin-bottom: 40px;
}

.dept-services-wrapper {
    width: 100%;
}

.dept-services-box {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 25px 30px;
    border-radius: 12px;
    border-left: 5px solid var(--secondary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.dept-services-box h3 {
    margin: 0 0 15px;
    color: var(--secondary);
    font-size: 1.3rem;
    font-weight: 600;
}

.services-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px 20px;
}

.services-list li {
    padding: 5px 0 5px 25px;
    position: relative;
    color: #555;
    font-size: 0.9rem;
}

.services-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--secondary);
    font-weight: bold;
}

/* Department Description - BRAND COLORS */
.dept-description {
    margin-bottom: 40px;
}

.dept-description p {
    margin-bottom: 1rem;
    line-height: 1.8;
    color: #555;
}

.dept-description h2,
.dept-description h3,
.dept-description h4 {
    color: var(--secondary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* Tabs Section - BRAND COLORS */
.dept-tabs-wrapper {
    margin-top: 40px;
    background: #fff;
    border-radius: 12px;
    border-left: 4px solid var(--secondary);
    border-right: 4px solid var(--secondary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
}

.dept-tabs-header-wrapper {
    padding: 25px 30px 0;
}

.dept-tabs-header-inner {
    margin-bottom: 20px;
}

.dept-tabs-header-inner h3 {
    color: var(--secondary);
    margin: 0 0 8px;
    font-size: 1.4rem;
}

.header-underline {
    width: 60px;
    height: 3px;
    background: var(--secondary);
}

.dept-tabs-nav {
    border-bottom: 2px solid #f0f0f0;
    margin: 0 30px;
}

.dept-tabs-header {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
}

.dept-tab-btn {
    background: none;
    border: none;
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    font-family: inherit;
}

.dept-tab-btn.active {
    color: var(--accent);
}

.dept-tab-btn:hover {
    color: var(--accent);
}

.tab-indicator {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--secondary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.dept-tab-btn.active .tab-indicator {
    transform: scaleX(1);
}

.dept-tabs-content {
    padding: 30px;
}

.dept-tab-pane {
    line-height: 1.8;
    color: #555;
}

.dept-tab-pane h3,
.dept-tab-pane h4 {
    color: var(--secondary);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.dept-tab-pane ul,
.dept-tab-pane ol {
    margin: 0.5rem 0 1rem 1.5rem;
}

.dept-tab-pane li {
    margin-bottom: 0.25rem;
}

/* Sidebar Contact Box - BRAND COLORS */
.sidebar-contact-box {
    background: var(--secondary);
    color: #fff;
    padding: 25px;
    border-radius: 8px;
    position: sticky;
    top: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.sidebar-contact-box h3 {
    margin: 0 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 12px;
    font-size: 1.2rem;
    color: #fff;
}

.hod-info {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.hod-info strong {
    display: block;
    opacity: 0.75;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.hod-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.hod-title {
    opacity: 0.85;
    font-size: 0.85rem;
}

.contact-details {
    font-size: 0.85rem;
}

.contact-details p {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.contact-icon {
    font-size: 1rem;
    min-width: 24px;
}

.contact-details a {
    color: #fff;
    text-decoration: underline;
}

.contact-details a:hover {
    opacity: 0.8;
}

.staff-count {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.15);
    text-align: center;
    font-size: 0.8rem;
}

.staff-count strong {
    font-size: 1.3rem;
    display: block;
    margin-top: 5px;
}

/* Management Grid - BRAND COLORS */
.dept-management-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.management-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.management-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.management-image {
    height: 240px;
    overflow: hidden;
    background: #f9f9f9;
}

.management-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.management-info {
    padding: 15px;
}

.management-info h4 {
    margin: 0 0 5px;
    color: var(--secondary);
    font-size: 1rem;
}

.management-title {
    color: var(--secondary);
    font-weight: 600;
    font-size: 0.8rem;
    margin: 0 0 8px;
}

.management-desc {
    color: #555;
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .siaya-dept-single-container {
        gap: 30px;
    }
    
    .services-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dept-inner-banner {
        height: 200px;
    }
    
    .banner-content h1 {
        font-size: 1.5rem;
    }
    
    .siaya-dept-single-container {
        flex-direction: column;
        gap: 25px;
    }
    
    .dept-services-box {
        padding: 18px 20px;
    }
    
    .dept-services-box h3 {
        font-size: 1.2rem;
    }
    
    .dept-tabs-header-wrapper {
        padding: 20px;
    }
    
    .dept-tabs-nav {
        margin: 0 20px;
    }
    
    .dept-tab-btn {
        padding: 10px 15px;
        font-size: 0.85rem;
    }
    
    .dept-tabs-content {
        padding: 20px;
    }
    
    .sidebar-contact-box {
        padding: 20px;
    }
    
    .dept-management-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .dept-inner-banner {
        height: 150px;
    }
    
    .banner-content h1 {
        font-size: 1.2rem;
    }
    
    .dept-services-box {
        padding: 15px;
    }
}

/* =========================================================
   TAB COMPONENT STYLES
   ========================================================= */

/* Tab container */
.office-tabs-holder {
    display: block;
    margin-top: 40px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    overflow: hidden;
}

/* Tab navigation */
.office-tabs-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 2px solid #f0f0f0;
    background: #fafafa;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

/* Tab buttons */
.office-tab-btn {
    display: inline-block;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 15px 25px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    outline: none;
    border-radius: 0;
}

/* Active tab */
.office-tab-btn.active {
    color: var(--accent);
    background: #ffffff;
    border-bottom: 3px solid var(--secondary);
}

/* Hover state */
.office-tab-btn:hover {
    color: var(--accent);
    background: #ffffff;
    border-bottom: 3px solid var(--secondary);
}

/* Tab content container */
.office-tabs-content {
    display: block;
    padding: 30px;
    background: #ffffff;
    width: 100%;
    clear: both;
}

/* Tab panes */
.office-tab-pane {
    display: none;
    line-height: 1.8;
    color: #555;
    width: 100%;
}

/* Active tab pane */
.office-tab-pane.active {
    display: block;
}

/* Mobile responsive */
@media only screen and (max-width: 768px) {
    .office-tab-btn {
        padding: 10px 15px;
        font-size: 14px;
    }
    
    .office-tabs-nav {
        flex-wrap: wrap;
    }
}

/* Print styles */
@media print {
    .office-tab-pane {
        display: block !important;
    }
    .office-tab-btn {
        display: none !important;
    }
}

/* Tab group styles */
.tab-group {
    background: #fff;
    border: 1px solid #ccd0d4;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.tab-group h4 {
    margin-top: 0;
    color: var(--accent);
    border-bottom: 2px solid var(--primary);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.remove-tab {
    background: #dc3232;
    color: #fff;
    border: none;
    margin-top: 10px;
    padding: 5px 15px;
    cursor: pointer;
    border-radius: 3px;
}

.remove-tab:hover {
    background: #a00;
    color: #fff;
}

#add-new-tab {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: bold;
    margin-top: 10px;
    padding: 8px 16px;
    height: auto;
}

#add-new-tab:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

.tabs-container {
    max-height: 600px;
    overflow-y: auto;
    padding: 5px;
    margin-bottom: 15px;
}

.form-table textarea {
    font-family: monospace;
    background: #f8f9fa;
    font-size: 13px;
    line-height: 1.5;
}

.form-table input[type="text"] {
    padding: 8px;
}

.notice-info {
    border-left-color: var(--primary);
    background: #f0f8ff;
}

.tab-group label {
    font-weight: 600;
    margin-bottom: 5px;
    display: inline-block;
}

.tab-group textarea {
    width: 100%;
}

/* =========================================================
   SPLIT SECTION LAYOUT
   ========================================================= */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 768px) {
    .split-section {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* =========================================================
   SECTION HEADERS - BRAND COLORS
   ========================================================= */
.section-header {
    margin-bottom: 30px;
}

.section-header h4 {
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.section-header h2 {
    color: #1a1a1a;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    position: relative;
    padding-bottom: 15px;
}

.section-header h2:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--primary);
}

/* =========================================================
   VIDEO WRAPPER
   ========================================================= */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* =========================================================
   EVENTS PANEL - BRAND COLORS
   ========================================================= */
.events-panel {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Event Items */
.event-item {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #e0e0e0;
    transition: transform 0.2s ease;
}

.event-item:last-child {
    border-bottom: none;
}

.event-item:hover {
    transform: translateX(5px);
}

/* Date Box - BRAND COLORS */
.event-date-box {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    background: var(--primary);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.event-date-box .day {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
}

.event-date-box .month {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Event Details - BRAND COLORS */
.event-details {
    flex: 1;
}

.event-details h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.event-details p {
    margin: 5px 0;
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
}

.event-details p i {
    width: 16px;
    color: var(--primary);
    font-size: 14px;
}

/* Button Styles - BRAND COLORS */
.btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--primary);
    color: white;
    border: 2px solid var(--primary);
}

.btn-primary:hover {
    background: transparent;
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Section Background & Container */
.section-padding {
    padding: 60px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Responsive Adjustments */
@media (max-width: 480px) {
    .section-padding {
        padding: 40px 0;
    }
    
    .section-header h2 {
        font-size: 24px;
    }
    
    .event-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .event-date-box {
        width: 60px;
        height: 60px;
    }
    
    .event-date-box .day {
        font-size: 24px;
    }
    
    .event-details h4 {
        font-size: 16px;
    }
    
    .events-panel {
        padding: 15px;
    }
}

/* =========================================================
   PRINT STYLES
   ========================================================= */
@media print {
    .top-bar, header, .hero-slider, .access-bar, 
    footer, .sidebar-widget, .pagination {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
}