/*
 * Dark Mode for Ippo Theme
 * Complete styling fix
 */

/* =============================================
   CSS VARIABLES
   ============================================= */
/* =============================================
   DUAL LOGO - SHOW/HIDE BASED ON THEME
   ============================================= */

/* Hide dark logo by default (dark mode shows light logo) */
.logo-dark {
    display: none !important;
}
.logo-light {
    display: block !important;
}

/* In light mode: show dark logo, hide light logo */
.light-mode .logo-dark {
    display: block !important;
}
.light-mode .logo-light {
    display: none !important;
}
/* =============================================
   AS LOGO TRANSITION
   ============================================= */

.custom-logo,
.standard-logo img {
    transition: opacity 0.3s ease;
}

:root {
    --dm-bg: #ffffff;
    --dm-bg-alt: #e6e7e8;
    --dm-bg-card: #ffffff;
    --dm-text: #000000;
    --dm-text-secondary: #121212;
    --dm-text-muted: #666666;
    --dm-border: #e0e0e0;
}

.dark-mode {
    --dm-bg: #121212;
    --dm-bg-alt: #1a1a1a;
    --dm-bg-card: #1e1e1e;
    --dm-text: #ffffff;
    --dm-text-secondary: #e0e0e0;
    --dm-text-muted: #aaaaaa;
    --dm-border: #333333;
}

/* Force #121212 on ALL elements with any gray/dark background */
.dark-mode *[style*="background"],
.dark-mode *[style*="#333"],
.dark-mode *[style*="rgb(51"],
.dark-mode *[style*="gray"],
.dark-mode *[style*="grey"] {
    background-color: #121212 !important;
    background: #121212 !important;
}

/* =============================================
   TOGGLE BUTTON
   ============================================= */

.theme-toggle-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.2s;
    font-size: 0;
}

.theme-toggle-btn:hover {
    opacity: 0.7;
}

.theme-toggle-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

.theme-toggle-btn .icon-sun { display: none; }
.theme-toggle-btn .icon-moon { display: block; }
.dark-mode .theme-toggle-btn .icon-sun { display: block; }
.dark-mode .theme-toggle-btn .icon-moon { display: none; }

.menu-item-theme-toggle {
    display: inline-block !important;
    vertical-align: middle;
    margin-left: 15px !important;
}

/* =============================================
   BODY & BASE
   ============================================= */

.dark-mode,
.dark-mode body {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

/* =============================================
   HEADER
   ============================================= */

.dark-mode .site-header {
    background-color: var(--dm-bg) !important;
}

.dark-mode .site-title,
.dark-mode .site-title a,
.dark-mode .site-description {
    color: var(--dm-text) !important;
}

.dark-mode .site-header nav a,
.dark-mode .main-navigation a,
.dark-mode .nav-menu a,
.dark-mode .nav-menu > li > a {
    color: var(--dm-text) !important;
}

.dark-mode .nav-menu > li > a:hover,
.dark-mode .main-navigation a:hover {
    color: var(--dm-text-muted) !important;
}

/* Dropdown */
.dark-mode .main-navigation ul ul,
.dark-mode .nav-menu ul {
    background-color: var(--dm-bg-card) !important;
}

.dark-mode .main-navigation ul ul a {
    color: var(--dm-text-secondary) !important;
}

/* Hamburger Menu Lines */
.dark-mode .menu-toggle span {
    background-color: var(--dm-text) !important;
}

/* Search Icon */
.dark-mode #big-search-trigger,
.dark-mode .icon-search {
    color: var(--dm-text) !important;
}

/* Header Search */
.dark-mode .site-header input[type="search"] {
    color: var(--dm-text) !important;
    border-bottom-color: var(--dm-text) !important;
}

.dark-mode .site-header input[type="search"]::-webkit-input-placeholder { color: var(--dm-text) !important; }
.dark-mode .site-header input[type="search"]:-moz-placeholder { color: var(--dm-text) !important; }
.dark-mode .site-header input[type="search"]::-moz-placeholder { color: var(--dm-text) !important; }
.dark-mode .site-header input[type="search"]:-ms-input-placeholder { color: var(--dm-text) !important; }

.dark-mode .site-header .search-form + .search-instructions {
    color: var(--dm-text-muted) !important;
}

/* =============================================
   CONTENT AREA
   ============================================= */

.dark-mode .site-content,
.dark-mode .content-area,
.dark-mode .site-main,
.dark-mode #content,
.dark-mode #primary {
    background-color: var(--dm-bg) !important;
}

