/* Applicaa KB — public customer-facing theme.
   A faithful, self-contained port of the content repo's Astro Starlight theme
   (site/src/styles/brand.css + the Header/Sidebar/Footer/PageTitle components)
   so a visitor can't tell the customer KB moved into this Rails app.

   This is the CUSTOMER site's OWN navy "Starlight" theme — NOT the internal
   Admissions+ Design System. NO Tailwind, NO `tw-*`/DS classes, NO @import:
   Propshaft serves this file as-is. The :root token block below is ported
   VERBATIM from brand.css; everything else is rebuilt against a clean semantic
   DOM (kb-* class names) rather than Starlight's hashed `.astro-*`/`.sl-*`
   internals.

   The article body keeps BOTH `lexxy-content` (gem stylesheet — tables/code/
   figures/list spacing) and `sl-markdown-content` (our prose rules below:
   link colour, heading font, the desktop reading measure + image break-out). */

/* ──────────────────────────────────────────────────────────────────────────
   Design tokens — ported VERBATIM from brand.css `:root{…}`.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* ---------- Admissions+ DS tokens (subset used by the KB) ---------- */
  --color-primary-100: #eef2fb;
  --color-primary-200: #d6def0;
  --color-primary-300: #a7b4dc;
  --color-primary-400: #546cbd;
  --color-primary-500: #263c91;   /* navy — main brand */
  --color-primary-600: #1b2d7c;
  --color-primary-700: #172458;
  --color-primary-900: #0e1637;

  --color-secondary-500: #ec634b; /* coral — accent */

  --color-blue-100: #eaf1fe;
  --color-blue-500: #2563eb;      /* links / info — darkened from #3478f7 for WCAG-AA (5.17:1 on white, 4.60:1 on page bg) */
  --color-blue-700: #1d4ed8;

  --color-neutral-0:   #ffffff;
  --color-neutral-100: #f3f4f7;
  --color-neutral-200: #e4e7ec;
  --color-neutral-300: #d8e2e7;
  --color-neutral-400: #a6aebe;
  --color-neutral-500: #818fa7;
  --color-neutral-600: #657490;
  --color-neutral-700: #505b72;
  --color-neutral-800: #3b4354;
  --color-neutral-900: #262b36;

  /* Blue-tinted transparency — ghost buttons, row/sidebar hovers */
  --color-neutral-translucent-100: rgba(37, 58, 106, 0.08);
  --color-neutral-translucent-200: rgba(37, 58, 106, 0.12);

  --color-background: #eef2f8;     /* page bg — NEVER plain white */

  /* Text hierarchy + surfaces */
  --fg-1: var(--color-neutral-900);
  --fg-2: var(--color-neutral-800);
  --fg-3: var(--color-neutral-600);
  --fg-4: var(--color-neutral-500);
  --surface-sunk:  var(--color-neutral-100);
  --border-subtle: var(--color-neutral-200);
  --border-strong: var(--color-neutral-300);

  /* Centered content container width (hero inner + doc body + home grid all
     align to this, so the layout reads as one boxed cluster on the page bg). */
  --kb-container: 75rem;
  --kb-sidebar-w: 16.5rem;  /* left nav column (desktop) — trimmed from Starlight's 18.75rem so the card breathes */
  --kb-col-gap: 2rem;       /* column gap: sidebar ↔ content card (desktop) */

  /* Radius + elevation (navy-tinted shadows) */
  --radius:      4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --shadow-xs:  0 1px 0 rgba(23, 36, 88, 0.04);
  --shadow-sm:  0 1px 2px rgba(23, 36, 88, 0.08), 0 1px 1px rgba(23, 36, 88, 0.04);
  --shadow-md:  0 4px 12px rgba(23, 36, 88, 0.10);
  --shadow-lg:  0 12px 32px rgba(23, 36, 88, 0.18);

  /* Type — Arial everywhere (DS body font + chosen heading fallback). */
  --font-sans: Arial, 'Helvetica Neue', Helvetica, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: var(--font-sans);

  /* ---------- Legacy --kb-* aliases (kept so the markup inherits the DS). ---------- */
  --kb-navy:      var(--color-primary-700);  /* hero gradient anchor */
  --kb-navy-mid:  var(--color-primary-500);
  --kb-link:      var(--color-blue-500);
  --kb-text:      var(--fg-2);
  --kb-border:    var(--border-subtle);
  --kb-active-bg: var(--color-neutral-translucent-100);
}

