/* Bluefront AI: header with mega menus, theme toggle, mobile accordion, wide footer.
   Colours come from the theme tokens (see theme.css), so light and dark both work. */

/* ---------- Header pill ---------- */
.nav-wrap .nav.bf-nav,
.nav-wrap.is-compact .nav.bf-nav {
  display: flex; align-items: center; gap: 0.9rem;
  max-width: var(--container); margin-inline: 1rem; padding: 0.7rem 0.8rem 0.7rem 1.6rem;
  border-radius: 2.4rem; position: relative; isolation: isolate;
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Light theme: frosted white glass (iOS style), the same over every part of the page, no colour cast.
   Dark theme: clear blue glass, the dark page shows through under a soft blue tint (::after). Where the dark theme
   page is light behind the bar (screens), nav.js sets data-tone="light" or "mixed" and the glass frosts up in navy so
   the white text stays readable. The glass is a layer behind the bar's content, not the bar itself, so the dropdown
   panel can run its own blur on the page. Text colours come from the theme tokens as everywhere else. */
.nav-wrap .nav.bf-nav::before,
.nav-wrap .nav.bf-nav::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
}
.nav-wrap .nav.bf-nav::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.58));
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.95), inset 0 -1px 1px rgba(20, 40, 90, 0.05),
    0 14px 40px -16px rgba(var(--shadow-rgb), 0.28), 0 1px 6px rgba(var(--shadow-rgb), 0.06);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
}
.nav-wrap .nav.bf-nav::after { display: none; }
html[data-theme="dark"] .nav-wrap .nav.bf-nav::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  border-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: blur(20px) saturate(200%); backdrop-filter: blur(20px) saturate(200%);
  transition: background-color 0.35s var(--ease);
}
html[data-theme="dark"] .nav-wrap .nav.bf-nav::after {
  display: block;
  background: radial-gradient(120% 190% at 6% 0%, rgba(var(--accent-rgb), 0.42), transparent 64%),
              linear-gradient(180deg, rgba(var(--accent-rgb), 0.24), rgba(var(--accent-rgb), 0.12));
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 32px -16px rgba(0, 0, 0, 0.5);
  transition: opacity 0.35s var(--ease);
}
html[data-theme="dark"] .nav-wrap:is([data-tone="light"], [data-tone="mixed"]) .nav.bf-nav::before { background: linear-gradient(180deg, rgba(var(--card-rgb), 0.9), rgba(var(--card-rgb), 0.82)); }
html[data-theme="dark"] .nav-wrap:is([data-tone="light"], [data-tone="mixed"]) .nav.bf-nav::after { opacity: 0; }
/* dark theme over the blue glass: a thin white edge keeps the blue call to action apart from it */
html[data-theme="dark"] .nav-wrap:not([data-tone="light"]):not([data-tone="mixed"]) .nav.bf-nav .nav__cta { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 6px 18px -8px rgba(0, 0, 0, 0.5); }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] .nav-wrap .nav.bf-nav::after, html[data-theme="dark"] .nav-wrap .nav.bf-nav::before { transition: none; }
}
/* browsers without backdrop-filter get an almost solid pane, so text underneath never competes with the links */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-wrap .nav.bf-nav::before { background: rgba(var(--card-rgb), 0.95); }
  .bf-mega__inner { background: var(--card) !important; }
}
@media (min-width: 1360px) { .nav-wrap .nav.bf-nav, .nav-wrap.is-compact .nav.bf-nav { margin-inline: auto; } }

