/* ════════════════════════════════════════════════════════════════════
   CLICKFQ NAV — canonical header, mega-menus, mobile drawer
   Loaded by every public page. Markup is written by scripts/sync-nav.js
   from scripts/nav-data.js; behaviour lives in /js/clickfq-nav.js.
═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Shell ─────────────────────────────────────────────────────── */

.cfq-nav {
  width: 100%;
  height: var(--cfq-nav-h, 72px);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 clamp(16px, 3vw, 40px);
  position: relative;
  box-shadow: 0 1px 0 #E2E8F0;
  transition: box-shadow .2s;
}
.cfq-nav.is-scrolled { box-shadow: 0 1px 0 #E2E8F0, 0 6px 20px -12px rgba(11,30,56,.28); }

.cfq-nav__lead { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 40px); flex: 1; min-width: 0; }

.cfq-nav__logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; text-decoration: none; }
.cfq-nav__logo img { height: 44px; width: auto; display: block; }
@media (max-width: 640px) { .cfq-nav__logo img { height: 34px; } }

/* Actions must never win the space fight against the wordmark: the logo is
   flex-shrink:0 and the action group is allowed to compress instead. */
.cfq-nav__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 1; min-width: 0; }

.cfq-nav__links { display: none; align-items: center; gap: clamp(14px, 1.6vw, 26px); min-width: 0; }
@media (min-width: 1024px) { .cfq-nav__links { display: flex; } }

/* The project's utility sheet has no `lg:inline-flex`, so the secondary
   action carries its own breakpoint rather than a class that does nothing. */
.cfq-nav__login { display: none; }
@media (min-width: 1024px) { .cfq-nav__login { display: inline-flex; } }

/* ── 2. Top-level items ───────────────────────────────────────────── */

.cfq-nav__item { position: static; }

