/* =====================================================================
   SITE-WIDE TYPOGRAPHY  (typography.css)
   One font family and one type scale for every page EXCEPT the
   admission pages (they keep admissions.css: Inter + Fraunces).

   Loaded from menu1.php / menu.php right AFTER Bootstrap, so it wins over
   Bootstrap's system-font reboot and over page-level <style> blocks.
   The header mega-menu, the full-page menu, the announcement ticker
   and the footer are left untouched.

   To change the look of the whole site, edit only the variables below.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  --site-font-body:  "Google Sans", sans-serif;
  --site-font-heading: "Google Sans", sans-serif;

  --site-fs-p:     0.9rem;  /* 15.2px  <p> paragraphs */
  --site-fs-li:    0.95rem;  /* 15.2px  <li> list items */
  --site-fs-table: 0.95rem;  /* 15.2px  <td> / <th> table cells */
  --site-fs-body:  0.95rem;  /* 15.2px  other text: <dd>, <dt>, <blockquote>, <figcaption> */
  --site-fs-h1:   2rem;      /* 32px    page title */
  --site-fs-h2:   1.625rem;  /* 26px */
  --site-fs-h3:   1rem; letter-spacing: -0.1px; /* 22px */
  --site-fs-h4:   1.2rem;    /* 19.2px */
  --site-fs-h5:   1.05rem;   /* 16.8px */
  --site-fs-h6:   1rem;      /* 16px */

  /* Bootstrap reads this for body text */
  --bs-body-font-family: var(--site-font-body);
}

@media (max-width: 767.98px) {
  :root {
    --site-fs-h1: 1.6rem;
    --site-fs-h2: 1.4rem;
    --site-fs-h3: 1.2rem;
    --site-fs-h4: 1.1rem;
    --site-fs-h5: 1rem;
  }
}

/* `:root:not(#_t)` adds ID-level weight without needing an ID in the HTML,
   so these rules beat page-level selectors (even ones marked !important).
   :where() keeps the long exclusion lists from adding extra weight.        */

/* ---------- 1. Font family: body text ----------
   Sets the page's base font (Bootstrap had replaced DM Sans with the system
   font). Elements a page deliberately styles in Playfair Display - big
   numbers, quote marks, initials - keep it; everything else inherits DM Sans. */
:root:not(#_t) body {
  font-family: var(--site-font-body) !important;
}
:root:not(#_t) body :is(button, input, select, textarea, optgroup) {
  font-family: inherit;
}