.bf-brand { display: inline-flex; align-items: center; color: var(--ink); flex: none; line-height: 0; }
/* The real logo (one shared <symbol>, two colours from tokens) */
.bf-wm { display: block; height: 1.7rem; width: auto; aspect-ratio: 1749 / 287; --wm-main: var(--ink); --wm-ai: var(--accent); }
.wm-main { fill: var(--wm-main, currentColor); }
.wm-ai { fill: var(--wm-ai, currentColor); }
.bf-wm--footer { height: 2rem; --wm-main: #fff; --wm-ai: #8fb4ff; }
.bf-wm--big { width: 100%; height: auto; --wm-main: rgba(255, 255, 255, 0.1); --wm-ai: rgba(255, 255, 255, 0.1); }

.bf-menu { display: flex; align-items: center; gap: 0.1rem; list-style: none; margin: 0 0 0 auto; padding: 0; }
.bf-item { position: static; }
.bf-trigger, .bf-link {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.62rem 0.9rem; border: 0; border-radius: 999px;
  background: none; color: var(--ink); font: 500 0.98rem/1 var(--font); letter-spacing: -0.005em; cursor: pointer; white-space: nowrap;
}
.bf-trigger:hover, .bf-link:hover { background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
html[data-theme="dark"] .bf-trigger:hover, html[data-theme="dark"] .bf-link:hover { background: rgba(255, 255, 255, 0.10); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.bf-trigger[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.bf-link[aria-current="page"] { color: var(--accent); }
.bf-trigger:focus-visible, .bf-link:focus-visible, .bf-theme:focus-visible, .bf-mega a:focus-visible, .bf-acc__btn:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.bf-chev { transition: transform 0.2s var(--ease); }
.bf-trigger[aria-expanded="true"] .bf-chev { transform: rotate(180deg); }
.nav.bf-nav .nav__cta { flex: none; }

/* ---------- Theme toggle ---------- */
.bf-theme { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.5); color: var(--muted); cursor: pointer; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); }
html[data-theme="dark"] .bf-theme { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.bf-theme:hover { border-color: var(--border-strong); color: var(--ink); }
.bf-theme__track { position: relative; width: 34px; height: 18px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.14); transition: background 0.2s var(--ease); }
.bf-theme__knob { position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); transition: transform 0.22s var(--ease); }
.bf-theme[aria-pressed="true"] .bf-theme__track { background: rgba(var(--accent-rgb), 0.3); }
.bf-theme[aria-pressed="true"] .bf-theme__knob { transform: translateX(16px); }

/* ---------- Mega menu (frosted white glass, blurs the page behind it) ---------- */
.bf-mega { position: absolute; left: 0; right: 0; top: calc(100% + 0.65rem); z-index: 10; }
.bf-mega[hidden] { display: none; }
.bf-mega__inner {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.95fr); gap: 1.5rem; padding: 1.6rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.24));
  border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 2rem;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.95), inset 0 -1px 2px rgba(20, 40, 90, 0.06),
    0 30px 80px -30px rgba(var(--shadow-rgb), 0.5);
  -webkit-backdrop-filter: blur(36px) saturate(190%) brightness(1.04); backdrop-filter: blur(36px) saturate(190%) brightness(1.04);
  animation: bf-mega-in-glass 0.2s var(--ease) both;
}
html[data-theme="dark"] .bf-mega__inner {
  background: linear-gradient(160deg, rgba(60, 82, 130, 0.58), rgba(18, 30, 66, 0.42));
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.22), inset 0 -1px 2px rgba(0, 0, 0, 0.3), 0 30px 80px -26px rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(40px) saturate(170%) brightness(0.9); backdrop-filter: blur(40px) saturate(170%) brightness(0.9);
}
/* slide only (no opacity fade): an opacity animation would switch the blur off while it runs */
@keyframes bf-mega-in-glass { from { transform: translateY(-6px); } to { transform: none; } }
@keyframes bf-mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.bf-mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 1.2rem; }
.bf-mega__link { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; padding: 1rem 1rem 1rem 0.9rem; border-radius: 1.2rem; color: var(--ink); align-items: start; }
.bf-mega__link:hover, .bf-mega__link:focus-visible { background: rgba(var(--accent-rgb), 0.07); }
.bf-mega__icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--accent); transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.bf-mega__link:hover .bf-mega__icon, .bf-mega__link:focus-visible .bf-mega__icon { background: var(--accent); color: #fff; border-color: var(--accent); }
.bf-mega__title { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; align-self: end; }
.bf-mega__sub { font-size: 0.93rem; color: var(--muted); line-height: 1.35; margin-top: 0.15rem; }
.bf-mega__more { display: inline-flex; gap: 0.4rem; margin: 0.6rem 0 0 0.9rem; font-weight: 600; color: var(--accent); }
.bf-mega__more:hover { text-decoration: underline; }

.bf-mega__feature { display: flex; flex-direction: column; padding: 1.6rem; border-radius: 1.6rem; background: var(--surface); border: 1px solid rgba(var(--ink-rgb), 0.06); }
.bf-mega__art { display: flex; align-items: flex-end; gap: 0.5rem; height: 5.2rem; margin-bottom: 1.5rem; }
.bf-mega__art i { flex: 1; border-radius: 0.5rem 0.5rem 0.2rem 0.2rem; background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), 0.55)); }
.bf-mega__art i:nth-child(1) { height: 52%; } .bf-mega__art i:nth-child(2) { height: 30%; } .bf-mega__art i:nth-child(3) { height: 74%; } .bf-mega__art i:nth-child(4) { height: 44%; } .bf-mega__art i:nth-child(5) { height: 100%; }
.bf-mega__kicker { margin: 0; font: 600 0.74rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.bf-mega__ftitle { margin: 0.9rem 0 0; font-size: 1.7rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; color: var(--ink); }
.bf-mega__ftext { margin: 0.8rem 0 1.4rem; font-size: 1rem; line-height: 1.55; color: var(--muted); }
.bf-mega__feature .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Mobile ---------- */
@media (max-width: 1100px) {
  .bf-menu, .nav.bf-nav .nav__cta, .nav.bf-nav > .bf-theme { display: none; }
  .nav.bf-nav .nav__toggle { display: inline-flex; margin-left: auto; }
  .nav-wrap .nav.bf-nav { padding: 0.55rem 0.6rem 0.55rem 1.2rem; }
  .bf-wm { height: 1.45rem; }
}
.mobile-menu .bf-acc { border-bottom: 1px solid var(--border); }
.bf-acc__btn { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 0.95rem 0.75rem; border: 0; background: none; color: var(--ink); font: 600 1.05rem var(--font); cursor: pointer; border-radius: 0.75rem; }
.bf-acc__btn[aria-expanded="true"] .bf-chev { transform: rotate(180deg); }
.bf-acc__panel { padding: 0 0 0.6rem 0.4rem; }
.mobile-menu .bf-acc__panel a { padding: 0.65rem 0.75rem; font-size: 0.98rem; }
.bf-mobile-theme { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0.75rem 0.2rem; color: var(--muted); font-weight: 500; }
.mobile-menu { max-height: calc(100svh - 6rem); overflow: auto; }

/* ---------- Wide footer ---------- */
.footer__cols--wide { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer__h2-gap { margin-top: 1.8rem; }
@media (max-width: 1100px) { .footer__cols--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer__cols--wide .footer__col--brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .footer__cols--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; } }

/* Mobile menu: the call to action keeps white text on blue */
.mobile-menu a.btn { color: #fff; justify-content: center; text-align: center; }
.mobile-menu a.btn:hover { color: #fff; background: var(--accent-hover); }

/* Logo inside the blueprint card on the home page */
.bp-card__brand .bf-wm { height: 1.2rem; }

/* A named view transition on the header container makes Chrome treat it as a separate layer, and the glass bar then
   cannot blur the page behind it. The header is identical on every page, so letting it crossfade with the page is invisible. */
.nav-wrap { view-transition-name: none; }


/* Mega menu cards are glass too, so the blurred page shows through the whole panel (placed last to win over the base card rules) */
.bf-mega__icon { background: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.85); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9); }
.bf-mega__feature { background: rgba(255, 255, 255, 0.34); border-color: rgba(255, 255, 255, 0.85); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.9); }
html[data-theme="dark"] .bf-mega__icon { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.14); }
html[data-theme="dark"] .bf-mega__feature { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.12); }