/*
 * Nav option A: grouped mega panels + open/close phone menu. Added Oct 31, 2026 (local only).
 * Standalone because Grunt isn't installed on this machine; fold into block.scss for the real
 * site (swap the raw values for color("bravo") / $mono-font). Off switch: remove the
 * "tif-nav-group" class from the group menu items and this file stops mattering.
 */

/* ---------- Desktop: grouped panel (Industries, Products) ---------- */
.tif-site-header .tif-site-header__mega-groups {
    display: grid;
    gap: 20px 36px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
}

.tif-site-header .tif-site-header__mega-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Group label: the eyebrow look (orange mono caps) with a soft underline. Not a link. */
.tif-site-header .tif-site-header__mega-group-label {
    align-self: flex-start;
    border-bottom: 1px solid rgba(241, 98, 81, 0.45);   /* bravo at 45% */
    color: var(--tif-accent-text, #c43e2e);              /* text-safe coral (WCAG AA) */
    font-family: "Apercu Mono", ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    line-height: 1.3;
    margin: 4px 0 14px;
    padding: 0 0 4px;
    text-transform: uppercase;
}

.tif-site-header .tif-site-header__mega-group-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tif-site-header .tif-site-header__mega-group-link {
    border: 1px solid transparent;
    border-radius: var(--tif-radius-sm, 14px);
    color: var(--tif-text, #191919);
    display: block;
    margin: 0 -12px 4px;
    padding: 9px 12px;
    text-decoration: none;
    transition: background-color 200ms ease, border-color 200ms ease;
}

.tif-site-header .tif-site-header__mega-group-link:hover {
    background: var(--tif-card-hover, #fbfaf9);
    border-color: var(--tif-border, rgba(60, 60, 60, 0.15));
}

.tif-site-header .tif-site-header__mega-group-link:focus-visible {
    background: var(--tif-card-hover, #fbfaf9);
    outline: 3px solid var(--tif-focus-ring, #c43e2e);
    outline-offset: 0;
}

.tif-site-header .tif-site-header__mega-group-link-title {
    display: block;
    font-size: 18px;
    line-height: 1.25;
}

.tif-site-header .tif-site-header__mega-group-link-body {
    color: var(--tif-text-muted, #3c3c3c);
    display: block;
    font-size: 14px;
    line-height: 1.35;
    margin-top: 3px;
}

/* Keyboard focus for the panel's top-level triggers and the rail CTA. */
.tif-site-header .tif-site-header__nav-item:focus-visible,
.tif-site-header .tif-site-header__mega-cta:focus-visible {
    outline: 3px solid var(--tif-focus-ring, #c43e2e);
    outline-offset: 2px;
}

/* ---------- Phone drawer: sections open and close ---------- */
/* Every section keeps its divider (block.scss drops it on the last of each element type). */
.tif-site-header details.tif-site-header__mobile-section {
    border-bottom: 1px solid var(--tif-border, rgba(60, 60, 60, 0.15));
}

.tif-site-header details.tif-site-header__mobile-section > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    min-height: 32px;
}

.tif-site-header details.tif-site-header__mobile-section > summary::-webkit-details-marker {
    display: none;
}

.tif-site-header details.tif-site-header__mobile-section > summary::after {
    color: var(--tif-text-muted, #3c3c3c);
    content: "+";
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    width: 24px;
    text-align: center;
}

.tif-site-header details.tif-site-header__mobile-section[open] > summary::after {
    content: "\2013";
}

.tif-site-header details.tif-site-header__mobile-section > summary:focus-visible,
.tif-site-header .tif-site-header__mobile-child:focus-visible,
.tif-site-header .tif-site-header__mobile-all:focus-visible {
    border-radius: 6px;
    outline: 3px solid var(--tif-focus-ring, #c43e2e);
    outline-offset: 2px;
}

.tif-site-header .tif-site-header__mobile-section-body {
    padding-top: 8px;
}

.tif-site-header .tif-site-header__mobile-group-label {
    color: var(--tif-accent-text, #c43e2e);   /* text-safe coral (WCAG AA) */
    font-family: "Apercu Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    line-height: 1.3;
    margin: 14px 0 4px;
    text-transform: uppercase;
}

.tif-site-header .tif-site-header__mobile-group-label:first-child {
    margin-top: 4px;
}

.tif-site-header .tif-site-header__mobile-all {
    display: inline-block;
    font-weight: 700;
    margin-top: 10px;
    padding: 5px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tif-site-header .tif-site-header__mobile-all::after {
    content: " \2192";
}

@media (prefers-reduced-motion: reduce) {
    .tif-site-header .tif-site-header__mega-group-link {
        transition: none;
    }
}

/* ---------- Mega intro box: fits its content (Nov 5, 2026, local only) ---------- */
/* The outlined intro box floats at the top at its natural height instead of stretching
   to match the right-hand list; the link sits right under the paragraph. */
.tif-site-header .tif-site-header__mega-grid {
    align-items: start;
}
.tif-site-header .tif-site-header__mega-aside {
    align-self: start;
    height: auto;
}
.tif-site-header .tif-site-header__mega-cta {
    margin-top: 0;
}