/* ================================================================
   IvoThemeVariables.css
   IVO, Inc. — Dynamic Page Theme Variables
   Palette: FMC Natatorium (navy #041e42 / red #cb2048)
   Version: 1.4  (audit-cleaned)

   Single source of truth for all --dp-* CSS variables.
   Controls used on DynamicPageBS5.aspx and its controls.

   To retheme: change values here only.
   Core brand tokens (--ivo-*) live in ivoShared.css :root.
   ================================================================ */

:root {
    /* ────────────────────────────────────────────────────────────
       SECTION BAND — BACKGROUNDS & TEXT COLORS
    ──────────────────────────────────────────────────────────── */
    --dp-section-article-bg: #f8f9fb;
    --dp-section-products-bg: #eef0f5;
    --dp-section-events-bg: #0a2b5c;
    --dp-section-quickmenu-bg: #e9edf4;
    --dp-section-gold-bg: #fbe9ee;
    --dp-section-royal-bg: #041e42;
    --dp-section-padding: 60px;
    --dp-section-article-color: #041e42;
    --dp-section-products-color: #041e42;
    --dp-section-events-color: #d0d8e8;
    --dp-section-quickmenu-color: #041e42;
    --dp-section-gold-color: #041e42;
    --dp-section-royal-color: #d0d8e8;
    /* ────────────────────────────────────────────────────────────
       MANAGE BAR
    ──────────────────────────────────────────────────────────── */
    --dp-manage-bar-bg: #041e42;
    --dp-manage-bar-border: #cb2048;
    --dp-manage-bar-btn-bg: #cb2048;
    --dp-manage-bar-btn-color: #ffffff;
    --dp-manage-bar-btn-hover: #e0456a;
    --dp-manage-bar-top: 62px;
    /* ────────────────────────────────────────────────────────────
       ADMIN WARNING BAR
    ──────────────────────────────────────────────────────────── */
    --dp-admin-warn-bg: #fff3cd;
    --dp-admin-warn-color: #856404;
    --dp-admin-warn-border: #ffc107;
    /* ════════════════════════════════════════════════════════════
       EVENTS CONTROL  (uc_UpcomingEventsBS5)
    ════════════════════════════════════════════════════════════ */
    --dp-events-admin-bg: #fbe9ee;
    --dp-events-admin-border: #eeb3c1;
    --dp-events-divider-color: #cb2048;
    --dp-pill-border: #ced4da;
    --dp-pill-color: #212529;
    --dp-pill-active-bg: #0d3d82;
    --dp-pill-active-color: #ffffff;
    --dp-pill-active-border: #0d3d82;
    --dp-pill-dark-border: rgba(255,255,255,0.38);
    --dp-pill-dark-color: rgba(255,255,255,0.82);
    --dp-pill-dark-active-bg: #ffffff;
    --dp-pill-dark-active-color: #0d3d82;
    --dp-pill-dark-active-border: #ffffff;
    --dp-event-card-grad-start: rgba(13,61,130,0.05);
    --dp-event-card-grad-end: #ffffff;
    --dp-event-card-border: #dee2e6;
    --dp-event-card-border-top: #0d3d82;
    --dp-event-card-radius: 12px;
    --dp-event-card-shadow: rgba(13,61,130,0.09);
    --dp-event-date-color: #0d3d82;
    --dp-event-rule-color: #e9ecef;
    --dp-event-title-color: #041e42;
    --dp-event-desc-color: #6c757d;
    --dp-event-footer-border: #e9ecef;
    --dp-event-link-color: #0d3d82;
    --dp-event-closed-bg: #fde8e8;
    --dp-event-closed-color: #a32d2d;
    --dp-events-empty-color: #6c757d;
    --dp-events-empty-border: #dee2e6;
    --dp-events-empty-bg: #ffffff;
    /* ════════════════════════════════════════════════════════════
       PRODUCTS CONTROL  (CatBrowserBS5)
    ════════════════════════════════════════════════════════════ */
    --dp-cb-admin-gradient: linear-gradient(90deg, #6d28d9, #9f1239);
    --dp-cb-btn-hover: #0a2f66;
    /* Card border and frame */
    --dp-cb-card-border: rgba(255,255,255,0.12);
    --dp-cb-card-border-active: var(--ivo-gold);
    /* Image area */
    --dp-cb-card-image-bg: rgba(255,255,255,0.94);
    /* Card footer/body */
    --dp-cb-card-body-bg: rgba(4,30,66,0.72);
    --dp-cb-card-body-color: rgba(255,255,255,0.88);
    --dp-cb-card-name-color: rgba(255,255,255,0.88);
    --dp-cb-card-name-active: var(--ivo-gold);
    /* Badge inside card footer */
    --dp-cb-badge-bg: rgba(255,255,255,0.12);
    --dp-cb-badge-color: rgba(255,255,255,0.6);
    --dp-cb-badge-active-bg: var(--ivo-gold);
    --dp-cb-badge-active-color: #ffffff;
    /* Hover glow on card */
    --dp-cb-card-hover-border: rgba(203,32,72,0.45);
    --dp-cb-card-active-bg: rgba(203,32,72,0.12);
    --dp-cb-card-active-shadow: rgba(203,32,72,0.28);
    /* Pills strip */
    --dp-cb-pills-strip-bg: #0a2b5c;
    --dp-cb-pill-border-default: rgba(255,255,255,0.30);
    --dp-cb-pill-text-default: rgba(255,255,255,0.75);
    --dp-cb-pill-hover-bg: rgba(255,255,255,0.08);
    --dp-cb-pill-hover-border: rgba(255,255,255,0.60);
    --dp-cb-pill-hover-color: rgba(255,255,255,0.95);
    --dp-cb-pill-active-bg: var(--ivo-gold);
    --dp-cb-pill-active-border: var(--ivo-gold);
    --dp-cb-pill-active-color: #ffffff;
    --dp-cb-pill-active-badge-bg: #ffffff;
    --dp-cb-pill-active-badge-clr: var(--ivo-gold);
    /* Product cards (item grid) */
    --dp-cb-card-text: #1e293b;
    --dp-cb-card-shadow-sm: rgba(4,30,66,0.07);
    --dp-cb-card-shadow-lg: rgba(4,30,66,0.14);
    --dp-cb-card-accent-shadow: rgba(4,30,66,0.04);
    /* Add Items bar */
    --dp-cb-add-btn-color: #92400e;
    --dp-cb-add-btn-bg: rgba(245,158,11,0.12);
    --dp-cb-add-btn-border: rgba(245,158,11,0.45);
    --dp-cb-add-btn-hover-bg: rgba(245,158,11,0.25);
    --dp-cb-add-btn-hover-border: rgba(245,158,11,0.70);
    --dp-cb-add-btn-hover-color: #78350f;
    --dp-cb-add-btn-icon: #d97706;
    /* Item category pills */
    --dp-cb-item-cats-border: #e2e8f0;
    --dp-cb-pill-c1-bg: #041e42;
    --dp-cb-pill-c2-bg: #0d3d82;
    --dp-cb-pill-c3-bg: #cb2048;
    --dp-cb-pill-c3-color: #ffffff;
    /* Badges */
    --dp-cb-sold-out-color: #dc3545;
    --dp-cb-slots-avail-color: #198754;
    --dp-cb-btn-soldout-bg: #6c757d;
    /* ════════════════════════════════════════════════════════════
       ARTICLE CONTROL  (DisplayArticlebs5) — PENDING MIGRATION
    ════════════════════════════════════════════════════════════ */
    --dp-article-title-color: #041e42;
    --dp-article-body-color: #33415c;
    --dp-article-link-color: #0d3d82;
    --dp-article-edit-bg: #fbe9ee;
    --dp-article-edit-border: #eeb3c1;
    /* ════════════════════════════════════════════════════════════
       QUICK MENU CONTROL  (uc_QuickMenu)
    ════════════════════════════════════════════════════════════ */
    --dp-qm-empty-color: #6c757d;
    --dp-qm-empty-border: #dee2e6;
    --dp-qm-dark-bg: #031836;
    --dp-qm-list-num-color: #cb2048;
    --dp-qm-accent-color: #e0456a;
    --dp-qm-head-border: rgba(224,69,106,0.25);
    --dp-qm-list-link-color: #c8d8f0;
    --dp-qm-card-title-color: #f0f8ff;
    --dp-qm-card-sub-color: #8fb8d4;
    /* ════════════════════════════════════════════════════════════
       SLIDESHOW CONTROL  (uc_SlideshowBS5) — PENDING MIGRATION
    ════════════════════════════════════════════════════════════ */
    --dp-slide-indicator-color: rgba(255,255,255,0.5);
    --dp-slide-indicator-active: #ffffff;
    --dp-slide-control-color: #ffffff;
    /* ════════════════════════════════════════════════════════════
       SHARED FORM INPUTS  (used by IvoSiteStyle.css)
       Promoted to variables so theme switcher can control them.
    ════════════════════════════════════════════════════════════ */
    --dp-input-bg: #eef1f7;
    --dp-input-border: #d5dcea;
    --dp-input-focus-bg: #ffffff;
    --dp-input-focus-border: var(--ivo-royal);
    --dp-input-focus-shadow: rgba(13,61,130,0.15);
    /* ════════════════════════════════════════════════════════════
       SPLIT CARD  (ItemGridBS5.ascx)
       Promoted to variables — were hardcoded in ivoShared.css
    ════════════════════════════════════════════════════════════ */
    --dp-card-split-border: #dce2ec;
    --dp-card-split-info-sep: #eef0f5;
    --dp-card-split-admin-bg: #f7f8fb;
    --dp-card-remark-color: #dc3545;
    /* ════════════════════════════════════════════════════════════
       SUB-ARTICLE CONTROL  (uc_ArtSubArtBS5)
       Promoted to variables — were hardcoded in IvoControlStyles.css
    ════════════════════════════════════════════════════════════ */
    --dp-subart-heading-border: var(--ivo-gold);
    --dp-subart-heading-color: var(--ivo-navy);
    --dp-subart-card-border: #dee2e6;
    --dp-subart-card-hover-border: var(--ivo-royal);
    --dp-subart-card-hover-shadow: rgba(13,61,130,0.10);
    --dp-subart-title-color: var(--ivo-navy);
    --dp-subart-title-hover: var(--ivo-royal);
    --dp-subart-desc-color: #6c757d;
    --dp-subart-readmore-color: var(--ivo-royal);
    --dp-subart-readmore-hover: var(--ivo-gold);
    /* ════════════════════════════════════════════════════════════
       GALLERY MODE  (CatBrowserBS5 gallery)
       Promoted to variables — were hardcoded in IvoControlStyles.css
    ════════════════════════════════════════════════════════════ */
    --dp-gal-item-bg: var(--ivo-navy);
    --dp-gal-overlay-bg: rgba(4,30,66,0.82);
    --dp-gal-modal-backdrop: rgba(4,30,66,0.82);
    --dp-gal-modal-img-bg: var(--ivo-navy);
    --dp-gal-modal-close-color: #6c757d;
    --dp-gal-modal-close-hover: var(--ivo-navy);
    --dp-gal-modal-title-color: var(--ivo-navy);
    --dp-gal-buybtn-bg: var(--ivo-navy);
    --dp-gal-buybtn-hover-bg: var(--ivo-royal);
    --dp-gal-exhibbtn-border: #dee2e6;
    --dp-gal-exhibbtn-hover: var(--ivo-royal);
    /* ════════════════════════════════════════════════════════════════
       BIOGRAPHY CONTROL  (uc_BiographyBS5)
       Promoted from comment block in IvoControlStyles.css into real
       variables so theme switcher can control them.
    ════════════════════════════════════════════════════════════════ */
    --dp-bio-dark-card-bg: var(--ivo-navy);
    --dp-bio-dark-card-border: rgba(203,32,72,.28);
    --dp-bio-dark-card-hover: rgba(203,32,72,.10);
    --dp-bio-dark-text: var(--dp-section-royal-color);
    --dp-bio-dark-muted: #8a9cb8;
    --dp-bio-dark-shadow: 0 20px 60px rgba(0,0,0,.55);
    --dp-bio-dark-modal-bg: var(--ivo-navy);
    --dp-bio-dark-modal-body: #072650;
    --dp-bio-light-card-bg: #ffffff;
    --dp-bio-light-card-border: rgba(0,0,0,.10);
    --dp-bio-light-card-hover: rgba(13,61,130,.06);
    --dp-bio-light-text: var(--dp-section-article-color);
    --dp-bio-light-muted: #6c757d;
    --dp-bio-light-shadow: 0 8px 30px rgba(0,0,0,.12);
    --dp-bio-light-modal-bg: #ffffff;
    --dp-bio-light-modal-body: var(--dp-section-article-bg);
    /* ════════════════════════════════════════════════════════════════
       ADMIN UI UTILITY COLORS
       Danger / warning tones used by admin-only previews and buttons.
       Not brand colors — semantic only, client themes should not change.
    ════════════════════════════════════════════════════════════════ */
    --dp-ui-danger: #dc2626;
    --dp-ui-danger-bg: #fef2f2;
    --dp-ui-warning: #f59e0b;
    --dp-ui-warning-dark: #92400e;
    --dp-ui-gold-btn-bg: var(--ivo-gold);
    --dp-ui-gold-btn-hover: var(--ivo-gold-light);
    --dp-ui-gold-btn-dark: #a3183a;
    /* ════════════════════════════════════════════════════════════════
       Misc Fixes whilke unifying the control and theme
    ════════════════════════════════════════════════════════════════ */
    --dp-thankyou-border: #198754;
    --dp-thankyou-bg: #d1e7dd;
    --dp-thankyou-color: #0a3622;
    --dp-info-bg: #d1ecf1;
    --dp-info-border: #bee5eb;
    --dp-info-color: #0c5460;
}
/* ═══════════════════════════════════════════════════════════════════
   EMAIL NOTIFICATION COLORS — oll-chicago-local (Our Lady of Lebanon)
   Append this block to /Content/themes/oll-chicago-local/IvoThemeVariables.css
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --email-header-bg: #041e42; /* FMC navy                */
    --email-header-text: #ffffff;
    --email-header-subtext: rgba(255,255,255,0.60);
    --email-accent: #cb2048; /* FMC red                 */
    --email-badge-bg: #cb2048;
    --email-badge-text: #ffffff;
    --email-title-text: #041e42; /* navy headings           */
    --email-label-text: #6c757d;
    --email-value-text: #1c2534; /* dark text               */
    --email-section-label: #cb2048; /* red section caps        */
}
/* ═══════════════════════════════════════════════════════════════════
   SLIDESHOW CONTROL — uc_SlideshowBS5.ascx
   Append this block to the END of every site's IvoThemeVariables.css.
   Values below are the IVO default (navy/gold palette).
   Each site overrides only the vars that differ from this default.
   ═══════════════════════════════════════════════════════════════════ */
