/*
 * LTS strip styling for the FreeBSD mega-menu panel (.klara-lts-strip /
 * .klara-badge-new). Scoped entirely under .main-header; touches nothing
 * else in the existing menu CSS.
 *
 * Alignment values below are DERIVED FROM SOURCE (src/scss/component/_main-header.scss),
 * not measured live in DevTools — no browser was available in the session that
 * wrote this file. Please verify against the live rendered panel and adjust if needed:
 *
 *   - .col-nav .mega-menu--nav has `padding: 25px`, and each column's icon
 *     ends up flush with that 25px inset (li has `padding-left: 37px`, the
 *     icon has `margin-left: -37px`, canceling out) — so the strip's icon
 *     uses the same 25px left inset to land on the same vertical axis.
 *   - Heading TEXT starts at 25px (mega-menu--nav padding) + 37px (li
 *     padding-left) = 62px. The strip's icon (32px wide, matching the
 *     column icons' `max-width: 32px`) + a 5px margin-right (matching the
 *     column icons' own `margin-right: 5px`) lands strip text at the same
 *     25 + 32 + 5 = 62px axis.
 *   - Right inset (40px) mirrors the blue promo column's own
 *     `.col-text .text-wrap { padding: 30px 40px; }` right inset.
 *   - The strip is nested INSIDE .container (sibling of .row), not outside
 *     it, specifically so it inherits the exact same horizontal coordinate
 *     system as the existing columns rather than needing to re-derive
 *     Bootstrap's container/row gutter math from scratch.
 *   - .row cancels .container's own left/right padding via `margin: 0 -15px`
 *     so it (and .col-nav, with its own padding zeroed) sit flush with
 *     .container's outer edge. The strip needs that same `-15px` margin —
 *     without it, .container's padding (and its blue background-color)
 *     shows through as bars on either side of the strip.
 */

.main-header .klara-lts-strip {
    display: flex;
    align-items: center;
    background-color: #1b1f24;
    border-top: 1px solid #31353b;
    padding: 14px 40px 14px 25px;
}

@media(min-width: 992px) {
    .main-header .klara-lts-strip {
        margin-left: -15px;
        margin-right: -15px;
    }
}

.main-header .klara-lts-strip__icon {
    width: 32px;
    max-width: 32px;
    margin-right: 5px;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 4px;
}

.main-header .klara-lts-strip__body {
    display: flex;
    flex-direction: column;
}

.main-header .klara-lts-strip__title {
    color: #fff;
    font-size: 22px;
}

.main-header .klara-lts-strip__desc {
    color: #8b93a1;
    font-size: 15px;
    line-height: 1.4;
    font-family: 'Niveau Grotesk';
}

.main-header .klara-badge-new {
    display: inline-block;
    background-color: #128aff;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    border-radius: 10px;
    padding: 3px 7px;
    margin-left: 6px;
    vertical-align: middle;
}

.main-header .klara-lts-strip__cta {
    background-color: #128aff;
    color: #fff;
    border-radius: 4px;
    padding: 8px 14px;
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.main-header .klara-lts-strip__cta:hover {
    color: #fff;
    opacity: 0.9;
}

/* CSS multi-column layout breaks content across the column
 * boundary at any point by default, including mid-way
 * through a group -- splitting a heading (e.g. "Advisory
 * and Design") from its own list, or from the rest of its
 * own text, into the next column. break-inside:avoid keeps
 * each .mega-menu--nav group (heading + its list) intact in
 * a single column. FreeBSD no longer uses this layout
 * (overridden to display:grid in _nav-lts.scss), so this is
 * a no-op there; ZFS still does.
 */
.mega-menu--nav {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}