/* Visually Hidden Class for Accessibility (Screen Readers Only) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Skip to Content Link (Accessibility) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: white;
    padding: 8px;
    z-index: 100;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* =========================================
   1. Global Reset & Typography
   ========================================= */
:root {
    --primary-color: #07f;
    --danger-color: #d00;
    --success-color: #28a745;
    --bg-light: #eee;
    --bg-white: #fff;
    --border-color: #ccc;
    --text-color: #333;
    --text-dark: #000;
}

* {
    box-sizing: border-box;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.5rem 0;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    color: var(--text-color);
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
}

ul {
    padding: 0;
    margin: 0;
}

header nav ul,
header nav ul ul,
.top-nav-list,
.top-nav-list ul,
.sidebar-box ul {
    list-style: none;
}

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

a:hover {
    text-decoration: underline;
}

/* =========================================
   2. Shared Layout Structure
   ========================================= */

.container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    display: grid;
    min-height: 100%;
    min-width: 0;
}

/* Header & Footer: Shared "Bar" Styles */
body>header {
    border-bottom: 1px solid var(--border-color);
    padding: 0 1.5rem;
    background: var(--bg-white);
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
}

/* Fixed Header Styles */
body.header-fixed {
    padding-top: 70px;
}

body.header-fixed>header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Scroll to Top Button */
#scrollToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s, bottom 0.3s;
}

#scrollToTopBtn:hover {
    background-color: #0062cc;
}

body>footer {
    border-top: 1px solid var(--border-color);
    background: var(--bg-white);
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

body>footer p {
    margin: 0;
}

/* Navigation inside Header */
body>header>nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

body>header>nav>#logo {
    font-weight: bold;
    font-size: 1.17rem;
    /* Matches standard H3 size */
}

body>header>nav>#logo a {
    color: var(--text-dark);
}

