/*
 * IvoSectionThemes.css
 * ──────────────────────────────────────────────────────────────────────
 * Semantic section theme classes for IVO platform pages.
 * Each class defines a COMPLETE theme token set:
 *   background, text, headings, muted text, links, card bg, border.
 * User controls (CatMenuBS5, CatBrowserBS5, etc.) should reference
 *   var(--ivo-s-*) tokens instead of hardcoded colors so contrast
 *   is guaranteed for any theme choice.
 *
 * Load order in master page:
 *   IvoThemeVariables.css → IvoControlStyles.css → IvoSectionThemes.css
 *
 * Class naming convention:
 *   ivo-section-light-1   Light 1  (White)
 *   ivo-section-light-2   Light 2  (Off-White / subtle grey)
 *   ivo-section-dark-1    Dark 1   (Navy)
 *   ivo-section-dark-2    Dark 2   (Royal Blue)
 *   ivo-section-accent-1  Accent 1 (Gold)
 *   ivo-section-accent-2  Accent 2 (Soft teal / future use)
 *   ivo-section-flush     Full-bleed / no padding wrapper (slideshow etc.)
 *
 * Backward-compat aliases (kept during migration — remove after all
 * Category.params JSON rows have been migrated to new names):
 *   ivo-section-white      → same as ivo-section-light-1
 *   ivo-section-offwhite   → same as ivo-section-light-2
 *   ivo-section-navy       → same as ivo-section-dark-1
 *   ivo-section-royal      → same as ivo-section-dark-2
 *   ivo-section-gold       → same as ivo-section-accent-1
 *   ivo-section-full       → same as ivo-section-flush
 * ──────────────────────────────────────────────────────────────────────
 */

/* ── Shared section baseline ──────────────────────────────────────── */
[class*="ivo-section-"] {
    /* Inherit from theme token; user controls read these vars */
    color: var(--ivo-s-text, var(--ivo-text-dark));
    background: var(--ivo-s-bg, var(--ivo-white));
}

/* ── Light 1 — White ──────────────────────────────────────────────── */
.ivo-section-light-1,
.ivo-section-white {
    --ivo-s-bg: var(--ivo-white);
    --ivo-s-text: var(--ivo-text-dark);
    --ivo-s-heading: var(--ivo-navy);
    --ivo-s-muted: var(--ivo-text-muted);
    --ivo-s-link: var(--ivo-royal);
    --ivo-s-link-hover: var(--ivo-navy);
    --ivo-s-card-bg: var(--ivo-off-white);
    --ivo-s-card-border: var(--ivo-border);
    --ivo-s-badge-bg: var(--ivo-royal);
    --ivo-s-badge-text: #fff;
    --ivo-s-divider: var(--ivo-border);
    --ivo-s-icon: var(--ivo-royal);
    --ivo-s-input-bg: var(--ivo-white);
    --ivo-s-is-dark: 0; /* 0 = light theme */

    background: var(--ivo-s-bg);
    color: var(--ivo-s-text);
    padding: 3rem 0;
}

/* ── Light 2 — Off-White ──────────────────────────────────────────── */
.ivo-section-light-2,
.ivo-section-offwhite {
    --ivo-s-bg: var(--ivo-off-white);
    --ivo-s-text: var(--ivo-text-dark);
    --ivo-s-heading: var(--ivo-navy);
    --ivo-s-muted: var(--ivo-text-muted);
    --ivo-s-link: var(--ivo-royal);
    --ivo-s-link-hover: var(--ivo-navy);
    --ivo-s-card-bg: var(--ivo-white);
    --ivo-s-card-border: var(--ivo-border);
    --ivo-s-badge-bg: var(--ivo-royal);
    --ivo-s-badge-text: #fff;
    --ivo-s-divider: #d8dde6;
    --ivo-s-icon: var(--ivo-royal);
    --ivo-s-input-bg: var(--ivo-white);
    --ivo-s-is-dark: 0;
    background: var(--ivo-s-bg);
    color: var(--ivo-s-text);
    padding: 3rem 0;
}

