/* =============================================================================
 * SGEN — Navigation icon + subtext enhancements (desktop)
 *
 * Styles the per-item icon (.sg-nav-item-icon) and subtext (.sg-nav-item-sub)
 * that the Menus admin lets tenants set via the sgIconSelect picker + subtext
 * input. Both fields are optional — when a menu item has no icon or no
 * subtext, the corresponding .sg-nav-item-icon / .sg-nav-item-sub element
 * isn't emitted at all (see FrontModel::get_navigation_html /
 * get_navigation_list_html), and the <li> only gets `.has-icon` / `.has-subtext`
 * classes when the respective field is set.
 *
 * Companion to:
 *   - assets/front/css/sgen-mobile-menu.css (mobile drawer surface)
 *   - assets/admin/js/sg-icon-select.js     (admin picker)
 *
 * Tenant tokens consumed: --color-primary, --color-primary-rgb,
 * --color-text, --body-font-family. All have inline fallbacks.
 * ============================================================================= */

/* The inner wrapper holds the label + subtext stacked vertically (only matters
 * when subtext is present; with just a label it collapses to a single line). */
.sg-nav-item .sg-nav-item-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    text-align: left;
}
.sg-nav-item .sg-nav-item-label {
    display: inline-block;
}
.sg-nav-item .sg-nav-item-sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.3;
    color: rgba(0, 0, 0, 0.55);
    opacity: 0.92;
}
/* Inside dark contexts (e.g. dark header), soften the subtext against the
 * inherited link colour. currentColor at 60% reads correctly on both light
 * and dark backgrounds. */
.sg-nav-item .sg-nav-item-sub {
    color: currentColor;
    opacity: 0.6;
}

/* Icon: small inline-flex wrapper before the text. The actual icon glyph
 * inherits its colour from the link via currentColor + adapts on hover/active
 * the same way the link colour does. */
.sg-nav-item .sg-nav-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 8px;
    color: var(--color-primary, #d51522);
    transition: color 0.18s ease, transform 0.18s ease;
}
.sg-nav-item .sg-nav-item-icon svg,
.sg-nav-item .sg-nav-item-icon i {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* FontAwesome icons inherit colour but use fill, not stroke. */
.sg-nav-item .sg-nav-item-icon i.fa,
.sg-nav-item .sg-nav-item-icon i.fas,
.sg-nav-item .sg-nav-item-icon i.far,
.sg-nav-item .sg-nav-item-icon i.fab,
.sg-nav-item .sg-nav-item-icon i.fal,
.sg-nav-item .sg-nav-item-icon i.fad,
.sg-nav-item .sg-nav-item-icon i.fat {
    font-size: 16px;
    line-height: 1;
    width: auto;
    height: auto;
}
.sg-nav-item:hover .sg-nav-item-icon,
.sg-nav-item.active .sg-nav-item-icon {
    color: var(--color-primary_hover, #e61938);
    transform: scale(1.08);
}

/* When the link contains the icon+text inline, ensure proper vertical alignment.
 * The Bootstrap-style nav links use flex implicitly via .sg-nav-link / .sg-nav-link-item;
 * we don't override their flex direction — just align our inline wrapper. */
.sg-nav-item .sg-nav-item-link,
.sg-nav-item .sg-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0;   /* gap between icon and text is controlled by .sg-nav-item-icon margin */
}

/* In dropdown / mega-menu contexts where items typically stack vertically,
 * the subtext is more useful and the icon container can be a bit larger. */
.sg-dropdown-menu .sg-nav-item .sg-nav-item-icon,
.nav-submenu .sg-nav-item .sg-nav-item-icon,
.nav-item-mega-menu .sg-nav-item .sg-nav-item-icon {
    margin-right: 10px;
}
.sg-dropdown-menu .sg-nav-item .sg-nav-item-icon svg,
.sg-dropdown-menu .sg-nav-item .sg-nav-item-icon i,
.nav-submenu .sg-nav-item .sg-nav-item-icon svg,
.nav-submenu .sg-nav-item .sg-nav-item-icon i,
.nav-item-mega-menu .sg-nav-item .sg-nav-item-icon svg,
.nav-item-mega-menu .sg-nav-item .sg-nav-item-icon i {
    width: 20px;
    height: 20px;
}
.sg-dropdown-menu .sg-nav-item .sg-nav-item-sub,
.nav-submenu .sg-nav-item .sg-nav-item-sub,
.nav-item-mega-menu .sg-nav-item .sg-nav-item-sub {
    font-size: 13px;
    margin-top: 3px;
}

/* In a top-level horizontal nav, force the text wrapper to single-line so a
 * subtext doesn't stretch the navbar vertically. The subtext still renders
 * but on a tighter line-height. Override by adding `.sg-nav-has-subtext` if
 * a tenant wants the subtext visible in the top bar. */
.sg-navbar > .sg-nav.sg-navbar-nav > .sg-nav-item.has-subtext .sg-nav-item-text {
    flex-direction: column;
    line-height: 1.15;
}