/**
 * Nadi Pesisir — Dark Mode CSS
 * Override CSS custom properties dan blok-blok spesifik untuk mode gelap.
 *
 * @package Nadi_Pesisir
 */

/* =============================================
   Dark Mode Custom Properties
   ============================================= */

[data-theme="dark"] {
    /* Semantic colors */
    --color-bg:         #0d1b2a;
    --color-bg-alt:     #152233;
    --color-text:       #e8eef4;
    --color-text-muted: #8a9ab0;
    --color-border:     #1e3348;
    --color-heading:    #f2f7fb;
    --color-link:       #2ed8eb;
    --color-link-hover: #5de8f7;

    /* Keep brand colors */
    --color-navy: #0A1E2E;
    --color-teal: #00B4C6;
    --color-gold: #FFB000;

    color-scheme: dark;
}

/* =============================================
   Body & Base
   ============================================= */

[data-theme="dark"] body {
    background-color: var(--color-bg);
    color: var(--color-text);
}

[data-theme="dark"] a {
    color: var(--color-link);
}

[data-theme="dark"] a:hover {
    color: var(--color-link-hover);
}

[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-heading);
}

/* =============================================
   WordPress Blocks
   ============================================= */

[data-theme="dark"] .wp-block-group,
[data-theme="dark"] .wp-block-columns {
    color: var(--color-text);
}

/* Post content */
[data-theme="dark"] .single-post__content p,
[data-theme="dark"] .wp-block-post-content p {
    color: var(--color-text);
}

/* Featured image overlay */
[data-theme="dark"] .hero-section__cover .wp-block-cover__background {
    opacity: 0.75;
}

/* =============================================
   Article Cards
   ============================================= */

[data-theme="dark"] .article-card {
    background-color: var(--color-bg-alt);
    border-color: var(--color-border);
}

[data-theme="dark"] .article-card__title {
    color: var(--color-heading);
}

[data-theme="dark"] .article-card__excerpt {
    color: var(--color-text-muted);
}

[data-theme="dark"] .article-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

/* =============================================
   Sidebar Widgets
   ============================================= */

[data-theme="dark"] .sidebar-widget {
    background-color: var(--color-bg-alt);
    border-color: var(--color-border);
}

[data-theme="dark"] .sidebar-widget__title {
    background-color: var(--color-bg);
    color: var(--color-heading);
}