/* ──────────────────────────────────────────────────────────────────────────
   Base / reset
   ────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

/* Visually-hidden but accessible (page <h1> on the splash, field labels). */
.kb-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Hero — full-width navy gradient band; inner centres to the container.
   ────────────────────────────────────────────────────────────────────────── */
.kb-hero {
  background: linear-gradient(120deg, var(--color-primary-700), var(--color-primary-500));
  padding-block: 2.75rem 3.25rem;
}
.kb-hero--home { padding-bottom: 3.5rem; }

.kb-hero__inner {
  max-width: var(--kb-container);
  margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.kb-hero__logo-link { align-self: flex-start; display: inline-block; line-height: 0; }
.kb-hero__logo { height: 1.75rem; width: auto; display: block; }

.kb-hero__greeting {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.625rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.kb-hero__sub {
  font-size: 1.125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  margin: -0.5rem 0 0;
  max-width: 60ch;
}

/* Search band — big white DS field with a navy magnifier. */
.kb-hero__search { position: relative; width: 100%; display: block; }
.kb-hero__search-input {
  width: 100%;
  height: 3.25rem;
  background: #fff;
  color: var(--fg-1);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 0 3.25rem 0 1.25rem;
  font: 1rem var(--font-sans);
}
.kb-hero--home .kb-hero__search-input { height: 3.5rem; }
.kb-hero__search-input::placeholder { color: var(--fg-3); opacity: 1; }
.kb-hero__search-input:focus-visible {
  outline: 2px solid var(--color-primary-300);
  outline-offset: 2px;
}
.kb-hero__search-btn {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-primary-500);
  cursor: pointer;
}
.kb-hero__search-btn svg { width: 20px; height: 20px; }

/* ──────────────────────────────────────────────────────────────────────────
   Breadcrumb band — full-width, page-bg strip below the hero.
   ────────────────────────────────────────────────────────────────────────── */
.kb-crumb-band { background: var(--color-background); }
.kb-breadcrumb {
  max-width: var(--kb-container);
  margin: 0 auto;
  padding: 1.15rem clamp(1rem, 4vw, 1.5rem) 0.2rem;
}
.kb-breadcrumb__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.1rem; font-size: 0.875rem; line-height: 1;
}
.kb-breadcrumb__item { display: inline-flex; align-items: center; gap: 0.1rem; }
.kb-breadcrumb__link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.5rem; margin-block: -0.3rem;
  border-radius: var(--radius);
  color: var(--color-primary-600);
  font-weight: 500; text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.kb-breadcrumb__link:hover { background: var(--color-neutral-translucent-100); color: var(--color-primary-700); }
.kb-breadcrumb__link:focus-visible {
  outline: 2px solid var(--color-primary-500); outline-offset: 1px;
  background: var(--color-neutral-translucent-100);
}
.kb-breadcrumb__home { width: 15px; height: 15px; flex: none; margin-top: -1px; }
.kb-breadcrumb__sep { width: 14px; height: 14px; flex: none; color: var(--color-neutral-400); }
.kb-breadcrumb__current { padding: 0.3rem 0.15rem; color: var(--fg-1); font-weight: 600; }

/* ──────────────────────────────────────────────────────────────────────────
   Page shells — splash (home, no sidebar) vs doc (section/show, sidebar + card)
   ────────────────────────────────────────────────────────────────────────── */
.kb-page--splash { display: block; }

/* Mobile-first doc shell: single column; the card + sidebar stack. */
.kb-page--doc { padding: 0 clamp(0.85rem, 4vw, 1.25rem); }

