/**
 * OUI brand theme for plg_system_oui4all.
 *
 * - Hides the plugin's default toggle (we surface our own a11y trigger in the
 *   template chrome, top-right, just before the menu).
 * - Repaints the entire panel in OUI brand colors:
 *     base       → cream white (#fffaf1) with dark ink (#101014) text
 *     header     → full OUI gradient (warm → mid → deep) with white text
 *     items      → subtle warm tint with brand-mid hover
 *     actives    → solid brand gradient with white iconography
 *     sliders    → brand-mid track + gradient fill
 *     accents    → brand-deep on links and slider/button focus rings
 *
 * Loaded after `oui4all.css` from index.php and landing.php.
 * The plugin is configured with style=light + panel_accent=#dd7049 so this
 * file mostly tightens hover/active states the param API doesn't expose.
 */

/* --- Hide the plugin's built-in toggle entirely --------------------------- */
.oui4all-popup .oui4all__openbtn,
.oui4all-popup .oui4all__openbtn--default,
.oui4all-popup .oui4all__openbtn--custom {
    display: none !important;
}

/* --- Panel base: cream surface, dark ink text ---------------------------- */
.oui4all .oui4all__panel {
    background: #fffaf1 !important;
    color: #101014 !important;
    border: 1px solid rgba(16, 16, 20, .08) !important;
    box-shadow: 0 24px 60px rgba(16, 16, 20, .14) !important;
}

/* --- Header: full OUI gradient (overrides panel_accent's flat mid) ------- */
.oui4all .oui4all__header {
    background: linear-gradient(135deg, #e59550 0%, #dd7049 60%, #d74d43 100%) !important;
    color: #fff !important;
}
.oui4all .oui4all__header .oui4all__title,
.oui4all .oui4all__header .oui4all__title-credit,
.oui4all .oui4all__header .oui4all__credit-link {
    color: #fff !important;
}
.oui4all .oui4all__credit-link:hover,
.oui4all .oui4all__credit-link:focus-visible {
    background: rgba(255, 255, 255, .18) !important;
    color: #fff !important;
}

/* Reset / close icons in the header — light contrast on the gradient */
.oui4all .oui4all__header .oui4all__reset,
.oui4all .oui4all__header .oui4all__close {
    color: #fff !important;
}
.oui4all .oui4all__header .oui4all__reset svg,
.oui4all .oui4all__header .oui4all__close svg {
    fill: #fff !important;
}
.oui4all .oui4all__header .oui4all__reset:hover,
.oui4all .oui4all__header .oui4all__close:hover {
    background: rgba(255, 255, 255, .22) !important;
}

/* --- List items: subtle warm tint --------------------------------------- */
.oui4all .oui4all__item {
    background: rgba(221, 112, 73, .06) !important;
    transition: background-color .2s ease !important;
}
.oui4all .oui4all__item:hover {
    background: rgba(221, 112, 73, .10) !important;
}

/* --- Action buttons inside the list ------------------------------------- */
.oui4all .oui4all__btn {
    color: #101014 !important;
    border: 1px solid transparent !important;
}
.oui4all .oui4all__btn svg {
    fill: #3b3833 !important;
}
.oui4all .oui4all__btn:hover {
    background: rgba(221, 112, 73, .12) !important;
}
.oui4all .oui4all__btn--active,
.oui4all .oui4all__btn--active:hover {
    background: linear-gradient(135deg, #e59550 0%, #dd7049 60%, #d74d43 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.oui4all .oui4all__btn--active svg {
    fill: #fff !important;
}

/* --- Slider arrows (zoom / font / line-height / letter-spacing) --------- */
.oui4all .oui4all__dec,
.oui4all .oui4all__inc {
    color: #101014 !important;
    border-color: rgba(221, 112, 73, .35) !important;
    background: transparent !important;
}
.oui4all .oui4all__dec:hover,
.oui4all .oui4all__inc:hover {
    background: rgba(221, 112, 73, .12) !important;
    border-color: #dd7049 !important;
}
.oui4all .oui4all__dec:active,
.oui4all .oui4all__inc:active {
    background: #dd7049 !important;
    border-color: #dd7049 !important;
    color: #fff !important;
}

/* --- Bar (slider track + fill) ------------------------------------------ */
.oui4all .oui4all__bar {
    background: rgba(221, 112, 73, .18) !important;
}
.oui4all .oui4all__bar::after {
    background: linear-gradient(90deg, #e59550, #dd7049, #d74d43) !important;
}

/* --- Footer + custom links --------------------------------------------- */
.oui4all .oui4all__footer {
    color: #6f6b64 !important;
}
.oui4all .oui4all__footer a {
    color: #d74d43 !important;
}
.oui4all .oui4all__custom-links a {
    color: #d74d43 !important;
}
.oui4all .oui4all__custom-links a:hover {
    background: rgba(221, 112, 73, .12) !important;
    color: #d74d43 !important;
}

/* --- Toolbar tooltips (in case toolbar layout is used somewhere) -------- */
.oui4all .oui4all__tooltip {
    background: #101014 !important;
    color: #fff !important;
}
.oui4all .oui4all__tooltip::after {
    border-top-color: #101014 !important;
}

/* --- Read-mode + screen-reader DOM markers ------------------------------ */
html.oui4all-link [data-oui4all-link],
html.oui4all-screenreader [data-oui4all-speech] {
    outline-color: #dd7049 !important;
}

/* --- Focus rings ------------------------------------------------------- */
.oui4all *:focus-visible {
    outline-color: #dd7049 !important;
}