:root {
    /* ── Image-slide overlay ─────────────────────────────────────
       Gradient fade from top to bottom over the image.
       Default: subtle top, stronger bottom (matches demo pattern).    */
    --dp-slide-overlay-bg: linear-gradient(to bottom, rgba(0,0,0,.10) 0%, rgba(0,0,0,.52) 100%);
    /* ── Eyebrow label ───────────────────────────────────────────
       Small uppercase label above the title.
       --dp-slide-eyebrow-bar: set to 'block' to show the leading
       decorative line, 'none' to hide it.                             */
    --dp-slide-eyebrow-color: #cb2048;
    --dp-slide-eyebrow-bar: block;
    --dp-slide-eyebrow-font: var(--ivo-font-body);
    --dp-slide-eyebrow-size: .68rem;
    --dp-slide-eyebrow-tracking: 3px;
    /* ── Title ───────────────────────────────────────────────────  */
    --dp-slide-title-color: rgba(255,255,255,.94);
    --dp-slide-title-font: var(--ivo-font-serif);
    --dp-slide-title-weight: 700;
    /* ── Description ─────────────────────────────────────────────  */
    --dp-slide-desc-color: rgba(255,255,255,.72);
    --dp-slide-desc-font: var(--ivo-font-body);
    /* ── CTA button ──────────────────────────────────────────────
       .ivo-ss-btn  AND  .ivo-btn-gold (backward-compat alias)
       both read these vars.                                           */
    --dp-slide-btn-bg: #cb2048;
    --dp-slide-btn-color: #ffffff;
    --dp-slide-btn-hover-bg: #a3183a;
    --dp-slide-btn-hover-color: #ffffff;
    --dp-slide-btn-radius: 6px;
    /* ── Dash-bar indicators ─────────────────────────────────────
       Replaces Bootstrap circle dots.
       Active bar is wider than inactive.                              */
    --dp-slide-indicator-color: rgba(255,255,255,.35);
    --dp-slide-indicator-active: #cb2048;
    --dp-slide-indicator-w: 28px;
    --dp-slide-indicator-w-act: 42px;
    --dp-slide-indicator-h: 2px;
    --dp-slide-indicator-radius: 0px;
    /* ── Decorative dot texture on gradient-only slides ──────────  */
    --dp-slide-dots-color: rgba(255,255,255,.12);
    /* ── Fallback gradients (no image set) ───────────────────────
       Three variants cycled by slide index (0, 1, 2, 0, 1, 2 ...).
       Default: IVO navy/royal blue palette.                           */
    --dp-slide-fallback-grad-0: linear-gradient(140deg, #020f22 0%, #041e42 40%, #0d3d82 75%, #1a5199 100%);
    --dp-slide-fallback-grad-1: linear-gradient(140deg, #020f22 0%, #041e42 45%, #6b1430 80%, #cb2048 100%);
    --dp-slide-fallback-grad-2: linear-gradient(140deg, #041e42 0%, #0a2b5c 45%, #0d3d82 80%, #2f6cb5 100%);
}
/* ── END SLIDESHOW CONTROL VARIABLES ──────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   STATISTICS STRIP CONTROL — uc_StatsBS5.ascx
   Append this block to the END of every site's IvoThemeVariables.css.
   Values below are the OLL override (burgundy/gold/cream palette),
   matching the existing EVENTS / QUICK MENU / SUB-ARTICLE bands above.
   IVO default → OLL override
     num-color (light band):    #0d3d82 royal blue → #6b1a2a burgundy
     label-color:                #6c757d gray       → #7a6050 warm brown
     title-color (light band):  #041e42 navy        → #2c1a12 dark warm
     dark-num-color:             #cb2048 gold        → #e8c06a antique gold
     dark-label:                 #d0d8e8 pale blue   → rgba(232,192,106,.82) muted gold
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --dp-stat-num-color: #cb2048;
    --dp-stat-label-color: #687691;
    --dp-stat-divider-color: rgba(4,30,66,.15);
    --dp-stat-title-color: #041e42;
    --dp-stat-dark-num-color: #ffffff;
    --dp-stat-dark-label: rgba(255,255,255,.75);
    --dp-stat-dark-divider: rgba(203,32,72,.45);
    --dp-stat-dark-title: #ffffff;
}
/* ── END STATISTICS STRIP CONTROL VARIABLES ───────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   SHARED ADMIN PANEL TOOLKIT — settings-drawer tokens
   Append this block to the END of every site's IvoThemeVariables.css.
   Consumed by the CSS classes in IvoControlStyles.css (.ivo-layout-panel,
   .ivo-switch, .ivo-admin-toolbar, .ivo-config-preview) — those class
   rules live only in IvoControlStyles.css, never in this file.

   Reuses the site's established "admin surface" look already applied
   to --dp-events-admin-* and --dp-article-edit-* above (warm cream +
   gold-tinted border) rather than a generic gray panel.
   IVO default → OLL override
     panel-bg:     #f4f6fa cool gray → #fff8e6 warm cream
     panel-border: rgba(0,0,0,.10)   → rgba(201,151,58,.35) gold-tinted
     panel-text:   #1c2534 slate     → #2c1a12 dark warm
     panel-muted:  #6c757d gray      → #7a6050 warm brown
     switch-on:    #0d3d82 royal     → #6b1a2a burgundy
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --dp-admin-panel-bg: #f4f6fa;
    --dp-admin-panel-border: rgba(4,30,66,.14);
    --dp-admin-panel-text: #041e42;
    --dp-admin-panel-muted: #687691;
    --dp-admin-switch-track-off: #c9d1de;
    --dp-admin-switch-track-on: #cb2048;
    --dp-admin-switch-thumb: #ffffff;
}
/* ── END SHARED ADMIN PANEL TOOLKIT VARIABLES ─────────────────────── */