/* ══════════════════════════════════════════════════════════════════════════
   MEGA PANEL — one shape for every dropdown
   Each section's dropdown becomes the same object: two link columns on the
   left, a detail pane on the right that follows the pointer, and that
   section's CTA card pinned beneath it. Previously each dropdown was its own
   3×span4 flex row, so the panel re-flowed as you moved across the bar.

   Nothing is rebuilt. TB Mega Menu still renders the markup and every link
   stays server-side; megapanel.js only tags the columns and inserts the
   detail pane, and this file re-places them on a grid. The captions are not
   removed either — they are visually hidden and read out of the DOM into the
   detail pane, so crawlers and screen readers still get them.

   Desktop only. Below 1025px TB Mega Menu switches to its accordion and this
   whole file is inert.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  /* ── The panel ─────────────────────────────────────────────────────────
     Site CSS emitted in the page body pins this at width:900px !important
     with (0,2,0) specificity, so these carry #header to win at (1,2,1). */
  html #header .tbm-item.level-1 > .tbm-submenu,
  html #header .tbm-item--has-dropdown > .tbm-submenu {
    width: min(1240px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    max-width: none !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #fff !important;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 26px 44px -22px rgba(9, 32, 58, .30);
    border-top: 1px solid #e8f0f7;
  }

  /* Each column carries a ::before label from the site's page-level CSS
     ("Build Your IT", "Free Assessment"). Alongside .tbm-mega-col-head that
     is the same heading twice — visible in the first build as BUILD YOUR IT
     sitting directly above BUILD YOUR FOUNDATION. The head wins: it has a
     description with it and it is a link. */
  html #header .tbm-submenu .tbm-column-inner::before { display: none !important; }

  html #header .tbm-item.level-1 > .tbm-submenu > .tbm-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.06fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: 14px 30px;
    padding: 26px 26px 28px !important;
    margin: 0 !important;
  }

  /* .span4 hard-codes 33% widths for the old flex row. */
  html #header .tbm-item.level-1 > .tbm-submenu .tbm-column {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
  }

  /* Explicit placement. The classes come from megapanel.js, which tags a
     column as rail or CTA by whether it carries a .tbm-mega-col-head —
     semantic rather than counting children, so a fourth column or a
     re-ordered menu does not silently land in the wrong cell. */
  html #header .mp-rail-1 { grid-column: 1; grid-row: 1 / span 2; }
  html #header .mp-rail-2 { grid-column: 2; grid-row: 1 / span 2; }
  html #header .mp-detail { grid-column: 3; grid-row: 1; }
  html #header .mp-cta    { grid-column: 3; grid-row: 2; }

  /* ── Column heads ──────────────────────────────────────────────────────
     Set as the mono eyebrow the heroes now use, and the emoji dropped: it is
     the same glyph set that renders inconsistently on /services, and at this
     size it was carrying no information the title did not. */
  html #header .tbm-submenu .tbm-mega-col-icon { display: none !important; }

  html #header .tbm-submenu .tbm-mega-col-head {
    padding: 0 0 2px !important;
    margin: 0 0 12px !important;
    border-bottom: 0 !important;
    display: block !important;
  }

  html #header .tbm-submenu .tbm-mega-col-title {
    font-family: 'SF Mono', Consolas, Menlo, monospace !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: #005598 !important;
    display: flex !important;
    align-items: center;
    gap: 7px;
    margin: 0 0 4px !important;
  }
  html #header .tbm-submenu .tbm-mega-col-title::before {
    content: "";
    width: 5px; height: 5px; border-radius: 50%;
    background: #007ACD;
    box-shadow: 0 0 0 3px rgba(0, 122, 205, .16);
    flex: 0 0 auto;
  }

  /* Reserved for two lines. One description wraps and the other does not,
     which started the two link lists at different heights. */
  html #header .tbm-submenu .tbm-mega-col-sub {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: #5b6f81 !important;
    min-height: 38px;
    margin: 0 !important;
  }

  /* ── Links ─────────────────────────────────────────────────────────────
     The caption moves to the detail pane, so it is clipped rather than
     removed: it stays in the markup for crawlers and in the link's
     accessible name for screen readers, exactly as it is today. */
  html #header .tbm-submenu .tbm-caption {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Rail columns only. Scoped to .tbm-submenu this also hit the CTA column's
     button, painting #161c26 text onto a navy card — the link disappeared. */
  html #header .mp-rail-1 .tbm-link.level-2,
  html #header .mp-rail-2 .tbm-link.level-2 {
    display: block !important;
    position: relative;
    padding: 9px 30px 9px 12px !important;
    margin: 0 -12px !important;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #161c26 !important;
    background: none !important;
    transition: background .16s ease, color .16s ease;
  }

  html #header .mp-rail-1 .tbm-link.level-2::after,
  html #header .mp-rail-2 .tbm-link.level-2::after {
    content: "\2192";
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%) translateX(-4px);
    opacity: 0; color: #007ACD; font-size: 13px;
    transition: opacity .16s ease, transform .16s ease;
  }

  html #header .mp-rail-1 .tbm-link.level-2:hover,
  html #header .mp-rail-1 .tbm-link.level-2:focus,
  html #header .mp-rail-1 .tbm-link.level-2.mp-on,
  html #header .mp-rail-2 .tbm-link.level-2:hover,
  html #header .mp-rail-2 .tbm-link.level-2:focus,
  html #header .mp-rail-2 .tbm-link.level-2.mp-on {
    background: linear-gradient(90deg, rgba(0, 122, 205, .075), rgba(0, 122, 205, .02)) !important;
    color: #005598 !important;
  }
  html #header .mp-rail-1 .tbm-link.level-2:hover::after,
  html #header .mp-rail-1 .tbm-link.level-2:focus::after,
  html #header .mp-rail-1 .tbm-link.level-2.mp-on::after,
  html #header .mp-rail-2 .tbm-link.level-2:hover::after,
  html #header .mp-rail-2 .tbm-link.level-2:focus::after,
  html #header .mp-rail-2 .tbm-link.level-2.mp-on::after {
    opacity: 1; transform: translateY(-50%);
  }

  html #header .tbm-submenu .tbm-subnav { padding: 0 !important; margin: 0 !important; }
  html #header .tbm-submenu .tbm-item.level-2 { list-style: none !important; }

  /* ── Detail pane ───────────────────────────────────────────────────── */
  html #header .mp-detail {
    border: 1px solid #e8f0f7;
    border-radius: 14px;
    padding: 20px 22px;
    background: linear-gradient(170deg, #f3f8fc 0%, #fbfdff 62%);
    min-height: 156px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  html #header .mp-eyebrow {
    font-family: 'SF Mono', Consolas, Menlo, monospace;
    font-size: 10px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: #5b6f81; margin: 0 0 9px;
  }
  html #header .mp-title {
    font-family: Exo2Brand, 'Segoe UI', system-ui, sans-serif;
    font-weight: 700; font-size: 20px; line-height: 1.16;
    letter-spacing: -.02em; color: #161c26; margin: 0 0 8px;
    text-wrap: balance;
  }
  html #header .mp-body {
    font-size: 13.5px; line-height: 1.6; color: #5b6f81; margin: 0; max-width: 42ch;
  }
  /* Nine of the twenty-five links carry no caption, so the pane falls back to
     the column description. Set apart so it does not read as that item's own
     copy. */
  html #header .mp-body.mp-fallback { color: #93a3b3; font-style: italic; }

  html #header .mp-fade { animation: mpFade .2s ease; }
  @keyframes mpFade { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }

  /* ── CTA column ────────────────────────────────────────────────────────
     Each section already ships one; it keeps its own colours and only gets
     the shared radius and a consistent seat in the grid. */
  html #header .mp-cta,
  html #header .mp-cta .tbm-column-inner {
    border-radius: 14px !important;
    overflow: hidden;
  }
  html #header .mp-cta .tbm-column-inner { padding: 18px 20px 20px !important; }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  html #header .tbm-submenu .tbm-link.level-2,
  html #header .tbm-submenu .tbm-link.level-2::after { transition: none !important; }
  html #header .mp-fade { animation: none !important; }
}

