/*
 * SurfAtlas Dark Mode
 * Applied via html[data-theme="dark"]
 * Deep navy / charcoal palette — premium surf aesthetic
 */

/* =====================================================
   THEME TOGGLE BUTTON (all pages)
   ===================================================== */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}
.theme-toggle:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

/* Light mode: nav is transparent (index) or white (directory/school) */
nav .theme-toggle,
nav.scrolled .theme-toggle {
    color: var(--slate, #64748b);
}
nav .theme-toggle:hover,
nav.scrolled .theme-toggle:hover {
    background: rgba(10,22,40,0.06);
    color: var(--deep, #0a1628);
}

/* Index landing: nav transparent over hero */
#main-nav:not(.scrolled) .theme-toggle {
    color: rgba(255,255,255,0.75);
}
#main-nav:not(.scrolled) .theme-toggle:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* =====================================================
   DARK MODE OVERRIDES
   ===================================================== */
html[data-theme="dark"] {
    color-scheme: dark;
}

/* === Body === */
html[data-theme="dark"] body {
    background: #0c1826;
    color: #dde8f2;
}

/* === NAV (index — transparent/scrolled) === */
html[data-theme="dark"] nav.scrolled {
    background: rgba(12,24,38,0.92);
    border-bottom-color: rgba(255,255,255,0.08);
    box-shadow: 0 1px 20px rgba(0,0,0,0.3);
}
html[data-theme="dark"] nav.scrolled .logo {
    color: #dde8f2;
}
html[data-theme="dark"] nav.scrolled .logo span {
    color: #2dd4a8;
}
html[data-theme="dark"] nav.scrolled .nav-link {
    color: #8fa4bc;
}
html[data-theme="dark"] nav.scrolled .nav-link:hover {
    color: #dde8f2;
    background: rgba(255,255,255,0.06);
}
html[data-theme="dark"] nav.scrolled .nav-cta {
    background: #1a6b5a;
    color: #dde8f2;
}
html[data-theme="dark"] nav.scrolled .nav-cta:hover {
    background: #21856e;
}

/* Toggle button in dark mode (on any nav) */
html[data-theme="dark"] .theme-toggle {
    color: #8fa4bc;
}
html[data-theme="dark"] .theme-toggle:hover {
    background: rgba(255,255,255,0.08);
    color: #dde8f2;
}
html[data-theme="dark"] #main-nav:not(.scrolled) .theme-toggle {
    color: rgba(255,255,255,0.75);
}
html[data-theme="dark"] #main-nav:not(.scrolled) .theme-toggle:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* === NAV (directory/school — always frosted) === */
html[data-theme="dark"] nav:not(#main-nav) {
    background: rgba(12,24,38,0.95);
    border-bottom-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] nav:not(#main-nav) .logo {
    color: #dde8f2;
}
html[data-theme="dark"] nav:not(#main-nav) .logo span {
    color: #2dd4a8;
}
html[data-theme="dark"] nav:not(#main-nav) .nav-count {
    background: #1a2d46;
    color: #8fa4bc;
}
html[data-theme="dark"] .back-link {
    color: #2dd4a8;
}
html[data-theme="dark"] .back-link:hover {
    color: #25c99b;
}

/* === LANG SWITCHER === */
html[data-theme="dark"] .lang-btn {
    color: #5a7a96;
}
html[data-theme="dark"] .lang-btn:hover {
    color: #2dd4a8;
    background: rgba(45,212,168,0.1);
}
html[data-theme="dark"] .lang-btn.active {
    color: #2dd4a8;
    background: rgba(45,212,168,0.12);
}

/* =====================================================
   INDEX — HERO CARD (floats over hero image)
   ===================================================== */
