/* ============================================================
   Base — reset, typography, layout primitives, semantic defaults
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;          /* respects user's browser font-size */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* clearance for sticky header */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--ff-serif);
  font-size: var(--fs-200);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[lang="or"] body, [lang="or"] {
  font-family: var(--ff-or), var(--ff-serif);
}
[lang="hi"] body, [lang="hi"] {
  font-family: var(--ff-hi), var(--ff-serif);
}

/* Block elements set in body's serif by default */
p, li, dd, dt, blockquote, figcaption, td, th, label, input, textarea, select {
  font-family: inherit;
}

/* Headings — display serif, tight leading */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--c-text);
  margin: 0 0 var(--sp-4) 0;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-700); margin-top: 0; }
h2 { font-size: var(--fs-600); margin-top: var(--sp-12); }
h3 { font-size: var(--fs-500); margin-top: var(--sp-8); }
h4 { font-size: var(--fs-400); margin-top: var(--sp-6); }
h5 { font-size: var(--fs-300); margin-top: var(--sp-4); }
h6 { font-size: var(--fs-200); margin-top: var(--sp-4); text-transform: uppercase; letter-spacing: 0.04em; }

/* Sans-serif overrides for UI surfaces */
.u-sans, nav, .breadcrumb, .utility-bar, .quick-links, .meta, button, .btn, label, .badge {
  font-family: var(--ff-sans);
}

/* Paragraphs */
p {
  margin: 0 0 var(--sp-4) 0;
  max-width: var(--content-prose);
}

p.lead {
  font-size: var(--fs-300);
  line-height: var(--lh-loose);
  color: var(--c-text-muted);
}

/* Links */
a {
  color: var(--c-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-150) var(--ease-out);
}

a:visited { color: var(--c-link-visited); }

a:hover {
  color: var(--c-link-hover);
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

/* External link annotation — added by core.js to off-domain links */
a[data-external="true"]::after {
  content: " ↗";
  font-family: var(--ff-sans);
  font-size: 0.85em;
  vertical-align: 0.05em;
  color: currentColor;
  speak: none;
}

a[data-file]::after {
  content: " (" attr(data-file) ")";
  font-family: var(--ff-sans);
  font-size: 0.82em;
  color: var(--c-text-muted);
  font-weight: 400;
}

/* Lists */
ul, ol { padding-left: var(--sp-6); margin: 0 0 var(--sp-4) 0; }
ol > li::marker { color: var(--kp-aal); font-weight: 700; }
li { margin-bottom: var(--sp-2); }
li > ul, li > ol { margin-top: var(--sp-2); }

/* Definition lists — used on revaluation, faculty profiles, hero stats.
   Browser default gives `dd` a 40px inline-start margin which reads as
   inconsistent indentation when terms are short. Normalise the offset
   and add term/definition rhythm. Component-level selectors
   (`.hero__stat dt`, `.stat-tile dt`, etc.) override on specificity. */
dl { margin: 0 0 var(--sp-4) 0; }
dl > dt { font-weight: 700; }
dl > dd + dt { margin-top: var(--sp-3); }
dl > dd { margin: 0 0 var(--sp-2) var(--sp-4); }

/* Tables — disciplined, GIGW table pattern */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-6) 0;
  font-size: var(--fs-100);
}

caption {
  text-align: left;
  font-weight: 600;
  margin-bottom: var(--sp-2);
  color: var(--c-text);
  font-family: var(--ff-sans);
}

th, td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-rule);
  vertical-align: top;
}

th {
  background: var(--kp-tussar);
  font-weight: 600;
  font-family: var(--ff-sans);
  border-bottom: 2px solid var(--kp-rule-strong);
  color: var(--kp-ebony);
}

tbody tr:nth-child(even) {
  background: var(--kp-tussar-soft);
}

/* Code */
code, pre {
  font-family: var(--ff-mono);
  font-size: 0.92em;
}

code {
  background: var(--kp-tussar);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

pre {
  background: var(--kp-tussar);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  border-left: 3px solid var(--kp-aal);
}

/* Blockquote */
blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-6);
  border-left: 4px solid var(--kp-aal);
  background: var(--kp-tussar-soft);
  font-style: italic;
  font-family: var(--ff-display);
  font-size: var(--fs-300);
  color: var(--c-text);
}

blockquote cite {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-100);
  font-style: normal;
  font-family: var(--ff-sans);
  color: var(--c-text-muted);
}

blockquote cite::before { content: "— "; }

/* HR — Kotpad zigzag motif rule */
hr {
  border: 0;
  height: 24px;
  margin: var(--sp-10) 0;
  background-image: url("../img/motifs/divider-kotpad.svg");
  background-repeat: repeat-x;
  background-position: center;
  background-size: contain;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  margin: var(--sp-6) 0;
}

