/* ══════════════════════════════════════════════════════════════════════
   VIDASA SHOPPING — COLOUR SWITCH (whole site)            v2.7.0
   ----------------------------------------------------------------------
   Loaded LAST (see functions.php → vidasa_colour_switch_assets) so it
   wins over main.css / woocommerce.css / single-product.css.

   How it works
   • Dark is the base look (main.css).  Light mode is switched on by
     body.light-theme  (theme)  +  body.vp-light  (Library Platform plugin)
     +  html[data-vd-theme="light"]  (available to ANY plugin / CSS).
   • Light palette = the exact cream palette of the Vidasa Library
     Platform (#fdfaf4 / #f5ede0 / #f0e8d8, text #1a1a1a, accent #b84000).
   • Section 1  the switch button (copy of the plugin's .vp-theme-toggle)
     Section 2  light palette variables (theme + plugin variable names)
     Section 3  every hard-coded dark surface in the theme, re-coloured
     Section 4  forms, tables, scrollbars, WordPress / WooCommerce content
     Section 5  third-party plugin hook (how to make any plugin follow)
   ══════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────────
   1.  THE SWITCH  (top bar, exact middle)
       Identical look to the Library Platform's 🌙 / ☀️ pill.
   ────────────────────────────────────────────────────────────────────── */
.vd-colour-switch {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .15s;
    flex-shrink: 0;
    padding: 0;
    margin: 0 6px;
    font-family: inherit;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}
.vd-colour-switch:hover {
    background: rgba(249,115,22,.15);
    border-color: var(--primary-color);
    transform: scale(1.08);
}
.vd-colour-switch:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.vd-colour-switch-icon::before {
    content: '🌙';
    font-size: 1rem;
    line-height: 1;
}
body.light-theme .vd-colour-switch {
    background: rgba(0,0,0,.06);
    border-color: #c8b89a;
}
body.light-theme .vd-colour-switch:hover {
    background: rgba(184,64,0,.1);
    border-color: #b84000;
}
body.light-theme .vd-colour-switch-icon::before { content: '☀️'; }