body>header>nav>ul {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.lang-switcher {
    display: flex;
    gap: 8px;
    align-items: center;
}

.lang-switcher a {
    display: flex;
    align-items: center;
    gap: 5px;
}

.lang-switcher img {
    display: block;
    border: 1px solid var(--bg-light);
    vertical-align: middle;
}

/* Main Content Area */
main {
    width: 100%;
    display: grid;
    padding: 2rem 0;
    max-width: 100%;
}

/* Remove vertical padding when using admin-style layout so sidebar spans full height */
body.admin-layout main,
main.main-admin-style {
    padding: 0;
}

/* =========================================
   3. Sidebar System (Unified)
   ========================================= */

aside {
    display: flex;
    flex-direction: column;
    min-width: 250px;
    width: 250px;
}

.sidebar-box {
    padding: 1.5rem;
}

.sidebar-box h3 {
    margin-top: 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.5rem;
    font-size: 1.1rem;
}

.sidebar-box ul li {
    margin-bottom: 0.5rem;
}

.sidebar-box ul li a {
    display: block;
    padding: 0.5rem 0;
    white-space: nowrap;
    /* Prevent nav links from wrapping */
}

/* VARIANT 1: Box Style (Default/Standard) */
.layout-standard .sidebar-box {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 1.5rem;
}

/* VARIANT 2: Admin Style (Clean) */
.layout-admin aside {
    background: var(--bg-light);
    min-height: 100%;
}

.layout-admin .sidebar-left {
    border-right: 1px solid var(--border-color);
}

.layout-admin .sidebar-right {
    border-left: 1px solid var(--border-color);
}

.layout-admin .sidebar-box {
    background: transparent;
    border: none;
    margin: 0;
    border-radius: 0;
}

/* =========================================
   4. Grid Systems
   ========================================= */

.grid-2-col-right {
    grid-template-columns: 1fr 250px;
}

.grid-2-col-left {
    grid-template-columns: 250px 1fr;
}

.grid-3-col {
    grid-template-columns: 250px 1fr 250px;
}

.content-area {
    padding: 2rem 1.5rem;
    min-width: 0;
    /* CRITICAL: Allows area to shrink so table-responsive works */
}

/* Mobile Layout (Responsive Grid) */
@media (max-width: 768px) {
    main {
        padding: 1rem 0;
    }

    .grid-2-col-right,
    .grid-2-col-left,
    .grid-3-col {
        grid-template-columns: 100%;
    }

    /* Stack Sidebar below Content */
    aside {
        width: 100%;
        min-width: 0;
    }

    .content-area {
        padding: 1rem;
    }

    /* Adjust Sidebar Spacing */
    .layout-standard .sidebar-box {
        margin: 1rem 0;
    }
}

/* Dashboard Grid Widget System */
#sidebar-toggle {
    display: none;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.widget {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.widget h3 {
    margin-top: 0;
    color: var(--primary-color);
}

/* Utility / Back Links */
.back-link,
.content-area>a:first-child,
.container>a:first-child {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Session Messages & Alerts (CSS-Only Dismissible) */
.alert-wrap {
    margin-bottom: 1.5rem;
}

.alert-toggle {
    display: none;
}

.msg {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.msg-success {
    background: var(--bg-light);
    border-color: var(--border-color);
}

.msg-error {
    background: #fee;
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.alert-close {
    cursor: pointer;
    font-weight: bold;
    padding: 0 0.5rem;
    opacity: 0.5;
}

.alert-close:hover {
    opacity: 1;
}

.alert-toggle:checked+.msg {
    display: none;
}

/* Generic Confirmation Box */
.confirm-box {
    max-width: 500px;
    margin: 2rem auto;
    text-align: center;
}

/* =========================================
   5. Reusable UI Components
   ========================================= */
.table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    /* Ensures table doesn't squish too much, triggering scroll */
}

th,
td {
    padding: 12px 8px;
    border: 1px solid var(--border-color);
    text-align: left;
    white-space: nowrap;
    /* Prevent text wrapping */
}

th {
    background: var(--bg-light);
}

/* Zebra Striping & Hover */
tbody tr:nth-child(even) {
    background: #fafafa;
}

tbody tr:hover {
    background: #f0f0f0;
}

/* End of Reusable UI Components */

/* Forms */
label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: bold;
    font-size: 0.85rem;
    /* Smaller font size for labels */
}

/* Global Input Fix: Exclude radios and checkboxes from huge widths */
input:not([type="radio"]):not([type="checkbox"]),
textarea,
select {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    font-family: inherit;
}

button,
.btn {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    cursor: pointer;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1.2;
    transition: background-color 0.2s, border-color 0.2s;
}

button:hover,
.btn:hover {
    background-color: #e6e6e6;
    text-decoration: none;
}

.btn-small {
    padding: 2px 8px;
    font-size: 0.8rem;
}

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

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.btn-success {
    background-color: var(--success-color);
    color: #fff;
    border-color: var(--success-color);
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-danger {
    background-color: var(--danger-color);
    color: #fff;
    border-color: var(--danger-color);
}

.btn-danger:hover {
    background-color: #bd2130;
    border-color: #b21f2d;
}

/* CSS Tabs System */
.tabs {
    display: flex;
    flex-wrap: wrap;
    /* CRITICAL: Allows content to wrap below buttons */
    margin-bottom: 20px;
}

.tabs input[type="radio"] {
    display: none;
    /* Keep them hidden */
}

.tab-button {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    border-bottom: none;
    background: var(--bg-light);
    margin-right: 5px;
}

.tab-content {
    border: 1px solid var(--border-color);
    padding: 20px;
    display: none;
    width: 100%;
    order: 1;
    /* Move content after buttons in flex flow */
}

/* Hardcoded Tab Logic Removed - Handled by JS + Generic Classes */

/* Manual Slug Utility */
.manual-slug-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -10px;
    margin-bottom: 15px;
}

.manual-slug-wrap input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.manual-slug-wrap label {
    margin: 0;
    font-weight: normal;
}

/* Login Page */
.login-wrapper {
    max-width: 400px;
    margin: 4rem auto;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-error {
    text-align: center;
    margin-bottom: 1rem;
}

.btn-block {
    width: 100%;
    display: block;
    margin-top: 1rem;
    padding: 0.8rem;
}

/* Blog Post / Article List */
article {
    margin-bottom: 30px;
}



/* =========================================
   6. Mobile Navigation (Hamburger)
   ========================================= */

/* Default State (Desktop): Hide Toggle */
.nav-toggle,
.nav-toggle-label {
    display: none;
}

/* =========================================
   Nested Navigation (Desktop Defaults) 
   ========================================= */
/* Reset label styles for desktop menu items to match links */
header nav .menu-item-label {
    margin-bottom: 0;
    font-weight: normal;
    font-size: 1rem;
    display: inline;
}

header nav ul li {
    position: relative;
}

/* Dropdown Menus */
header nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-white);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 100%;
    width: max-content;
    z-index: 100;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border-color);
}

/* 3rd Level Flyout */
header nav ul ul ul {
    top: 0;
    left: 100%;
    margin-top: -1px;
    /* Align borders */
}

header nav ul ul li {
    width: 100%;
    border-bottom: 1px solid var(--border-color);
}

header nav ul ul li:last-child {
    border-bottom: none;
}

header nav ul ul a {
    display: block;
    padding: 10px 15px;
    white-space: nowrap;
}

/* Show on Hover (Desktop) */
header nav ul li:hover>ul {
    display: block;
}

/* Mobile Toggles (Hidden on Desktop) */
.submenu-toggle,
.submenu-icon {
    display: none;
}

.menu-link-wrap {
    display: inline-block;
}

/* Mobile View */
@media (max-width: 768px) {

    /* Remove padding from header to allow full-width menu */
    body>header {
        padding: 0;
    }

    /* Header Layout */
    body>header>nav {
        flex-wrap: wrap;
        /* Allow menu to break to new line */
    }

    #logo {
        flex-basis: 50%;
        max-width: 50%;
        padding: 1rem 1.5rem;
        /* Restore visual padding */
    }

    /* Hamburger Button */
    .nav-toggle-label {
        display: flex;
        justify-content: flex-end;
        /* Align icon to right */
        align-items: center;
        flex-basis: 50%;
        max-width: 50%;
        cursor: pointer;
        padding: 1rem 1.5rem;
        /* Restore visual padding */
        margin-left: 0;
        /* Reset auto margin */
    }

    /* Hamburger Icon (Three Lines) */
    .nav-toggle-label span,
    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
        display: block;
        background: var(--text-color);
        height: 2px;
        width: 25px;
        position: relative;
        transition: all 0.2s ease-in-out;
    }

    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
        content: '';
        position: absolute;
    }

    .nav-toggle-label span::before {
        bottom: 8px;
    }

    .nav-toggle-label span::after {
        top: 8px;
    }

    /* Menu Container (Hidden by default) */
    body>header>nav>ul {
        display: none;
        flex-basis: 100%;
        /* Full Width */
        width: 100%;
        flex-direction: column;
        gap: 0;
        text-align: left;
        /* Align Left */
        padding-top: 0;
        border-top: 1px solid var(--bg-light);
        margin-top: 0;
    }

    /* Show Menu when Toggle is Checked */
    #nav-toggle:checked~ul {
        display: flex;
        animation: slideDown 0.3s ease-out;
    }

    /* Menu Items (Recursive for all levels) */
    header nav li {
        padding: 0;
        width: 100%;
        border-bottom: 1px solid var(--bg-light);
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    /* Direct Links (Recursive) - Full Clickable Area */
    header nav li>a {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 10px 1.5rem;
        min-height: 44px;
    }

    header nav li:last-child {
        border-bottom: none;
    }

    /* Language Switcher Adjustment */
    .lang-switcher {
        justify-content: center;
        padding-bottom: 0;
    }

    /* Animate Hamburger to X when Open */
    #nav-toggle:checked~.nav-toggle-label span {
        background: transparent;
    }

    #nav-toggle:checked~.nav-toggle-label span::before {
        transform: rotate(45deg);
        bottom: 0;
    }

    #nav-toggle:checked~.nav-toggle-label span::after {
        transform: rotate(-45deg);
        top: 0;
    }

    /* Mobile Nested Menus */

    /* Reset Desktop Styles */
    header nav ul ul,
    header nav ul ul ul {
        position: static;
        box-shadow: none;
        border: none;
        width: 100%;
        display: none;
        /* Hide by default */
        min-width: auto;
    }

    /* Indentation - Background */
    header nav ul ul {
        background: rgba(0, 0, 0, 0.03);
    }

    /* REMOVED OLD INDENTATION RULES */

    /* Disable Desktop Hover */
    header nav ul li:hover>ul {
        display: none;
    }

    /* Mobile Toggle Logic */
    .submenu-toggle {
        display: none;
    }

    /* Toggle Label Wrapper (Full Item) */
    header nav .menu-item-label {
        display: flex;
        align-items: center;
        width: 100%;
        cursor: pointer;
        justify-content: space-between;
    }

    /* Link inside Label (Text Only) */
    .menu-item-label a {
        flex: 1;
        display: block;
        padding: 10px 1.5rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        pointer-events: none;
        /* Crucial: Passes click to label */
    }

    /* Toggle Icon Area (Pseudo-element on Label) */
    .menu-item-label::after {
        content: '+';
        display: flex;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        /* Slightly larger for better visual */
        font-weight: normal;
        /* Lighter weight looks cleaner */
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        /* Smooth rotation */
    }

    /* Checkbox Logic - Open Submenu */
    /* GENERIC CLASS: Fast & Lazy */
    .submenu-toggle:checked~ul {
        display: block;
        animation: slideDown 0.2s ease-out;
        flex-basis: 100%;
    }

    /* Checkbox Logic - Rotate Icon */
    .submenu-toggle:checked~.menu-item-label::after {
        transform: rotate(45deg);
        /* Rotates the + to become an x */
        /* content: '+';  Keep content as + so it rotates into X visually */
    }

    /* Indentation Adjustments for Nested Items */
    /* Level 2 */
    header nav ul ul .menu-item-label a,
    header nav ul ul li>a {
        padding-left: 3rem;
    }

    /* Level 3 */
    header nav ul ul ul .menu-item-label a,
    header nav ul ul ul li>a {
        padding-left: 4.5rem;
    }

    /* Checkbox Logic using Generic Selector */
    /* REMOVED OLD SELECTORS TO AVOID CONFLICT */
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   7. Navigation & Switcher - Final Refactor
   ========================================= */