/* =============================================
   HEADINGS
   ============================================= */

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode h1 a,
.dark-mode h2 a,
.dark-mode h3 a,
.dark-mode h4 a,
.dark-mode h5 a,
.dark-mode h6 a {
    color: var(--dm-text) !important;
}


/* =============================================
   PARAGRAPHS & GENERAL TEXT
   ============================================= */

.dark-mode p,
.dark-mode span,
.dark-mode li,
.dark-mode div,
.dark-mode label,
.dark-mode strong,
.dark-mode em,
.dark-mode b,
.dark-mode i {
    color: var(--dm-text-secondary) !important;
}

.dark-mode a {
    color: var(--dm-text) !important;
}

.dark-mode a:hover {
    color: var(--dm-text-muted) !important;
}

/* =============================================
   POSTS / ARTICLES - Force transparent background
   ============================================= */

.dark-mode article,
.dark-mode .hentry,
.dark-mode .post,
.dark-mode .page,
.dark-mode .type-post,
.dark-mode .type-page,
.dark-mode .masonry article,
.dark-mode .masonry .hentry,
.dark-mode .format-standard,
.dark-mode .format-aside,
.dark-mode .format-image,
.dark-mode .format-video,
.dark-mode .format-quote,
.dark-mode .format-link,
.dark-mode .format-gallery,
.dark-mode .format-audio,
.dark-mode .sticky,
.dark-mode article.post,
.dark-mode article.page {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dark-mode .entry-title,
.dark-mode .entry-title a {
    color: var(--dm-text) !important;
}

.dark-mode .entry-title a:hover {
    color: var(--dm-text-muted) !important;
}

.dark-mode .entry-content,
.dark-mode .entry-content p,
.dark-mode .entry-summary,
.dark-mode .entry-summary p,
.dark-mode .masonry .entry-content,
.dark-mode .masonry p {
    color: var(--dm-text-secondary) !important;
}

/* Post Meta */
.dark-mode .entry-meta,
.dark-mode .entry-meta a,
.dark-mode .post-date,
.dark-mode .post-date a,
.dark-mode .category-list,
.dark-mode .category-list a,
.dark-mode .entry-footer,
.dark-mode .entry-footer a {
    color: var(--dm-text-muted) !important;
}

.dark-mode .entry-meta a:hover,
.dark-mode .post-date a:hover,
.dark-mode .category-list a:hover {
    color: var(--dm-text) !important;
}

/* Read More */
.dark-mode .read-more-link {
    color: var(--dm-text) !important;
    border-bottom-color: var(--dm-text) !important;
}

.dark-mode .read-more-link:hover {
    color: var(--dm-text-muted) !important;
}

/* Quote & Link Formats */
.dark-mode .format-quote blockquote,
.dark-mode .format-quote q,
.dark-mode .masonry .format-quote blockquote,
.dark-mode .masonry .format-quote q {
    color: var(--dm-text) !important;
}

.dark-mode .format-quote blockquote cite,
.dark-mode .masonry .format-quote blockquote cite {
    color: var(--dm-text-muted) !important;
}

.dark-mode .format-link .entry-content a,
.dark-mode .masonry .format-link .entry-content a {
    color: var(--dm-text) !important;
}

/* Featured Image Overlay Icons */
.dark-mode .featured-image a:after {
    color: var(--dm-text) !important;
}

/* =============================================
   SIDEBAR / WIDGETS
   ============================================= */

.dark-mode .widget-area,
.dark-mode .sidebar,
.dark-mode #secondary {
    background-color: var(--dm-bg) !important;
}

.dark-mode .widget {
    background-color: transparent !important;
}

.dark-mode .widget-title,
.dark-mode .widgettitle {
    color: var(--dm-text) !important;
}

.dark-mode .widget,
.dark-mode .widget p,
.dark-mode .widget li,
.dark-mode .widget a {
    color: var(--dm-text-secondary) !important;
}

.dark-mode .widget a:hover {
    color: var(--dm-text) !important;
}

.dark-mode .widget ul li {
    border-color: var(--dm-border) !important;
}

/* Widget Calendar */
.dark-mode .widget_calendar caption,
.dark-mode .widget_calendar th {
    color: var(--dm-text) !important;
}

.dark-mode .widget_calendar td,
.dark-mode .widget_calendar tbody a {
    color: var(--dm-text-secondary) !important;
}

