/* Direction D, the shared chrome: type, colour tokens, the restyled site header and footer, focus.
   Loaded by every page in the D design (templates/index.html, templates/biseda.html), before the page's own
   stylesheet. The page sets class "d" on <html>; the page's own stylesheet adds what is particular to it
   (the home's header floats over the sky; Bisedo's sits on white). One source for what the pages share.
   Type: Instrument Serif for what is said, Geist for what is used (both OFL, subset with Albanian's ë, ç and
   the combining accents; files in static/fonts/v1/). */
@font-face { font-family: "Instrument Serif"; src: url(/static/fonts/v1/instrument-serif-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/static/fonts/v1/instrument-serif-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url(/static/fonts/v1/geist-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

.d {
  --navy: #0B1530; --navy-2: #3A4766; --cobalt: #1B4FA8; --gold: #8F6209; --poppy: #B3122E;
  --mist: #F1F5FA; --line: #DCE3EC;
  --display: "Instrument Serif", "Times New Roman", serif;
  --ui: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font-serif: var(--display); --font-sans: var(--ui);   /* brand.css components (dialogs, panels) speak D's type here */
}
/* The document itself is white too: brand.css paints <html> cream, which showed below a short page's footer
   (e.g. /verify) and in the overscroll bounce on every D page. */
html.d { background: #fff; }
.d body { background: #fff; color: var(--navy); font: 400 17px/1.6 var(--ui); letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; }
.hd-wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 960px) { .hd-wrap { padding: 0 48px; } }
.d :focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 8px; }
.hd-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 500 16px/1.3 var(--ui); color: var(--navy-2); }
.hd-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }

/* ── Header (the base markup, restyled) ── */
.d .site-header-inner { max-width: 1320px; margin: 0 auto; padding: 0 16px; min-height: 64px; }
@media (min-width: 960px) { .d .site-header-inner { padding: 0 48px; } }
.d .brand-mark .wordmark { font: 400 30px/1 var(--display); letter-spacing: -0.01em; color: var(--navy); }
.d .brand-mark .mark { width: 32px; height: 30px; }
.d .nav-service { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; font: 500 16px var(--ui); color: var(--navy-2); }
.d .nav-service:hover { color: var(--navy); }
/* Six services fit beside the mark, "Aa" and the language switch from 900 px: tighter between 900 and 1099 px (with
   the travel kit's link the header ran 71 px wide at 900; the menu takes over below 900, brand.css). */
@media (min-width: 900px) and (max-width: 1099px) { .d .nav-service { padding: 0 10px; font-size: 15px; } }
.d .nav-service.is-active { background: var(--navy); color: #fff; }
.d .nav-service.is-active::after { display: none; }
.d .beta-tag { font: 600 11px var(--ui); letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: 2px 7px; margin-left: 8px; }
.d .nav-service.is-active .beta-tag { color: rgba(255,255,255,.86); }   /* the page's own pill: legible on navy */
.d .site-lang { background: rgba(255,255,255,.6); border: 0; border-radius: 999px; padding: 3px; }
.d .site-lang a { min-width: 44px; min-height: 44px; display: grid; place-items: center; border: 0; border-radius: 999px; font: 600 14px var(--ui); color: var(--navy); }
.d .site-lang a + a { border: 0; }
.d .site-lang a[aria-current="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(11,21,48,.14); }
.d .nav-toggle { background: rgba(255,255,255,.6); border: 0; border-radius: 999px; }

/* ── "Kujt i shkruani?" / "Kujt i flet?" (_audience_picker.html; the translator's and Bisedo's) ── */
.d .aud-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.d .aud-q { flex-basis: 100%; margin: 0 0 2px; font: italic 400 21px var(--display); color: var(--navy); }
.d .aud-chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.85); color: var(--navy); font: 500 16px var(--ui); cursor: pointer; }
.d .aud-chip:hover { border-color: var(--navy); }
.d .aud-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.d .aud-more { margin-top: 10px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.9); border: 1px solid rgba(11,21,48,.07); }

/* ── Footer (the base markup, restyled) ── */
.d footer { margin-top: 0; padding: 28px 0 40px; background: #fff; border-top: 1px solid var(--line); }
.d footer .footer-links a, .d footer .footer-links .footer-install-link { color: var(--navy-2); }
.d .brand-footer-tagline { font: italic 400 22px var(--display); color: var(--navy); }