html[data-theme="dark"] .hero-card {
    background: rgba(19,32,53,0.97);
    border-color: rgba(255,255,255,0.1);
    color: #dde8f2;
}
html[data-theme="dark"] .card-header {
    color: #8fa4bc;
}
html[data-theme="dark"] .filter-pill {
    background: #1a2d46;
    border-color: rgba(255,255,255,0.1);
    color: #8fa4bc;
}
html[data-theme="dark"] .filter-pill.active {
    background: #1a6b5a;
    border-color: #1a6b5a;
    color: #fff;
}
html[data-theme="dark"] .card-school {
    border-top-color: rgba(255,255,255,0.07);
}
html[data-theme="dark"] .school-name {
    color: #dde8f2;
}
html[data-theme="dark"] .school-meta {
    color: #7fa0bc;
}
html[data-theme="dark"] .floating-review {
    background: #132035;
    border-color: rgba(255,255,255,0.1);
    color: #dde8f2;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

/* =====================================================
   INDEX — WAVE DIVIDER (stays fine, matches dark bg)
   ===================================================== */

/* =====================================================
   INDEX — PROBLEM SECTION
   ===================================================== */
html[data-theme="dark"] .problem {
    /* bg inherits body */
}
html[data-theme="dark"] .section-tag {
    color: #2dd4a8;
}
html[data-theme="dark"] .section-h2 {
    color: #dde8f2;
}
html[data-theme="dark"] .section-sub {
    color: #8fa4bc;
}

/* =====================================================
   INDEX — FEATURE CARDS
   ===================================================== */
html[data-theme="dark"] .feature:nth-child(1) {
    background: linear-gradient(135deg, #0d2318, #0e2a1d);
    border-color: rgba(34,197,94,0.12);
}
html[data-theme="dark"] .feature:nth-child(2) {
    background: linear-gradient(135deg, #1e1a08, #26200a);
    border-color: rgba(232,168,76,0.12);
}
html[data-theme="dark"] .feature:nth-child(3) {
    background: linear-gradient(135deg, #0b1d32, #0d2442);
    border-color: rgba(59,130,246,0.12);
}
html[data-theme="dark"] .feature:nth-child(4) {
    background: linear-gradient(135deg, #1a0d26, #20103a);
    border-color: rgba(168,85,247,0.12);
}
html[data-theme="dark"] .feature h3 {
    color: #dde8f2;
}
html[data-theme="dark"] .feature p {
    color: #8fa4bc;
}
html[data-theme="dark"] .feature:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

/* =====================================================
   INDEX — TESTIMONIALS SECTION
   ===================================================== */
html[data-theme="dark"] .testimonials {
    background: #0f1e30;
}
html[data-theme="dark"] .testimonial-card {
    background: #132035;
    border-color: rgba(255,255,255,0.07);
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .testimonial-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .testimonial-text {
    color: #c8d8eb;
}
html[data-theme="dark"] .author-name {
    color: #dde8f2;
}
html[data-theme="dark"] .author-meta {
    color: #7fa0bc;
}
html[data-theme="dark"] .author-avatar.t1 {
    background: linear-gradient(135deg, #0d2442, #0d3060);
}
html[data-theme="dark"] .author-avatar.t2 {
    background: linear-gradient(135deg, #1e1a08, #2a2410);
}
html[data-theme="dark"] .author-avatar.t3 {
    background: linear-gradient(135deg, #1a0d26, #20103a);
}

/* =====================================================
   INDEX — CLOSING SECTION (photo bg — stays fine)
   ===================================================== */
/* Already dark via overlay */

/* =====================================================
   INDEX — FOOTER
   ===================================================== */
html[data-theme="dark"] footer {
    background: #0c1826;
    border-top-color: rgba(255,255,255,0.08);
    color: #7fa0bc;
}
html[data-theme="dark"] .footer-logo {
    color: #dde8f2;
}
html[data-theme="dark"] .footer-logo span {
    color: #2dd4a8;
}
html[data-theme="dark"] .footer-links a {
    color: #7fa0bc;
}
html[data-theme="dark"] .footer-links a:hover {
    color: #2dd4a8;
}

/* =====================================================
   DIRECTORY — Search Hero
   ===================================================== */
html[data-theme="dark"] .search-hero {
    background: #0f1e30;
    border-bottom-color: rgba(255,255,255,0.07);
}
html[data-theme="dark"] .search-hero h1 {
    color: #dde8f2;
}
html[data-theme="dark"] .search-hero h1 em {
    color: #2dd4a8;
}
html[data-theme="dark"] .search-bar {
    background: #132035;
    border-color: rgba(255,255,255,0.1);
}
html[data-theme="dark"] .search-bar:focus-within {
    border-color: #2dd4a8;
    box-shadow: 0 0 0 4px rgba(45,212,168,0.08);
}
html[data-theme="dark"] .search-bar input {
    color: #dde8f2;
    background: transparent;
}
html[data-theme="dark"] .search-bar input::placeholder {
    color: #5a7a96;
}

/* =====================================================
   DIRECTORY — Sidebar Filters
   ===================================================== */
html[data-theme="dark"] .sidebar {
    background: #132035;
    border-color: rgba(255,255,255,0.07);
}
html[data-theme="dark"] .sidebar h3 {
    color: #dde8f2;
}
html[data-theme="dark"] .filter-group label {
    color: #7fa0bc;
}
html[data-theme="dark"] .pill {
    background: #0c1826;
    border-color: rgba(255,255,255,0.1);
    color: #8fa4bc;
}
html[data-theme="dark"] .pill:hover {
    border-color: #2dd4a8;
    color: #2dd4a8;
    background: rgba(45,212,168,0.06);
}
html[data-theme="dark"] .pill.active {
    background: #1a6b5a;
    border-color: #1a6b5a;
    color: #fff;
}
html[data-theme="dark"] .price-range input {
    background: #0c1826;
    border-color: rgba(255,255,255,0.1);
    color: #dde8f2;
}
html[data-theme="dark"] .price-range input:focus {
    border-color: #2dd4a8;
}
html[data-theme="dark"] .price-range span {
    color: #5a7a96;
}
html[data-theme="dark"] .sort-select {
    background: #0c1826;
    border-color: rgba(255,255,255,0.1);
    color: #dde8f2;
}
html[data-theme="dark"] .sort-select:focus {
    border-color: #2dd4a8;
}
html[data-theme="dark"] .clear-btn {
    background: transparent;
    border-color: rgba(255,255,255,0.1);
    color: #7fa0bc;
}
html[data-theme="dark"] .clear-btn:hover {
    border-color: #dde8f2;
    color: #dde8f2;
}

/* =====================================================
   DIRECTORY — Filter Toggle (mobile)
   ===================================================== */
html[data-theme="dark"] .filter-toggle {
    background: #132035;
    border-color: rgba(255,255,255,0.1);
    color: #dde8f2;
}

/* =====================================================
   DIRECTORY — Results / Count
   ===================================================== */
html[data-theme="dark"] .results-count {
    color: #7fa0bc;
}
html[data-theme="dark"] .results-count strong {
    color: #dde8f2;
}

/* =====================================================
   DIRECTORY — School Cards
   ===================================================== */
html[data-theme="dark"] .school-card {
    background: #132035;
    border-color: rgba(255,255,255,0.07);
    color: #dde8f2;
}
html[data-theme="dark"] .school-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .card-emoji {
    background: #1a2d46;
}
html[data-theme="dark"] .school-logo-box {
    background: #1a2d46 !important;
}
html[data-theme="dark"] .card-name {
    color: #dde8f2;
}
html[data-theme="dark"] .card-location {
    color: #7fa0bc;
}
html[data-theme="dark"] .rating-num {
    color: #dde8f2;
}
html[data-theme="dark"] .review-count {
    color: #5a7a96;
}
html[data-theme="dark"] .card-desc {
    color: #8fa4bc;
}
html[data-theme="dark"] .card-tag {
    background: #1a2d46;
    color: #2dd4a8;
}
html[data-theme="dark"] .card-bottom {
    border-top-color: rgba(255,255,255,0.07);
}
html[data-theme="dark"] .card-price {
    color: #2dd4a8;
}
html[data-theme="dark"] .card-price small {
    color: #5a7a96;
}
html[data-theme="dark"] .card-badge {
    background: rgba(45,212,168,0.1);
    color: #2dd4a8;
}
html[data-theme="dark"] .loading-spinner {
    border-color: #1a2d46;
    border-top-color: #2dd4a8;
}
html[data-theme="dark"] .empty-state h3 {
    color: #dde8f2;
}
html[data-theme="dark"] .empty-state {
    color: #7fa0bc;
}

/* Directory / school detail page footer */
html[data-theme="dark"] .loading {
    color: #7fa0bc;
}

/* =====================================================
   SCHOOL DETAIL PAGE
   ===================================================== */
html[data-theme="dark"] .detail-page {
    /* inherits dark body bg */
}
html[data-theme="dark"] .breadcrumb {
    color: #7fa0bc;
}
html[data-theme="dark"] .breadcrumb a {
    color: #2dd4a8;
}
html[data-theme="dark"] .detail-hero {
    background: #132035;
    border-color: rgba(255,255,255,0.07);
}
html[data-theme="dark"] .detail-card {
    background: #132035;
    border-color: rgba(255,255,255,0.07);
}
/* School name / heading in detail */
html[data-theme="dark"] .school-title,
html[data-theme="dark"] .detail-hero h1,
html[data-theme="dark"] h1.school-title {
    color: #dde8f2;
}
html[data-theme="dark"] .detail-hero h2,
html[data-theme="dark"] .detail-card h2,
html[data-theme="dark"] .section-title {
    color: #dde8f2;
}
html[data-theme="dark"] .detail-location,
html[data-theme="dark"] .hero-location {
    color: #7fa0bc;
}
html[data-theme="dark"] .detail-desc,
html[data-theme="dark"] .detail-about,
html[data-theme="dark"] .about-text {
    color: #8fa4bc;
}
/* Price tables */
html[data-theme="dark"] .price-table,
html[data-theme="dark"] .pricing-card {
    background: #132035;
    border-color: rgba(255,255,255,0.07);
}
html[data-theme="dark"] .price-row {
    border-bottom-color: rgba(255,255,255,0.06);
    color: #dde8f2;
}
html[data-theme="dark"] .price-label {
    color: #8fa4bc;
}
html[data-theme="dark"] .price-val {
    color: #2dd4a8;
}
/* Tags / Skill badges */
html[data-theme="dark"] .skill-tag,
html[data-theme="dark"] .level-tag,
html[data-theme="dark"] .amenity-tag {
    background: #1a2d46;
    color: #8fa4bc;
    border-color: rgba(255,255,255,0.08);
}
/* Contact / CTA section */
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .cta-section {
    background: #132035;
    border-color: rgba(255,255,255,0.07);
}
/* Dividers */
html[data-theme="dark"] .divider,
html[data-theme="dark"] hr {
    border-color: rgba(255,255,255,0.07);
}
/* Labels */
html[data-theme="dark"] .label-sm,
html[data-theme="dark"] .card-label {
    color: #7fa0bc;
}
/* School info chips */
html[data-theme="dark"] .info-chip {
    background: #1a2d46;
    color: #8fa4bc;
}
/* Review cards */
html[data-theme="dark"] .review-card {
    background: #132035;
    border-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .review-text {
    color: #c8d8eb;
}
html[data-theme="dark"] .reviewer-name {
    color: #dde8f2;
}
html[data-theme="dark"] .reviewer-date {
    color: #5a7a96;
}
/* Sidebar (school detail) */
html[data-theme="dark"] .school-sidebar {
    background: #132035;
    border-color: rgba(255,255,255,0.07);
}
/* Not found / error */
html[data-theme="dark"] .error-page h1 {
    color: #dde8f2;
}
html[data-theme="dark"] .error-page p {
    color: #8fa4bc;
}

/* Leaflet map override */
html[data-theme="dark"] .leaflet-container {
    filter: brightness(0.75) saturate(0.9);
}

/* =====================================================
   GENERIC — Headings, text, misc
   ===================================================== */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
    /* Only override if not already covered */
}

/* Prevent over-darkening of sections that are already dark */
html[data-theme="dark"] .hero,
html[data-theme="dark"] .stats,
html[data-theme="dark"] .regions,
html[data-theme="dark"] .owner-section,
html[data-theme="dark"] .closing {
    /* These sections use --deep as bg already — fine in dark mode */
}

/* Scroll bar */
html[data-theme="dark"] {
    scrollbar-color: #1a2d46 #0c1826;
}
html[data-theme="dark"]::-webkit-scrollbar {
    width: 8px;
}
html[data-theme="dark"]::-webkit-scrollbar-track {
    background: #0c1826;
}
html[data-theme="dark"]::-webkit-scrollbar-thumb {
    background: #1a2d46;
    border-radius: 4px;
}
html[data-theme="dark"]::-webkit-scrollbar-thumb:hover {
    background: #243d5c;
}

/* =====================================================
   REGION LANDING PAGES (server-rendered)
   ===================================================== */
/* Region page nav uses same `nav` class — covered above */
html[data-theme="dark"] .nav-link {
    color: #2dd4a8;
}
html[data-theme="dark"] .nav-link:hover {
    color: #25c99b;
}

/* Region page school cards (different class names from directory) */
html[data-theme="dark"] .school-logo {
    background: #1a2d46 !important;
}
html[data-theme="dark"] .school-desc {
    color: #8fa4bc;
}
html[data-theme="dark"] .school-highlights {
    background: rgba(45,212,168,0.08);
    color: #2dd4a8;
}
html[data-theme="dark"] .tag {
    background: #1a2d46;
    color: #8fa4bc;
}
html[data-theme="dark"] .view-link {
    color: #2dd4a8;
}
html[data-theme="dark"] .school-location {
    color: #7fa0bc;
}
html[data-theme="dark"] .rating-num {
    color: #dde8f2;
}

/* Region grid links */
html[data-theme="dark"] .region-link {
    background: #132035;
    border-color: rgba(255,255,255,0.1);
    color: #8fa4bc;
}
html[data-theme="dark"] .region-link:hover {
    border-color: #2dd4a8;
    color: #2dd4a8;
    background: rgba(45,212,168,0.06);
}

/* Region page footer */
html[data-theme="dark"] footer a {
    color: #2dd4a8;
}

/* === TRANSITION — smooth mode switch === */
body,
nav,
nav.scrolled,
.hero-card,
.testimonials,
.testimonial-card,
.feature,
footer,
.sidebar,
.school-card,
.search-hero,
.search-bar,
.pill,
.detail-hero,
.detail-card,
.lang-btn,
.theme-toggle,
.filter-toggle,
.price-range input,
.sort-select,
.school-logo,
.region-link,
.tag {
    transition-property: background, background-color, color, border-color, box-shadow;
    transition-duration: 0.25s;
    transition-timing-function: ease;
}