/* ==========================================================================
   KALP Legal Pages — Rainbow Variant Overrides
   Load AFTER the page's inline <style> block.
   Affects: preview-privacy-rainbow.html, preview-returns-rainbow.html,
            preview-shipping-rainbow.html, preview-terms-rainbow.html

   Strategy: blanket-flip every cream-on-dark class to dark-on-cream,
   replace gold-tint surfaces with translucent white, fix all callouts
   and list items.
   ========================================================================== */

/* ── 1. Body flip ── */
body {
    background: var(--cream) !important;
    color: var(--deep-brown) !important;
}

/* ── 2. Breadcrumb ── */
.legal-breadcrumb__list {
    color: var(--deep-brown) !important;
    opacity: 0.75 !important;
}
.legal-breadcrumb__list a { color: inherit !important; }
.legal-breadcrumb__list a:hover { color: var(--gold-dark) !important; }

/* ── 3. Hero — rainbow bg + cream overlay ── */
.legal-hero {
    background: url('../images/backgrounds/rainbow-bg.png') center / cover no-repeat !important;
    position: relative;
}
.legal-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 248, 238, 0.6);
    pointer-events: none;
    z-index: 0;
}
.legal-hero > * { position: relative; z-index: 1; }

.legal-hero__title    { color: var(--deep-brown) !important; }
.legal-hero__desc     { color: var(--deep-brown) !important; opacity: 0.82 !important; }
.legal-hero__subtitle { color: var(--gold-dark) !important; font-weight: 600 !important; }
.legal-hero__line     { background: var(--gold-dark) !important; }
.legal-hero__diamond  { background: var(--gold-dark) !important; }
.legal-hero__updated {
    background: rgba(255, 255, 255, 0.55) !important;
    color: var(--gold-dark) !important;
    border-color: rgba(26, 10, 3, 0.15) !important;
}

/* ── 4. TOC sidebar (Privacy, Terms) ── */
.legal-toc {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(26, 10, 3, 0.12) !important;
}
.legal-toc__title {
    color: var(--gold-dark) !important;
    border-bottom-color: rgba(26, 10, 3, 0.12) !important;
    font-weight: 700 !important;
}
.legal-toc__list a { color: var(--deep-brown) !important; opacity: 0.78 !important; }
.legal-toc__list a:hover { color: var(--gold-dark) !important; opacity: 1 !important; }

/* ── 5. Legal content sections ── */
.legal-section__num {
    color: var(--gold-dark) !important;
    font-weight: 700 !important;        /* was default — now bolder on cream */
}
.legal-section__title      { color: var(--deep-brown) !important; }
.legal-section__text       { color: var(--deep-brown) !important; opacity: 0.9 !important; }
.legal-section__text strong{ color: var(--gold-dark) !important; font-weight: 600 !important; }
.legal-section__text a     { color: var(--gold-dark) !important; font-weight: 500 !important; }
.legal-section__subheading {
    color: var(--deep-brown) !important;
    opacity: 1 !important;
    font-weight: 600 !important;        /* was 500 — thicker for cream bg */
}
.legal-section__list       { color: var(--deep-brown) !important; opacity: 0.9 !important; }
.legal-section__list li    { color: var(--deep-brown) !important; }

/* ── 6. Entity block (Pranada, on Privacy) ── */
.legal-entity {
    background: rgba(255, 255, 255, 0.6) !important;
    border-left-color: var(--gold-dark) !important;
}
.legal-entity__label   { color: var(--gold-dark) !important; font-weight: 700 !important; }
.legal-entity__name    { color: var(--deep-brown) !important; }
.legal-entity__address { color: var(--deep-brown) !important; opacity: 0.88 !important; }
.legal-entity__address a { color: var(--gold-dark) !important; }

/* ── 7. Returns cards ── */
.returns-card {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(26, 10, 3, 0.12) !important;
}
.returns-card:hover {
    background: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(26, 10, 3, 0.22) !important;
}
.returns-card__num,
.returns-card__label {
    color: var(--gold-dark) !important;
    font-weight: 700 !important;        /* thicker section labels */
}
.returns-card__title    { color: var(--deep-brown) !important; opacity: 1 !important; }
.returns-card__text     { color: var(--deep-brown) !important; opacity: 0.9 !important; }
.returns-card__text strong { color: var(--gold-dark) !important; font-weight: 600 !important; }
.returns-card__text a   { color: var(--gold-dark) !important; font-weight: 500 !important; }