/* Content card — white elevated surface on the navy-tinted page (doc pages only;
   the splash main stays flat so the home cards sit straight on the page bg). */
.kb-page--doc .kb-main {
  background: var(--color-neutral-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: clip;
  margin: 1rem 0 1.5rem;
  padding: 1.5rem 1.25rem 2rem;
}

/* Mobile sidebar drawer (checkbox hack — no JS). */
.kb-nav-toggle-cb { display: none; }   /* state holder only */
.kb-nav-toggle {
  display: none;                        /* shown on mobile, hidden on desktop */
  align-items: center; gap: 0.5rem;
  margin: 0.85rem 0 0;
  padding: 0.55rem 0.9rem;
  background: var(--color-neutral-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--color-primary-600);
  font: 700 0.9rem var(--font-sans);
  cursor: pointer;
  user-select: none;
}
.kb-nav-toggle svg { width: 18px; height: 18px; }

@media (max-width: 49.99rem) {
  .kb-nav-toggle { display: inline-flex; }
  .kb-sidebar { display: none; margin-top: 0.75rem; }
  .kb-nav-toggle-cb:checked ~ .kb-sidebar { display: block; }
}

/* Desktop: boxed two-column cluster centred to the container, aligned to the
   hero/breadcrumb. The toggle disappears; the sidebar is always visible. */
@media (min-width: 50rem) {
  .kb-page--doc {
    display: flex;
    align-items: flex-start;
    column-gap: var(--kb-col-gap);
    max-width: var(--kb-container);
    margin: 0 auto;
    padding: 2.25rem clamp(1rem, 4vw, 1.5rem) 0;
  }
  .kb-nav-toggle { display: none; }
  .kb-sidebar { display: block; flex: 0 0 var(--kb-sidebar-w); width: var(--kb-sidebar-w); }
  .kb-page--doc .kb-main {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 0 1.5rem;
    padding: 2rem clamp(1.5rem, 3vw, 2.5rem) 2.5rem;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Sidebar nav — collapsible <details> groups; title links to the section landing
   ────────────────────────────────────────────────────────────────────────── */
.kb-sidebar { font-size: 0.875rem; }
.kb-nav-group + .kb-nav-group { margin-top: 0.75rem; }

.kb-nav-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  padding: 0.2rem 0.5rem;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.kb-nav-summary::-webkit-details-marker { display: none; }

.kb-nav-group-link { display: flex; flex: 1 1 auto; min-width: 0; text-decoration: none; border-radius: var(--radius); }
.kb-nav-group-title { font-size: 0.875rem; font-weight: 700; color: var(--color-blue-500); }

.kb-nav-caret { width: 1.1rem; height: 1.1rem; flex: none; color: var(--color-neutral-400); transition: transform 0.2s ease-in-out; }
.kb-nav-group[open] > .kb-nav-summary .kb-nav-caret { transform: rotate(90deg); }

.kb-nav-list { list-style: none; margin: 0.15rem 0 0; padding: 0; }
.kb-nav-list li + li { margin-top: 0.1rem; }
.kb-nav-link {
  display: block;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius);
  color: var(--fg-3);
  text-decoration: none;
  line-height: 1.4;
}
.kb-nav-link:hover { color: var(--color-primary-500); }
.kb-nav-link[aria-current="page"] {
  background: var(--kb-active-bg);
  color: var(--color-primary-600);
  font-weight: 700;
  border-radius: var(--radius);
}

/* Subsection block — plain-text label (no landing page → not a link) + its list. */
.kb-nav-sub { margin-top: 0.45rem; padding-inline-start: 0.5rem; border-inline-start: 1px solid var(--border-subtle); }
.kb-nav-sublabel {
  display: block;
  padding: 0.2rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-4);
}

/* Active top-level group → blue "you are here" panel. */
.kb-nav-group--active {
  background: var(--color-blue-100);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-md);
  padding: 0.25rem 0.75rem 0.5rem;
}
.kb-nav-group--active > .kb-nav-summary .kb-nav-group-title { color: var(--color-primary-600); }