/* Top bar: switch sits dead-centre, social icons share the two sides */
.vd-topbar-inner { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
.vd-topbar-left  { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vd-topbar-center { justify-content: center; flex-wrap: nowrap; }

@media (max-width: 768px) {
    .vd-colour-switch { width: 34px; height: 34px; margin: 0 4px; }
}
@media (max-width: 480px) {
    .vd-topbar-inner { padding: 0 8px; }
    .vd-topbar-center { gap: 5px; }
    .vd-topbar-center .vd-soc-icon { width: 30px; height: 30px; font-size: 13px; }
    .vd-colour-switch { width: 32px; height: 32px; margin: 0 2px; }
}


/* ──────────────────────────────────────────────────────────────────────
   2.  LIGHT PALETTE  (variables)
       Theme variable names + the Library Platform's own variable names,
       so plugin shortcodes rendered inside theme pages follow too.
   ────────────────────────────────────────────────────────────────────── */
html[data-vd-theme="light"],
body.light-theme,
body.vp-light {
    /* theme variables */
    --primary-color: #b84000;
    --primary-dark:  #fdfaf4;
    --header-bg:     #f5ede0;
    --text-light:    #1a1a1a;
    --text-gray:     #5a4a38;
    --text-dark:     #1a1a1a;
    --border-light:  #c8b89a;
    --card-bg:       #f0e8d8;
    --shadow:        0 12px 30px rgba(90,74,56,0.14);

    /* Library Platform variables (same values as body.vp-light there) */
    --bg:      #fdfaf4;
    --bg2:     #f5ede0;
    --bg3:     #ede0cc;
    --bg4:     #e5d4b8;
    --card:    #f0e8d8;
    --border:  #c8b89a;
    --border2: #b09878;
    --white:   #1a1a1a;
    --muted:   #5a4a38;
    --muted2:  #3a2e22;
    --orange:  #b84000;
    --orange2: #d05010;
    --gold:    #7a5e00;
    --green:   #1a6a30;
    --red:     #a02020;
}
html[data-vd-theme="light"] { color-scheme: light; }
html[data-vd-theme="dark"]  { color-scheme: dark;  }

/* Whole-page background — covers the full canvas, not just the header */
html[data-vd-theme="light"] body,
body.light-theme {
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(184,64,0,0.08), transparent 60%),
        linear-gradient(160deg, #fdfaf4 0%, #f5ede0 50%, #f0e8d8 100%);
    background-attachment: fixed;
    color: #1a1a1a;
}
body.light-theme ::selection { background: rgba(184,64,0,.25); color: #1a1a1a; }


/* ──────────────────────────────────────────────────────────────────────
   3.  THEME PARTS THAT HAD HARD-CODED DARK COLOURS
   ────────────────────────────────────────────────────────────────────── */

/* ── Row 1: top bar ── */
body.light-theme .vd-topbar {
    background: #ede0cc;
    border-bottom: 1px solid #c8b89a;
}
body.light-theme .vd-topbar-contact { color: #3a2e22; }
body.light-theme .vd-topbar-contact:hover { color: #b84000; }

/* ── Row 2: main bar, menus, header icons ── */
body.light-theme .header.scrolled { background: rgba(245,237,224,0.96); box-shadow: 0 6px 20px rgba(90,74,56,0.14); }
body.light-theme .main-menu li a:hover,
body.light-theme .main-menu li.current-menu-item > a,
body.light-theme .main-menu li.current-menu-ancestor > a { background: rgba(184,64,0,0.08); }
body.light-theme .desktop-nav-secondary .main-menu-secondary > li > a { color: var(--text-gray); }
body.light-theme .desktop-nav-secondary .main-menu-secondary > li > a:hover { color: var(--primary-color); }
body.light-theme .header-icon { background: rgba(0,0,0,0.06); color: #3a2e22; }
body.light-theme .header-icon:hover { background: #b84000; border-color: #b84000; color: #fff; }

/* ── Row 3: all-categories bar + search ── */
body.light-theme .vd-catbar-icons .header-icon { background: rgba(0,0,0,0.06); border-color: #c8b89a; color: #3a2e22; }
body.light-theme .vd-catbar-icons .header-icon:hover { background: #b84000; border-color: #b84000; color: #fff; }
body.light-theme .vd-search-form { border: 1px solid #c8b89a; background: #fff; }
body.light-theme .vd-search-cat { background: #f0e8d8; color: #3a2e22; border-right-color: #c8b89a; }
body.light-theme .vd-search-input { background: #fff; color: #1a1a1a; }
body.light-theme .vd-search-input::placeholder { color: #8a7a66; }
body.light-theme .vd-search-submit:hover { background: #8a3000; }
body.light-theme .vd-allcats-dropdown li a:hover,
body.light-theme .vd-allcats-dropdown li .vd-allcats-toggle:hover,
body.light-theme .vd-allcats-sub li a:hover,
body.light-theme .vd-cat-sidebar li a:hover,
body.light-theme .vd-cat-sidebar li.is-active > a,
body.light-theme .vd-cat-topbar-dropdown a:hover { background: rgba(184,64,0,0.08); }
body.light-theme .vd-allcats-sub { background: rgba(0,0,0,0.05); }

/* ── Mobile slide menu, overlay, bottom bars, pop-ups ── */
body.light-theme .close-menu { background: rgba(0,0,0,0.07); }
body.light-theme .mobile-nav-link:hover { background: rgba(184,64,0,0.08); }
body.light-theme .mobile-submenu a { border-bottom-color: rgba(0,0,0,0.06); }
body.light-theme .mobile-actions {
    background: rgba(245,237,224,0.96);
    border-color: #c8b89a;
    box-shadow: 0 18px 50px rgba(90,74,56,0.22);
}
body.light-theme .mobile-actions a { background: rgba(0,0,0,0.06); border-color: #c8b89a; color: #1a1a1a; }
body.light-theme .mobile-actions a:hover { background: rgba(0,0,0,0.1); }
body.light-theme .mobile-actions a.primary-action { background: #b84000; color: #fff; border-color: transparent; }
body.light-theme .gdpr-decline { background: rgba(0,0,0,0.06); }
body.light-theme .gdpr-decline:hover { background: rgba(0,0,0,0.1); }
@media (max-width: 900px) {
    body.light-theme .vd-cat-sidebar { box-shadow: 2px 0 24px rgba(90,74,56,0.25); }
}

/* ── Home page: setup panel, tag clouds ── */
body.light-theme .setup-instructions code { background: rgba(0,0,0,0.07); }
body.light-theme .vd-sidebar .tag-cloud-link { background: rgba(0,0,0,0.05); }
body.light-theme .vd-sidebar .tag-cloud-link:hover { background: var(--primary-color); color: #fff; }

/* ── Home hero: image slider stays as photo; with NO slider images the
      dark fallback block is switched to the cream palette ── */
body.light-theme #home.full-width:not(:has(.hero-slide)) { background: #f5ede0 !important; }
body.light-theme #home.full-width:not(:has(.hero-slide)) .hero-content h1 { color: #1a1a1a !important; }
body.light-theme #home.full-width:not(:has(.hero-slide)) .hero-content .hero-subtitle { color: #5a4a38 !important; }


/* ──────────────────────────────────────────────────────────────────────
   4.  FORMS, TABLES, SCROLLBARS, WORDPRESS / WOOCOMMERCE CONTENT
       (low-specificity :where() so a more specific rule still wins)
   ────────────────────────────────────────────────────────────────────── */
body.light-theme :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
    select, textarea
) {
    background-color: #fff;
    color: #1a1a1a;
    border-color: #c8b89a;
}
body.light-theme :where(input, textarea)::placeholder { color: #8a7a66; opacity: 1; }
body.light-theme :where(select option) { background: #fff; color: #1a1a1a; }

/* Text blocks that should always read as dark-on-cream in light mode */
body.light-theme :where(.entry-content, .vd-page-body, .woocommerce, .wp-block-group, .widget) { color: var(--text-gray); }
body.light-theme :where(h1, h2, h3, h4, h5, h6) { color: var(--text-light); }
body.light-theme :where(table) { color: var(--text-gray); border-color: var(--border-light); }
body.light-theme :where(hr) { border-color: var(--border-light); }
body.light-theme :where(code, pre, kbd) { background: rgba(0,0,0,0.06); color: #3a2e22; }

/* WooCommerce notices & mini-cart keep their readable colours */
body.light-theme .woocommerce-message,
body.light-theme .woocommerce-info,
body.light-theme .woocommerce-error { background: var(--card-bg); color: var(--text-light); }

/* Scrollbars — same as the Library Platform's light mode */
body.light-theme ::-webkit-scrollbar-track { background: #f0e8d8; }
body.light-theme ::-webkit-scrollbar-thumb { background: #c8b89a; }
body.light-theme ::-webkit-scrollbar-thumb:hover { background: #b84000; }


/* ──────────────────────────────────────────────────────────────────────
   5.  HOOK FOR THIRD-PARTY PLUGINS
       A plugin whose own CSS has hard-coded dark colours can follow the
       same switch with any of these selectors:

           body.light-theme .my-plugin-box { … }
           body.vp-light    .my-plugin-box { … }
           html[data-vd-theme="light"] .my-plugin-box { … }

       …or simply use the shared variables (--bg, --bg2, --card, --border,
       --white [= main text], --muted, --orange) which flip automatically.
       The page also fires a  "vidasa:themechange"  event on document.
   ────────────────────────────────────────────────────────────────────── */