/* ═══════════════════════════════════════════════════════════════════
   DataraFlow public site: the main navigation (templates/navbar.html;
   behaviour in static/js/site_nav.js). Ported from the approved October
   prototype: a floating white pill with grey pill tabs, one dropdown per
   audience (About, For applicants, For employers, Support, Articles),
   Log in and the state-aware Apply / Join the waitlist button on the
   right. Panels are nav-lab V1 "Mega tiles": as wide as the tab group,
   one illustrated tile per link. Small screens get a drawer of the same
   tiles. The footer has its own stylesheet,
   static/css/df-sitefoot.css.

   Colours are tokens only (df-tokens.css).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Navigation ─────────────────────────────────────────────────── */
.df-navbar-wrap {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
    padding: 9px 24px 0;
    pointer-events: none; /* the gap around the pill stays clickable */
}
.df-navbar, .df-navbar-drawer { pointer-events: auto; }
.df-navbar {
    --df-navbar-panel: var(--df-panel, color-mix(in srgb, var(--df-line) 35%, var(--df-surface)));
    position: relative; max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center; gap: 6px;
    background: var(--df-surface); border-radius: 999px;
    box-shadow: 0 1px 2px rgba(15, 26, 51, .05), 0 10px 30px -16px rgba(15, 26, 51, .22);
    padding: 6px 7px 6px 16px;
    font-family: var(--df-font-text);
}
[data-theme="dark"] .df-navbar { box-shadow: 0 0 0 1px var(--df-line), 0 12px 30px -16px rgba(0, 0, 0, .6); }