figcaption {
  font-size: var(--fs-100);
  color: var(--c-text-muted);
  margin-top: var(--sp-2);
  font-family: var(--ff-sans);
  line-height: var(--lh-snug);
}

/* Forms */
label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--sp-2);
  color: var(--c-text);
  font-family: var(--ff-sans);
  font-size: var(--fs-100);
}

label.required::after {
  content: " *";
  color: var(--kp-aal);
  font-weight: 700;
}

input, textarea, select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-200);
  font-family: var(--ff-sans);
  background: var(--c-bg);
  color: var(--c-text);
  border: 2px solid var(--kp-rule-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-150) var(--ease-out);
  min-height: 48px;
}

/* Native checkboxes and radios are not text inputs — reset the rule
   above so they take their intrinsic size, then size them up for
   reliable tap targets on touch devices. The wrapping label gets
   the actual hit area (see .filter-bar fieldset label). */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-width: 1px;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: none;
  accent-color: var(--kp-aal);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--kp-indigo);
  box-shadow: var(--focus-ring);
}

input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--kp-aal);
}

.field-error {
  display: block;
  margin-top: var(--sp-2);
  color: var(--kp-aal);
  font-size: var(--fs-100);
  font-family: var(--ff-sans);
}

.field-help {
  display: block;
  margin-top: var(--sp-2);
  color: var(--c-text-muted);
  font-size: var(--fs-100);
  font-family: var(--ff-sans);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-200);
  font-weight: 600;
  font-family: var(--ff-sans);
  background: var(--kp-aal);
  color: var(--kp-paper);
  border: 2px solid var(--kp-aal);
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-150) var(--ease-out),
              border-color var(--dur-150) var(--ease-out),
              color var(--dur-150) var(--ease-out);
}

.btn:hover, .btn:focus-visible {
  background: var(--kp-aal-deep);
  border-color: var(--kp-aal-deep);
  color: var(--kp-paper);
  text-decoration: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn--secondary {
  background: transparent;
  color: var(--kp-aal);
}

.btn--secondary:hover, .btn--secondary:focus-visible {
  background: var(--kp-aal);
  color: var(--kp-paper);
}

.btn--ghost {
  background: transparent;
  color: var(--kp-ebony);
  border-color: var(--kp-rule-strong);
}

.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--kp-tussar);
  color: var(--kp-ebony);
  border-color: var(--kp-ebony);
}

/* Skip link — first focusable element on every page */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  background: var(--kp-ebony);
  color: var(--kp-paper);
  font-family: var(--ff-sans);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: top var(--dur-150) var(--ease-out);
}

.skip-link:focus {
  top: var(--sp-4);
  color: var(--kp-paper);
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* Visually hidden but available to screen readers */
.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;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Layout primitives */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}

.container--wide {
  max-width: var(--content-wide);
}

.container--prose {
  max-width: var(--content-prose);
}

.section {
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
}

.section--tight {
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}

.section--warm {
  background: var(--c-bg-warm);
}

.section--deep {
  background: var(--c-bg-deep);
}

.section--ebony {
  background: var(--kp-ebony);
  color: var(--kp-tussar);
}

.section--ebony h1, .section--ebony h2, .section--ebony h3, .section--ebony h4 {
  color: var(--kp-tussar);
}

.section--ebony a {
  color: var(--kp-turmeric);
}

.section--ebony a:hover {
  color: var(--kp-tussar);
}

/* Grid utilities */
.grid {
  display: grid;
  gap: var(--sp-6);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.flow > * + * {
  margin-top: var(--sp-4);
}

.flow-loose > * + * {
  margin-top: var(--sp-6);
}

/* Eyebrow — small caps label above headings */
.eyebrow {
  font-family: var(--ff-sans);
  font-size: var(--fs-100);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--kp-aal);
  margin-bottom: var(--sp-3);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.15rem var(--sp-3);
  font-size: var(--fs-50);
  font-weight: 600;
  font-family: var(--ff-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--kp-aal-tint);
  color: var(--kp-aal-deep);
  border-radius: var(--radius-pill);
}

.badge--indigo {
  background: #E5EBF4;
  color: var(--kp-indigo-deep);
}

.badge--forest {
  background: #E5EAE3;
  color: var(--kp-forest);
}

.badge--turmeric {
  background: #F8EAD0;
  color: var(--kp-turmeric-deep);
}

/* Card */
.card {
  background: var(--c-bg);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color var(--dur-150) var(--ease-out),
              transform var(--dur-150) var(--ease-out),
              box-shadow var(--dur-150) var(--ease-out);
}

.card:hover, .card:focus-within {
  border-color: var(--kp-aal);
  box-shadow: var(--shadow-md);
}

.card h3 {
  margin-top: 0;
}

.card a.stretched::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card--has-link {
  position: relative;
}

