/**
 * Kadence Theme Dark Mode Overrides
 * Forces dark mode styling onto Kadence theme elements
 * Works in conjunction with brand-colors.css theme variables
 */

/* ========================================
   GLOBAL DARK MODE - BODY & PAGE
   ======================================== */

html.theme-dark body,
html.theme-dark #page,
html.theme-dark .site {
    background: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* ========================================
   KADENCE CONTENT AREAS
   ======================================== */

html.theme-dark .content-bg,
html.theme-dark .site-container,
html.theme-dark .entry-content-wrap,
html.theme-dark article,
html.theme-dark .entry-content,
html.theme-dark .content-wrap {
    background: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* ========================================
   TEXT ELEMENTS
   ======================================== */

html.theme-dark h1:not(.site-footer *):not(.footer-widget *):not(#colophon *),
html.theme-dark h2:not(.site-footer *):not(.footer-widget *):not(#colophon *),
html.theme-dark h3:not(.site-footer *):not(.footer-widget *):not(#colophon *),
html.theme-dark h4:not(.site-footer *):not(.footer-widget *):not(#colophon *),
html.theme-dark h5:not(.site-footer *):not(.footer-widget *):not(#colophon *),
html.theme-dark h6:not(.site-footer *):not(.footer-widget *):not(#colophon *),
html.theme-dark .entry-title,
html.theme-dark .page-title,
html.theme-dark .wp-block-heading {
    color: var(--dark-text-primary) !important;
}

/* Apply dark mode text to all content except header and footer */
html.theme-dark p:not(.site-footer *):not(.footer-widget *):not(#colophon *),
html.theme-dark li:not(.site-footer *):not(.footer-widget *):not(#colophon *),
html.theme-dark span:not(.cjbb-global-header *):not(.header-dropdown *):not(.site-footer *):not(.footer-widget *):not(#colophon *),
html.theme-dark div:not(.cjbb-global-header *):not(.header-dropdown *):not(.site-footer *):not(.footer-widget *):not(#colophon *) {
    color: var(--dark-text-primary);
}

html.theme-dark a:not(.cjbb-global-header a):not(.header-dropdown a):not(.btn):not(.button):not(.site-footer a):not(.footer-widget a) {
    color: var(--brand-primary);
}

html.theme-dark a:hover:not(.cjbb-global-header a):not(.header-dropdown a):not(.btn):not(.button):not(.site-footer a):not(.footer-widget a) {
    color: var(--brand-primary-dark);
}

/* ========================================
   KADENCE BLOCKS & CONTAINERS
   ======================================== */

html.theme-dark .wp-block-group,
html.theme-dark .wp-block-cover,
html.theme-dark .wp-block-column,
html.theme-dark .wp-block-columns,
html.theme-dark .kb-row-layout-wrap,
html.theme-dark .kt-row-layout-inner,
html.theme-dark .kb-inside {
    background: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* ========================================
   KADENCE CARDS & PANELS
   ======================================== */

html.theme-dark .kb-card,
html.theme-dark .kb-panel,
html.theme-dark .wp-block-kadence-card,
html.theme-dark .entry-hero-container-inner,
html.theme-dark .post-thumbnail {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-default) !important;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

html.theme-dark input[type="text"],
html.theme-dark input[type="email"],
html.theme-dark input[type="url"],
html.theme-dark input[type="password"],
html.theme-dark input[type="search"],
html.theme-dark input[type="number"],
html.theme-dark input[type="tel"],
html.theme-dark input[type="date"],
html.theme-dark textarea,
html.theme-dark select {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-default) !important;
}

html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder {
    color: var(--dark-text-tertiary) !important;
}

html.theme-dark input:focus,
html.theme-dark textarea:focus,
html.theme-dark select:focus {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--brand-primary) !important;
    outline-color: var(--brand-primary) !important;
}

/* ========================================
   TABLES
   ======================================== */

html.theme-dark table,
html.theme-dark th,
html.theme-dark td {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-default) !important;
}

html.theme-dark table thead,
html.theme-dark table tfoot {
    background: var(--dark-bg-tertiary) !important;
}

html.theme-dark table tr:hover {
    background: var(--dark-bg-tertiary) !important;
}

/* ========================================
   SIDEBARS & WIDGETS
   ======================================== */

html.theme-dark .sidebar,
html.theme-dark .widget:not(.footer-widget),
html.theme-dark .widget-area:not(.footer-widget-area) {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

/* Keep footer widgets in light mode styling */
html.theme-dark .footer-widget-area,
html.theme-dark .footer-widget-area .widget {
    background: inherit !important;
    color: inherit !important;
}

/* Exclude footer widget titles from dark mode styling */
html.theme-dark .widget-title:not(.site-footer *):not(.footer-widget *):not(#colophon *),
html.theme-dark .widgettitle:not(.site-footer *):not(.footer-widget *):not(#colophon *) {
    color: var(--dark-text-primary) !important;
}


/* ========================================
   FOOTER
   ======================================== */
/* Footer styling kept consistent between light and dark modes - excluded from all dark mode overrides */

/* ========================================
   NAVIGATION & MENUS (Not Global Header)
   ======================================== */

html.theme-dark .navigation:not(.cjbb-global-header),
html.theme-dark .main-navigation:not(.cjbb-global-header),
html.theme-dark .nav-menu:not(.cjbb-global-header .nav-menu) {
    background: var(--dark-bg-secondary) !important;
}

html.theme-dark .nav-menu li a:not(.cjbb-global-header a) {
    color: var(--dark-text-primary) !important;
}

html.theme-dark .nav-menu li a:hover:not(.cjbb-global-header a) {
    color: var(--brand-primary) !important;
    background: var(--dark-bg-tertiary) !important;
}

/* ========================================
   BREADCRUMBS
   ======================================== */

html.theme-dark .kadence-breadcrumbs,
html.theme-dark .breadcrumb,
html.theme-dark #breadcrumbs {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-secondary) !important;
}

html.theme-dark .kadence-breadcrumbs a {
    color: var(--dark-text-primary);
}

html.theme-dark .kadence-breadcrumbs a:hover {
    color: var(--brand-primary);
}

/* ========================================
   CODE BLOCKS
   ======================================== */

html.theme-dark code,
html.theme-dark pre,
html.theme-dark kbd,
html.theme-dark samp {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-default) !important;
}

/* ========================================
   BLOCKQUOTES
   ======================================== */

html.theme-dark blockquote,
html.theme-dark .wp-block-quote {
    background: var(--dark-bg-secondary) !important;
    border-left-color: var(--brand-primary) !important;
    color: var(--dark-text-primary) !important;
}

html.theme-dark blockquote cite {
    color: var(--dark-text-secondary) !important;
}

/* ========================================
   BUTTONS (KADENCE THEME BUTTONS)
   ======================================== */

html.theme-dark .wp-block-button__link,
html.theme-dark .kb-button,
html.theme-dark button:not(.cjbb-global-header button):not(.header-dropdown button):not(.recipe-detail-social-btn):not(.delete-recipe),
html.theme-dark .button:not(.cjbb-global-header .button):not(.header-dropdown .button),
html.theme-dark input[type="submit"]:not(.cjbb-global-header input):not(.header-dropdown input) {
    background: var(--brand-primary) !important;
    color: #fff !important;
    border-color: var(--brand-primary) !important;
}

html.theme-dark .wp-block-button__link:hover,
html.theme-dark .kb-button:hover,
html.theme-dark button:hover:not(.cjbb-global-header button):not(.header-dropdown button):not(.recipe-detail-social-btn):not(.delete-recipe),
html.theme-dark .button:hover:not(.cjbb-global-header .button):not(.header-dropdown .button),
html.theme-dark input[type="submit"]:hover:not(.cjbb-global-header input):not(.header-dropdown input) {
    background: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
}

/* ========================================
   COMMENTS SECTION
   ======================================== */

html.theme-dark #comments,
html.theme-dark .comment-list,
html.theme-dark .comment-respond {
    background: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

html.theme-dark .comment,
html.theme-dark .comment-body {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-default) !important;
}

html.theme-dark .comment-author,
html.theme-dark .comment-meta a {
    color: var(--dark-text-primary) !important;
}

html.theme-dark .comment-content {
    color: var(--dark-text-primary) !important;
}

/* ========================================
   PAGINATION
   ======================================== */

html.theme-dark .pagination,
html.theme-dark .nav-links {
    background: var(--dark-bg-secondary) !important;
}

html.theme-dark .page-numbers,
html.theme-dark .nav-links a {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-default) !important;
}

html.theme-dark .page-numbers:hover,
html.theme-dark .nav-links a:hover {
    background: var(--dark-bg-quaternary) !important;
    color: var(--brand-primary) !important;
}

html.theme-dark .page-numbers.current {
    background: var(--brand-primary) !important;
    color: #fff !important;
}

/* ========================================
   SEARCH RESULTS
   ======================================== */

html.theme-dark .search-results .hentry,
html.theme-dark .search-results article {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-default) !important;
}

/* ========================================
   404 & ERROR PAGES
   ======================================== */

html.theme-dark .error404 .site-main,
html.theme-dark .error404 .page-content {
    background: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* ========================================
   MOBILE MENU OVERRIDES
   ======================================== */

html.theme-dark #mobile-drawer,
html.theme-dark .mobile-drawer-inner,
html.theme-dark .drawer-navigation {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

html.theme-dark .drawer-navigation .menu-item a {
    color: var(--dark-text-primary) !important;
}

html.theme-dark .drawer-navigation .menu-item a:hover {
    background: var(--dark-bg-tertiary) !important;
    color: var(--brand-primary) !important;
}

/* ========================================
   ENSURE SPECIFICITY FOR NESTED ELEMENTS
   ======================================== */

html.theme-dark .site-container *:not(.cjbb-global-header *):not(.header-dropdown *):not(.login-modal *):not(.mobile-search-overlay *) {
    border-color: var(--dark-border-default);
}

/* Make sure images don't get dark overlay */
html.theme-dark img {
    opacity: 1;
    filter: none;
}

/* ========================================
   FOOTER - RESET TO ORIGINAL LIGHT MODE STYLING
   (Footer is already dark, keep it unchanged in dark mode)
   ======================================== */

/* Reset footer and all its children back to light mode appearance in dark mode */
html.theme-dark .site-footer,
html.theme-dark .site-footer *,
html.theme-dark #colophon,
html.theme-dark #colophon *,
html.theme-dark .footer-widget-area,
html.theme-dark .footer-widget-area * {
    background: unset !important;
    border-color: unset !important;
}

/* Remove extra vertical padding from main content area */
html.theme-dark .site-container,
html.theme-dark #page,
html.theme-dark .site-main {
    margin-bottom: 0 !important;
}

/* Hide pagination above footer - both light and dark modes */
html.theme-dark .pagination,
html.theme-dark .cjbb-pagination,
html.theme-dark .nav-links,
html.theme-light .pagination,
html.theme-light .cjbb-pagination,
html.theme-light .nav-links {
    display: none !important;
}

/* ========================================
   SCROLLBAR STYLING - CONSISTENT ACROSS BOTH THEMES
   Prevents layout shift when switching themes
   ======================================== */

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
    background-clip: content-box;
}