/*
 * Dark theme for the Sanathan website.
 * Palette matches the Flutter app's dark mode (lib/views/sanathan/sanathan_theme.dart)
 * so the brand looks the same across web and mobile.
 *
 * Applied by setting data-theme="dark" on <html> (see theme-toggle.js).
 * The light palette in sanathan-theme.css is untouched — this file only
 * overrides variables + a handful of hardcoded colors when dark is active.
 */

[data-theme="dark"] {
    --sanathan-saffron: #ff8a00;
    --sanathan-deep-saffron: #ea580c;
    --sanathan-maroon: #ff8a00;
    --sanathan-vermilion: #ea580c;
    --sanathan-gold: #ffd18c;
    --sanathan-turmeric: #241310;
    --sanathan-lotus: #1a0e0c;
    --sanathan-cream: #0d0605;
    --sanathan-ink: #f5ebe0;
    --sanathan-muted: #a8998a;
    --sanathan-green: #4ade80;
    --sanathan-indigo: #7c93d1;
    --sanathan-border: rgba(255, 209, 140, 0.16);
    --sanathan-shadow: 0 16px 42px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] body.english {
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 138, 0, 0.10), transparent 28rem),
        radial-gradient(circle at 88% 12%, rgba(255, 209, 140, 0.08), transparent 24rem),
        linear-gradient(180deg, var(--sanathan-cream), #120907 42%, #0a0504);
}

[data-theme="dark"] body.english::before {
    opacity: 0.18;
    background-image:
        linear-gradient(30deg, rgba(255, 209, 140, 0.04) 12%, transparent 12.5%, transparent 87%, rgba(255, 209, 140, 0.04) 87.5%, rgba(255, 209, 140, 0.04)),
        linear-gradient(150deg, rgba(255, 209, 140, 0.04) 12%, transparent 12.5%, transparent 87%, rgba(255, 209, 140, 0.04) 87.5%, rgba(255, 209, 140, 0.04));
}

[data-theme="dark"] .top-navbar,
[data-theme="dark"] nav.navbar.navbar-expand-lg.navbar-light.top-navbar {
    background: rgba(13, 6, 5, 0.92) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .btn-chat-astro {
    background: #241310 !important;
}

/* Generic structural overrides for legacy Bootstrap-era markup that hardcodes
   light backgrounds (cards, modals, dropdowns, tables, inputs). Broad-brush
   on purpose: this bolts dark mode onto older CSS without editing every
   legacy file. Add more selectors here if a specific page still looks wrong
   in dark mode. */
[data-theme="dark"] .card,
[data-theme="dark"] .box,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .form-control,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .table {
    background-color: var(--sanathan-lotus) !important;
    color: var(--sanathan-ink) !important;
    border-color: var(--sanathan-border) !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--sanathan-muted) !important;
}

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

/* ---------------------------------------------------------------------
   Theme toggle button
   --------------------------------------------------------------------- */

/* Sizing/behavior only — intentionally no background/color here so the
   button inherits whatever style its surrounding nav uses (e.g. plain
   "text-white" icon links on one header layout vs a filled chip on
   another). Set explicit background/border/color on the element itself
   (inline style or a page-specific class) if the surrounding nav doesn't
   already give it a sensible look. */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.15s ease;
}

.theme-toggle-btn:not([style*="background"]) {
    background: var(--sanathan-lotus);
    color: var(--sanathan-maroon);
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--sanathan-border);
    margin-right: 12px;
    font-size: 16px;
}

.theme-toggle-btn:hover {
    transform: scale(1.06);
}

.theme-toggle-btn .theme-toggle-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-toggle-btn .theme-toggle-icon-light {
    display: none;
}

[data-theme="dark"] .theme-toggle-btn .theme-toggle-icon-dark {
    display: inline;
}

/* ---------------------------------------------------------------------
   Photographic backgrounds — hero / banner imagery
   ---------------------------------------------------------------------
   These photos (temple/sunset/meditating-figure scenes) don't have dark
   variants, so instead of swapping assets we ground them into the dark
   palette: a brightness/saturation pull via filter, plus a darkening
   scrim layered over the image so it recedes rather than glowing against
   the dark UI. Filter applies on top of inline `background` styles too,
   since filter is a separate CSS property from background-image.
   --------------------------------------------------------------------- */

/* Homepage hero — meditating_hero.png, set via inline style */
[data-theme="dark"] .sanathan-shell-hero {
    filter: brightness(0.72) saturate(0.85);
}

[data-theme="dark"] .sanathan-shell-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 75% 50%, rgba(13, 6, 5, 0.35), rgba(13, 6, 5, 0.75));
    pointer-events: none;
    z-index: 0;
}

/* Homepage dome-shrine hero image (hero-sanathan.webp) */
[data-theme="dark"] .sanathan-hero-image {
    filter: brightness(0.65) saturate(0.8);
    outline-color: var(--sanathan-gold) !important;
}

[data-theme="dark"] .sanathan-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(13, 6, 5, 0.28);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* Membership archway banner background photo */
[data-theme="dark"] .redesign-membership-banner {
    filter: brightness(0.75) saturate(0.85);
}

/* Inner-page hero banners (Kundali, Kundali Matching, Daily Horoscope,
   Horoscope Sign, Live Astrologers, Panchang) sharing hero-sanathan.webp */
[data-theme="dark"] .sanathan-visual-hero {
    filter: brightness(0.7) saturate(0.85);
}

[data-theme="dark"] .sanathan-visual-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(13, 6, 5, 0.45);
    pointer-events: none;
    z-index: 0;
}

/* Temple/listing detail hero photo backgrounds (already dark-scrimmed via
   an inline gradient in light mode, but the raw photo underneath still
   needs pulling down so its highlights don't blow out against the dark UI) */
[data-theme="dark"] .sanathan-listings-hero,
[data-theme="dark"] .sanathan-listing-detail-hero,
[data-theme="dark"] .sas-single-hero-bg {
    filter: brightness(0.6) saturate(0.85);
}

/* AI-tools / listing detail hero already carries a brightness(0.25) filter
   for light mode via .sas-single-hero-bg base rule — dark mode pulls it
   down slightly further above, no double-overlay needed since
   .sas-single-hero-overlay already sits on top. */