/*
 * DiviTorque — Header + Footer chrome.
 * Built from semantic tokens (tokens.css). Source: 03-DESIGN-GUIDE.md B2/B3/B4.
 * Monochrome UI; mesh only on the logo dot.
 */

/* Header menu uses Geist (display) — logo, nav links, mega triggers, sheet. */
.dt-logo, .dt-nav__link, .dt-nav__trigger, .dt-mega__heading, .dt-sheet__link { font-family: var(--font-display); }

/* ─── Logo (shared) ───────────────────────────────────────────────── */
.dt-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-semi); letter-spacing: -.02em; color: var(--color-text); }
/* Official monochrome icon tile — inherits color; D is a transparent hole so it
   flips automatically (ink tile/white D on light, white tile/dark D on dark). */
.dt-logo__mark { display: block; flex: 0 0 auto; color: currentColor; border-radius: 24%; overflow: hidden; }

/* ─── Header (B2) ─────────────────────────────────────────────────── */
.dt-header { position: sticky; top: 0; z-index: 40; transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.dt-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: 64px; }
.dt-header--solid { background: color-mix(in srgb, var(--color-bg) 80%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; }
.dt-header--solid.is-scrolled { border-bottom-color: var(--color-border); }
.dt-header--over-hero { background: transparent; border-bottom: 1px solid transparent; }
.dt-header--over-hero.is-scrolled { background: color-mix(in srgb, var(--color-bg) 80%, transparent); backdrop-filter: blur(12px); border-bottom-color: var(--color-border); }

.dt-nav { display: flex; align-items: center; gap: 4px; }
/* nav items behave like quiet buttons — pill hover + active fill, no underline */
.dt-nav__link { display: inline-flex; align-items: center; font-size: 15px; color: var(--color-text-muted); background: none; border: 0; cursor: pointer; font-family: var(--font-sans); padding: 8px 14px; border-radius: var(--radius-pill); position: relative; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.dt-nav__link:hover { color: var(--color-text); background: var(--color-surface); }
.dt-nav__link.is-current { color: var(--color-text); font-weight: var(--fw-med); background: var(--color-surface); }
.dt-nav__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.dt-nav__trigger::after { content: "›"; display: inline-block; margin-left: 6px; transform: rotate(90deg); font-size: 12px; opacity: .55; }

.dt-header__actions { display: flex; align-items: center; gap: var(--space-4); }

/* ─── Mega-menu ───────────────────────────────────────────────────── */
.dt-nav__item--mega { position: static; }
/* Stripe-style dropdown: anchored under the header, animates in, hides on leave.
   Positioned against .dt-header (sticky = containing block), centered. */
.dt-mega {
	position: absolute; top: calc(100% + 8px); left: 50%;
	transform: translateX(-50%) translateY(8px) scale(.99); transform-origin: top center;
	width: min(1040px, 94vw); background: var(--color-surface-2); border: 1px solid var(--color-border);
	border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s var(--ease);
	z-index: 50;
}
.dt-nav__item--mega:hover .dt-mega,
.dt-nav__item--mega:focus-within .dt-mega,
.dt-nav__trigger[aria-expanded="true"] + .dt-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
/* keep the trigger lit while its panel is open */
.dt-nav__item--mega:hover .dt-nav__trigger,
.dt-nav__item--mega:focus-within .dt-nav__trigger,
.dt-nav__trigger[aria-expanded="true"] { color: var(--color-text); background: var(--color-surface); }
/* caret flips up while open */
.dt-nav__item--mega:hover .dt-nav__trigger::after,
.dt-nav__trigger[aria-expanded="true"]::after { transform: rotate(-90deg); }
/* hover bridge across the 8px gap so the panel doesn't drop on the way down */
.dt-mega::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }

/* Flat grid — all modules + extensions as small uniform cards, no scroll */
.dt-mega__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: var(--space-4); }
.dt-mega__card { position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: var(--radius-md); font-size: 13px; color: var(--color-text); min-width: 0; }
.dt-mega__card:hover { background: var(--color-surface); }
.dt-mega__card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.dt-mega__card .modicon { flex: 0 0 26px; width: 26px; }
.dt-mega__card-name { font-weight: var(--fw-med); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-mega__badge { flex: 0 0 auto; margin-left: auto; }

/* Footer tweaks for fixed panel */
.dt-mega__foot { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
@media (max-width: 1024px) { .dt-mega { display: none; } }

/* ─── Badges (Pro / Hot / New / Extension) — shared mega + cards ───── */
.dt-mega__badge, .mod__badge {
	font-size: 9.5px; font-weight: var(--fw-semi); letter-spacing: .04em; text-transform: uppercase;
	padding: 2px 6px; border-radius: var(--radius-pill); line-height: 1.4; white-space: nowrap;
}
.dt-mega__badge--pro, .mod__badge--pro { background: var(--color-action); color: var(--color-on-action); }
.dt-mega__badge--hot, .mod__badge--hot { background: color-mix(in srgb, var(--mesh-coral) 30%, var(--color-surface)); color: var(--color-text); }
.dt-mega__badge--new, .mod__badge--new { background: color-mix(in srgb, var(--mesh-grass) 34%, var(--color-surface)); color: var(--color-text); }
.dt-mega__badge--extension, .mod__badge--extension { background: color-mix(in srgb, var(--mesh-indigo) 22%, var(--color-surface)); color: var(--color-text); }

/* Footer CTA bar */
.dt-mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--space-5); border-top: 1px solid var(--color-border); background: var(--color-surface); }
.dt-mega__foot-meta { font-size: 13px; color: var(--color-text-faint); }
.dt-mega__foot-link { font-size: 13px; font-weight: var(--fw-med); color: var(--color-text); }
.dt-mega__foot-link:hover { opacity: .7; }

