/*
 * Agi Library — per-type icon defaults.
 *
 * These are baseline rules. Override the numbers per type in Elementor
 * via the widget's Advanced → Custom CSS tab (see the copy-paste block
 * in the plugin's README or design doc).
 *
 * The `selector` token in Elementor Custom CSS scopes rules to the
 * widget's wrapper, so you can safely use the same selectors across
 * multiple widgets without collisions.
 */

/* Shared baseline — applies to every icon regardless of type */
.agiw-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Size-variant baselines — hover (overlay) vs inline (beside label) */
.agiw-icon--hover  { font-size: 16px; padding: 0; }
.agiw-icon--inline { font-size: 0.85em; padding: 0; margin-inline-end: 4px; }

/* Per-type baselines — edit numbers in Elementor Custom CSS, not here */
.agiw-icon--type-video      { /* baseline */ }
.agiw-icon--type-course     { /* baseline */ }
.agiw-icon--type-pdf        { /* baseline */ }
.agiw-icon--type-live       { /* baseline */ }
.agiw-icon--type-replay     { /* baseline */ }
.agiw-icon--type-yoga_pack  { /* baseline */ }
.agiw-icon--type-free_video { /* baseline */ }

/* ---------------------------------------------------------------------
 * Type pill — icon + tag as one hoverable button
 *
 * The icon widget and (optional) tag widget sit side-by-side inside an
 * Elementor Container with the class `agiw-type-pill`. On hover of any
 * part of the container, both halves pick up the hover color so they
 * read as a single button. When the tag's Display Conditions hide it,
 * the pill collapses to just the round icon — the icon's own radius
 * stays intact because the joined-border rules below are gated by
 * `:has()` on the tag presence.
 *
 * Hover colors are fixed brand values matching the per-type widget
 * Custom CSS (see design doc). If Agi's palette changes, update here
 * and in the per-widget Custom CSS in lockstep.
 * ------------------------------------------------------------------ */
.agiw-type-pill {
    cursor: pointer;
}

/* Hover: wrapper owns the background; both children get theme white
 * text color. Siblings' background stays transparent so the pill reads
 * as a single shape, not two stacked blobs.
 *
 * `!important` on the color declarations because Elementor's per-widget
 * CSS (heading colors, per-type icon colors) resolves to the same
 * specificity as this rule but is enqueued later, so without the flag
 * it would win on source order and the hover state wouldn't paint. */
.agiw-type-pill:hover {
    background-color: var(--e-global-color-0c9eb0c);
}

.agiw-type-pill:hover .agiw-icon,
.agiw-type-pill:hover .elementor-heading-title,
.agiw-type-pill:hover .elementor-heading-title a {
    color: var(--e-global-color-df4a4ec) !important;
}

/* ---------------------------------------------------------------------
 * Per-field text direction
 *
 * Hebrew content (title, description) must read RTL, but English UI
 * (CTA button text, type labels) on the SAME card must stay LTR.
 * Card-level `direction: rtl` flips everything — wrong for mixed-
 * language cards. Instead, every text element inside a library card
 * uses `unicode-bidi: plaintext`, which makes the browser detect the
 * base direction of each element from its own content.
 *
 * Applied to the Elementor loop-item wrapper so it covers every card
 * rendered inside any Loop Grid on the library page. The selector
 * targets the inner text nodes specifically — heading content, button
 * label spans, paragraph text — without touching layout containers.
 *
 * If you still want a per-card class for layout-level decisions
 * (e.g. flipping icon placement), the `library_item_lang_class` tag
 * keeps emitting `agiw-lang-he` / `agiw-lang-en`; pair it with logical
 * properties (margin-inline-start, padding-inline-end, text-align: start)
 * rather than hardcoded `left`/`right` rules.
 * ------------------------------------------------------------------ */
.e-loop-item .elementor-heading-title,
.e-loop-item .elementor-button-text,
.e-loop-item .elementor-widget-text-editor,
.e-loop-item .elementor-widget-text-editor p,
.e-loop-item .elementor-icon-box-title,
.e-loop-item .elementor-icon-box-description {
    unicode-bidi: plaintext;
    text-align: start;
}

/* ---------------------------------------------------------------------
 * Sidebar filter-button active state
 *
 * Bind the dynamic tag "Library Lang <X> Active Class" to the button's
 * Advanced → CSS Classes field. The tag emits `is-active` when that
 * filter is the one currently applied.
 *
 * Set the button's hover background/text colors in Elementor to
 * Global Colors from Site Settings; the rule below references the
 * same two variables so the selected state always tracks hover.
 * If the site's palette IDs differ, swap the two var IDs here.
 * ------------------------------------------------------------------ */
.agiw-lang-active .elementor-button {
    background-color: var(--e-global-color-98d84bc) !important;
}