/* ==========================================================================
   Secret Indochina — dark mode (FR site)
   Activated by <html data-bs-theme="dark">, set in fr/partials/theme-head.
   Bootstrap 5.3 handles its own components; this file covers Crafto + site
   styles. Crafto's colour variables (--white, --dark-gray…) are named after
   colours and used for both text and backgrounds, so we DON'T redefine them:
   we override specific selectors instead (keeps white text on photos intact).
   ========================================================================== */

[data-bs-theme="dark"] {
    --si-bg: #15171c;
    --si-surface: #1e2128;
    --si-surface-2: #272b34;
    --si-border: #363b46;
    --si-text: #c3c7cf;
    --si-text-strong: #eef0f4;
    --si-muted: #8f96a2;
    --si-pink: #e03c8c;        /* brand: buttons, fills */
    --si-pink-text: #f06aa9;   /* brand as text on dark: better contrast */

    --bs-body-bg: var(--si-bg);
    --bs-body-color: var(--si-text);
    --bs-emphasis-color: var(--si-text-strong);
    --bs-heading-color: var(--si-text-strong);
    --bs-border-color: var(--si-border);
    --bs-secondary-bg: var(--si-surface-2);
    --bs-tertiary-bg: var(--si-surface);
    --bs-link-color: var(--si-pink-text);
    --bs-link-hover-color: #f58cbd;
    color-scheme: dark;
}

/* ---- base ---------------------------------------------------------------- */
/* Background on body only: it then propagates to the canvas. Setting it on <html>
   too would make body paint over the homepage hero video (z-index: -3). */
[data-bs-theme="dark"] body {
    background-color: var(--si-bg);
    color: var(--si-text);
}
[data-bs-theme="dark"] { color: var(--si-text); }
/* :where() keeps element-level specificity so Crafto/Bootstrap colour classes still win */
:where([data-bs-theme="dark"]) :is(h1, h2, h3, h4, h5, h6) { color: var(--si-text-strong); }
:where([data-bs-theme="dark"]) a { color: var(--si-text); }
:where([data-bs-theme="dark"]) a:hover { color: var(--si-pink-text); }
:where([data-bs-theme="dark"]) blockquote { color: var(--si-text); }
:where([data-bs-theme="dark"]) hr { border-color: var(--si-border); opacity: 1; }
[data-bs-theme="dark"] .text-body { color: var(--si-text) !important; }

/* Crafto "dark gray" text → light, except on white chips sitting on photos */
[data-bs-theme="dark"] .text-dark-gray:not(.bg-white),
[data-bs-theme="dark"] a.text-dark-gray-hover:not(.bg-white):hover { color: var(--si-text-strong); }
[data-bs-theme="dark"] .text-medium-gray { color: var(--si-muted); }

/* brand pink as text */
[data-bs-theme="dark"] .color-si,
[data-bs-theme="dark"] a.color-si { color: var(--si-pink-text); }
[data-bs-theme="dark"] a.color-si:hover { color: #f58cbd; }

/* surfaces */
[data-bs-theme="dark"] .bg-white:not(.rounded-circle) { background-color: var(--si-surface) !important; }
[data-bs-theme="dark"] .bg-very-light-gray,
[data-bs-theme="dark"] .bg-light:not(.btn) { background-color: var(--si-surface) !important; }
[data-bs-theme="dark"] .bg-extra-medium-gray { background-color: var(--si-surface-2) !important; }
[data-bs-theme="dark"] .border:not(.border-white):not([class*="border-color-"]) { border-color: var(--si-border) !important; }

/* ---- header (other pages) ----------------------------------------------- */
[data-bs-theme="dark"] header > nav {
    background:
        linear-gradient(rgba(21, 23, 28, .9), rgba(21, 23, 28, .9)),
        url(https://www.secretindochina.com/assets/img/img_bg_header.jpg) center center no-repeat;
}
[data-bs-theme="dark"] .header-demo.navbar .navbar-nav .nav-link,
[data-bs-theme="dark"] .header-light .navbar-nav .nav-link,
[data-bs-theme="dark"] header.sticky.sticky-active [data-header-hover=light] .navbar-nav .nav-link { color: var(--si-text); }
[data-bs-theme="dark"] .header-demo.navbar .navbar-nav .nav-link.active,
[data-bs-theme="dark"] .header-demo.navbar .navbar-nav .nav-link:hover { color: var(--si-pink-text); }
[data-bs-theme="dark"] .navbar .navbar-nav .dropdown-toggle { color: var(--si-text); }
[data-bs-theme="dark"] header.sticky.sticky-active [data-header-hover=light] {
    background-color: var(--si-surface) !important;
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, .5);
}
[data-bs-theme="dark"] .navbar .navbar-nav .dropdown .dropdown-menu {
    background-color: var(--si-surface);
    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .45);
}
[data-bs-theme="dark"] .navbar .navbar-nav .dropdown .dropdown-menu a { color: var(--si-text); }
[data-bs-theme="dark"] .navbar .navbar-nav .dropdown .dropdown-menu a:hover,
[data-bs-theme="dark"] .navbar .navbar-nav .simple-dropdown .dropdown-menu .dropdown.open > a { color: var(--si-pink-text); }
[data-bs-theme="dark"] .navbar-toggler-line { background: var(--si-text-strong); }
[data-bs-theme="dark"] .navbar-collapse { background: var(--si-surface); }
@media (min-width: 992px) {
    [data-bs-theme="dark"] .navbar-expand-lg .navbar-collapse { background: transparent; }
}
/* language button (was bg-light) */
[data-bs-theme="dark"] header .btn.bg-light { background-color: var(--si-surface-2) !important; }