/* ─── Mobile burger + sheet ───────────────────────────────────────── */
.dt-burger { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
.dt-burger span { width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); }
.dt-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dt-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dt-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.dt-burger:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.dt-sheet { position: fixed; inset: 64px 0 0; background: var(--color-bg); z-index: 39; overflow-y: auto; padding: var(--space-5) var(--gutter) var(--space-8); }
.dt-sheet__nav { display: flex; flex-direction: column; gap: 4px; }
.dt-sheet__link { display: flex; align-items: center; min-height: 48px; font-size: var(--text-lg); color: var(--color-text); border-bottom: 1px solid var(--color-border); }
.dt-sheet__cta { margin-top: var(--space-5); justify-content: center; }
body.dt-sheet-open { overflow: hidden; }

@media (max-width: 1024px) {
	.dt-nav, .dt-header__signin { display: none; }
	.dt-burger { display: flex; }
}
@media (min-width: 1025px) {
	.dt-sheet { display: none; }
}

/* ─── Footer — full (B3) ──────────────────────────────────────────── */
.dt-footer { background: var(--color-bg); color: var(--color-text-muted); padding: var(--space-9) 0 var(--space-7); font-size: 14px; }
.dt-footer__top { display: grid; grid-template-columns: 1.2fr 2.8fr; gap: var(--space-8); }
.dt-footer__about { margin: 16px 0 0; max-width: 34ch; color: var(--color-text-muted); line-height: var(--lh-body); font-size: var(--text-sm); }
.dt-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.dt-footer__heading { font-size: var(--text-label); font-weight: var(--fw-med); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text); background: none; border: 0; padding: 0; margin: 0 0 14px; cursor: default; font-family: var(--font-sans); text-align: left; }
.dt-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dt-footer__links a { color: var(--color-text-muted); }
.dt-footer__links a:hover { color: var(--color-text); }
.dt-footer__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 18px; margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-border); color: var(--color-text-faint); }
.dt-footer__family { color: var(--color-text-muted); }
.dt-footer__family a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
.dt-footer__family a:hover { color: var(--color-text); opacity: .8; }
.dt-footer__social { display: flex; gap: 12px; margin-top: var(--space-5); }
.dt-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: 13px; color: var(--color-text-muted); }
.dt-footer__social a:hover { color: var(--color-text); border-color: var(--gray-300); }
.dt-footer a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

@media (max-width: 1024px) {
	.dt-footer__top { grid-template-columns: 1fr; gap: var(--space-7); }
	.dt-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
	.dt-footer__cols { grid-template-columns: 1fr; gap: 0; }
	.dt-footer__col { border-bottom: 1px solid var(--color-border); }
	.dt-footer__heading { width: 100%; cursor: pointer; padding: 16px 0; margin: 0; min-height: 44px; display: flex; align-items: center; justify-content: space-between; }
	.dt-footer__heading::after { content: "+"; font-size: 18px; color: var(--color-text-faint); }
	.dt-footer__heading[aria-expanded="true"]::after { content: "−"; }
	.dt-footer__links { overflow: hidden; max-height: 0; transition: max-height var(--dur-base) var(--ease); padding-bottom: 0; }
	.dt-footer__heading[aria-expanded="true"] + .dt-footer__links { max-height: 360px; padding-bottom: 16px; }
	.dt-footer__bar { margin-top: var(--space-6); }
	.dt-footer__social { margin-left: 0; }
}

/* ─── Footer — minimal (B4) ───────────────────────────────────────── */
.dt-footer-min { background: var(--color-bg); border-top: 1px solid var(--color-border); padding: var(--space-6) 0; font-size: 14px; }
.dt-footer-min__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.dt-footer-min__links { display: flex; align-items: center; gap: 18px; color: var(--color-text-faint); }
.dt-footer-min__links a { color: var(--color-text-muted); }
.dt-footer-min__links a:hover { color: var(--color-text); }
.dt-footer-min__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }