/**
 * App Layout Styles
 * Fixed sidebar, topbar, and scrollable content area
 */

/* ============================================
   Base Layout Structure
   ============================================ */

body.app-layout {
    overflow: hidden;
    height: 100vh;
    margin: 0;
    padding: 0;
}

/* Admin bar adjustment */
body.admin-bar.app-layout .app-topbar {
    top: 32px;
}

body.admin-bar.app-layout .app-content-wrapper {
    top: calc(32px + 70px);
}

@media screen and (max-width: 782px) {
    body.admin-bar.app-layout .app-topbar {
        top: 46px;
    }
    
    body.admin-bar.app-layout .app-content-wrapper {
        top: calc(46px + 70px);
    }
}

/* ============================================
   Fixed Sidebar
   ============================================ */

.app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 240px;
    background-color: #fff;
    border-right: 1px solid #e0e0e0;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.app-sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
}

/* Sidebar Header */
.app-sidebar-header {
    padding: 20px;
    background-color: #fff;
}

.app-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    transition: opacity 0.2s;
}

.app-sidebar-logo:hover {
    opacity: 0.8;
}

.app-logo-image {
    max-width: 100%;
    height: auto;
    max-height: 50px;
    width: auto;
    display: block;
}

.app-logo-text {
    display: block;
    line-height: 1.2;
}

.app-logo-text-with-image {
    font-size: 18px;
}

/* Sidebar Navigation */
.app-sidebar-nav {
    padding: 20px 0;
    overflow-y: auto;
}

.app-sidebar-nav:first-of-type {
    flex: 1;
}

/* Secondary Navigation - My Stuff */
.app-sidebar-nav-secondary {
    margin-top: 0;
    flex-shrink: 0;
}

.app-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-nav-menu li {
    margin: 0;
    padding: 0;
}

.app-nav-menu a {
    display: block;
    padding: 12px 20px;
    color: #000000;
    text-decoration: none;
    transition: border-left-color 0.2s, color 0.2s;
    border-left: 5px solid transparent;
    background-color: transparent;
}

.app-nav-menu a:hover,
.app-nav-menu a:focus,
.app-nav-menu .current-menu-item > a,
.app-nav-menu .current_page_item > a {
    color: #231900;
    border-left-color: #F5DF61;
    background-color: transparent;
}

/* User Profile Section */
.app-sidebar-user {
    position: relative;
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fff;
}

.app-user-profile-toggle {
    width: 100%;
    background: none !important;
    background-color: transparent !important;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.app-user-profile-toggle:hover,
.app-user-profile-toggle:focus,
.app-user-profile-toggle:active,
.app-user-profile-toggle[aria-expanded="true"] {
    background: transparent !important;
    background-color: transparent !important;
    outline: none;
}

.app-user-profile-toggle:hover .app-user-profile,
.app-user-profile-toggle:focus .app-user-profile,
.app-user-profile-toggle:active .app-user-profile,
.app-user-profile-toggle[aria-expanded="true"] .app-user-profile {
    background: transparent !important;
    background-color: transparent !important;
}

.app-sidebar-user {
    background-color: #fff !important;
}

.app-sidebar-user:hover,
.app-sidebar-user:focus,
.app-sidebar-user:active {
    background-color: #fff !important;
}

.app-user-profile-toggle:hover .app-user-name,
.app-user-profile-toggle:focus .app-user-name,
.app-user-profile-toggle:active .app-user-name {
    color: #333 !important;
}

.app-user-profile-toggle:hover .app-user-info,
.app-user-profile-toggle:focus .app-user-info,
.app-user-profile-toggle:active .app-user-info {
    color: inherit !important;
}

.app-user-profile-toggle:hover .app-user-badge,
.app-user-profile-toggle:focus .app-user-badge,
.app-user-profile-toggle:active .app-user-badge {
    color: #666 !important;
}

.app-user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.app-user-profile img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.app-user-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.app-user-name {
    font-weight: 600;
    color: #333 !important;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-user-profile-toggle:hover .app-user-name,
.app-user-profile-toggle:focus .app-user-name,
.app-user-profile-toggle:active .app-user-name {
    color: #333 !important;
}

.app-user-badge {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
}

.app-user-dropdown-icon {
    flex-shrink: 0;
    color: #666;
    transition: transform 0.2s;
    margin-left: auto;
}

.app-user-profile-toggle[aria-expanded="true"] .app-user-dropdown-icon {
    transform: rotate(180deg);
}

/* User Menu Dropdown */
.app-user-menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-top: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    display: none;
}

.app-user-menu-dropdown.active {
    display: block;
}

.app-user-menu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.app-user-menu li {
    margin: 0;
    padding: 0;
}

.app-user-menu a {
    display: block;
    padding: 12px 20px;
    color: #000000;
    text-decoration: none;
    font-size: 14px;
    transition: border-left-color 0.2s, color 0.2s;
    border-left: 5px solid transparent;
    background-color: transparent;
}

.app-user-menu a:hover,
.app-user-menu a:focus,
.app-user-menu .current-menu-item > a {
    color: #231900;
    border-left-color: #F5DF61;
    background-color: transparent;
}

/* Logged Out User Styles */
.app-sidebar-user-logged-out .app-user-profile-toggle {
    cursor: default;
    pointer-events: none;
}

.app-sidebar-user-logged-out .app-user-dropdown-icon {
    display: none;
}

.app-user-profile-logged-out {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.app-user-profile-image {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: cover;
}

.app-sidebar-user-logged-out .app-user-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.app-become-member-link {
    display: inline-block;
    color: #231900;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    margin-top: 4px;
    padding: 2px 4px;
    width: fit-content;
    align-self: flex-start;
}

.app-become-member-link:hover,
.app-become-member-link:focus {
    color: #231900;
}

/* Sidebar Footer */
.app-sidebar-footer {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #fff;
    margin-top: auto;
}

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

.app-footer-links li {
    margin: 0 0 8px 0;
}

.app-footer-links a {
    color: #231900;
    text-decoration: none;
    font-size: 13px;
    display: inline-block;
    padding: 2px 4px;
}

.app-footer-links a:hover,
.app-footer-links a:focus {
    color: #231900;
}

.app-sidebar-copyright {
    font-size: 11px;
    color: #999;
    text-align: center;
}

/* ============================================
   TOC Sidebar
   ============================================ */

.app-toc-sidebar {
    position: fixed;
    left: 240px;
    top: 70px;
    width: 240px;
    height: calc(100vh - 70px);
    background-color: #f8f9fa;
    border-right: 1px solid #e0e0e0;
    z-index: 998;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.app-toc-sidebar-content {
    padding: 24px 20px;
}

.app-toc-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: #333;
    padding-bottom: 12px;
    border-bottom: 2px solid #F5DF61;
}

.app-toc-nav {
    margin: 0;
}

.app-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-toc-list li {
    margin: 0;
    padding: 0;
}

.app-toc-link {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 8px 12px;
    padding-left: 12px;
    transition: color 0.2s, padding-left 0.2s, border-left-color 0.2s;
    border-left: 3px solid transparent;
    line-height: 1.5;
}

.app-toc-link:hover,
.app-toc-link:focus {
    color: #000;
    padding-left: 16px;
    border-left-color: #F5DF61;
    background-color: rgba(245, 223, 97, 0.1);
}

.app-toc-link.active {
    color: #231900;
    border-left-color: #F5DF61;
    background-color: rgba(245, 223, 97, 0.15);
    font-weight: 500;
}

/* Heading level styles */
.app-toc-level-2 .app-toc-link {
    font-weight: 600;
    font-size: 15px;
    padding-left: 12px;
}

.app-toc-level-3 .app-toc-link {
    font-weight: 500;
    font-size: 14px;
    padding-left: 24px;
}

.app-toc-level-4 .app-toc-link {
    font-weight: 400;
    font-size: 13px;
    padding-left: 36px;
}

.app-toc-level-5 .app-toc-link {
    font-weight: 400;
    font-size: 13px;
    padding-left: 48px;
}

.app-toc-level-6 .app-toc-link {
    font-weight: 400;
    font-size: 12px;
    padding-left: 60px;
}

/* Admin bar adjustment */
body.admin-bar .app-toc-sidebar {
    top: calc(32px + 70px);
    height: calc(100vh - 32px - 70px);
}

@media screen and (max-width: 782px) {
    body.admin-bar .app-toc-sidebar {
        top: calc(46px + 70px);
        height: calc(100vh - 46px - 70px);
    }
}

/* ============================================
   Fixed Topbar
   ============================================ */

.app-topbar {
    position: fixed;
    top: 0;
    left: 240px;
    right: 0;
    height: 70px;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    z-index: 999;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.app-topbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 30px 0 0;
    gap: 15px;
}

/* Add left padding only on mobile where menu toggle is visible */
@media screen and (max-width: 1024px) {
    .app-topbar-content {
        padding-left: 15px;
    }
}

/* Spacer for mobile menu toggle */
.app-topbar-spacer {
    flex: 1;
}

@media screen and (min-width: 1025px) {
    .app-topbar-spacer {
        display: none;
    }
}

/* Site Header Menu */
.app-header-menu-wrapper {
    display: flex;
    align-items: stretch;
    position: relative;
    height: 100%;
}

.app-header-menu-mobile-toggle {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s, background-color 0.2s;
}

.app-header-menu-mobile-toggle:hover,
.app-header-menu-mobile-toggle:focus {
    color: #231900;
    background-color: rgba(245, 223, 97, 0.2);
    outline: none;
}

.app-header-menu-mobile-toggle[aria-expanded="true"] .app-header-menu-mobile-toggle-icon {
    transform: rotate(180deg);
}

.app-header-menu-dropdown {
    position: static;
    display: flex;
    align-items: center;
    border: none;
    box-shadow: none;
    margin-top: 0;
    min-width: 0;
    max-width: none;
    background: transparent;
}

.app-topbar-menu {
    display: flex;
    align-items: center;
    height: 100%;
}

.app-header-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    height: 100%;
}

.app-header-menu > li {
    position: relative;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.app-header-menu > li > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 20px;
    color: #000000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s, background-color 0.2s;
    white-space: nowrap;
}

.app-header-menu > li > a:hover,
.app-header-menu > li > a:focus {
    color: #231900;
    background-color: rgba(245, 223, 97, 0.1);
}

.app-header-menu > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform 0.2s;
}