[data-theme="dark"] .popular-post-item {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .popular-post-item__title {
    color: var(--color-heading);
}

[data-theme="dark"] .popular-post-item__date {
    color: var(--color-text-muted);
}

/* =============================================
   Navigation & Header
   ============================================= */

[data-theme="dark"] .site-header {
    background-color: #040e17;
    box-shadow: 0 2px 20px rgba(0,0,0,.5);
}

/* =============================================
   Breaking News Bar
   ============================================= */

[data-theme="dark"] .breaking-news-bar {
    background-color: #00909f;
}

/* =============================================
   Post Meta
   ============================================= */

[data-theme="dark"] .post-meta {
    color: var(--color-text-muted);
}

[data-theme="dark"] .post-meta__author a {
    color: var(--color-heading);
}

/* =============================================
   Social Share
   ============================================= */

[data-theme="dark"] .social-share {
    border-color: var(--color-border);
}

[data-theme="dark"] .social-share__label {
    color: var(--color-text-muted);
}

[data-theme="dark"] .social-share__btn--copy {
    background-color: var(--color-bg-alt);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* =============================================
   Newsletter CTA
   ============================================= */

[data-theme="dark"] .newsletter-cta {
    background: linear-gradient(135deg, #040e17 0%, #0a1e2e 100%);
}

/* =============================================
   Author Box
   ============================================= */

[data-theme="dark"] .np-author-box {
    background-color: var(--color-bg-alt);
    border-color: var(--color-border);
}

/* =============================================
   Search Overlay
   ============================================= */

[data-theme="dark"] .search-overlay {
    background-color: rgba(4,14,23,.98);
}

/* =============================================
   WordPress Core Blocks
   ============================================= */

[data-theme="dark"] .wp-block-quote {
    background-color: var(--color-bg-alt);
    border-left-color: var(--color-teal);
    color: var(--color-text-muted);
}

[data-theme="dark"] .wp-block-pullquote {
    border-color: var(--color-teal);
    color: var(--color-text);
}

[data-theme="dark"] .wp-block-code {
    background-color: #040e17;
    color: #e8eef4;
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .wp-block-table th {
    background-color: var(--color-bg);
}

[data-theme="dark"] .wp-block-table td {
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .wp-block-table tr:nth-child(even) td {
    background-color: var(--color-bg-alt);
}

[data-theme="dark"] .wp-block-separator {
    border-color: var(--color-border);
}

[data-theme="dark"] .wp-block-search__input {
    background-color: var(--color-bg-alt);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .wp-block-categories-list a,
[data-theme="dark"] .wp-block-tag-cloud a {
    color: var(--color-link);
}

/* =============================================
   Archive / Category Tabs
   ============================================= */

[data-theme="dark"] .category-tabs {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .category-tab {
    color: var(--color-text-muted);
}

[data-theme="dark"] .category-tab:hover,
[data-theme="dark"] .category-tab.is-active {
    color: var(--color-teal);
}

/* =============================================
   Pagination
   ============================================= */

[data-theme="dark"] .pagination a,
[data-theme="dark"] .wp-block-query-pagination-numbers a {
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .pagination a:hover {
    border-color: var(--color-teal);
    color: var(--color-teal);
}

/* =============================================
   Archive header
   ============================================= */

[data-theme="dark"] .np-archive-header {
    background-color: var(--color-bg-alt);
}

/* =============================================
   404 Page
   ============================================= */

[data-theme="dark"] .error-404 .np-search-box {
    background-color: var(--color-bg-alt);
}

/* =============================================
   Newsletter sidebar
   ============================================= */

[data-theme="dark"] .np-sidebar-newsletter input {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
}

/* =============================================
   Footer
   ============================================= */

/* Footer stays dark regardless of mode */
.site-footer {
    color-scheme: dark;
}

/* =============================================
   Reading Progress Bar
   ============================================= */

[data-theme="dark"] .reading-progress {
    background: linear-gradient(to right, #2ed8eb, #FFB000);
}

/* =============================================
   Transitions for smooth mode switch
   ============================================= */

body,
.site-header,
.article-card,
.sidebar-widget,
.sidebar-widget__title,
.breaking-news-bar,
.search-overlay,
.social-share,
.np-author-box,
.newsletter-cta,
.wp-block-quote,
.wp-block-code,
.wp-block-table td,
.wp-block-table th,
.np-front-main,
.np-top-category-cards-wrap,
.np-front-content-section,
input,
textarea,
select {
    transition:
        background-color 250ms ease,
        color 250ms ease,
        border-color 250ms ease;
}

/* =============================================
   Nadi Pesisir Homepage Dark Mode Overrides
   ============================================= */

[data-theme="dark"] .np-front-main {
    background-color: #071520 !important;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .np-top-category-cards-wrap {
    background-color: #0A1E2E !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .np-cat-card__label {
    color: #00B4C6 !important;
}

[data-theme="dark"] .np-cat-card__title a {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .np-cat-card__title a:hover {
    color: #00B4C6 !important;
}

[data-theme="dark"] .np-cat-card__thumb-box {
    background-color: #12283A !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .np-front-content-section {
    background-color: #071520 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .np-section-heading {
    color: #FFFFFF !important;
}

[data-theme="dark"] .article-card.np-news-card {
    background-color: #0D2235 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .np-news-card .wp-block-post-title a {
    color: #FFFFFF !important;
}

[data-theme="dark"] .np-news-card .wp-block-post-title a:hover {
    color: #00B4C6 !important;
}

[data-theme="dark"] .np-no-results {
    background-color: #0D2235 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #94A3B8 !important;
}

[data-theme="dark"] .np-cat-card__badge {
    background: rgba(0, 180, 198, 0.18) !important;
    color: #00D4E7 !important;
    border-color: rgba(0, 180, 198, 0.35) !important;
}

[data-theme="dark"] .np-cat-card__excerpt {
    color: #94A3B8 !important;
}

[data-theme="dark"] .np-news-card {
    background-color: #0D2235 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .np-news-card__title a {
    color: #FFFFFF !important;
}

[data-theme="dark"] .np-news-card__title a:hover {
    color: #00B4C6 !important;
}

[data-theme="dark"] .np-news-card__excerpt {
    color: #94A3B8 !important;
}

[data-theme="dark"] .np-pop-item {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .np-pop-item__title a {
    color: #FFFFFF !important;
}

[data-theme="dark"] .np-pop-item__title a:hover {
    color: #00B4C6 !important;
}

[data-theme="dark"] .np-pop-item__rank {
    background-color: #1A364E !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .np-pop-item__rank--1 {
    background: linear-gradient(135deg, #FFB000, #F59E0B) !important;
    color: #0A1E2E !important;
}

[data-theme="dark"] .np-pop-item__rank--2 {
    background: linear-gradient(135deg, #00B4C6, #009AA8) !important;
    color: #0A1E2E !important;
}

[data-theme="dark"] .np-pop-item__rank--3 {
    background: linear-gradient(135deg, #0284C7, #0369A1) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .np-pop-item__rank--4,
[data-theme="dark"] .np-pop-item__rank--5,
[data-theme="dark"] .np-pop-item__rank--6,
[data-theme="dark"] .np-pop-item__rank--7,
[data-theme="dark"] .np-pop-item__rank--8,
[data-theme="dark"] .np-pop-item__rank--9,
[data-theme="dark"] .np-pop-item__rank--10 {
    background: #142838 !important;
    color: #94A3B8 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .sidebar-widget {
    background-color: #0D2235 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .sidebar-widget__title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .np-dark-mode-toggle {
    background: rgba(0, 180, 198, 0.2) !important;
    border-color: #00B4C6 !important;
    color: #FFB000 !important;
}

[data-theme="dark"] .np-dark-mode-toggle .np-icon-moon {
    display: none !important;
}

[data-theme="dark"] .np-dark-mode-toggle .np-icon-sun {
    display: flex !important;
}