/* ── Height ────────────────────────────────────────────────────────────────
   Stacking the CTA under the detail pane costs height that the old side-by-
   side row did not pay: measured, the panel went from 498px to 569px on
   Solutions, and the short link lists left ~300px of dead space beside it.

   The bullet lists inside the CTA cards come out to pay for it — they are
   ~90px each and largely restate the body copy above them ("instant results,
   no sign-up required" is already two of the three bullets). That brings the
   panel back under where it is today, at 1240px wide instead of 900px.

   Targeted at any ul that is not .tbm-subnav: the subnav is the real link
   list and must survive, anything else in these columns is decorative. */
@media (min-width: 1025px) {
  html #header .mp-cta .tbm-column-inner ul:not(.tbm-subnav) { display: none !important; }

  /* Roomier links, now that the caption is not competing for the line. */
  html #header .mp-rail-1 .tbm-link.level-2,
  html #header .mp-rail-2 .tbm-link.level-2 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-size: 15.5px;
  }
}

/* ── CTA as a footer bar ───────────────────────────────────────────────────
   The CTA card was the tallest thing in the panel: 269–298px stacked under a
   156px detail pane made the right column ~440px against link lists of only
   225–274px. Moving it to a full-width strip along the bottom takes the whole
   panel from 527/517/556 to roughly 350–400 — shorter than the 498/414/392 it
   was before any of this.

   It loses nothing but the layout. All three cards share the same structure —
   eyebrow, headline, body, feature list, decorative button, then the real
   link — so the strip keeps eyebrow, headline, body and the real link on one
   row. Only the feature list (already hidden) and the decorative button
   duplicate go, and the button duplicate was rendering at zero height anyway.

   Each section keeps its own card colour rather than being normalised to one:
   they are all dark, and the tint is part of how each section reads.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  html #header .mp-cta {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin-top: 6px;
  }

  /* The rails were spanning rows 1-2 for the old right-hand CTA. With the bar
     now occupying the whole of row 2 they overlapped it, and the third link in
     each column was painted over — TeraSecure and TeraConsult vanished. */
  html #header .mp-rail-1,
  html #header .mp-rail-2 { grid-row: 1 !important; }

  /* With the CTA gone from column 3, the detail pane is the only thing there
     and would sit short against the link lists. Stretching it gives the
     caption the room and squares the panel off. */
  html #header .mp-detail { align-self: stretch; }

  html #header .mp-cta .tbm-column-inner {
    display: flex !important;
    /* The site CSS puts both these wrappers on a column axis; display:flex
       alone left them stacked, and the bar measured 170px instead of ~70. */
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    padding: 12px 18px !important;
  }

  /* The content wrapper — .tbm-cyber-cta-inner, .tbm-plan-cta-inner,
     .tbm-careers-cta-inner. Selected structurally because the three differ
     only in name. */
  html #header .mp-cta .tbm-column-inner > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
  }

  /* Eyebrow: loses the rule beneath it and the emoji, in line with every
     other eyebrow on the site. */
  html #header .mp-cta [class$="-eyebrow"] {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 10px !important;
    letter-spacing: .14em !important;
    white-space: nowrap;
  }
  html #header .mp-cta [class$="-eyebrow"] span { display: none !important; }

  html #header .mp-cta [class$="-headline"] {
    flex: 0 0 auto;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    white-space: nowrap;
  }

  /* The body is the only elastic part, so it is the only thing that can be
     clipped when a section's copy runs long. */
  html #header .mp-cta [class$="-body"] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    font-size: 12.8px !important;
    line-height: 1.45 !important;
    /* Two lines rather than one clipped one. At 1240px the Services and
       Resources copy overflowed, and "— with the reasoning shown, not just a
       name" is the most persuasive clause in that CTA to lose to an ellipsis.
       Costs ~14px of bar height and keeps the sentence. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* A non-interactive copy of the button that sits above the real link. */
  html #header .mp-cta [class$="-btn-visual"] { display: none !important; }

  html #header .mp-cta .tbm-subnav { flex: 0 0 auto; }
  html #header .mp-cta .tbm-subnav .tbm-caption { display: none !important; }
  html #header .mp-cta .tbm-subnav .tbm-link.level-2 {
    white-space: nowrap;
    margin: 0 !important;
  }
}