/* Wordmark in Inter Bold, matching the logo on DataraFlow's socials (Tassy, 2026-10-09). */
.df-navbar-logo { display: inline-flex; font-family: Inter, var(--df-font-text); align-items: center; gap: .5rem; margin-right: 10px; color: var(--df-ink); font-weight: 700; font-size: 17px; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.df-navbar-logo:hover { color: var(--df-ink); }
.df-navbar-logo img { height: 30px; width: auto; }

.df-navbar-tabs { position: relative; display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
/* Static on purpose: the panels position against the whole tab group. */
.df-navbar-item { position: static; }

.df-navbar-tab, .df-navbar-burger {
    font: inherit; font-size: 14px; line-height: 1.2; color: var(--df-ink-2);
    background: var(--df-navbar-panel); border: 0; border-radius: 999px;
    padding: 9px 13px; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background-color 150ms var(--df-ease), color 150ms var(--df-ease), transform 120ms var(--df-ease);
}
.df-navbar-tab:hover, .df-navbar-burger:hover { color: var(--df-ink); background: color-mix(in srgb, var(--df-navbar-panel) 70%, var(--df-line)); }
.df-navbar-tab:active, .df-navbar-burger:active { transform: scale(.97); }
/* Current section is clearly highlighted (Tassy, 2026-10-07): filled ink pill. */
.df-navbar-direct { text-decoration: none; }
.df-navbar-tab.is-current { color: var(--df-paper); background: var(--df-ink); font-weight: 600; }
.df-navbar-tab.is-current:hover { color: var(--df-paper); background: var(--df-ink); }
.df-navbar-tab[aria-expanded="true"], .df-navbar-burger[aria-expanded="true"] { background: var(--df-ink); color: var(--df-surface); }
.df-navbar-chev { flex: none; transition: transform 200ms var(--df-ease); }
[aria-expanded="true"] > .df-navbar-chev { transform: rotate(180deg); }

/* The dropdown panel (nav-lab V1 "Mega tiles"). It is positioned against
   the tab group (.df-navbar-tabs is the containing block, the items are
   static), so every panel is exactly the tab group's width and aligned to
   it, for every menu and at every size, with no measuring. Hidden with
   visibility so it can fade; the script toggles .is-open together with the
   button's aria-expanded. */
.df-navbar-menu {
    position: absolute; top: calc(100% + 12px); left: 0; right: 0; z-index: 2;
    list-style: none; margin: 0; padding: 10px;
    display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 6px;
    background: var(--df-surface); border-radius: 22px;
    box-shadow: 0 1px 2px rgba(15, 26, 51, .05), 0 18px 40px -16px rgba(15, 26, 51, .3);
    opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none;
    transition: opacity 180ms var(--df-ease), transform 180ms var(--df-ease), visibility 180ms;
}
[data-theme="dark"] .df-navbar-menu { box-shadow: 0 0 0 1px var(--df-line), 0 18px 40px -16px rgba(0, 0, 0, .7); }
.df-navbar-menu.is-open {
    opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    /* visibility flips at once on open, so the script can focus a link in
       the same tick (ArrowDown on a tab). It still fades out on close. */
    transition: opacity 180ms var(--df-ease), transform 180ms var(--df-ease), visibility 0s;
}
/* Without the script, hover and keyboard focus still open each menu. */
.df-navbar:not([data-ready]) .df-navbar-item:hover > .df-navbar-menu,
.df-navbar:not([data-ready]) .df-navbar-item:focus-within > .df-navbar-menu { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
/* A hover bridge over the 12px gap, so moving down to the menu keeps it. */
.df-navbar-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.df-navbar-menu > li { min-width: 0; display: flex; }

.df-navbar-menu a, .df-navbar-drawer a { text-decoration: none; }
/* A tile: illustration, title, one-line note. */
.df-navbar-tile {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    padding: 8px 8px 12px; border-radius: 16px; color: var(--df-ink);
    transition: background-color 150ms var(--df-ease);
}
.df-navbar-tile:hover, .df-navbar-tile:focus-visible, .df-navbar-tile[aria-current="page"] { background: var(--df-navbar-panel); color: var(--df-ink); }
.df-navbar-tile .df-navbar-art { height: 96px; margin-bottom: 10px; }
.df-navbar-tx { display: block; padding: 0 4px; }
.df-navbar-tx b { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.df-navbar-tx span { display: block; padding-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--df-ink-3); }
/* A one-link menu is one horizontal tile. */
.df-navbar-menu.is-single .df-navbar-tile { flex-direction: row; align-items: center; gap: 16px; padding: 8px; }
.df-navbar-menu.is-single .df-navbar-art { flex: 0 0 58%; height: 104px; margin: 0; }
.df-navbar-menu.is-single .df-navbar-tx { padding: 0 8px 0 0; }
.df-navbar-menu.is-single .df-navbar-tx b { font-size: 16px; }
.df-navbar-menu.is-single .df-navbar-tx span { font-size: 13px; }

/* The illustration well: panel grey on a faint 22px grid. */
.df-navbar-art {
    display: flex; overflow: hidden; border-radius: 12px;
    --dfn-grid: color-mix(in srgb, var(--df-line-strong) 9%, transparent);
    background:
        linear-gradient(var(--dfn-grid) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, var(--dfn-grid) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--df-navbar-panel, var(--df-panel));
}
.dfn-il { flex: 1 1 0; min-width: 0; height: 100%; display: block; transition: transform 300ms var(--df-ease); }
/* V1's hover move: the illustration lifts a little. */
.df-navbar-tile:hover .dfn-il, .df-navbar-tile:focus-visible .dfn-il { transform: translateY(-3px) scale(1.03); }

/* Illustration colours, tokens only. The gradient is the logo's stops. */
.df-navbar-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.dfn-g0 { stop-color: var(--df-brand-blue); }
.dfn-g1 { stop-color: var(--df-brand-cyan); }
.dfn-g2 { stop-color: var(--df-brand-teal); }
.dfn-l { fill: var(--df-cell); }
.dfn-m { fill: color-mix(in srgb, var(--df-ink-3) 40%, transparent); }
.dfn-k { fill: var(--df-surface); }
.dfn-ok { fill: var(--df-ok); opacity: .7; }
.dfn-if { fill: var(--df-paper-fixed); }
.dfn-s { stroke: var(--df-ink-2); }
.dfn-sa { stroke: var(--df-accent); }
.dfn-is { stroke: var(--df-paper-fixed); }
.dfn-t { font: 600 8px "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; fill: var(--df-ink-3); }

.df-navbar-spacer { display: none; }
/* Tabs centred (Tassy, 2026-10-07): logo and actions take equal flex so the tabs sit in the middle. */
.df-navbar-logo, .df-navbar-actions { flex: 1 1 0; }
.df-navbar-actions { justify-content: flex-end; }
.df-navbar-tabs { justify-content: center; }
.df-navbar-actions { display: flex; align-items: center; gap: 6px; }
.df-navbar-login { font-size: 14px; font-weight: 500; color: var(--df-ink-2); padding: 8px 12px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: color 150ms var(--df-ease); }
.df-navbar-login:hover { color: var(--df-ink); }
.df-navbar-apply {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--df-accent); color: var(--df-on-status);
    padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; line-height: 1.2;
    text-decoration: none; white-space: nowrap;
    transition: background-color 200ms var(--df-ease), transform 120ms var(--df-ease);
}
.df-navbar-apply:hover { background: var(--df-accent-deep); color: var(--df-on-status); }
.df-navbar-apply:active { transform: scale(.97); }

.df-navbar :focus-visible, .df-navbar-drawer :focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; }

/* ── Mobile drawer ──────────────────────────────────────────────── */
.df-navbar-burger { display: none; }
.df-navbar-drawer {
    display: none; position: relative; max-width: 1280px; margin: 8px auto 0;
    background: var(--df-surface); border-radius: 20px; padding: 6px;
    box-shadow: 0 18px 40px -16px rgba(15, 26, 51, .3);
    max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain;
    font-family: var(--df-font-text);
}
[data-theme="dark"] .df-navbar-drawer { box-shadow: 0 0 0 1px var(--df-line), 0 18px 40px -16px rgba(0, 0, 0, .7); }
.df-navbar-drawer.is-open { display: block; }
/* The same illustrated tiles, two to a row; a group's first tile spans
   the row when it has three, and a one-link group is one wide tile. */
.df-navbar-dgroup { padding: 4px 6px 10px; }
.df-navbar-dhead { margin: 6px 6px 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--df-ink-3); }
.df-navbar-dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.df-navbar-dgrid.n1 > :first-child, .df-navbar-dgrid.n3 > :first-child { grid-column: 1 / -1; }
.df-navbar-dtile {
    display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 44px;
    padding: 8px 8px 12px; border-radius: 18px; color: var(--df-ink);
    background: var(--df-paper);
    transition: transform 120ms var(--df-ease);
}
.df-navbar-dtile .df-navbar-art { height: 86px; }
.df-navbar-dgrid.n1 .df-navbar-art, .df-navbar-dgrid.n3 > :first-child .df-navbar-art { height: 110px; }
.df-navbar-dtile b { padding: 0 4px; font-size: 14.5px; font-weight: 650; line-height: 1.25; }
.df-navbar-dtile:hover, .df-navbar-dtile[aria-current="page"] { color: var(--df-ink); }
.df-navbar-dtile[aria-current="page"] { background: var(--df-accent-soft); }
.df-navbar-dtile:active { transform: scale(.98); }
.df-navbar-dtile:hover .dfn-il, .df-navbar-dtile:focus-visible .dfn-il { transform: translateY(-3px) scale(1.03); }
.df-navbar-drawer-login { display: flex; align-items: center; min-height: 44px; margin: 4px 6px 6px; padding: 0 12px; font-weight: 700; color: var(--df-ink); border-radius: 13px; }
.df-navbar-drawer-login:hover { color: var(--df-accent-deep); }

@media (min-width: 992px) and (max-width: 1159.98px) {
    .df-navbar { gap: 4px; }
    .df-navbar-tabs { gap: 4px; }
    .df-navbar-tab { padding: 8px 10px; font-size: 13.5px; }
    .df-navbar-logo { margin-right: 4px; }
    .df-navbar-login { padding: 8px 8px; }
}
@media (max-width: 991.98px) {
    .df-navbar-wrap { padding: 8px 16px 0; }
    .df-navbar { padding-left: 12px; }
    .df-navbar-tabs, .df-navbar-login { display: none; }
    .df-navbar-burger { display: inline-flex; }
    .df-navbar-logo img { height: 28px; }
    /* The pills stay 35px to look the same, but each takes a 44px-tall
       touch area: an invisible layer over the bar's own padding. */
    .df-navbar-burger, .df-navbar-apply, .df-navbar-logo { position: relative; }
    .df-navbar-burger::after, .df-navbar-apply::after, .df-navbar-logo::after { content: ""; position: absolute; inset: -6px -3px; }
}
/* Phones: when the bar's button reads "Join the waitlist" (applications
   closed) the wordmark would push it off a 375px screen, so the wordmark
   goes visually (it stays the link's name for screen readers); the logo
   mark stays. Below 360px it goes in either state. */
@media (max-width: 419.98px) {
    .df-navbar.is-waitlist .df-navbar-logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .df-navbar.is-waitlist .df-navbar-logo { margin-right: 0; }
}
@media (max-width: 359.98px) {
    .df-navbar-logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* The theme switch floats bottom right on every public page. */
.df-theme-float { position: fixed; right: 18px; bottom: 18px; z-index: 1040; }
.df-theme-float .df-theme-toggle { width: 44px; height: 44px; border-radius: 999px; background: var(--df-surface); box-shadow: 0 8px 24px rgba(15, 26, 51, .14); }

/* The footer lives in static/css/df-sitefoot.css. */

@media (prefers-reduced-motion: reduce) {
    .df-navbar-menu, .df-navbar-tab, .df-navbar-burger, .df-navbar-chev, .df-navbar-apply,
    .df-navbar-tile, .df-navbar-dtile, .dfn-il { transition: none; }
    .df-navbar-tile:hover .dfn-il, .df-navbar-tile:focus-visible .dfn-il,
    .df-navbar-dtile:hover .dfn-il, .df-navbar-dtile:focus-visible .dfn-il { transform: none; }
    .df-navbar-dtile:active { transform: none; }
}
@media print { .df-navbar-wrap, .df-theme-float { display: none; } }