/* ──────────────────────────────────────────────────────────────────────────
   Home — category card grid (ported VERBATIM from brand.css)
   ────────────────────────────────────────────────────────────────────────── */
.kb-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: var(--kb-container, 75rem);
  margin: 0 auto;
  padding: 2.5rem clamp(1rem, 4vw, 1.5rem) 4rem;
}
.kb-cat-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.5rem;
  text-decoration: none;
  background: var(--color-neutral-0);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, transform 0.15s;
}
.kb-cat-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .kb-cat-card { transition: none; }
  .kb-cat-card:hover { transform: none; }
}
.kb-cat-card__title { font-family: var(--font-heading); font-size: 1.125rem; line-height: 1.25; font-weight: 700; color: var(--fg-1); }
.kb-cat-card__more {
  margin-top: auto;
  align-self: flex-start;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-md);
  background: var(--color-neutral-translucent-200);
  color: var(--color-primary-500);
  font-weight: 700;
  font-size: 0.875rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   Section index — page title + a category list of articles
   ────────────────────────────────────────────────────────────────────────── */
.kb-page-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 1.25rem;
}
.kb-doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kb-doc-list__item { margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--border-subtle); }
.kb-doc-list__item:first-child { padding-top: 0; }
.kb-doc-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.kb-doc-list__link { color: var(--color-blue-500); font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.kb-doc-list__link:hover { text-decoration: underline; }
.kb-doc-list__desc { color: var(--fg-3); font-size: 0.9rem; line-height: 1.5; margin: 0.3rem 0 0; }

/* ──────────────────────────────────────────────────────────────────────────
   Article — title + prose. lexxy-content.css handles tables/code/figures/list
   spacing; these rules add the Starlight prose layer.
   ────────────────────────────────────────────────────────────────────────── */
.kb-article-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 1.25rem;
}

.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.sl-markdown-content a { color: var(--color-blue-500); text-decoration: none; }
.sl-markdown-content a:hover { text-decoration: underline; }

/* Desktop: cap prose at a readable measure but let images break out to the full
   card width (KB articles lean on wide UI screenshots). */
@media (min-width: 50rem) {
  .kb-main .sl-markdown-content > :where(p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, dl, details) {
    max-width: 75ch;
    margin-inline-end: auto;
  }
  .kb-main .sl-markdown-content > p:has(img) { max-width: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   "Was this article helpful?" widget (ported from Footer.astro / brand.css)
   ────────────────────────────────────────────────────────────────────────── */
.kb-feedback {
  margin-block-start: 3rem;
  padding-block-start: 1.5rem;
  border-top: 1px solid var(--border-subtle);
}
.kb-feedback__q { font-weight: 700; margin: 0 0 0.75rem; color: var(--fg-1); }
.kb-feedback__buttons { display: flex; gap: 0.5rem; }
.kb-feedback__btn {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-neutral-0);
  color: var(--fg-2);
  cursor: pointer;
  font: 700 1rem var(--font-sans);
}
.kb-feedback__btn:hover { border-color: var(--color-primary-300); color: var(--color-primary-600); }

/* ──────────────────────────────────────────────────────────────────────────
   Site footer (branded chrome — the per-article widget lives in the card)
   ────────────────────────────────────────────────────────────────────────── */
.kb-site-footer { border-top: 1px solid var(--border-subtle); margin-top: 2rem; background: var(--color-background); }
.kb-site-footer__inner {
  max-width: var(--kb-container);
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 1.5rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  color: var(--fg-3); font-size: 0.875rem;
}
.kb-site-footer__link { color: var(--color-blue-500); text-decoration: none; font-weight: 600; }
.kb-site-footer__link:hover { text-decoration: underline; }

/* Honour reduced-motion for the remaining transitions. */
@media (prefers-reduced-motion: reduce) {
  .kb-breadcrumb__link, .kb-nav-caret { transition: none; }
}