/* ── "Industries" menu in the main nav ───────────────────────────────────────
   Linked from the nine pages that carry the full nav (home, sales, coaching,
   about, cost-of-inaction, compare/, blog/, education, real-estate).

   ⚠️ CSS ONLY, ON PURPOSE. The site's CSP allows no new inline script, and a
   hover/focus-within dropdown needs none: tabbing onto the trigger makes the
   panel visible, so the next Tab lands on its links. A hidden panel uses
   `visibility:hidden`, not opacity alone, so its links are not in the tab
   order while it is closed.

   ⚠️ It brings its OWN link styles rather than borrowing .nav-link, because
   coaching.html styles its nav links inline and does not define .nav-link.

   Below 1200px the whole bar collapses into the hamburger menu (see the end of
   this file) and the panel shows always-open, indented under the label.

   ⚠️ THE PANEL MUST BECOME VISIBLE INSTANTLY. visibility switches with no delay
   on open and only fades on close; a faded-in panel keeps its links out of the
   tab order for the length of the fade, so a quick Tab skipped straight past
   Schools and Real Estate. Measured, not assumed. */

.ind-menu { position: relative; display: inline-flex; align-items: center; }

.ind-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: inherit;
  color: var(--warm-grey, #9AA5AF); transition: color .15s;
}
.ind-trigger svg { width: 12px; height: 12px; transition: transform .15s; }
.ind-menu:hover .ind-trigger,
.ind-menu:focus-within .ind-trigger,
.ind-menu.is-current .ind-trigger { color: var(--off-white, #F4F1EC); }
.ind-menu:hover .ind-trigger svg,
.ind-menu:focus-within .ind-trigger svg { transform: rotate(180deg); }
.ind-trigger:focus-visible { outline: 2px solid var(--ember, #E74C3C); outline-offset: 4px; border-radius: 4px; }

/* The panel sits below the trigger; padding-top bridges the gap so the
   pointer can travel from trigger to panel without the hover dropping. */
.ind-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 12px; min-width: 250px; z-index: 300;
  visibility: hidden; opacity: 0;
  transition: opacity .15s, visibility 0s linear .15s;   /* close: fade, then hide */
}
.ind-menu:hover .ind-panel,
.ind-menu:focus-within .ind-panel {
  visibility: visible; opacity: 1;
  transition: opacity .15s, visibility 0s;               /* open: focusable at once */
}

.ind-list {
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: rgba(24, 33, 42, 0.98); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.ind-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 8px; text-decoration: none;
}
.ind-item:hover, .ind-item:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; }
.ind-item[aria-current="page"] { background: rgba(255, 255, 255, 0.04); }
.ind-name { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: var(--off-white, #F4F1EC); }
.ind-desc { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--warm-grey, #9AA5AF); }

/* ── Below 1200px: collapse the bar into the hamburger menu ────────────────────
   ⚠️ Measured 2026-10-05 across all nine pages in English and French: the full
   bar squeezes labels onto two or three lines (and at 720px ran past the right
   edge, hiding the EN|FR switch) below these widths. Widest page needing the
   full width was /fr/sales at 1180px. Several pages already squeezed before the
   Industries item existed, so this fixes a pre-existing defect too.
   These rules copy each page's own <=700px mobile-menu rules; `nav .x` beats
   the pages' `.x` so no !important is needed. Every nav is fixed or sticky,
   so the absolute dropdown anchors to it. */
@media (max-width: 1199px) {
  nav .nav-hamburger { display: inline-flex; }
  nav .nav-right {
    display: none; flex-direction: column; align-items: flex-start; gap: 16px;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 18px 20px 22px;
    background: rgba(30, 42, 53, 0.97); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  }
  body.menu-open nav .nav-right { display: flex; }
}

@media (max-width: 1199px) {
  .ind-menu { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
  .ind-trigger { cursor: default; pointer-events: none; }
  .ind-trigger svg { display: none; }
  .ind-panel {
    position: static; transform: none; visibility: visible; opacity: 1;
    padding: 8px 0 0 12px; min-width: 0; width: 100%;
  }
  .ind-list { background: none; border: none; box-shadow: none; backdrop-filter: none; padding: 0; gap: 4px; }
  .ind-item { padding: 6px 0; }
  .ind-desc { display: none; }
}