/* ==========================================================================
   Weavique London — light / dark theme
   Light is the original design. Dark mode is switched on by
   <html data-theme="dark">, set by js/theme.js (button in the navbar,
   choice remembered per visitor). Loaded after brand.css on every page.
   ========================================================================== */

/* ---------- Theme switch button (both modes) ---------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(10, 25, 49, 0.15);
    background: transparent;
    color: var(--dark);
    font-size: 16px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    flex-shrink: 0;
}
.theme-toggle:hover { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.theme-toggle:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.theme-toggle .fa-sun { display: none; }
html[data-theme="dark"] .theme-toggle .fa-sun { display: inline-block; }
html[data-theme="dark"] .theme-toggle .fa-moon { display: none; }
.navbar .theme-toggle-desktop { margin-right: 16px; }
.navbar .theme-toggle-mobile { margin-left: auto; margin-right: 12px; }
@media (min-width: 992px) { .navbar .theme-toggle-mobile { display: none; } }
@media (max-width: 991.98px) { .navbar .theme-toggle-desktop { display: none; } }

/* ---------- Dark mode ---------- */
html[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #070E1C;
    --page-alt: #0B1528;
    --surface: #111D33;
    --surface-2: #17253F;
    --text: #C3CAD6;
    --muted: #8F9AAE;
    --heading: #F1F3F7;
    --line: rgba(255, 255, 255, 0.10);
}

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

/* Headings and dark-text utilities */
html[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: var(--heading); }
html[data-theme="dark"] .text-dark { color: var(--heading) !important; }
html[data-theme="dark"] .text-muted { color: var(--muted) !important; }
html[data-theme="dark"] .text-body { color: var(--text) !important; }
html[data-theme="dark"] .border { border-color: var(--line) !important; }

/* Page backgrounds */
html[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] [style*="background: var(--light)"] { background-color: var(--page-alt) !important; }
html[data-theme="dark"] #spinner { background-color: var(--page-bg) !important; }