/* ── 8. Returns non-returnable callout (was pink bg + cream text) ── */
.returns-callout {
    background: rgba(212, 81, 126, 0.10) !important;
    border-left-color: var(--color-danger) !important;
}
.returns-callout__title  { color: var(--color-danger) !important; font-weight: 700 !important; }
.returns-callout__list li {
    color: var(--deep-brown) !important;
    opacity: 0.95 !important;
}
.returns-callout__list li::before { color: var(--color-danger) !important; }

/* ── 9. Returns address block ── */
.returns-address {
    background: rgba(255, 255, 255, 0.65) !important;
    border-left-color: var(--gold-dark) !important;
}
.returns-address__label { color: var(--gold-dark) !important; font-weight: 700 !important; }
.returns-address__text  { color: var(--deep-brown) !important; opacity: 0.92 !important; }
.returns-address__text a { color: var(--gold-dark) !important; }

/* ── 10. Returns CTA (dark city bookend) ── */
.returns-cta {
    background: url('../images/backgrounds/1.jpg') center / cover no-repeat !important;
    position: relative;
    border: none !important;
}
.returns-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(26, 10, 3, 0.78);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
.returns-cta > * { position: relative; z-index: 1; }
.returns-cta__title { color: var(--cream) !important; }
.returns-cta__text  { color: var(--cream) !important; opacity: 0.88 !important; }
/* CTA button keeps its gold style — already readable */

/* ── 11. Shipping pills ── */
.shipping-pill {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(26, 10, 3, 0.12) !important;
    color: var(--deep-brown) !important;
}
.shipping-pill:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(26, 10, 3, 0.22) !important;
}
.shipping-pill__icon         { color: var(--gold-dark) !important; }
.shipping-pill__days         { color: var(--gold-dark) !important; font-weight: 600 !important; }
.shipping-pill__unit         { color: var(--deep-brown) !important; font-weight: 600 !important; }
.shipping-pill__label        { color: var(--deep-brown) !important; opacity: 0.88 !important; }
.shipping-pill__label strong { color: var(--gold-dark) !important; font-weight: 600 !important; }

/* ── 12. Shipping cards ── */
.shipping-card {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(26, 10, 3, 0.12) !important;
}
.shipping-card:hover {
    background: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(26, 10, 3, 0.22) !important;
}
.shipping-card__num,
.shipping-card__label { color: var(--gold-dark) !important; font-weight: 700 !important; }
.shipping-card__title { color: var(--deep-brown) !important; }
.shipping-card__text  { color: var(--deep-brown) !important; opacity: 0.9 !important; }
.shipping-card__text strong { color: var(--gold-dark) !important; font-weight: 600 !important; }
.shipping-card__text a      { color: var(--gold-dark) !important; font-weight: 500 !important; }

/* ── 13. Shipping timeline ── */
.shipping-timeline li          { border-bottom-color: rgba(26, 10, 3, 0.1) !important; }
.shipping-timeline li::before  {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 2px solid var(--gold-dark) !important;   /* thicker border ring */
    color: var(--gold-dark) !important;
    font-weight: 700 !important;
}
.shipping-timeline__title {
    color: var(--deep-brown) !important;
    font-weight: 600 !important;        /* was default — thicker for cream */
}
.shipping-timeline__text  { color: var(--deep-brown) !important; opacity: 0.85 !important; }

/* ── 14. Shipping international callout ── */
.shipping-callout {
    background: rgba(212, 81, 126, 0.10) !important;
    border-left-color: var(--color-danger) !important;
}
.shipping-callout__title { color: var(--color-danger) !important; font-weight: 700 !important; }
.shipping-callout__text  { color: var(--deep-brown) !important; opacity: 0.92 !important; }

/* ── 15. Generic legal callouts / notes (defensive) ── */
.legal-callout,
.legal-note {
    background: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(26, 10, 3, 0.12) !important;
    color: var(--deep-brown) !important;
}

/* ── 16. FAQ page (uses .faq-* class names) ── */

/* FAQ Hero — rainbow bg + cream overlay */
.faq-hero {
    background: url('../images/backgrounds/rainbow-bg.png') center / cover no-repeat !important;
    position: relative;
}
.faq-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 248, 238, 0.6);
    pointer-events: none;
    z-index: 0;
}
.faq-hero > * { position: relative; z-index: 1; }

.faq-hero__title    { color: var(--deep-brown) !important; }
.faq-hero__desc     { color: var(--deep-brown) !important; opacity: 0.82 !important; }
.faq-hero__subtitle { color: var(--gold-dark) !important; font-weight: 600 !important; }
.faq-hero__line     { background: var(--gold-dark) !important; }
.faq-hero__diamond  { background: var(--gold-dark) !important; }