/* light/dark logo swap */
.logo-on-dark { display: none !important; }
[data-bs-theme="dark"] .logo-on-light { display: none !important; }
[data-bs-theme="dark"] .logo-on-dark { display: revert !important; }

/* ---- theme toggle button ------------------------------------------------- */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: var(--bs-light, #f8f9fa); color: #444; font-size: 17px; cursor: pointer;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .08); transition: background-color .3s, color .3s;
}
.theme-toggle:hover { color: var(--si-pink, #e03c8c); }
.theme-toggle:focus-visible { outline: 2px solid #e03c8c; outline-offset: 3px; }
.theme-toggle .icon-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle { background: var(--si-surface-2); color: #f5c76b; }
[data-bs-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
[data-bs-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* homepage variant: bare white icon over the video */
.theme-toggle.theme-toggle-bare,
[data-bs-theme="dark"] .theme-toggle.theme-toggle-bare {
    width: 30px; height: 30px; background: transparent; box-shadow: none;
    color: #fff; font-size: 20px; text-shadow: 0 0 4px rgba(0, 0, 0, .5);
}
.theme-toggle.theme-toggle-bare:focus-visible { outline-color: #fff; }
/* inner-page header: same bare icons as the homepage, coloured for the light header */
header .header-switchers { display: inline-flex; align-items: center; gap: 12px; vertical-align: middle; }
header .header-switchers .lang-switch { display: inline-flex; line-height: 1; }
header .header-switchers .lang-switch img { width: 24px; }
header .theme-toggle.theme-toggle-bare { color: #444; text-shadow: none; }
header .theme-toggle.theme-toggle-bare:hover { color: #e03c8c; }
header .theme-toggle.theme-toggle-bare:focus-visible { outline-color: #e03c8c; }
[data-bs-theme="dark"] header .theme-toggle.theme-toggle-bare { color: var(--si-text-strong); }
[data-bs-theme="dark"] header .theme-toggle.theme-toggle-bare:hover { color: var(--si-pink-text); }

/* ---- forms --------------------------------------------------------------- */
[data-bs-theme="dark"] :is(input, select, textarea, .form-control, .form-select) {
    background-color: var(--si-surface);
    border-color: var(--si-border);
    color: var(--si-text-strong);
}
[data-bs-theme="dark"] :is(input, select, textarea, .form-control):focus {
    border-color: var(--si-pink);
    color: var(--si-text-strong);
}
[data-bs-theme="dark"] :is(.form-control, .form-select).bg-transparent { background-color: var(--si-surface) !important; }
/* the opened dropdown list: give options an explicit dark background so they never render white on white */
[data-bs-theme="dark"] select option,
[data-bs-theme="dark"] select optgroup {
    background-color: var(--si-surface);
    color: var(--si-text-strong);
}
[data-bs-theme="dark"] select option:checked { background-color: var(--si-surface-2); }
[data-bs-theme="dark"] ::placeholder { color: var(--si-muted) !important; }
[data-bs-theme="dark"] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c3c7cf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ---- page-specific ------------------------------------------------------- */
/* homepage intro: white text-shadow halo looks smudgy on dark */
[data-bs-theme="dark"] [style*="text-shadow: 1px 1px 1px white"] { text-shadow: none !important; }
/* homepage dropdown */
[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--si-surface); --bs-dropdown-link-color: var(--si-text); --bs-dropdown-link-hover-bg: var(--si-surface-2); --bs-dropdown-link-hover-color: var(--si-pink-text); }

/* experiences collection band (inline #ddd + pattern) */
[data-bs-theme="dark"] .si-pattern-band { background-color: var(--si-surface) !important; background-blend-mode: multiply; }
[data-bs-theme="dark"] .si-pattern-band .bg-white { background-color: var(--si-surface-2) !important; }