/* --- DESKTOP VIEW (Full Height & Alignment) --- */
@media (min-width: 769px) {

    /* 1. Header Container */
    body>header {
        height: 70px;
        padding: 0 1.5rem !important;
        display: flex;
        align-items: center;
    }

    /* 2. Nav & List Structure */
    body>header>nav,
    body>header>nav>ul,
    .top-nav-list {
        height: 100%;
        display: flex;
        align-items: center;
        gap: 0 !important;
        /* Fix unwanted spacing */
    }

    body>header>nav>ul>li,
    .top-nav-list>li {
        height: 100%;
        width: auto !important;
        /* Ensure it doesn't stretch */
        display: flex;
        align-items: center;
        position: relative;
        /* Anchor for dropdowns */
        margin: 0 !important;
        /* Force remove margins */
    }

    /* 3. Link / Trigger Styling */
    /* Target direct links and language switcher label triggers */
    body>header>nav>ul>li>a,
    .lang-switcher-dropdown>label>a,
    body>header>nav>ul>li>.menu-item-label>a {
        display: flex;
        align-items: center;
        gap: 8px;
        /* Add gap for consistent spacing */
        height: 100%;
        width: auto !important;
        /* Ensure content width */
        padding: 0 0.5rem;
        /* Standard padding */
        text-decoration: none !important;
        color: var(--text-color);
        transition: background-color 0.2s;
        border-radius: 0 !important;
        /* Ensure square corners for full height */
        white-space: nowrap;
    }

    /* Flag Spacing */
    body>header>nav>ul>li img,
    .lang-switcher-dropdown img {
        margin-right: 0;
        /* Remove fixed margin */
        display: block;
        /* Fix alignment quirks */
    }

    /* Tweak for Language Switcher List Mode (Tighten spacing around | ) */
    .lang-switcher a.lang-link {
        padding: 0 2px !important;
        /* Minimal padding */
    }

    .lang-switcher span {
        margin: 0;
        /* No margin around separator */
        color: var(--border-color);
        font-size: 0.8em;
        /* Make separator slightly smaller/thinner */
    }

    /* Ensure label wrapper fills height in desktop */
    body>header>nav>ul>li>.menu-item-label {
        height: 100%;
        display: flex;
        align-items: center;
        margin: 0;
        cursor: pointer;
    }

    /* Hover Effect */
    body>header>nav>ul>li>a:hover,
    .lang-switcher-dropdown>label>a:hover,
    body>header>nav>ul>li>.menu-item-label>a:hover {
        background-color: #f0f0f0 !important;
        color: var(--primary-color);
        text-decoration: none !important;
    }

    /* Arrow Indicators (Desktop) */

    /* 1. Top Level Items with Children (Down Arrow) */
    .top-nav-list>li.has-children>.menu-item-label>a::after,
    .top-nav-list>li.has-children>a::after,
    .lang-switcher-dropdown.has-children>label>a::after {
        content: '▼';
        font-size: 0.6em;
        margin-left: 0;
        /* Let gap handle spacing */
        display: inline-block;
        opacity: 0.7;
    }

    /* 2. Nested Items with Children (Right Arrow) */
    .top-nav-list ul li.has-children>.menu-item-label>a::after,
    .top-nav-list ul li.has-children>a::after {
        content: '▶';
        font-size: 0.7em;
        margin-left: auto;
        /* Push to right edge */
        margin-right: -5px;
        display: inline-block;
        opacity: 0.7;
    }

    /* 3. Nested Items inside Last Child (Left Arrow) */
    .top-nav-list>li:last-child ul li.has-children>.menu-item-label>a::after,
    .top-nav-list>li:last-child ul li.has-children>a::after {
        content: '◀';
        margin-left: 0;
        margin-right: auto;
        /* Push to left edge */
        order: -1;
        /* Move visually to start */
    }

    /* 4. Dropdown Positioning */
    header nav ul ul,
    .lang-switcher-dropdown ul {
        position: absolute;
        /* Ensure it floats */
        left: 0;
        /* Default alignment */
        z-index: 1000;
        top: 100%;
        /* flush with bottom of header */
        border-top: none;
        /* merge visually */
        background: var(--bg-white);
        border: 1px solid var(--border-color);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        min-width: 100% !important;
        /* Match parent width */
        width: max-content !important;
        /* Grow to fit content */
        padding: 5px 0;
    }

    /* Submenu Items Styling */
    header nav ul ul li a,
    .lang-switcher-dropdown ul li a {
        width: 100%;
        /* Dropdown items fill width */
        padding: 10px 15px;
        display: flex !important;
        /* Fix for flag alignment (was block) */
        align-items: center !important;
        gap: 10px;
        /* Space between flag and text */
        text-decoration: none !important;
        color: var(--text-color);
        transition: background-color 0.2s;
        box-sizing: border-box;
        /* Include padding in width */
    }

    /* Submenu Hover Effect */
    header nav ul ul li a:hover,
    .lang-switcher-dropdown ul li a:hover {
        background-color: #f0f0f0 !important;
        color: var(--primary-color);
        text-decoration: none !important;
    }

    /* Right Alignment for Edge Items (Last few children) */
    header nav>ul>li:last-child>ul,
    .lang-switcher-dropdown>ul {
        left: auto !important;
        right: 0 !important;
        transform: none !important;
        /* Reset any transforms */
    }

    /* Reverse Flyout for Nested Items near edge */
    header nav>ul>li:last-child ul ul,
    .lang-switcher-dropdown ul ul {
        left: auto !important;
        right: 100% !important;
        transform: none !important;
    }
}