.cfq-nav__link {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-size: 13.5px; font-weight: 600; letter-spacing: -.005em;
  color: var(--cfq-grey-700, #4A5568);
  text-decoration: none; white-space: nowrap;
  padding: 6px 0; border: 0; background: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.cfq-nav__link:hover,
.cfq-nav__link[aria-expanded="true"],
.cfq-nav__link.is-active { color: var(--cfq-blue, #0A2540); border-bottom-color: var(--cfq-blue, #0A2540); }

.cfq-nav__caret { width: 14px; height: 14px; transition: transform .18s ease; }
.cfq-nav__link[aria-expanded="true"] .cfq-nav__caret { transform: rotate(180deg); }

/* ── 3. Mega-menu panel ───────────────────────────────────────────── */

.cfq-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff;
  border-top: 1px solid var(--cfq-line, #ECEAE3);
  box-shadow: 0 24px 48px -24px rgba(11,30,56,.28), 0 2px 6px rgba(11,30,56,.04);
  z-index: 70;
  /* Closed state. Kept in the DOM and crawlable; hidden from AT via
     inert/aria on the wrapper, and from pointers via visibility. */
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.cfq-mega.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .cfq-mega, .cfq-mega.is-open { transition: none; transform: none; }
}

.cfq-mega__inner {
  max-width: 1360px; margin: 0 auto;
  padding: 30px clamp(16px, 3vw, 40px) 8px;
  display: grid; gap: 26px 22px;
  grid-template-columns: repeat(var(--cfq-mega-cols, 4), minmax(0, 1fr));
}

.cfq-mega__title {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cfq-muted, #6B6B73);
  margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--cfq-line, #ECEAE3);
}

.cfq-mega__list { display: flex; flex-direction: column; gap: 1px; }

.cfq-mega__link {
  display: block;
  font-size: 13.5px; line-height: 1.35; font-weight: 500;
  color: var(--cfq-grey-700, #2D3748);
  text-decoration: none;
  padding: 6px 8px; margin: 0 -8px; border-radius: 7px;
  transition: background .12s, color .12s;
}
.cfq-mega__link:hover,
.cfq-mega__link:focus-visible { background: var(--cfq-blue-50, #EBF8FF); color: var(--cfq-blue, #0A2540); }

/* Panel footer — index link on the left, one promoted card on the right. */
.cfq-mega__foot {
  max-width: 1360px; margin: 0 auto;
  padding: 14px clamp(16px, 3vw, 40px) 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.cfq-mega__all {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-size: 13px; font-weight: 700; color: var(--cfq-blue, #0A2540);
  text-decoration: none;
}
.cfq-mega__all:hover { text-decoration: underline; }

.cfq-mega__promo {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 12px; text-decoration: none;
  background: linear-gradient(135deg, #0B1E38 0%, #11355f 100%);
  color: #fff; max-width: 460px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cfq-mega__promo:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(11,30,56,.55); }
.cfq-mega__promo-kicker {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: #f7e000;
}
.cfq-mega__promo-title {
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-size: 14px; font-weight: 700; margin-top: 2px;
}
.cfq-mega__promo-sub { font-size: 12px; color: rgba(255,255,255,.72); margin-top: 1px; }

/* Under lg the panels never open on hover — the drawer carries the same
   links, so keep the desktop panels out of the layout entirely. */
@media (max-width: 1023px) { .cfq-mega { display: none; } }

/* ── 4. Mobile drawer ─────────────────────────────────────────────── */

.cfq-nav__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border: 0; background: none; border-radius: 9px; cursor: pointer;
  color: var(--cfq-grey-700, #4A5568);
}
.cfq-nav__burger:hover { background: var(--cfq-surface-bg, #F7F8FA); }
@media (min-width: 1024px) { .cfq-nav__burger { display: none; } }

.cfq-drawer {
  position: fixed; left: 0; right: 0; top: var(--cfq-top-h, 112px); bottom: 0;
  background: #fff; z-index: 45;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px clamp(16px, 5vw, 28px) 40px;
  border-top: 1px solid var(--cfq-line, #ECEAE3);
}
.cfq-drawer[hidden] { display: none; }
@media (min-width: 1024px) { .cfq-drawer { display: none; } }

.cfq-drawer__link {
  display: block; padding: 13px 2px;
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-size: 15px; font-weight: 600; color: var(--cfq-ink, #1A202C);
  text-decoration: none; border-bottom: 1px solid var(--cfq-surface-bg, #F1F1EC);
}

.cfq-drawer__group { border-bottom: 1px solid var(--cfq-surface-bg, #F1F1EC); }
.cfq-drawer__group > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 2px; cursor: pointer; list-style: none;
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-size: 15px; font-weight: 600; color: var(--cfq-ink, #1A202C);
}
.cfq-drawer__group > summary::-webkit-details-marker { display: none; }
.cfq-drawer__group > summary .cfq-nav__caret { transition: transform .18s ease; }
.cfq-drawer__group[open] > summary .cfq-nav__caret { transform: rotate(180deg); }

.cfq-drawer__sub { padding: 2px 0 12px; }
.cfq-drawer__subtitle {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cfq-muted, #6B6B73); margin: 12px 0 4px;
}
.cfq-drawer__sublink {
  display: block; padding: 8px 0 8px 12px;
  font-size: 14px; color: var(--cfq-grey-700, #4A5568); text-decoration: none;
  border-left: 2px solid var(--cfq-line, #ECEAE3);
}
.cfq-drawer__sublink:hover { color: var(--cfq-blue, #0A2540); border-left-color: var(--cfq-blue, #0A2540); }

.cfq-drawer__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }

/* ── 5. Focus visibility ──────────────────────────────────────────── */

.cfq-nav a:focus-visible,
.cfq-nav button:focus-visible,
.cfq-mega a:focus-visible,
.cfq-drawer a:focus-visible,
.cfq-drawer summary:focus-visible {
  outline: 2px solid var(--cfq-blue, #0A2540);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Prevent background scroll while the drawer is open. */
body.cfq-drawer-open { overflow: hidden; }