/* Widget Search */
.dark-mode .widget .search-form input[type="search"] {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

.dark-mode .widget .search-form input[type="submit"] {
    color: var(--dm-text) !important;
}

/* Recent Posts Widget */
.dark-mode .widget_recent_entries li a,
.dark-mode .widget_recent_comments li a {
    color: var(--dm-text-secondary) !important;
}

/* =============================================
   FOOTER
   ============================================= */

.dark-mode .site-footer {
    background-color: var(--dm-bg-alt) !important;
}

.dark-mode .site-footer .widget-area {
    background-color: transparent !important;
}

.dark-mode .site-footer .widget-title {
    color: var(--dm-text) !important;
}

.dark-mode .site-footer .widget,
.dark-mode .site-footer .widget p,
.dark-mode .site-footer .widget li,
.dark-mode .site-footer .widget a {
    color: var(--dm-text-secondary) !important;
}

.dark-mode .site-footer .widget a:hover {
    color: var(--dm-text) !important;
}

.dark-mode .site-info,
.dark-mode .site-info a {
    color: var(--dm-text-muted) !important;
}

.dark-mode .site-info a:hover {
    color: var(--dm-text) !important;
}

/* =============================================
   PAGE TITLES & ARCHIVES
   ============================================= */

.dark-mode .page-title,
.dark-mode .archive .page-title,
.dark-mode .search-results .page-title {
    color: var(--dm-text) !important;
}

/* =============================================
   SINGLE POST
   ============================================= */

.dark-mode .single article {
    background-color: transparent !important;
}

.dark-mode .single .entry-content,
.dark-mode .single .entry-content p,
.dark-mode .single .entry-content li {
    color: var(--dm-text-secondary) !important;
}

.dark-mode .single .entry-content a {
    color: var(--dm-text) !important;
}

/* Post Navigation */
.dark-mode .single .nav-links > div > span {
    color: var(--dm-text-muted) !important;
}

.dark-mode .single .nav-links .post-title,
.dark-mode .single .nav-links .entry-title {
    color: var(--dm-text) !important;
}

/* Author Box */
.dark-mode .author-info {
    border-color: var(--dm-border) !important;
}

.dark-mode .author-name,
.dark-mode .author-name a {
    color: var(--dm-text) !important;
}

.dark-mode .author-description,
.dark-mode .author-description p {
    color: var(--dm-text-secondary) !important;
}

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

.dark-mode .comments-area {
    background-color: transparent !important;
}

/* Comment body - keep transparent like light mode */

.dark-mode .comment-author,
.dark-mode .comment-author a {
    color: var(--dm-text) !important;
}

.dark-mode .comment-metadata,
.dark-mode .comment-metadata a {
    color: var(--dm-text-muted) !important;
}

.dark-mode .comment-content,
.dark-mode .comment-content p {
    color: var(--dm-text-secondary) !important;
}

/* =============================================
   FORMS
   ============================================= */

.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="url"],
.dark-mode input[type="password"],
.dark-mode input[type="search"],
.dark-mode input[type="number"],
.dark-mode input[type="tel"],
.dark-mode textarea,
.dark-mode select {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--dm-text-muted) !important;
}

.dark-mode input:focus,
.dark-mode textarea:focus {
    border-color: var(--dm-text-muted) !important;
}