/* --- MOBILE VIEW (Indentation & Consistency) --- */
@media (max-width: 768px) {

    /* 1. Reset Heights */
    body>header {
        height: auto;
        padding: 0;
    }

    body>header>nav>ul>li {
        height: auto;
        display: block;
    }

    /* 2. Base Item Styling (Level 0) */
    /* Target BOTH simple links and label-wrapped links identically */
    header nav ul li>a,
    header nav ul li .menu-item-label a {
        padding: 12px 1.5rem !important;
        /* Standard Mobile Padding */
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    /* 3. Toggle Icon Positioning (Absolute) */
    /* This removes the icon from flow so it doesn't shift text */
    header nav .menu-item-label {
        position: relative;
        display: block;
        width: 100%;
    }

    header nav .menu-item-label::after {
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        /* Click target size */
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* No border */
    }

    /* 4. Indentation Levels */
    /* Level 1 (First Nested UL) */
    header nav ul ul li>a,
    header nav ul ul .menu-item-label a {
        padding-left: 3rem !important;
        background-color: rgba(0, 0, 0, 0.02);
    }

    /* Level 2 (Second Nested UL) */
    header nav ul ul ul li>a,
    header nav ul ul ul .menu-item-label a {
        padding-left: 4.5rem !important;
        background-color: rgba(0, 0, 0, 0.04);
    }
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    gap: 0.5rem;
}

.pagination a,
.pagination span {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--bg-white);
    color: var(--text-color);
    text-decoration: none;
    border-radius: 4px;
}