/* ── Dark 1 — Navy ────────────────────────────────────────────────── */
.ivo-section-dark-1,
.ivo-section-navy {
    --ivo-s-bg: var(--ivo-navy);
    --ivo-s-text: rgba(255, 255, 255, 0.92);
    --ivo-s-heading: #ffffff;
    --ivo-s-muted: rgba(255, 255, 255, 0.60);
    --ivo-s-link: var(--ivo-gold, #f0b429);
    --ivo-s-link-hover: #fff;
    --ivo-s-card-bg: rgba(255, 255, 255, 0.07);
    --ivo-s-card-border: rgba(255, 255, 255, 0.14);
    --ivo-s-badge-bg: var(--ivo-gold, #f0b429);
    --ivo-s-badge-text: var(--ivo-navy);
    --ivo-s-divider: rgba(255, 255, 255, 0.15);
    --ivo-s-icon: var(--ivo-gold, #f0b429);
    --ivo-s-input-bg: rgba(255, 255, 255, 0.10);
    --ivo-s-is-dark: 1; /* 1 = dark theme */

    background: var(--ivo-s-bg);
    color: var(--ivo-s-text);
    padding: 3rem 0;
}

/* ── Dark 2 — Royal Blue ──────────────────────────────────────────── */
.ivo-section-dark-2,
.ivo-section-royal {
    --ivo-s-bg: var(--ivo-royal);
    --ivo-s-text: rgba(255, 255, 255, 0.92);
    --ivo-s-heading: #ffffff;
    --ivo-s-muted: rgba(255, 255, 255, 0.60);
    --ivo-s-link: var(--ivo-gold, #f0b429);
    --ivo-s-link-hover: #fff;
    --ivo-s-card-bg: rgba(255, 255, 255, 0.10);
    --ivo-s-card-border: rgba(255, 255, 255, 0.18);
    --ivo-s-badge-bg: #fff;
    --ivo-s-badge-text: var(--ivo-royal);
    --ivo-s-divider: rgba(255, 255, 255, 0.18);
    --ivo-s-icon: rgba(255, 255, 255, 0.80);
    --ivo-s-input-bg: rgba(255, 255, 255, 0.12);
    --ivo-s-is-dark: 1;
    background: var(--ivo-s-bg);
    color: var(--ivo-s-text);
    padding: 3rem 0;
}

/* ── Accent 1 — Gold ──────────────────────────────────────────────── */
.ivo-section-accent-1,
.ivo-section-gold {
    --ivo-s-bg: var(--ivo-gold, #f0b429);
    --ivo-s-text: var(--ivo-navy);
    --ivo-s-heading: var(--ivo-navy);
    --ivo-s-muted: rgba(10, 25, 60, 0.65);
    --ivo-s-link: var(--ivo-navy);
    --ivo-s-link-hover: #000;
    --ivo-s-card-bg: rgba(255, 255, 255, 0.40);
    --ivo-s-card-border: rgba(10, 25, 60, 0.14);
    --ivo-s-badge-bg: var(--ivo-navy);
    --ivo-s-badge-text: #fff;
    --ivo-s-divider: rgba(10, 25, 60, 0.15);
    --ivo-s-icon: var(--ivo-navy);
    --ivo-s-input-bg: rgba(255, 255, 255, 0.50);
    --ivo-s-is-dark: 0;
    background: var(--ivo-s-bg);
    color: var(--ivo-s-text);
    padding: 3rem 0;
}

/* ── Flush — full-bleed, no padding (Slideshow, hero images) ──────── */
.ivo-section-flush,
.ivo-section-full {
    --ivo-s-bg: transparent;
    --ivo-s-text: var(--ivo-text-dark);
    --ivo-s-heading: var(--ivo-navy);
    --ivo-s-muted: var(--ivo-text-muted);
    --ivo-s-link: var(--ivo-royal);
    --ivo-s-link-hover: var(--ivo-navy);
    --ivo-s-card-bg: var(--ivo-white);
    --ivo-s-card-border: var(--ivo-border);
    --ivo-s-badge-bg: var(--ivo-royal);
    --ivo-s-badge-text: #fff;
    --ivo-s-divider: var(--ivo-border);
    --ivo-s-icon: var(--ivo-royal);
    --ivo-s-input-bg: var(--ivo-white);
    --ivo-s-is-dark: 0;
    background: var(--ivo-s-bg);
    color: var(--ivo-s-text);
    padding: 0; /* flush — no padding */
    margin: 0;
}

/* ── Editor content inside dark/accent sections ───────────────────
   Overrides is-section / is-box hardcoded colors so page-builder
   content respects the section theme automatically.
   ------------------------------------------------------------------ */

.ivo-section-dark-1 .is-section,
.ivo-section-dark-1 .is-container,
.ivo-section-dark-2 .is-section,
.ivo-section-dark-2 .is-container,
.ivo-section-accent-1 .is-section,
.ivo-section-accent-1 .is-container {
    color: var(--ivo-s-text) !important;
    background: transparent !important;
}

    .ivo-section-dark-1 .is-section h1, .ivo-section-dark-1 .is-section h2,
    .ivo-section-dark-1 .is-section h3, .ivo-section-dark-1 .is-section h4,
    .ivo-section-dark-2 .is-section h1, .ivo-section-dark-2 .is-section h2,
    .ivo-section-dark-2 .is-section h3, .ivo-section-dark-2 .is-section h4,
    .ivo-section-accent-1 .is-section h1, .ivo-section-accent-1 .is-section h2,
    .ivo-section-accent-1 .is-section h3, .ivo-section-accent-1 .is-section h4 {
        color: var(--ivo-s-heading) !important;
    }

    .ivo-section-dark-1 .is-section p,
    .ivo-section-dark-2 .is-section p,
    .ivo-section-accent-1 .is-section p {
        color: var(--ivo-s-text) !important;
    }

    .ivo-section-dark-1 .is-section a,
    .ivo-section-dark-2 .is-section a,
    .ivo-section-accent-1 .is-section a {
        color: var(--ivo-s-link) !important;
    }

        .ivo-section-dark-1 .is-section a:hover,
        .ivo-section-dark-2 .is-section a:hover,
        .ivo-section-accent-1 .is-section a:hover {
            color: var(--ivo-s-link-hover) !important;
        }

/* is-box often sets its own background — clear it */
.ivo-section-dark-1 .is-box,
.ivo-section-dark-2 .is-box,
.ivo-section-accent-1 .is-box {
    background: transparent !important;
    box-shadow: none !important;
}

/*
 * ── Usage in user controls ─────────────────────────────────────────
 * Any control rendered inside an ivo-section-* wrapper should use
 * these local tokens instead of hardcoded palette vars:
 *
 *   .my-control h2        { color: var(--ivo-s-heading); }
 *   .my-control p         { color: var(--ivo-s-text); }
 *   .my-control .text-muted { color: var(--ivo-s-muted) !important; }
 *   .my-control a         { color: var(--ivo-s-link); }
 *   .my-control .card     { background: var(--ivo-s-card-bg);
 *                           border-color: var(--ivo-s-card-border); }
 *   .my-control .badge    { background: var(--ivo-s-badge-bg);
 *                           color: var(--ivo-s-badge-text); }
 *   hr                    { border-color: var(--ivo-s-divider); }
 */