.app-header-menu > li.menu-item-has-children:hover > a::after,
.app-header-menu > li.menu-item-has-children > a:focus::after {
    transform: rotate(180deg);
}

/* Header Menu Dropdown */
.app-header-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-top: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    max-width: 300px;
    max-height: 500px;
    overflow-y: auto;
    margin-top: 0;
    display: none;
    list-style: none;
    padding: 8px 0;
    z-index: 1000;
}

.app-header-menu > li:hover > .sub-menu,
.app-header-menu > li:focus-within > .sub-menu {
    display: block;
}

.app-header-menu .sub-menu li {
    margin: 0;
    padding: 0;
}

.app-header-menu .sub-menu a {
    display: block;
    padding: 12px 20px;
    color: #000000;
    text-decoration: none;
    font-size: 14px;
    transition: border-left-color 0.2s, color 0.2s;
    border-left: 5px solid transparent;
    background-color: transparent;
}

.app-header-menu .sub-menu a:hover,
.app-header-menu .sub-menu a:focus,
.app-header-menu .sub-menu .current-menu-item > a {
    color: #231900;
    border-left-color: #F5DF61;
    background-color: transparent;
}

/* Nested dropdowns */
.app-header-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    margin-left: 10px;
    margin-top: 0;
}

.app-header-menu .sub-menu .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid currentColor;
    float: right;
    margin-top: 4px;
}

/* Topbar Actions */
.app-topbar-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.app-topbar-icon {
    position: relative;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    border-radius: 50%;
}

.app-topbar-icon:hover,
.app-topbar-icon:focus {
    color: #231900;
    background-color: rgba(245, 223, 97, 0.2);
    outline: none;
}

.app-notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: #ff4444;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}


/* Dropdowns */
.app-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 320px;
    max-width: 400px;
    max-height: 500px;
    overflow-y: auto;
    margin-top: 0;
    display: none;
}

.app-dropdown.active {
    display: block;
}

.app-dropdown-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.app-dropdown-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.app-dropdown-content {
    padding: 20px;
}

.app-empty-state {
    text-align: center;
    color: #999;
    margin: 20px 0;
    font-size: 14px;
}

/* Chat Panel */
.app-chat-panel {
    position: fixed;
    bottom: 0;
    right: 30px;
    width: 380px;
    height: 500px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: none;
    flex-direction: column;
}

.app-chat-panel.active {
    display: flex;
}

.app-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.app-chat-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.app-chat-close {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.app-chat-close:hover,
.app-chat-close:focus {
    color: #333;
    outline: none;
}

.app-chat-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

/* Search Loader */
.gp-search-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.gp-search-loader.active {
    display: flex;
}

.gp-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #F5DF61;
    border-radius: 50%;
    animation: gp-spin 1s linear infinite;
}

@keyframes gp-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   Scrollable Content Area
   ============================================ */

.app-content-wrapper {
    position: fixed;
    top: 70px;
    left: 240px;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    transition: left 0.3s ease;
}

/* Adjust content wrapper when TOC sidebar is present */
body.has-toc-sidebar .app-content-wrapper {
    left: 480px; /* 240px sidebar + 240px TOC sidebar */
}

/* Ensure the page container is properly structured */
.app-content-wrapper #page {
    min-height: 100%;
}