.pagination a:hover {
    background: var(--bg-light);
    border-color: #bbb;
}

.pagination .current-page {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    pointer-events: none;
}

/* Post Content Typography */
.post-content {
    line-height: 1.6;
    margin-top: 1rem;
}

.post-content p {
    margin-bottom: 1rem;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.post-content ul,
.post-content ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
    list-style-position: outside;
}

.post-content ul {
    list-style-type: disc;
}

.post-content ol {
    list-style-type: decimal;
}

.post-content blockquote {
    border-left: 4px solid #ddd;
    padding-left: 1rem;
    margin-left: 0;
    margin-right: 0;
    color: #555;
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.post-content hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 2rem 0;
}

/* Tables - responsive wrapper for horizontal scroll */
.post-content .table-responsive {
    width: 100%;
    overflow-x: auto;
    margin: 1.5rem 0;
    -webkit-overflow-scrolling: touch;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.post-content .table-responsive table {
    margin: 0;
}

.post-content table th,
.post-content table td {
    border: 1px solid #ddd;
    padding: 10px 14px;
    text-align: left;
}

.post-content table th {
    background: #f5f5f5;
    font-weight: 600;
}

.post-content table tbody tr:nth-child(even) {
    background: #fafafa;
}

.post-content table tbody tr:hover {
    background: #f0f7ff;
}

/* ==========================================================================
   Block Editor Layouts (Frontend)
   ========================================================================== */

.block-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 1rem 0;
    width: 100%;
}