/* Navbar */
html[data-theme="dark"] .navbar.bg-white { background-color: #0B1527 !important; border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .navbar .navbar-nav .nav-link { color: var(--text); }
html[data-theme="dark"] .navbar .navbar-nav .nav-link:hover,
html[data-theme="dark"] .navbar .navbar-nav .nav-link.active { color: var(--primary); }
html[data-theme="dark"] .navbar .navbar-nav .nav-link.nav-quote.active { color: var(--heading); }
html[data-theme="dark"] .navbar-light .navbar-toggler { border-color: var(--line); }
html[data-theme="dark"] .navbar-light .navbar-toggler-icon { filter: invert(1) brightness(1.6); }
html[data-theme="dark"] .theme-toggle { color: var(--heading); border-color: var(--line); }
html[data-theme="dark"] .theme-toggle:hover { color: #FFFFFF; border-color: var(--primary); }

/* Homepage service tiles */
html[data-theme="dark"] .service-item { box-shadow: 0 0 45px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .service-item .service-img,
html[data-theme="dark"] .service-item .service-title,
html[data-theme="dark"] .service-item .btn { background: var(--surface); }
html[data-theme="dark"] .service-item .service-text::before { background: var(--page-bg); }
html[data-theme="dark"] .service-item .btn { color: var(--text); }
html[data-theme="dark"] .service-item .btn:hover { background: var(--primary); color: #FFFFFF; }
html[data-theme="dark"] .service-item hr { border-color: var(--line); opacity: 1; }

/* Collection cards */
html[data-theme="dark"] .collection-card { background: var(--surface); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .collection-media { background: #F3F4F6; }
html[data-theme="dark"] .collection-head h3 { color: var(--heading); }
html[data-theme="dark"] .collection-desc { color: var(--muted); }
html[data-theme="dark"] .collection-eyebrow,
html[data-theme="dark"] .collection-price-sub,
html[data-theme="dark"] table.collection-specs th { color: var(--muted); }
html[data-theme="dark"] table.collection-specs td { color: var(--text); }
html[data-theme="dark"] table.collection-specs th,
html[data-theme="dark"] table.collection-specs td { border-color: var(--line); }
html[data-theme="dark"] .collection-price { background: var(--surface-2); border: 1px solid var(--line); }

/* Service-page blocks (hoodie, denim, wash, jacquard, low MOQ, factory) */
html[data-theme="dark"] .moq-card { background: var(--surface); }
html[data-theme="dark"] .moq-card img { background: #F3F4F6; border-radius: 8px; }
html[data-theme="dark"] .moq-example { background: var(--surface); }
html[data-theme="dark"] .moq-point { background: var(--surface); }
html[data-theme="dark"] .moq-feature { border-color: var(--line); background: var(--surface); }
html[data-theme="dark"] .moq-name,
html[data-theme="dark"] .moq-total,
html[data-theme="dark"] .enq-label,
html[data-theme="dark"] .qt-item-num { color: var(--heading); }
html[data-theme="dark"] .moq-price-note,
html[data-theme="dark"] .qt-spec,
html[data-theme="dark"] .enq-upload-text small,
html[data-theme="dark"] .blog-meta,
html[data-theme="dark"] .form-note,
html[data-theme="dark"] .qt-hint,
html[data-theme="dark"] .qt-field-note,
html[data-theme="dark"] .qt-good-to-know { color: var(--muted); }
html[data-theme="dark"] .factory-card,
html[data-theme="dark"] .blog-card { background: var(--surface); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .blog-card-body h2 { color: var(--heading); }

/* FAQ accordions */
html[data-theme="dark"] .accordion-item { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .moq-faq .accordion-button { background: var(--surface); color: var(--heading); }
html[data-theme="dark"] .moq-faq .accordion-button:not(.collapsed) { background: rgba(201, 150, 46, 0.14); color: var(--heading); }
html[data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.8); }
html[data-theme="dark"] .accordion-body { color: var(--text); }

/* Forms (enquiry + quote) */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--surface-2);
    border-color: var(--line);
    color: var(--heading);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--surface-2);
    color: var(--heading);
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(201, 150, 46, .2);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--muted); }
html[data-theme="dark"] .form-floating > label { color: var(--muted); }
html[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C3CAD6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
html[data-theme="dark"] .form-select option { background: var(--surface-2); color: var(--heading); }
html[data-theme="dark"] .form-check-input { background-color: var(--surface-2); border-color: rgba(255, 255, 255, 0.3); }
html[data-theme="dark"] .enq-chip span { background: var(--surface-2); border-color: var(--line); color: var(--text); }
html[data-theme="dark"] .enq-upload { border-color: rgba(255, 255, 255, 0.2); }
html[data-theme="dark"] .enq-status-error { background: #3A1416; color: #FFB4B4; border-color: #6B2326; }
html[data-theme="dark"] .qt-section { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .qt-item { background: var(--surface-2); border-color: var(--line); }
html[data-theme="dark"] .qt-remove { color: #FF8A8A; }

/* Privacy policy / blog article */
html[data-theme="dark"] .policy-content h3,
html[data-theme="dark"] .policy-content .lead { color: var(--heading); }
html[data-theme="dark"] .policy-content p,
html[data-theme="dark"] .policy-content li,
html[data-theme="dark"] .article { color: var(--text); }
html[data-theme="dark"] .article-tip { background: rgba(201, 150, 46, 0.12); }

/* Lightboxes: keep product photos on a light backdrop so they read correctly */
html[data-theme="dark"] .lightbox-content #lightboxImg,
html[data-theme="dark"] .lightbox-thumb { background: #F3F4F6; }
html[data-theme="dark"] .modal-content { background: var(--surface); color: var(--text); }

/* Spot fixes found by the contrast check */
html[data-theme="dark"] .bg-primary :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4):not(.text-white) { color: var(--dark); }
html[data-theme="dark"] [style*="color:#5F656F"] { color: var(--muted) !important; }
html[data-theme="dark"] code { color: #F39AC6; }

/* Smooth switch */
html.theme-anim body,
html.theme-anim body * { transition: background-color .3s ease, color .3s ease, border-color .3s ease !important; }