/* ── Floating panel ────────────────────────────────────────────────────────
   Rounded on all four corners and set down off the menu bar.

   The gap is padding on .tbm-submenu, not a margin or an offset top. The
   dropdown is held open by hovering the list item that contains it, so a real
   gap would be dead space — the pointer would leave the item on the way down
   and the panel would close before it was reached. Keeping the box flush and
   pushing only the visible surface down means the hover path stays unbroken
   across a gap that looks empty.

   That moves the surface itself — background, radius, shadow, border — from
   .tbm-submenu onto .tbm-row, which is now the card.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  html #header .tbm-item.level-1 > .tbm-submenu,
  html #header .tbm-item--has-dropdown > .tbm-submenu {
    background: transparent !important;
    border-radius: 0;
    border-top: 0;
    box-shadow: none;
    /* 20px, not 10. top:100% resolves against the menu ITEM, which is 10px
       shorter than the bar it sits in — so the panel already began 10px above
       the bar bottom and overlapped it. 20px of padding puts the visible card
       10px clear. */
    padding-top: 20px !important;
  }

  html #header .tbm-item.level-1 > .tbm-submenu > .tbm-row {
    background: #fff;
    border: 1px solid #e8f0f7;
    border-radius: 16px;
    box-shadow: 0 22px 44px -20px rgba(9, 32, 58, .34), 0 2px 6px rgba(9, 32, 58, .06);
  }
}