/* ---------- 2. Font family: headings ---------- */
:root:not(#_t) body
  :is(h1, h2, h3, h4, h5, h6):not(:where(.main-header *, .full-page-overlay *, .ticker *, .site-footer *)),
:root:not(#_t) body
  :is(h1, h2, h3, h4, h5, h6) :where(*):not(:where(
    .main-header *, .full-page-overlay *, .ticker *, .site-footer *,
    i, svg, svg *, .fa, .fas, .far, .fab, .fal, .fad, .fa-solid, .fa-regular, .fa-brands,
    [class^="fa-"], [class*=" fa-"], .bi, [class^="bi-"], [class*=" bi-"]
  )) {
  font-family: var(--site-font-heading) !important;
}

/* ---------- 3. Font sizes (page content only) ----------
   Not resized: side menus (.department-menu, .exam-card-officer) and the
   homepage stats strip (.stats-bar: 100+ Faculty, 3,300+ Students ...),
   which keeps its own compact sizes from menu.php.                      */
:root:not(#_t) body
  :is(p, li, td, th, dd, dt, blockquote, figcaption):not(:where(
    .main-header *, .full-page-overlay *, .ticker *, .site-footer *,
    .department-menu *, .exam-card-officer *, .stats-bar *
  )) {
  font-size: var(--site-fs-body) !important;
}

/* Paragraphs, list items and table cells each have their own variable. */
:root:not(#_t) body
  p:not(:where(
    .main-header *, .full-page-overlay *, .ticker *, .site-footer *,
    .department-menu *, .exam-card-officer *, .stats-bar *
  )) { font-size: var(--site-fs-p) !important; }
:root:not(#_t) body
  li:not(:where(
    .main-header *, .full-page-overlay *, .ticker *, .site-footer *,
    .department-menu *, .exam-card-officer *, .stats-bar *
  )) { font-size: var(--site-fs-li) !important; }
:root:not(#_t) body
  :is(td, th):not(:where(
    .main-header *, .full-page-overlay *, .ticker *, .site-footer *,
    .department-menu *, .exam-card-officer *, .stats-bar *
  )) { font-size: var(--site-fs-table) !important; }

:root:not(#_t) body :is(h1,h2,h3,h4,h5,h6):where(:not(.main-header *, .full-page-overlay *, .ticker *, .site-footer *, .department-menu *, .exam-card-officer *, .stats-bar *)):is(h1) { font-size: var(--site-fs-h1) !important; }
:root:not(#_t) body :is(h1,h2,h3,h4,h5,h6):where(:not(.main-header *, .full-page-overlay *, .ticker *, .site-footer *, .department-menu *, .exam-card-officer *, .stats-bar *)):is(h2) { font-size: var(--site-fs-h2) !important; }
:root:not(#_t) body :is(h1,h2,h3,h4,h5,h6):where(:not(.main-header *, .full-page-overlay *, .ticker *, .site-footer *, .department-menu *, .exam-card-officer *, .stats-bar *)):is(h3) { font-size: var(--site-fs-h3) !important; }
:root:not(#_t) body :is(h1,h2,h3,h4,h5,h6):where(:not(.main-header *, .full-page-overlay *, .ticker *, .site-footer *, .department-menu *, .exam-card-officer *, .stats-bar *)):is(h4) { font-size: var(--site-fs-h4) !important; }
:root:not(#_t) body :is(h1,h2,h3,h4,h5,h6):where(:not(.main-header *, .full-page-overlay *, .ticker *, .site-footer *, .department-menu *, .exam-card-officer *, .stats-bar *)):is(h5) { font-size: var(--site-fs-h5) !important; }
:root:not(#_t) body :is(h1,h2,h3,h4,h5,h6):where(:not(.main-header *, .full-page-overlay *, .ticker *, .site-footer *, .department-menu *, .exam-card-officer *, .stats-bar *)):is(h6) { font-size: var(--site-fs-h6) !important; }

/* Text nested inside a paragraph / list item / cell follows its parent
   (stops inline font-size on <span>, <a>, <strong> etc. from drifting). */
:root:not(#_t) body
  :is(p, li, td, th, dd, dt, blockquote) :is(span, a, strong, b, em, font):not(:where(
    .main-header *, .full-page-overlay *, .ticker *, .site-footer *,
    .department-menu *, .exam-card-officer *, .stats-bar *,
    i, .fa, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"], .bi, [class^="bi-"], [class*=" bi-"], .badge
  )) {
  font-size: inherit !important;
}

/* Banner titles on department pages (<h2> inside .caption-box) are the page
   title, so they use the same size as the <h1> title on every other page. */
:root:not(#_t) body .caption-box :is(h1, h2) { font-size: var(--site-fs-h1) !important; }

/* Homepage stats strip (100+ Faculty, 3,300+ Students, 15+ MoUs, 14,000+ Alumni):
   numbers and labels both 12px. */
:root:not(#_t) body .stats-bar .stat-text :is(h2, p) { font-size: 12px !important; }

/* Faculty List cards on department pages: compact sizes. */
:root:not(#_t) body .faculty-card h5 { font-size: 14px !important; }
:root:not(#_t) body .faculty-card p,
:root:not(#_t) body .faculty-card p :is(i, b, strong, span, a) { font-size: 12px !important; }