.app-content-wrapper .site-main {
    padding: 30px;
    max-width: 1200px;
    margin: 0;
}

/* ============================================
   Full-Width Container Support
   When GeneratePress full-width container is used
   ============================================ */

/* Full-width container pages - break out of constraints */
.app-content-wrapper body.full-width-content #page,
.app-content-wrapper .container-width-full #page,
.app-content-wrapper [class*="container-width-full"] #page {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Remove max-width and center alignment for full-width pages */
.app-content-wrapper body.full-width-content .site-main,
.app-content-wrapper .container-width-full .site-main,
.app-content-wrapper [class*="container-width-full"] .site-main {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: 0;
    margin-right: 0;
}

/* GeneratePress container classes - allow full width */
.app-content-wrapper body.full-width-content .main-content,
.app-content-wrapper body.full-width-content .content-area,
.app-content-wrapper body.full-width-content .inside-article,
.app-content-wrapper .container-width-full .main-content,
.app-content-wrapper .container-width-full .content-area,
.app-content-wrapper .container-width-full .inside-article {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* GeneratePress page content wrapper */
.app-content-wrapper body.full-width-content .site-content,
.app-content-wrapper .container-width-full .site-content {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

/* GeneratePress Elements container - full width support */
.app-content-wrapper body.full-width-content .generate-elements-container,
.app-content-wrapper .container-width-full .generate-elements-container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

/* Make sure GeneratePress content containers work */
.app-content-wrapper .inside-article,
.app-content-wrapper .content-area {
    position: relative;
}

/* ============================================
   GeneratePress Content Template Support
   Ensure content templates align left and don't stretch beyond sidebar
   ============================================ */

/* Remove centering from GeneratePress containers */
.app-content-wrapper .main-content,
.app-content-wrapper .site-content,
.app-content-wrapper .content-area,
.app-content-wrapper .inside-container,
.app-content-wrapper .container {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure GeneratePress content templates don't stretch beyond app-content-wrapper */
.app-content-wrapper .main-content,
.app-content-wrapper .site-content,
.app-content-wrapper #page {
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
}

/* Prevent content templates from breaking out of wrapper */
.app-content-wrapper .main-content > *,
.app-content-wrapper .site-content > *,
.app-content-wrapper .content-area > * {
    max-width: 100%;
}

/* Ensure GeneratePress Elements in content templates stay within bounds */
.app-content-wrapper .generate-elements-container {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Prevent GeneratePress layout controls from stretching beyond sidebar */
.app-content-wrapper #page[style*="width"],
.app-content-wrapper .main-content[style*="width"],
.app-content-wrapper .site-content[style*="width"] {
    max-width: 100% !important;
    width: 100% !important;
}

/* Prevent viewport-based widths from breaking layout */
.app-content-wrapper [style*="100vw"],
.app-content-wrapper [style*="calc(100vw"] {
    max-width: 100% !important;
    width: 100% !important;
}

/* Ensure GeneratePress full-width elements respect app-content-wrapper bounds */
.app-content-wrapper .generate-element,
.app-content-wrapper .gp-element {
    max-width: 100%;
}

/* Override any GeneratePress container width settings that might cause overlap */
.app-content-wrapper body[style*="width"] #page,
.app-content-wrapper body[style*="width"] .main-content,
.app-content-wrapper body[style*="width"] .site-content {
    max-width: 100% !important;
    width: 100% !important;
}

/* Ensure GeneratePress Elements work properly - they should be able to use fixed/absolute positioning */
.app-content-wrapper .generate-element,
.app-content-wrapper .gp-element {
    position: relative;
    z-index: 1;
}

/* Ensure full-width elements work - but respect app-content-wrapper bounds */
.app-content-wrapper .generate-element[class*="full-width"],
.app-content-wrapper .gp-element[class*="full-width"] {
    position: relative;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Only allow viewport break-out for elements explicitly marked as viewport-full */
.app-content-wrapper .generate-element.viewport-full-width,
.app-content-wrapper .gp-element.viewport-full-width {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;
}

/* Override GeneratePress container constraints for full-width pages */
.app-content-wrapper body.full-width-content .main-content > .container,
.app-content-wrapper body.full-width-content .site-content > .container,
.app-content-wrapper body.full-width-content .inside-container,
.app-content-wrapper .container-width-full .main-content > .container,
.app-content-wrapper .container-width-full .site-content > .container,
.app-content-wrapper .container-width-full .inside-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Allow GeneratePress blocks/containers to break out */
.app-content-wrapper body.full-width-content .wp-block-group,
.app-content-wrapper body.full-width-content .gb-container,
.app-content-wrapper .container-width-full .wp-block-group,
.app-content-wrapper .container-width-full .gb-container {
    max-width: 100%;
}

/* Ensure GeneratePress elements work within the wrapper */
.app-content-wrapper .generate-element,
.app-content-wrapper .gp-element {
    position: relative;
}

/* Ensure proper scrolling for nested content */
.app-content-wrapper > * {
    position: relative;
}

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

/* Mobile overlay/backdrop */
.app-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.app-mobile-overlay.active {
    display: block;
    opacity: 1;
}

@media screen and (max-width: 1024px) {
    .app-header-menu-mobile-toggle {
        display: flex;
    }

    .app-header-menu-dropdown {
        position: absolute;
        left: 0;
        top: 100%;
        margin-top: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        min-width: 160px;
        max-width: 240px;
        background-color: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        overflow-y: auto;
        z-index: 1000;
    }

    .app-header-menu-dropdown.active {
        display: flex;
    }

    .app-header-menu-dropdown .app-topbar-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        height: auto;
        padding: 8px 0;
        text-align: left;
    }

    .app-header-menu-dropdown .app-header-menu {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        text-align: left;
    }

    .app-header-menu-dropdown .app-header-menu > li {
        height: auto;
        display: block;
        text-align: left;
    }

    .app-header-menu-dropdown .app-header-menu > li > a {
        display: block;
        height: auto;
        padding: 12px 16px;
        text-align: left;
    }

    .app-header-menu-dropdown .app-header-menu .sub-menu {
        position: static;
        display: block;
        box-shadow: none;
        border: none;
        padding-left: 16px;
        margin-top: 0;
        text-align: left;
    }

    .app-header-menu-dropdown .app-header-menu .sub-menu a {
        text-align: left;
    }

    .app-header-menu-dropdown .app-header-menu > li.menu-item-has-children > a::after {
        display: none;
    }

    .app-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .app-sidebar.mobile-open {
        transform: translateX(0);
    }

    .app-topbar {
        left: 0;
    }

    /* Hide TOC sidebar on mobile/tablet */
    .app-toc-sidebar {
        display: none;
    }

    /* Reset content wrapper when TOC sidebar is hidden */

    .app-content-wrapper {
        left: 0;
    }

    body.has-toc-sidebar .app-content-wrapper {
        left: 0;
    }

    .app-topbar-search {
        max-width: none;
    }

    /* Mobile menu toggle button */
    .app-mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        color: #666;
        margin-right: 10px;
    }

    .app-mobile-menu-toggle:hover,
    .app-mobile-menu-toggle:focus {
        background: none !important;
        background-color: transparent !important;
        color: #666 !important;
        outline: none;
    }
}

/* Hide mobile menu toggle on desktop */
@media screen and (min-width: 1025px) {
    .app-mobile-menu-toggle {
        display: none !important;
    }

    .app-header-menu-mobile-toggle {
        display: none !important;
    }

    /* Header menu dropdown: inline on desktop (override .app-dropdown display: none) */
    .app-header-menu-dropdown {
        position: static;
        display: flex;
        border: none;
        box-shadow: none;
        margin-top: 0;
        min-width: 0;
        max-width: none;
        background: transparent;
    }

    /* Reduce padding between page content and TOC sidebar (desktop only, when TOC is visible) */
    body.has-toc-sidebar .app-content-wrapper .site-main {
        padding-left: 12px;
    }
}

@media screen and (max-width: 768px) {
    .app-topbar-content {
        padding: 0 15px;
    }

    .app-content-wrapper .site-main {
        padding: 20px 15px;
    }

    /* Full-width containers on mobile - minimal padding */
    .app-content-wrapper body.full-width-content .site-main,
    .app-content-wrapper .container-width-full .site-main {
        padding-left: 15px;
        padding-right: 15px;
    }

    .app-content-wrapper body.full-width-content .site-content,
    .app-content-wrapper .container-width-full .site-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .app-content-wrapper body.full-width-content .generate-elements-container,
    .app-content-wrapper .container-width-full .generate-elements-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .app-chat-panel {
        width: 100%;
        right: 0;
        height: 70vh;
    }
}

/* ============================================
   Narrow viewport fix (≤480px - iPhone 14, etc.)
   Prevents content cutoff and overlap at ~476px breakpoint
   ============================================ */
@media screen and (max-width: 480px) {
    /* Ensure no min-width causes horizontal overflow */
    html,
    body.app-layout {
        min-width: 0;
        overflow-x: hidden;
    }

    /* Content wrapper must fill viewport - no overflow */
    .app-content-wrapper {
        left: 0 !important;
        right: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* GeneratePress containers - force full width, prevent overflow */
    .app-content-wrapper #page,
    .app-content-wrapper .grid-container,
    .app-content-wrapper .site-content,
    .app-content-wrapper .content-area,
    .app-content-wrapper .main-content,
    .app-content-wrapper .inside-container,
    .app-content-wrapper .inside-article,
    .app-content-wrapper .generate-elements-container,
    .app-content-wrapper .site-main {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* Override viewport-full-width elements - they can cause overflow on narrow screens */
    .app-content-wrapper .generate-element.viewport-full-width,
    .app-content-wrapper .gp-element.viewport-full-width {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Allow flex/grid children to shrink below content size */
    .app-content-wrapper .main-content > *,
    .app-content-wrapper .site-content > *,
    .app-content-wrapper .content-area > *,
    .app-content-wrapper .inside-article > * {
        min-width: 0;
    }

    /* Prevent long words from causing horizontal overflow */
    .app-content-wrapper .entry-content,
    .app-content-wrapper .inside-article,
    .app-content-wrapper .content-area {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }

    /* Topbar adjustments for very narrow screens */
    .app-topbar-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Screen reader text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* ============================================
   Code Block Styles - GitHub Gist Style
   ============================================ */

.wp-block-code {
    display: flex;
    background-color: #ffffff;
    overflow: hidden;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 14px;
    line-height: 1.45;
    margin: 2em 0;
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
}

/* Line number column background - fallback if JS hasn't loaded */
.wp-block-code::before {
    content: '';
    flex-shrink: 0;
    width: 50px;
    background-color: #f6f8fa;
    border-right: 1px solid #e1e4e8;
    user-select: none;
    z-index: 1;
}

/* Hide ::before when line numbers are added */
.wp-block-code.has-line-numbers::before {
    display: none;
}

/* Line numbers container (added by JavaScript) */
.wp-block-code .code-line-numbers {
    flex-shrink: 0;
    width: 50px;
    background-color: #f6f8fa;
    border-right: 1px solid #e1e4e8;
    padding: 16px 8px;
    text-align: right;
    color: #888;
    font-size: 14px;
    line-height: 1.45;
    user-select: none;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}

.wp-block-code .code-line-numbers .line-number {
    display: block;
    padding: 0;
    margin: 0;
}

/* Code content area */
.wp-block-code code {
    flex: 1;
    display: block;
    padding: 16px;
    overflow-x: auto;
    background-color: #ffffff;
    color: #24292e;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    tab-size: 2;
    -moz-tab-size: 2;
    position: relative;
    min-width: 0;
    max-width: 100%;
}

/* Add subtle line separators */
.wp-block-code code {
    background-image: 
        repeating-linear-gradient(
            transparent,
            transparent calc(1.45em - 1px),
            rgba(225, 228, 232, 0.3) calc(1.45em - 1px),
            rgba(225, 228, 232, 0.3) 1.45em
        );
    background-position: 0 0;
    background-size: 100% 1.45em;
}

/* Syntax highlighting colors - GitHub Gist style */
/* Comments */
.wp-block-code code .comment,
.wp-block-code code .c1,
.wp-block-code code .c,
.wp-block-code code .cm {
    color: #6a737d;
    font-style: italic;
}

/* HTML/XML tags */
.wp-block-code code .nt,
.wp-block-code code .tag {
    color: #005cc5;
}

/* HTML/XML attributes */
.wp-block-code code .na,
.wp-block-code code .attr {
    color: #005cc5;
}

/* Strings and attribute values */
.wp-block-code code .s,
.wp-block-code code .s1,
.wp-block-code code .s2,
.wp-block-code code .string {
    color: #22863a;
}

/* Keywords */
.wp-block-code code .k,
.wp-block-code code .keyword {
    color: #d73a49;
}

/* Functions */
.wp-block-code code .nf,
.wp-block-code code .function {
    color: #d73a49;
}

/* Numbers */
.wp-block-code code .mi,
.wp-block-code code .number {
    color: #005cc5;
}

/* Operators */
.wp-block-code code .o,
.wp-block-code code .operator {
    color: #d73a49;
}

/* Variables */
.wp-block-code code .v,
.wp-block-code code .variable {
    color: #e36209;
}

/* Properties */
.wp-block-code code .p,
.wp-block-code code .property {
    color: #24292e;
}

/* Classes */
.wp-block-code code .nc,
.wp-block-code code .class {
    color: #6f42c1;
}

/* Scrollbar styling */
.wp-block-code code::-webkit-scrollbar {
    height: 8px;
}

.wp-block-code code::-webkit-scrollbar-track {
    background: #f6f8fa;
}

.wp-block-code code::-webkit-scrollbar-thumb {
    background: #c6cbd1;
    border-radius: 4px;
}

.wp-block-code code::-webkit-scrollbar-thumb:hover {
    background: #959da5;
}

/* Firefox scrollbar */
.wp-block-code code {
    scrollbar-width: thin;
    scrollbar-color: #c6cbd1 #f6f8fa;
}

/* ============================================
   Dark Mode Styles
   ============================================ */

:root.dark-mode {
    --dark-bg-primary: #1a1a1a;
    --dark-bg-secondary: #242424;
    --dark-bg-tertiary: #2d2d2d;
    --dark-text-primary: #e0e0e0;
    --dark-text-secondary: #b0b0b0;
    --dark-border: #3a3a3a;
    --dark-hover: #333333;
    --dark-accent: #F5DF61;
    --dark-accent-hover: #e6d050;
}

/* Base dark mode styles */
.dark-mode {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

.dark-mode body {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

/* Sidebar dark mode */
.dark-mode .app-sidebar {
    background-color: var(--dark-bg-secondary);
    border-right-color: var(--dark-border);
}

.dark-mode .app-sidebar-header {
    background-color: var(--dark-bg-secondary);
}

.dark-mode .app-sidebar-logo {
    color: var(--dark-text-primary);
}

.dark-mode .app-sidebar-user {
    background-color: var(--dark-bg-secondary) !important;
    border-bottom-color: var(--dark-border);
}

.dark-mode .app-sidebar-user:hover,
.dark-mode .app-sidebar-user:focus,
.dark-mode .app-sidebar-user:active {
    background-color: var(--dark-bg-secondary) !important;
}

.dark-mode .app-user-profile-toggle,
.dark-mode .app-user-profile-toggle:hover,
.dark-mode .app-user-profile-toggle:focus,
.dark-mode .app-user-profile-toggle:active,
.dark-mode .app-user-profile-toggle[aria-expanded="true"] {
    background: transparent !important;
    background-color: transparent !important;
}

.dark-mode .app-user-profile-toggle:hover .app-user-profile,
.dark-mode .app-user-profile-toggle:focus .app-user-profile,
.dark-mode .app-user-profile-toggle:active .app-user-profile,
.dark-mode .app-user-profile-toggle[aria-expanded="true"] .app-user-profile {
    background: transparent !important;
    background-color: transparent !important;
}

.dark-mode .app-user-name {
    color: var(--dark-text-primary) !important;
}

.dark-mode .app-user-badge {
    color: var(--dark-text-secondary);
}

.dark-mode .app-user-dropdown-icon {
    color: var(--dark-text-secondary);
}

.dark-mode .app-user-menu-dropdown {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dark-mode .app-nav-menu a {
    color: var(--dark-text-primary);
}

.dark-mode .app-nav-menu a:hover,
.dark-mode .app-nav-menu a:focus,
.dark-mode .app-nav-menu .current-menu-item > a,
.dark-mode .app-nav-menu .current_page_item > a {
    color: var(--dark-accent);
    border-left-color: var(--dark-accent);
    background-color: var(--dark-hover);
}

.dark-mode .app-user-menu a {
    color: var(--dark-text-primary);
}

.dark-mode .app-user-menu a:hover,
.dark-mode .app-user-menu a:focus,
.dark-mode .app-user-menu .current-menu-item > a {
    color: var(--dark-accent);
    border-left-color: var(--dark-accent);
    background-color: var(--dark-hover);
}

.dark-mode .app-sidebar-footer {
    background-color: var(--dark-bg-secondary);
    border-top-color: var(--dark-border);
}

.dark-mode .app-footer-links a {
    color: var(--dark-text-primary);
}

.dark-mode .app-footer-links a:hover,
.dark-mode .app-footer-links a:focus {
    color: var(--dark-accent);
}

.dark-mode .app-sidebar-copyright {
    color: var(--dark-text-secondary);
}

.dark-mode .app-become-member-link {
    color: var(--dark-accent);
}

.dark-mode .app-become-member-link:hover,
.dark-mode .app-become-member-link:focus {
    color: var(--dark-accent-hover);
}

/* Topbar dark mode */
.dark-mode .app-topbar {
    background-color: var(--dark-bg-secondary);
    border-bottom-color: var(--dark-border);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .app-header-menu-mobile-toggle {
    color: var(--dark-text-primary);
}

.dark-mode .app-header-menu-mobile-toggle:hover,
.dark-mode .app-header-menu-mobile-toggle:focus {
    color: var(--dark-accent);
    background-color: var(--dark-hover);
}

/* Header menu dropdown: no box styling when inline on desktop */
@media screen and (min-width: 1025px) {
    .dark-mode .app-header-menu-dropdown {
        background: transparent;
        border: none;
        box-shadow: none;
    }
}

/* Header menu dropdown panel: dark mode on mobile when open */
@media screen and (max-width: 1024px) {
    .dark-mode .app-header-menu-dropdown {
        background-color: var(--dark-bg-secondary);
        border-color: var(--dark-border);
    }
}

.dark-mode .app-header-menu > li > a {
    color: var(--dark-text-primary);
}

.dark-mode .app-header-menu > li > a:hover,
.dark-mode .app-header-menu > li > a:focus {
    color: var(--dark-accent);
    background-color: var(--dark-hover);
}

.dark-mode .app-header-menu .sub-menu {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dark-mode .app-header-menu .sub-menu a {
    color: var(--dark-text-primary);
}

.dark-mode .app-header-menu .sub-menu a:hover,
.dark-mode .app-header-menu .sub-menu a:focus,
.dark-mode .app-header-menu .sub-menu .current-menu-item > a {
    color: var(--dark-accent);
    border-left-color: var(--dark-accent);
    background-color: var(--dark-hover);
}

.dark-mode .app-topbar-icon {
    color: var(--dark-text-secondary);
}

.dark-mode .app-topbar-icon:hover,
.dark-mode .app-topbar-icon:focus {
    color: var(--dark-accent);
    background-color: var(--dark-hover);
}

.dark-mode .app-dark-mode-toggle {
    color: var(--dark-text-secondary);
}

.dark-mode .app-dark-mode-toggle:hover,
.dark-mode .app-dark-mode-toggle:focus {
    color: var(--dark-accent);
    background-color: var(--dark-hover);
}

/* Dark mode toggle icons */
.app-dark-mode-toggle svg {
    display: block;
    width: 20px;
    height: 20px;
}

.app-dark-mode-toggle .dark-mode-icon,
.app-dark-mode-toggle .light-mode-icon {
    transition: opacity 0.2s;
}

/* Dropdowns dark mode */
.dark-mode .app-dropdown-header {
    border-bottom-color: var(--dark-border);
}

.dark-mode .app-dropdown-header h3 {
    color: var(--dark-text-primary);
}

.dark-mode .app-empty-state {
    color: var(--dark-text-secondary);
}

/* Chat panel dark mode */
.dark-mode .app-chat-panel {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5);
}

.dark-mode .app-chat-header {
    border-bottom-color: var(--dark-border);
}

.dark-mode .app-chat-header h3 {
    color: var(--dark-text-primary);
}

.dark-mode .app-chat-close {
    color: var(--dark-text-secondary);
}

.dark-mode .app-chat-close:hover,
.dark-mode .app-chat-close:focus {
    color: var(--dark-text-primary);
}

/* TOC Sidebar dark mode */
.dark-mode .app-toc-sidebar {
    background-color: var(--dark-bg-secondary);
    border-right-color: var(--dark-border);
}

.dark-mode .app-toc-title {
    color: var(--dark-text-primary);
    border-bottom-color: var(--dark-accent);
}

.dark-mode .app-toc-link {
    color: var(--dark-text-secondary);
}

.dark-mode .app-toc-link:hover,
.dark-mode .app-toc-link:focus {
    color: var(--dark-text-primary);
    background-color: var(--dark-hover);
    border-left-color: var(--dark-accent);
}

.dark-mode .app-toc-link.active {
    color: var(--dark-accent);
    background-color: rgba(245, 223, 97, 0.15);
    border-left-color: var(--dark-accent);
    font-weight: 500;
}

/* Content area dark mode */
.dark-mode .app-content-wrapper {
    background-color: var(--dark-bg-primary);
}

.dark-mode .app-content-wrapper .site-main {
    color: var(--dark-text-primary);
}

/* Search loader dark mode */
.dark-mode .gp-search-loader {
    background-color: rgba(26, 26, 26, 0.95);
}

.dark-mode .gp-spinner {
    border-color: var(--dark-bg-tertiary);
    border-top-color: var(--dark-accent);
}

/* Mobile overlay dark mode */
.dark-mode .app-mobile-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Code blocks dark mode */
.dark-mode .wp-block-code {
    background-color: var(--dark-bg-secondary);
}

.dark-mode .wp-block-code::before {
    background-color: var(--dark-bg-tertiary);
    border-right-color: var(--dark-border);
}

.dark-mode .wp-block-code .code-line-numbers {
    background-color: var(--dark-bg-tertiary);
    border-right-color: var(--dark-border);
    color: var(--dark-text-secondary);
}

.dark-mode .wp-block-code code {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    background-image: 
        repeating-linear-gradient(
            transparent,
            transparent calc(1.45em - 1px),
            rgba(58, 58, 58, 0.5) calc(1.45em - 1px),
            rgba(58, 58, 58, 0.5) 1.45em
        );
}

.dark-mode .wp-block-code code::-webkit-scrollbar-track {
    background: var(--dark-bg-tertiary);
}

.dark-mode .wp-block-code code::-webkit-scrollbar-thumb {
    background: var(--dark-border);
}

.dark-mode .wp-block-code code::-webkit-scrollbar-thumb:hover {
    background: var(--dark-text-secondary);
}

.dark-mode .wp-block-code code {
    scrollbar-color: var(--dark-border) var(--dark-bg-tertiary);
}

/* Syntax highlighting dark mode */
.dark-mode .wp-block-code code .comment,
.dark-mode .wp-block-code code .c1,
.dark-mode .wp-block-code code .c,
.dark-mode .wp-block-code code .cm {
    color: #8b949e;
}

.dark-mode .wp-block-code code .nt,
.dark-mode .wp-block-code code .tag {
    color: #79c0ff;
}

.dark-mode .wp-block-code code .na,
.dark-mode .wp-block-code code .attr {
    color: #79c0ff;
}

.dark-mode .wp-block-code code .s,
.dark-mode .wp-block-code code .s1,
.dark-mode .wp-block-code code .s2,
.dark-mode .wp-block-code code .string {
    color: #a5d6ff;
}

.dark-mode .wp-block-code code .k,
.dark-mode .wp-block-code code .keyword {
    color: #ff7b72;
}

.dark-mode .wp-block-code code .nf,
.dark-mode .wp-block-code code .function {
    color: #d2a8ff;
}

.dark-mode .wp-block-code code .mi,
.dark-mode .wp-block-code code .number {
    color: #79c0ff;
}

.dark-mode .wp-block-code code .o,
.dark-mode .wp-block-code code .operator {
    color: #ff7b72;
}

.dark-mode .wp-block-code code .v,
.dark-mode .wp-block-code code .variable {
    color: #ffa657;
}

.dark-mode .wp-block-code code .p,
.dark-mode .wp-block-code code .property {
    color: var(--dark-text-primary);
}

.dark-mode .wp-block-code code .nc,
.dark-mode .wp-block-code code .class {
    color: #d2a8ff;
}

/* General content dark mode */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: var(--dark-text-primary);
}

.dark-mode p {
    color: var(--dark-text-primary);
}

.dark-mode a {
    color: var(--dark-accent);
}

.dark-mode a:hover,
.dark-mode a:focus {
    color: var(--dark-accent-hover);
}

.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: var(--dark-accent);
    outline-color: var(--dark-accent);
}

.dark-mode button {
    color: var(--dark-text-primary);
}

.dark-mode .app-mobile-menu-toggle {
    color: var(--dark-text-secondary);
}

.dark-mode .app-mobile-menu-toggle:hover,
.dark-mode .app-mobile-menu-toggle:focus {
    color: var(--dark-text-primary);
}

/* Author Box and Post Meta Dark Mode */
.dark-mode .author-box,
.dark-mode .post-author,
.dark-mode .entry-author,
.dark-mode .author-info,
.dark-mode .author-meta,
.dark-mode .gb-author-box,
.dark-mode .generate-author-box,
.dark-mode [class*="author-box"],
.dark-mode [class*="author-info"] {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .author-box *,
.dark-mode .post-author *,
.dark-mode .entry-author *,
.dark-mode .author-info *,
.dark-mode .author-meta *,
.dark-mode .gb-author-box *,
.dark-mode .generate-author-box * {
    color: var(--dark-text-primary);
}

.dark-mode .author-box a,
.dark-mode .post-author a,
.dark-mode .entry-author a,
.dark-mode .author-info a,
.dark-mode .author-meta a,
.dark-mode .gb-author-box a,
.dark-mode .generate-author-box a {
    color: var(--dark-accent);
}

.dark-mode .author-box a:hover,
.dark-mode .post-author a:hover,
.dark-mode .entry-author a:hover,
.dark-mode .author-info a:hover,
.dark-mode .author-meta a:hover,
.dark-mode .gb-author-box a:hover,
.dark-mode .generate-author-box a:hover {
    color: var(--dark-accent-hover);
}

.dark-mode .author-box h3,
.dark-mode .author-box h4,
.dark-mode .post-author h3,
.dark-mode .post-author h4,
.dark-mode .entry-author h3,
.dark-mode .entry-author h4,
.dark-mode .author-info h3,
.dark-mode .author-info h4,
.dark-mode .gb-author-box h3,
.dark-mode .gb-author-box h4 {
    color: var(--dark-text-primary);
}

.dark-mode .author-box .author-name,
.dark-mode .post-author .author-name,
.dark-mode .entry-author .author-name {
    color: var(--dark-text-primary);
}

.dark-mode .author-box .author-bio,
.dark-mode .post-author .author-bio,
.dark-mode .entry-author .author-bio {
    color: var(--dark-text-secondary);
}

.dark-mode .author-box img,
.dark-mode .post-author img,
.dark-mode .entry-author img,
.dark-mode .author-info img {
    border-color: var(--dark-border);
}

/* Post Meta Dark Mode */
.dark-mode .post-meta,
.dark-mode .entry-meta,
.dark-mode .entry-header .entry-meta,
.dark-mode .gb-post-meta,
.dark-mode [class*="post-meta"],
.dark-mode [class*="entry-meta"] {
    color: var(--dark-text-secondary);
}

.dark-mode .post-meta a,
.dark-mode .entry-meta a,
.dark-mode .gb-post-meta a {
    color: var(--dark-accent);
}

.dark-mode .post-meta a:hover,
.dark-mode .entry-meta a:hover,
.dark-mode .gb-post-meta a:hover {
    color: var(--dark-accent-hover);
}

.dark-mode .entry-header,
.dark-mode .post-header,
.dark-mode .entry-title,
.dark-mode .post-title,
.dark-mode h1.entry-title,
.dark-mode h2.entry-title {
    color: var(--dark-text-primary);
}

.dark-mode .entry-content,
.dark-mode .post-content,
.dark-mode .entry-summary,
.dark-mode .post-excerpt {
    color: var(--dark-text-primary);
}

.dark-mode .entry-content p,
.dark-mode .post-content p,
.dark-mode .entry-summary p,
.dark-mode .post-excerpt p {
    color: var(--dark-text-primary);
}

/* GeneratePress Elements Dark Mode */
.dark-mode .generate-elements-container,
.dark-mode .gp-container {
    background-color: transparent;
    color: var(--dark-text-primary);
}

/* GenerateBlocks - Only apply to containers that don't have their own styling */
.dark-mode .gb-container:not(.gb-container-query):not([class*="has-background"]) {
    background-color: transparent;
    color: var(--dark-text-primary);
}

.dark-mode .gb-grid {
    background-color: transparent;
}

/* Only override GenerateBlocks backgrounds if they're explicitly set */
.dark-mode .gb-container[class*="has-background"] {
    background-color: var(--dark-bg-secondary) !important;
}


/* Cards and Boxes Dark Mode */
.dark-mode .card,
.dark-mode .box,
.dark-mode .widget,
.dark-mode .sidebar .widget,
.dark-mode [class*="card"],
.dark-mode [class*="box"] {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .card h3,
.dark-mode .card h4,
.dark-mode .box h3,
.dark-mode .box h4,
.dark-mode .widget h3,
.dark-mode .widget h4 {
    color: var(--dark-text-primary);
}

.dark-mode .card a,
.dark-mode .box a,
.dark-mode .widget a {
    color: var(--dark-accent);
}

.dark-mode .card a:hover,
.dark-mode .box a:hover,
.dark-mode .widget a:hover {
    color: var(--dark-accent-hover);
}

/* Tables Dark Mode */
.dark-mode table,
.dark-mode .wp-block-table,
.dark-mode .wp-block-table table {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

.dark-mode table th,
.dark-mode .wp-block-table th {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

.dark-mode table td,
.dark-mode .wp-block-table td {
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode table tr:nth-child(even),
.dark-mode .wp-block-table tr:nth-child(even) {
    background-color: var(--dark-bg-tertiary);
}

/* Blockquotes Dark Mode */
.dark-mode blockquote,
.dark-mode .wp-block-quote,
.dark-mode .wp-block-quote blockquote {
    background-color: var(--dark-bg-secondary);
    border-left-color: var(--dark-accent);
    color: var(--dark-text-primary);
}

.dark-mode blockquote p,
.dark-mode .wp-block-quote p {
    color: var(--dark-text-primary);
}

.dark-mode blockquote cite,
.dark-mode .wp-block-quote cite {
    color: var(--dark-text-secondary);
}

/* Lists Dark Mode */
.dark-mode ul,
.dark-mode ol,
.dark-mode li {
    color: var(--dark-text-primary);
}

.dark-mode ul li::marker,
.dark-mode ol li::marker {
    color: var(--dark-text-secondary);
}

/* Images Dark Mode */
.dark-mode img {
    opacity: 0.9;
}

.dark-mode img:hover {
    opacity: 1;
}

/* Forms Dark Mode */
.dark-mode form,
.dark-mode .wp-block-search,
.dark-mode .search-form {
    color: var(--dark-text-primary);
}

.dark-mode .wp-block-search__input,
.dark-mode input[type="search"],
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="url"],
.dark-mode input[type="password"],
.dark-mode textarea,
.dark-mode select {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

.dark-mode .wp-block-search__button,
.dark-mode button[type="submit"],
.dark-mode input[type="submit"] {
    background-color: var(--dark-accent);
    color: #000;
}

.dark-mode .wp-block-search__button:hover,
.dark-mode button[type="submit"]:hover,
.dark-mode input[type="submit"]:hover {
    background-color: var(--dark-accent-hover);
}

/* Buttons Dark Mode */
.dark-mode .wp-block-button,
.dark-mode .wp-block-button__link,
.dark-mode .button,
.dark-mode button:not(.app-topbar-icon):not(.app-mobile-menu-toggle) {
    background-color: var(--dark-accent);
    color: #000;
}

.dark-mode .wp-block-button.is-style-outline .wp-block-button__link,
.dark-mode .button.outline {
    background-color: transparent;
    border-color: var(--dark-accent);
    color: var(--dark-accent);
}

.dark-mode .wp-block-button.is-style-outline .wp-block-button__link:hover,
.dark-mode .button.outline:hover {
    background-color: var(--dark-accent);
    color: #000;
}

/* Separators Dark Mode */
.dark-mode hr,
.dark-mode .wp-block-separator,
.dark-mode .separator {
    border-color: var(--dark-border);
    background-color: var(--dark-border);
}

/* Pre and Code Dark Mode */
.dark-mode pre {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

.dark-mode code:not(.wp-block-code code) {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-accent);
    border-color: var(--dark-border);
}

/* WordPress Blocks Dark Mode */
.dark-mode .wp-block-group,
.dark-mode .wp-block-columns,
.dark-mode .wp-block-column {
    color: var(--dark-text-primary);
}

.dark-mode .wp-block-group.has-background,
.dark-mode .wp-block-columns.has-background,
.dark-mode .wp-block-column.has-background {
    background-color: var(--dark-bg-secondary);
}

.dark-mode .wp-block-cover,
.dark-mode .wp-block-cover__background {
    background-color: var(--dark-bg-secondary);
}

.dark-mode .wp-block-media-text {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
}

/* GenerateBlocks Specific Dark Mode */
.dark-mode .gb-headline,
.dark-mode .gb-button,
.dark-mode .gb-icon,
.dark-mode .gb-image {
    color: var(--dark-text-primary);
}

.dark-mode .gb-headline a {
    color: var(--dark-accent);
}

.dark-mode .gb-headline a:hover {
    color: var(--dark-accent-hover);
}

/* GenerateBlocks Query Loop Containers - Let them handle their own styling */
.dark-mode .gb-container-query,
.dark-mode [class*="gb-query"],
.dark-mode [class*="gb-container-query"] {
    /* Don't override GenerateBlocks query containers - they have their own styling */
    background-color: unset !important;
    color: unset !important;
}

/* Breadcrumbs Dark Mode */
.dark-mode .breadcrumbs,
.dark-mode .breadcrumb,
.dark-mode .generate-breadcrumb,
.dark-mode [class*="breadcrumb"] {
    color: var(--dark-text-secondary);
}

.dark-mode .breadcrumbs a,
.dark-mode .breadcrumb a {
    color: var(--dark-accent);
}

.dark-mode .breadcrumbs a:hover,
.dark-mode .breadcrumb a:hover {
    color: var(--dark-accent-hover);
}

/* Pagination Dark Mode */
.dark-mode .pagination,
.dark-mode .page-numbers,
.dark-mode .nav-links {
    color: var(--dark-text-primary);
}

.dark-mode .pagination a,
.dark-mode .page-numbers a,
.dark-mode .nav-links a {
    color: var(--dark-accent);
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

.dark-mode .pagination a:hover,
.dark-mode .page-numbers a:hover,
.dark-mode .nav-links a:hover {
    background-color: var(--dark-hover);
    color: var(--dark-accent-hover);
}

.dark-mode .pagination .current,
.dark-mode .page-numbers .current,
.dark-mode .nav-links .current {
    background-color: var(--dark-accent);
    color: #000;
    border-color: var(--dark-accent);
}

/* Tags and Categories Dark Mode */
.dark-mode .tags,
.dark-mode .post-tags,
.dark-mode .entry-tags,
.dark-mode .categories,
.dark-mode .post-categories,
.dark-mode .entry-categories {
    color: var(--dark-text-secondary);
}

.dark-mode .tags a,
.dark-mode .post-tags a,
.dark-mode .entry-tags a,
.dark-mode .categories a,
.dark-mode .post-categories a,
.dark-mode .entry-categories a {
    color: var(--dark-accent);
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

.dark-mode .tags a:hover,
.dark-mode .post-tags a:hover,
.dark-mode .entry-tags a:hover,
.dark-mode .categories a:hover,
.dark-mode .post-categories a:hover,
.dark-mode .entry-categories a:hover {
    background-color: var(--dark-hover);
    color: var(--dark-accent-hover);
}

/* Related Posts Dark Mode - Only apply to specific classes, not all [class*="related"] */
.dark-mode .related-posts,
.dark-mode .related-post {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .related-posts h3,
.dark-mode .related-post h3 {
    color: var(--dark-text-primary);
}

.dark-mode .related-posts a,
.dark-mode .related-post a {
    color: var(--dark-accent);
}

.dark-mode .related-posts a:hover,
.dark-mode .related-post a:hover {
    color: var(--dark-accent-hover);
}

/* Comments Dark Mode - Standard WordPress comments only, exclude WP Discuz */
.dark-mode .comments-area:not([class*="wpdiscuz"]):not([class*="wpd-"]),
.dark-mode .comment-list:not([class*="wpdiscuz"]):not([class*="wpd-"]),
.dark-mode .comment:not([class*="wpdiscuz"]):not([class*="wpd-"]) {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .comment-author:not([class*="wpdiscuz"]):not([class*="wpd-"]),
.dark-mode .comment-meta:not([class*="wpdiscuz"]):not([class*="wpd-"]) {
    color: var(--dark-text-secondary);
}

.dark-mode .comment-content:not([class*="wpdiscuz"]):not([class*="wpd-"]) {
    color: var(--dark-text-primary);
}

.dark-mode .comment-reply-link:not([class*="wpdiscuz"]):not([class*="wpd-"]) {
    color: var(--dark-accent);
}

.dark-mode .comment-reply-link:hover:not([class*="wpdiscuz"]):not([class*="wpd-"]) {
    color: var(--dark-accent-hover);
}

/* Generic content containers - Scope to app-content-wrapper to avoid plugin conflicts */
.dark-mode .app-content-wrapper .site-content,
.dark-mode .app-content-wrapper .content-area,
.dark-mode .app-content-wrapper .main-content,
.dark-mode .app-content-wrapper .inside-article,
.dark-mode .app-content-wrapper article,
.dark-mode .app-content-wrapper .entry,
.dark-mode .app-content-wrapper .post {
    background-color: transparent;
    color: var(--dark-text-primary);
}

.dark-mode .app-content-wrapper .site-content h1,
.dark-mode .app-content-wrapper .site-content h2,
.dark-mode .app-content-wrapper .site-content h3,
.dark-mode .app-content-wrapper .site-content h4,
.dark-mode .app-content-wrapper .site-content h5,
.dark-mode .app-content-wrapper .site-content h6,
.dark-mode .app-content-wrapper .content-area h1,
.dark-mode .app-content-wrapper .content-area h2,
.dark-mode .app-content-wrapper .content-area h3,
.dark-mode .app-content-wrapper .content-area h4,
.dark-mode .app-content-wrapper .content-area h5,
.dark-mode .app-content-wrapper .content-area h6 {
    color: var(--dark-text-primary);
}

/* WP Discuz - Only remove yellow background from comment area icons */
/* Target only the toolbar buttons and field icons in WP Discuz comment area */
.dark-mode .wp-block-comments-wpdiscuz .ql-toolbar button,
.dark-mode .wp-block-comments-wpdiscuz .wpd-field-icon,
.dark-mode [class*="wpdiscuz"] .ql-toolbar button,
.dark-mode [class*="wpdiscuz"] .wpd-field-icon,
.dark-mode [class*="wpd-"] .ql-toolbar button,
.dark-mode [class*="wpd-"] .wpd-field-icon {
    background-color: transparent !important;
    background: transparent !important;
}