/* Buttons */
.dark-mode button:not(.theme-toggle-btn),
.dark-mode input[type="submit"],
.dark-mode input[type="button"] {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* .dark-mode button:not(.theme-toggle-btn):hover,
.dark-mode input[type="submit"]:hover {
    background-color: #e0e0e0 !important;
} */

/* =============================================
   BLOCKQUOTE & CODE
   ============================================= */

.dark-mode blockquote {
    color: var(--dm-text-secondary) !important;
}

.dark-mode blockquote:before {
    color: var(--dm-text-muted) !important;
}

.dark-mode code,
.dark-mode pre {
    color: var(--dm-text) !important;
}

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

.dark-mode table {
    border-color: var(--dm-border) !important;
}

.dark-mode th {
    color: var(--dm-text) !important;
}

.dark-mode td {
    color: var(--dm-text-secondary) !important;
    border-color: var(--dm-border) !important;
}

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

.dark-mode .paging-navigation a,
.dark-mode .paging-navigation .prev:before,
.dark-mode .paging-navigation .next:before {
    color: var(--dm-text) !important;
}

.dark-mode .page-numbers {
    color: var(--dm-text-secondary) !important;
}

.dark-mode .page-numbers.current,
.dark-mode .page-numbers:hover {
    color: var(--dm-text) !important;
}

/* =============================================
   MISC ELEMENTS
   ============================================= */

/* Previous/Next Article Navigation */
.dark-mode .post-navigation,
.dark-mode .nav-previous,
.dark-mode .nav-next,
.dark-mode .post-navigation a,
.dark-mode .nav-links,
.dark-mode .nav-links > div,
.dark-mode [class*="nav-previous"],
.dark-mode [class*="nav-next"],
.dark-mode .previous-article,
.dark-mode .next-article,
.dark-mode [class*="previous"],
.dark-mode [class*="next"] {
    background-color: #121212 !important;
    background: #121212 !important;
}

/* Menu/Navigation Overlay & Dropdowns */
.dark-mode .menu-overlay,
.dark-mode .nav-overlay,
.dark-mode .site-navigation,
.dark-mode .mobile-menu,
.dark-mode .mobile-nav,
.dark-mode #mobile-menu,
.dark-mode .menu-container,
.dark-mode .navigation-container,
.dark-mode [class*="menu-overlay"],
.dark-mode [class*="nav-container"],
.dark-mode .main-navigation,
.dark-mode .primary-menu,
.dark-mode .site-header .menu,
.dark-mode header nav,
.dark-mode .header-menu {
    background-color: #121212 !important;
    background: #121212 !important;
}

/* Full screen overlays */
.dark-mode .overlay,
.dark-mode .modal,
.dark-mode .popup,
.dark-mode [class*="overlay"]:not(.featured-image),
.dark-mode [class*="modal"],
.dark-mode [class*="popup"] {
    background-color: #121212 !important;
}

/* Privacy Policy & similar elements */
.dark-mode .privacy-policy,
.dark-mode .cookie-notice,
.dark-mode .gdpr,
.dark-mode [class*="privacy"],
.dark-mode [class*="cookie"],
.dark-mode .notice,
.dark-mode .alert {
    background-color: #121212 !important;
    color: var(--dm-text) !important;
}

/* Back to Top - keep transparent, only change text color */
.dark-mode .back-to-top {
    color: var(--dm-text) !important;
}

/* Category Filter */
.dark-mode .category-filter a {
    color: var(--dm-text-muted) !important;
}

.dark-mode .category-filter .cat-active a,
.dark-mode .category-filter a:hover {
    color: var(--dm-text) !important;
}

/* Slick Arrows */
.dark-mode .slick-arrow:before {
    color: var(--dm-text) !important;
}

/* HR */
.dark-mode hr {
    background-color: var(--dm-border) !important;
    border-color: var(--dm-border) !important;
}

/* =============================================
   SCROLLBAR
   ============================================= */

.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: var(--dm-bg-alt);
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dm-border);
    border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--dm-text-muted);
}

/* =============================================
   SELECTION
   ============================================= */

.dark-mode ::selection {
    background-color: var(--dm-text);
    color: var(--dm-bg);
}

/* =============================================
   TRANSITIONS
   ============================================= */

body,
.site-header,
.site-footer,
article,
.widget,
a {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* =============================================
   REDUCED MOTION
   ============================================= */

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
    }
}

@media only screen and (max-width: 767px) {
    /* 1. Enable Mobile Sticky Header */
    .sticky-header .site-header {
        position: fixed !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 1001 !important; /* Higher than post navigation */
        background-color: #121212 !important; /* Forces dark color on mobile header bar */
    }
    
    .admin-bar.sticky-header .site-header {
        top: 46px !important; /* Offset for WordPress admin bar */
    }
    /* 2. Position the Theme Toggle icon in the Header Bar */
    /* We target the wrapper injected by the script */
    .theme-toggle-wrapper,
    .menu-item-theme-toggle {
        position: absolute !important;
        right: 85px !important; /* Adjust this value to align it next to the search icon */
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1002 !important;
        margin: 0 !important;
        display: block !important;
    }
    /* 3. Style the Toggle Button */
    .theme-toggle-btn {
        background: transparent !important;
        border: 1px solid currentColor !important;
        border-radius: 4px;
        padding: 4px !important;
        width: 30px !important;
        height: 30px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .theme-toggle-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
    /* 4. Fix Site Branding width to make room for icons */
    .site-branding {
        max-width: calc(100% - 150px) !important;
    }
}