/* FAQ Breadcrumb */
.faq-breadcrumb__list {
    color: var(--deep-brown) !important;
    opacity: 0.75 !important;
}
.faq-breadcrumb__list li::after { color: var(--deep-brown) !important; }
.faq-breadcrumb__list a       { color: var(--gold-dark) !important; }
.faq-breadcrumb__list a:hover { color: var(--deep-brown) !important; }
.faq-breadcrumb__list li:last-child { color: var(--deep-brown) !important; opacity: 0.85 !important; }

/* FAQ Tabs (filter pills) */
.faq-tabs__btn {
    color: var(--deep-brown) !important;
    background: transparent !important;
    border-color: rgba(26, 10, 3, 0.15) !important;
    font-weight: 600 !important;
}
.faq-tabs__btn:hover {
    border-color: rgba(26, 10, 3, 0.4) !important;
    background: rgba(255, 255, 255, 0.5) !important;
}
.faq-tabs__btn.is-active {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: var(--gold-dark) !important;
    color: var(--gold-dark) !important;
    font-weight: 700 !important;
}

/* FAQ Category title */
.faq-category__title { color: var(--gold-dark) !important; font-weight: 700 !important; }

/* FAQ Accordion items */
.faq-item {
    border: 1px solid rgba(26, 10, 3, 0.12) !important;
    background: rgba(255, 255, 255, 0.5) !important;
}
.faq-item:hover {
    border-color: rgba(26, 10, 3, 0.25) !important;
    background: rgba(255, 255, 255, 0.65) !important;
}
.faq-item.is-open {
    border-color: var(--gold-dark) !important;
    background: rgba(255, 255, 255, 0.75) !important;
}

/* Astra parent injects `button:hover, button:focus { background-color:
   var(--ast-global-color-1) }` (a deep blue) via inline <style> in
   wp_head — which loads AFTER our legal-rainbow.css. Same specificity
   means Astra wins. Chain the .faq-accordion ancestor so our selector
   has (0, 2, 1) specificity vs Astra's (0, 1, 1), defeating the blue
   on every state. Same for .faq-item-level wrapper. */
.faq-accordion .faq-item__question {
    color: var(--deep-brown) !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}
.faq-accordion .faq-item__question:hover {
    color: var(--gold-dark) !important;
    background: rgba(201, 168, 76, 0.08) !important;
    border-color: transparent !important;
}
.faq-accordion .faq-item__question:focus,
.faq-accordion .faq-item__question:focus-visible {
    color: var(--gold-dark) !important;
    background: rgba(201, 168, 76, 0.08) !important;
    border-color: transparent !important;
    outline: 2px solid rgba(201, 168, 76, 0.55) !important;
    outline-offset: -2px !important;
}
.faq-accordion .faq-item__question:active {
    background: rgba(201, 168, 76, 0.12) !important;
    border-color: transparent !important;
}
.faq-accordion .faq-item.is-open .faq-item__question {
    color: var(--gold-dark) !important;
    font-weight: 700 !important;
    background: rgba(201, 168, 76, 0.06) !important;
    border-color: transparent !important;
}
.faq-item__icon                     { color: var(--gold-dark) !important; opacity: 0.9 !important; }
.faq-item.is-open .faq-item__icon   { color: var(--gold-dark) !important; opacity: 1 !important; }

.faq-item__answer-inner          { color: var(--deep-brown) !important; opacity: 0.9 !important; }
.faq-item__answer-inner a        { color: var(--gold-dark) !important; font-weight: 500 !important; }
.faq-item__answer-inner a:hover  { color: var(--deep-brown) !important; }
.faq-item__answer-inner strong   { color: var(--deep-brown) !important; font-weight: 700 !important; }

/* FAQ "Still have questions?" CTA */
.faq-cta {
    background: rgba(255, 255, 255, 0.5) !important;
    border-top-color: rgba(26, 10, 3, 0.1) !important;
}
.faq-cta__title { color: var(--deep-brown) !important; }
.faq-cta__desc  { color: var(--deep-brown) !important; opacity: 0.85 !important; }
.faq-cta__btn--secondary {
    color: var(--gold-dark) !important;
    border-color: var(--gold-dark) !important;
}
.faq-cta__btn--secondary:hover {
    background: rgba(201, 168, 76, 0.15) !important;
    color: var(--deep-brown) !important;
    border-color: var(--deep-brown) !important;
}

/* ── 17. Accent utility: any remaining gold-text on light ── */
/* (gold on cream has low contrast — bump to gold-dark throughout) */

/* Footer is untouched — it's already dark bg-elevated and self-contained */