/* ══════════════════════════════════════════════════════════════════════════
   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;
  }
}