/* =======================================================================
 * KOOR Tab Link – odkazová položka na konci nativních Elementor tabů
 *
 * Vykresluje se dovnitř .e-n-tabs-heading a přebírá stejné --n-tabs-*
 * proměnné jako .e-n-tab-title, takže sedí v řadě s ostatními taby
 * a respektuje nastavení ze záložky Style daného widgetu.
 * ======================================================================= */

.e-n-tabs-heading .koor-tab-link {
    --koor-tab-link-underline-color: #FC2901;
    --koor-tab-link-underline-size: 2px;

    position: relative;
    display: flex;
    align-items: var(--n-tabs-title-align-items-toggle, var(--n-tabs-title-align-items, center));
    justify-content: var(--n-tabs-title-justify-content-toggle, var(--n-tabs-title-justify-content, center));
    flex-direction: var(--n-tabs-title-direction, row);
    flex-basis: var(--n-tabs-title-flex-basis, content);
    flex-grow: var(--n-tabs-title-flex-grow, 0);
    flex-shrink: var(--n-tabs-title-flex-shrink);
    gap: var(--n-tabs-icon-gap, 5px);
    height: var(--n-tabs-title-height);

    padding-block-start: var(--n-tabs-title-padding-block-start, var(--n-tabs-default-padding-block, 15px));
    padding-block-end: var(--n-tabs-title-padding-block-end, var(--n-tabs-default-padding-block, 15px));
    padding-inline-start: var(--n-tabs-title-padding-inline-start, var(--n-tabs-default-padding-inline, 35px));
    padding-inline-end: var(--n-tabs-title-padding-inline-end, var(--n-tabs-default-padding-inline, 35px));

    border: 0;
    border-radius: var(--n-tabs-title-border-radius);
    /* Záměrně NE var(--n-tabs-title-background-color): to je Elementorem předvyplněné
     * na #f1f2f3 a weby si ho u tabů běžně přepisují na průhledné vlastním CSS,
     * které na tuhle třídu nedosáhne. Pozadí se nastavuje ovládacím prvkem. */
    background-color: transparent;
    color: var(--n-tabs-title-color, inherit);

    font-family: inherit;
    font-size: var(--n-tabs-title-font-size, 1rem);
    font-weight: 500;
    line-height: 1.2;
    text-align: var(--n-tabs-title-text-align, center);
    text-decoration: none;
    white-space: var(--n-tabs-title-white-space, initial);
    cursor: pointer;

    transition:
        background var(--n-tabs-title-transition, 0.3s),
        color var(--n-tabs-title-transition, 0.3s),
        box-shadow var(--n-tabs-title-transition, 0.3s);
}

/* Ve výchozím stavu je hover jen podtržení – barvu textu záměrně neměníme.
 * --n-tabs-title-color-hover má Elementor předvyplněné na #fff (bílý text na
 * barevném pozadí) a weby si ho u tabů přepisují vlastním CSS, které na tuhle
 * třídu nedosáhne. Barvu textu/pozadí při hoveru řeší ovládací prvky. */
.e-n-tabs-heading .koor-tab-link:hover,
.e-n-tabs-heading .koor-tab-link:focus-visible {
    text-decoration: none;
    box-shadow: inset 0 calc(-1 * var(--koor-tab-link-underline-size)) 0 0 var(--koor-tab-link-underline-color);
}

.e-n-tabs-heading .koor-tab-link:focus-visible {
    outline: 2px solid var(--koor-tab-link-underline-color);
    outline-offset: 2px;
}

.e-n-tabs-heading .koor-tab-link__text {
    display: flex;
    align-items: center;
}

.e-n-tabs-heading .koor-tab-link__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}

.e-n-tabs-heading .koor-tab-link__icon svg {
    width: var(--n-tabs-icon-size, var(--n-tabs-title-font-size, 1rem));
    height: var(--n-tabs-icon-size, var(--n-tabs-title-font-size, 1rem));
    fill: currentColor;
}

.e-n-tabs-heading .koor-tab-link__icon i {
    font-size: var(--n-tabs-icon-size, var(--n-tabs-title-font-size, 1rem));
}

/* ---------- Režim akordeonu (Elementor přepne taby pod breakpointem) ----------
 * .e-n-tabs-heading tam dostane display:contents a položky se řadí přes order.
 * Odkaz má inline --n-tabs-title-order: 999, takže zůstane úplně poslední. */
.elementor-widget-n-tabs.e-n-tabs-mobile .koor-tab-link,
.elementor-widget-n-tabs.e-n-tabs-mobile_extra .koor-tab-link,
.elementor-widget-n-tabs.e-n-tabs-tablet .koor-tab-link,
.elementor-widget-n-tabs.e-n-tabs-tablet_extra .koor-tab-link,
.elementor-widget-n-tabs.e-n-tabs-laptop .koor-tab-link {
    order: var(--n-tabs-title-order);
    width: auto;
}