/* Breadcrumb */
.breadcrumb {
  font-size: var(--fs-100);
  color: var(--c-text-muted);
  font-family: var(--ff-sans);
  margin: var(--sp-4) 0;
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.breadcrumb li {
  margin: 0;
}

.breadcrumb li + li::before {
  content: " › ";
  margin-right: var(--sp-2);
  color: var(--kp-rule-strong);
}

.breadcrumb a {
  color: var(--c-link);
}

.breadcrumb [aria-current="page"] {
  color: var(--c-text);
  font-weight: 600;
}

/* Last-updated stamp — GIGW requirement */
.last-updated {
  font-size: var(--fs-50);
  color: var(--c-text-muted);
  font-family: var(--ff-sans);
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px dotted var(--c-rule);
}

/* Page hero — used at top of section landing pages */
.page-hero {
  background: var(--c-bg-deep);
  padding: var(--sp-12) 0 var(--sp-10);
  border-bottom: 3px solid var(--kp-aal);
  position: relative;
  overflow: hidden;
}

.page-hero h1 {
  margin: 0 0 var(--sp-3);
  max-width: 36rem;
}

.page-hero .lead {
  margin: 0;
  max-width: 42rem;
  color: var(--c-text-muted);
}

.page-hero::after {
  content: "";
  position: absolute;
  right: -2rem;
  bottom: -2rem;
  width: 14rem;
  height: 14rem;
  background-image: url("../img/motifs/medallion.svg");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.10;
  pointer-events: none;
}

/* Visually-hidden h1 for pages where the hero already shows the title */
.page-hero h1.compact { font-size: var(--fs-700); }

/* ============================================================
   Mobile typography pass.
   Display sizes scale down; body line-heights tighten so prose
   columns don't sprawl into "infinite scroll" territory at 375px.
   ============================================================ */
@media (max-width: 720px) {
  h1 { font-size: var(--fs-600); margin-bottom: var(--sp-3); }
  h2 { font-size: var(--fs-500); margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
  h3 { font-size: var(--fs-400); margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
  h4 { font-size: var(--fs-300); }

  p { line-height: 1.55; margin-bottom: var(--sp-3); }
  p.lead { font-size: var(--fs-300); line-height: 1.5; }

  .page-hero { padding: var(--sp-6) 0 var(--sp-5); }
  .page-hero h1 { font-size: var(--fs-700); line-height: 1.1; }
  .page-hero .lead { font-size: var(--fs-200); line-height: 1.5; }


  ul, ol { margin-bottom: var(--sp-3); }
  li { line-height: 1.55; }

  /* Tables: smaller cells on mobile to avoid horizontal scroll.
     Long email addresses, URLs, and inline links break onto the next
     line rather than overflowing the row. */
  table { font-size: var(--fs-100); }
  th, td { padding: var(--sp-2); }
  th, td { word-break: break-word; overflow-wrap: anywhere; }
  td a { word-break: break-all; }

  /* Card grids stack to a single column on mobile; bump the gap so
     stacked cards read as separate items rather than a continuous
     wall. Affects current-students, faculty, alumni, prospective,
     and every other `.grid` consumer. */
  .grid { gap: var(--sp-8); }
}

@media (max-width: 480px) {
  h1 { font-size: var(--fs-500); }
  h2 { font-size: var(--fs-400); margin-top: var(--sp-6); }
  h3 { font-size: var(--fs-300); margin-top: var(--sp-4); }
  .hero h1 { font-size: 1.875rem; line-height: 1.1; }
  .page-hero h1 { font-size: var(--fs-500); line-height: 1.15; }
}

/* Selection */
::selection {
  background: var(--kp-aal);
  color: var(--kp-paper);
}

/* Print stylesheet: government offices print everything. */
@media print {
  body {
    background: white;
    color: black;
    font-size: 11pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .site-header, .site-footer, .accessibility-toolbar, .skip-link, .notice-ticker, .quick-links, .quick-strip, .gov-bar, .audience-bar, .consent-banner, .reading-ruler, .emergency-alert, .a11y-panel, nav, .btn { display: none !important; }
  a { color: black; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.9em; }
  h1, h2, h3 { page-break-after: avoid; }
  table, figure, blockquote { page-break-inside: avoid; }
  .container { max-width: none; padding: 0; }

  /* Crest watermark on every printed / saved-as-PDF page.
     The 10% opacity is baked into the SVG asset itself so it
     survives Chrome's --print-to-pdf multi-page rendering, where
     a CSS-opacity'd position:fixed pseudo-element paints only on
     the first page. background-attachment: fixed makes the image
     repeat at the same position on every printed page. */
  body {
    background-image: url('/VDU2026/assets/img/vdu-watermark.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% auto;
    background-attachment: fixed;
  }
  /* Pages that opt out of the watermark add this class on body. */
  body.no-watermark { background-image: none; }
}