.block-col {
    position: relative;
    min-width: 0;
    /* Prevent flex overflow */
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
    .block-row {
        flex-direction: column;
    }

    .block-col {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* --- Resizable Images (Frontend) --- */
.resizable-wrapper {
    display: block;
    /* Stop inline-block baseline behavior */
    position: relative;
    max-width: 100%;
    margin: 1rem 0;
    /* Restore vertical spacing to align with text */
}

.resizable-wrapper img {
    display: block;
    /* Prevent inline baseline alignment */
    width: 100%;
    height: auto;
    vertical-align: top;
    /* Extra safeguard */
    margin: 0;
    /* Force reset of any margins */
}

/* --- Image Alignment (Frontend) --- */
.resizable-wrapper.align-left {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
}

.resizable-wrapper.align-center {
    display: block;
    margin: 10px auto;
    text-align: center;
}

.resizable-wrapper.align-right {
    float: right;
    margin-left: 15px;
    margin-bottom: 10px;
}

/* Clearfix for post content */
.post-content::after {
    content: "";
    display: table;
    clear: both;
}

/* --- Embed Blocks (Frontend) --- */
.embed-block {
    margin: 1.5rem 0;
}

.embed-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Twitter embeds don't need aspect ratio */
.embed-block[data-provider="Twitter"] .embed-responsive {
    padding-bottom: 0;
    height: auto;
    background: transparent;
}

.embed-block[data-provider="Twitter"] .embed-responsive iframe {
    position: relative;
    min-height: 250px;
}

/* Google Maps responsive */
.embed-block[data-provider="Google Maps"] .embed-responsive {
    padding-bottom: 75%; /* 4:3 aspect ratio for maps */
}

/* --- Callout / Alert Blocks (Frontend) --- */
.callout {
    border-radius: 8px;
    margin: 1.5rem 0;
    overflow: hidden;
}

.callout-title {
    font-weight: 600;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.callout-content {
    padding: 12px 16px;
}

.callout-content p:last-child {
    margin-bottom: 0;
}

/* Callout - Info (Blue) */
.callout-info {
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
}

.callout-info .callout-title {
    color: #004499;
    border-bottom-color: #b3d9ff;
}

/* Callout - Warning (Yellow/Orange) */
.callout-warning {
    background: #fff8e6;
    border: 1px solid #ffd966;
}

.callout-warning .callout-title {
    color: #996600;
    border-bottom-color: #ffd966;
}

/* Callout - Success (Green) */
.callout-success {
    background: #e6f7e6;
    border: 1px solid #99d699;
}

.callout-success .callout-title {
    color: #226622;
    border-bottom-color: #99d699;
}

/* Callout - Error (Red) */
.callout-error {
    background: #ffebeb;
    border: 1px solid #ffb3b3;
}

.callout-error .callout-title {
    color: #992222;
    border-bottom-color: #ffb3b3;
}

/* --- Accordion / Collapse Blocks (Frontend - Semantic HTML) --- */
.accordion {
    margin: 1.5rem 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.accordion-item {
    border-bottom: 1px solid #e0e0e0;
}

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

/* Summary element (the clickable header) */
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #f9f9f9;
    cursor: pointer;
    font-weight: 600;
    color: #333;
    transition: background 0.15s;
    user-select: none;
    list-style: none; /* Remove default marker */
}

/* Remove default summary marker for all browsers */
.accordion-header::-webkit-details-marker {
    display: none;
}

.accordion-header::marker {
    display: none;
}

.accordion-header:hover {
    background: #f0f0f0;
}

/* Custom expand/collapse indicator */
.accordion-header::after {
    content: '+';
    font-size: 1.4em;
    font-weight: 400;
    color: #666;
    flex-shrink: 0;
    margin-left: 12px;
}

/* When details is open, change indicator */
.accordion-item[open] > .accordion-header::after {
    content: '−';
}

.accordion-content {
    padding: 16px 18px;
    background: #fff;
    line-height: 1.6;
    color: #444;
}

.accordion-content p:last-child {
    margin-bottom: 0;
}

/* Nested Accordions */
.accordion-nested {
    margin-top: 12px;
    border-radius: 6px;
}

.accordion-nested .accordion-item:first-child {
    border-top: none;
}

.accordion-nested .accordion-header {
    padding: 10px 14px;
    font-size: 0.95em;
    background: #f5f5f5;
}

.accordion-nested .accordion-content {
    padding: 12px 14px;
}

/* Deeper nesting indication */
.accordion-nested .accordion-nested {
    border-left: 3px solid #3498db;
    border-radius: 0 6px 6px 0;
}

.accordion-nested .accordion-nested .accordion-header {
    background: #f0f0f0;
}