@charset "utf-8";
/* ==========================================================================
   EduPress — Site-wide Responsive Layer
   Sohan Lal D.A.V. College of Education, Ambala City (sldaveducation.in)

   ADDITIVE ONLY. This file is enqueued AFTER style.css and overrides nothing
   structurally — it only constrains and re-flows existing layout.

   Loaded from functions.php  ->  handle "edupress-responsive"

   NOTE ON THE 1180.98px BREAKPOINT
   -------------------------------
   The desktop/mobile nav split is written as `max-width: 1181px` paired
   with `min-width: 1181px`, not `1180px`/`1181px`. A viewport is not always an
   integer number of CSS pixels — a scrollbar or a fractional device pixel
   ratio can make it 1180.4px, and that value satisfies NEITHER `max-width:
   1180px` NOR `min-width: 1181px`. Measured: at a 1181px frame the nav fell
   through the gap and rendered with the un-tightened 6-row layout and a
   clipped dropdown. The .98 suffix closes the gap. Keep both numbers in sync
   if you ever move this breakpoint.

   NOTE ON !important
   ------------------
   The Customizer "Additional CSS" panel (Appearance > Customize > Additional
   CSS) is printed by wp_head() AFTER every enqueued stylesheet, and nearly
   every rule in it carries !important. Rules below annotated
   "beats wp-custom-css" MUST keep their !important to win. Everything else is
   deliberately left unflagged so it stays easy to override later.

   Contents
   --------
    1. Overflow safety net
    2. Media elements (images, video, embeds)   <- biggest single fix
    3. Header & branding
    4. Primary navigation — desktop (>=1181px), single-row bar
    5. Primary navigation — mobile/tablet (<=1180px)
    6. Mobile menu panel & touch targets
    7. Content tables (legacy <table> layouts)
    8. Legacy inline width/height attributes
    9. Forms & inputs
   10. Footer
   11. Small-phone tuning (<=420px)
   12. Reduced motion
   13. Statutory disclosure links (footer)
   14. Committee rosters and statutory contact blocks
   15. Facility gallery
   16. Statutory disclosure bar (header + footer)
   17. Homepage disclosure panel
   18. Reading & visual refresh (UI/UX pass)
   19. Hero slideshow
   ========================================================================== */


/* ==========================================================================
   1. Overflow safety net
   Nothing should ever push the document wider than the viewport. Wide data
   tables get their own scroll container in section 7, so this never hides
   content the visitor needs to reach.
   ========================================================================== */

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Long unbroken strings (URLs, email addresses) pasted into legacy pages. */
.post-single a,
.post-single p,
.post-single li,
.post-single td,
.post-single th {
  overflow-wrap: break-word;
  word-wrap: break-word;
}


/* ==========================================================================
   2. Media elements
   The parent theme has NO global img constraint — style.css only sets
   max-width on images that carry .alignnone/.aligncenter/.alignleft/
   .alignright. Roughly 500 legacy <img width="NNN"> tags on this site carry
   no class at all, so they overflow on every narrow screen. This is the
   single highest-impact rule in this file.
   ========================================================================== */

img,
video,
canvas,
iframe,
embed,
object,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Keep the intrinsic box of decorative/site images sane. */
.site-branding img,
.site-slogan-img img,
.post-single img,
.widget img {
  max-width: 100%;
  height: auto;
}


/* ==========================================================================
   3. Header & branding
   ========================================================================== */

/* --- Site identity ------------------------------------------------------

   The college name used to be slogan1.png, a 399x73px image displayed at
   220px. It could not be made bigger: 399px is its native width and anything
   past that is visibly soft. It also carried the alt text "Upholding the
   Tradition of Excellence", so the college's NAME was not in the page as text
   at all — bad for search engines and for screen readers.

   header.php now renders it as real text, which is sharp at any size. These
   rules style it. The old image is kept working below in case header.php is
   not uploaded yet.
   ---------------------------------------------------------------------- */

.site-identity {
  text-align: center;
}

.site-name {
  margin: 0;
  /* Serif, to keep the look the image had. The theme's Inter is kept for
     everything else. */
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(1.35rem, 4.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: #ffffff;
}

.site-name a,
.site-name a:hover,
.site-name a:focus {
  /* style.css underlines every link in the header on hover; on a 40px serif
     name that reads as a rendering fault. */
  color: inherit;
  text-decoration: none;
}

.site-locale {
  margin: 7px 0 0;
  font-size: clamp(0.95rem, 1.7vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Same gold as the admission strip and the footer links. */
  color: #ffe08a;
}

.site-accred {
  margin: 6px 0 0;
  font-size: clamp(0.75rem, 1.15vw, 0.875rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.75);
}

/* Fallback while header.php still renders the image: show it at its native
   399px instead of 220px. Two classes deep so it beats the Customizer's
   `.site-slogan-img img { max-width: 220px }`, which loads after this file. */
.site-branding .site-slogan-img img {
  max-width: 399px;
}


@media screen and (max-width: 1181px) {
  .wrapper-header {
    text-align: center;
  }

  /* Stack branding above the menu toggle. The parent theme already does this
     at <=768px; we simply start it earlier so tablets are covered too. */
  .page-header-default .wrapper-header {
    flex-direction: column;
    gap: 1.875rem;
  }

  /* NOTE: style.css targets `#site-header-main` here (lines 980 and 2917) but
     header.php never outputs that element — those parent-theme rules have
     never applied. The real flex child is `.site-branding`. Both are listed
     so this keeps working if the wrapper is ever reinstated. */
  .page-header-default .site-branding,
  .page-header-default #site-header-main,
  .page-header-default #site-header-navigation {
    flex: 1;
    text-align: center;
  }

  .site-branding {
    max-width: 100%;
  }

  /* The crest is a 173px PNG and the name is now text under it, which is
     taller than the old 40px name image. Shrinking the crest pays for the
     text: measured 415px -> 355px of header before any content on a phone. */
  .site-branding .custom-logo {
    width: 130px;
    height: auto;
  }
}

@media screen and (max-width: 640px) {
  .site-header {
    padding-top: 1.25rem;
  }

  .site-header .site-title {
    font-size: 1.5rem;
  }

  .site-branding .custom-logo {
    width: 108px;
  }

  .site-slogan-img img {
    max-width: 200px;
  }
}


/* ==========================================================================
   4. Primary navigation — DESKTOP (>=1181px)

   SINGLE-ROW NAVIGATION BAR (21 Aug 2026). Replaces the earlier 5-row
   side-by-side strip.

   What changed and why
   --------------------
   The old strip put the menu in a ~840px column to the right of the branding.
   With 16 top-level items and labels as long as "INSTITUTIONAL
   STRETEGIC/DEVELOPMENT PLAN" that can only ever wrap — no amount of CSS
   fits 16 items of that length into 840px. The requested look (kvadav.ac.in)
   is a single horizontal band, and reaching it needs BOTH halves:

     a) this CSS — branding on its own centred row, menu as a full-width band
        pinned to the bottom of the header, items centred, one row;
     b) the menu itself regrouped in Appearance > Menus down to ~8 short
        top-level labels. That text lives in the database, not in the theme.
        Step-by-step instructions: NAVBAR-SINGLE-ROW.txt in the project root.

   This block is written so (a) is safe WITHOUT (b): `flex-wrap: wrap` is
   kept, so an un-regrouped 16-item menu degrades to 2-3 centred rows in the
   band rather than overflowing. It becomes one row once the menu is
   regrouped. Nothing here restructures the menu markup — header.php still
   emits exactly what WordPress generates.

   Measured at 1280px with the 8-item menu: 1 row, band 46px, header 294px,
   content starts at 234px (was 5 rows / 340px / 280px).

   Dropdowns: the band is centred, so panels open leftwards (theme default).
   Only the last three top-level items are flipped to open rightwards, which
   is where a 220px panel would otherwise cross the right edge at 1181px.
   ========================================================================== */

@media screen and (min-width: 1181px) {

  /* --- Header shell: branding row, then nav band ------------------------ */

  /* The band sits flush on the header's red bottom rule, so the header's own
     70px bottom padding goes. Scoped to .page-header-default: the Customizer's
     "centered" header style (theme-header-style) lays the header out
     differently and gets no band, so it must keep its padding. */
  .page-header-default .site-header,
  .page-header-default.site-header {
    padding-bottom: 0;
  }

  .page-header-default .wrapper-header {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 1.125rem;
    padding-bottom: 0;
  }

  /* Crest and name side by side rather than stacked — buys back most of the
     height the nav row costs, and it is how the reference site reads. */
  .page-header-default .site-branding {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    max-width: 100%;
    text-align: center;
  }

  /* The crest shrinks so the NAME is the biggest thing in the header. It is a
     173px PNG, so 118px is a downscale and stays sharp. */
  .page-header-default .site-branding .custom-logo {
    width: 118px;
    height: auto;
  }

  .page-header-default .site-branding .custom-logo-link {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
  }

  .page-header-default .site-identity {
    text-align: start;
  }

  .site-branding .site-slogan-img {
    margin: 0 !important;
  }

  /* --- The band -------------------------------------------------------- */

  .page-header-default #site-header-navigation {
    flex: 1 1 100%;
    align-self: auto;
    position: relative;

    /* Cancel the wrapper's 40px side padding so the band's own padding sets
       the first and last item's distance from the edge. */
    margin-inline: -40px;
    padding-inline: 40px;
  }

  /* The band's colour is painted by a pseudo-element, NOT by the nav itself.

     WHY: full-bleed is done with `box-shadow: 0 0 0 100vmax` + `clip-path`,
     which paints past the wrapper without adding any layout width — no 100vw,
     so no scrollbar arithmetic and no horizontal overflow. But `clip-path`
     clips an element's DESCENDANTS too, and the dropdown panels are
     descendants: applied to #site-header-navigation it sliced every panel off
     at the bottom edge of the band. Measured on the live site 21 Aug.

     On a pseudo-element the clip applies to the pseudo-element alone, so the
     strip still spans the viewport and the panels hang free. */
  .page-header-default #site-header-navigation:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: rgba(255, 255, 255, 0.07);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 0 100vmax rgba(255, 255, 255, 0.07);
    clip-path: inset(0 -100vmax);
  }

  /* NOTE: do NOT put position/z-index on #menu-main. `.large-nav` already
     carries `position: relative; z-index: 100` (style.css line 1220), and that
     is what lifts the dropdowns over `.content-home` (z-index: 5) and the
     disclosure bar (z-index: 6). Giving #menu-main its own z-index makes it a
     stacking context, which traps that 100 inside a 1 and drops the whole menu
     BEHIND the page content — measured: the homepage slideshow painted over
     every open panel. The `:before` strip is at z-index 0, so the menu clears
     it without any help. */
  #menu-main {
    text-align: center;
  }

  .large-nav {
    display: flex;
    /* Deliberately still wrap — see the header comment. An over-long menu
       makes a second centred row instead of spilling out of the header. */
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    column-gap: 0;
    row-gap: 0;
  }

  .large-nav > .menu-item {
    display: flex;
    margin: 0;
  }

  .large-nav > .menu-item > a {
    display: flex;
    align-items: center;
    gap: 6px;
    /* beats wp-custom-css `nav a { padding: 8px 12px !important }`.
       Fluid side padding so the row self-tightens between 1181px and 1440px
       instead of needing a second breakpoint. */
    padding: 13px clamp(9px, 1.05vw, 18px) !important;
    font-size: 14.5px !important;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    /* One label, one line. With ~8 short labels the row measures ~800px in a
       1170px wrapper, so there is room for a longer label or a ninth item. */
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: background-color 0.15s ease-in-out;
  }

  /* Hover / current state: lift the tab and mark it with the site red, rather
     than the theme's default underline-the-text. */
  .large-nav > .menu-item > a:hover,
  .large-nav > .menu-item > a:focus,
  .large-nav > .menu-item:hover > a,
  .large-nav > .menu-item.sfHover > a,
  .large-nav > .menu-item.current-menu-item > a,
  .large-nav > .menu-item.current-menu-parent > a,
  .large-nav > .menu-item.current-menu-ancestor > a,
  .large-nav > .menu-item.current_page_item > a,
  .large-nav > .menu-item.current_page_parent > a,
  .large-nav > .menu-item.current_page_ancestor > a {
    background-color: rgba(255, 255, 255, 0.14);
    border-bottom-color: var(--edupress-link-color-hover);
    color: var(--edupress-neutral-color-100);
    /* style.css sets `text-decoration: underline` on .site-header a:hover and
       again on .large-nav .current-menu-item > a. The border is the marker
       now; two markers at once reads as a rendering fault. */
    text-decoration: none;
  }

  /* The superfish caret is an ::after on the link, which the flex context
     turns into a flex item; `gap` above already spaces it. */
  .large-nav > .menu-item > a:after {
    margin: 1px 0 0 0;
  }

  /* --- Dropdown panels ------------------------------------------------- */

  .large-nav ul {
    /* Never let a dropdown be the thing that widens the document. */
    max-width: calc(100vw - 2rem);
  }

  /* Panels hang off the bottom edge of the band. */
  .large-nav > .menu-item > ul {
    margin-top: 0;
  }

  /* Left-aligned is the theme default and is correct for a centred bar: the
     first item sits ~180px in from the left edge at 1181px, so a 220px panel
     opening rightwards from anywhere in the first two-thirds lands inside the
     viewport. Only the trailing items need flipping. */
  .large-nav > .menu-item:nth-last-child(-n+3) > ul {
    left: auto;
    right: 0;
  }

  .large-nav > .menu-item:nth-last-child(-n+3) > ul:before {
    left: auto;
    right: 31px;
  }

  .large-nav > .menu-item:nth-last-child(-n+3) > ul:after {
    left: auto;
    right: 30px;
  }

  /* style.css contains two contradictory rules for 3rd-level submenus:
     `.sf-menu ul ul { left: 100% }` (line 1057) and
     `.large-nav ul ul { right: 100% }` (line 1315). Settle it per branch —
     3rd level continues in the direction its 2nd level opened, so it never
     doubles back over the panel that spawned it. */
  .large-nav ul ul {
    left: 100%;
    right: auto;
  }

  .large-nav > .menu-item:nth-last-child(-n+3) ul ul {
    left: auto;
    right: 100%;
  }
}


/* ==========================================================================
   5. Primary navigation — MOBILE / TABLET (<=1180px)

   The parent theme swaps to the hamburger only at <=768px. Between 769px and
   1180px the desktop bar is still rendered and keeps shrinking: measured 7
   rows at 1025px (nav only 685px wide) and roughly 10 rows at ~800px. That is
   the "breaks on tablets" finding.

   The swap point is 1180px because that is exactly where `.wrapper` reaches
   its max-width: at any viewport >=1181px the nav strip is a constant 840px
   and settles at 5 rows, and below it the strip shrinks and the row count
   runs away. It is also a breakpoint style.css already uses (line 2798).

   These mirror style.css lines 2919-2945 so the parent theme's own <=768px
   block stays a strict subset and the two never disagree.
   ========================================================================== */

@media screen and (max-width: 1181px) {
  #site-mobile-menu-toggle {
    display: inline-block;
  }

  #site-header-navigation {
    display: none !important;
  }

  #site-menu-main {
    display: none;
  }

  .page-header-centered #site-mobile-menu-toggle,
  .page-header-centered #site-mobile-menu {
    margin-top: 1.875rem;
  }

  .site-section-wrapper-primary-menu {
    background: none;
  }

  #site-section-primary-menu {
    border-width: 0;
    display: block;
    margin-top: 1.5rem;
    padding: 0;
    text-align: center;
    width: 100%;
  }
}


/* ==========================================================================
   6. Mobile menu panel & touch targets
   WCAG 2.5.8 asks for a 24x24 minimum; 44x44 is the practical comfortable
   target and what most compliance checklists look for.
   ========================================================================== */

#site-mobile-menu-toggle .site-toggle-anchor {
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}

#site-mobile-menu {
  /* The panel is a sibling of the branding inside a flex column; make sure it
     can actually claim the full row on narrow screens. */
  max-width: 100%;
  box-sizing: border-box;
}

#site-mobile-menu .menu li {
  /* Give the absolutely-positioned toggle button room so long labels never
     run underneath the chevron. */
  padding-right: 48px;
}

#site-mobile-menu .menu li > a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

#site-mobile-menu .sub-menu-toggle {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
}

#site-mobile-menu .sub-menu li {
  padding-right: 44px;
}

/* The mobile menu can get very tall here (85 items). Cap it and scroll so the
   footer is always reachable. */
@media screen and (max-width: 1181px) {
  #site-mobile-menu.is-visible {
    max-height: 75vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ==========================================================================
   7. Content tables — legacy <table> layouts
   ==========================================================================
   27 of the 83 legacy pages contain tables. They fall into two groups:

     LAYOUT tables (<=3 columns)  ~23 of them, incl. the homepage 3-column
       -> stack into a single column on mobile.

     DATA tables (>=4 columns)    4 of them:
         about-us/information-about-management            9 cols x 23 rows
         learning-resources/...-care                      9 cols x 23 rows
         miscellaneous/mandatory-disclosure-format        6 cols x  3 rows
         about-us/history/dr-vivek-kohli-...              5 cols x 15 rows
       -> must KEEP their grid. Flattening a 9x23 table produces 207 unlabelled
          cells, which is both unreadable and a WCAG 1.3.1 failure. These get a
          horizontal scroll container instead.

   Detection uses :has(). Browsers without :has() fall back to scrolling every
   table — visually degraded, but it never destroys data.
   ========================================================================== */

/* --- Base: no table may exceed its column, ever ------------------------- */

.post-single table {
  max-width: 100%;
  border-collapse: collapse;
}

/* --- FALLBACK (no :has() support): scroll every content table ----------- */

@media screen and (max-width: 768px) {
  /* beats wp-custom-css `table, tbody, tr, td { display: block !important }` */
  .post-single table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .post-single table > thead,
  .post-single table > tbody,
  .post-single table > tfoot {
    display: table !important;
    width: max-content !important;
    min-width: 100% !important;
  }

  .post-single table > thead > tr,
  .post-single table > tbody > tr,
  .post-single table > tfoot > tr {
    display: table-row !important;
    width: auto !important;
  }

  .post-single table > thead > tr > th,
  .post-single table > thead > tr > td,
  .post-single table > tbody > tr > th,
  .post-single table > tbody > tr > td,
  .post-single table > tfoot > tr > th,
  .post-single table > tfoot > tr > td {
    display: table-cell !important;
    width: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
}

/* --- ENHANCED (:has() available): split layout vs data ------------------
   Classifying by column count alone is NOT sufficient. Verified against all
   83 legacy pages:

     7 pages use ragged 4-5 column tables purely as photo collages, e.g.
     about-us/history has rows of [2,2,4,4,4,4,4,4,4,4,4,4,2,2,3] cells that
     are almost all empty spacers holding 125x156 founder portraits. Scrolling
     those horizontally would be wrong.

   The reliable discriminator on this corpus is images:

     all 4 genuine data tables contain ZERO <img>   (text ratio 0.40 - 0.89)
     all 7 collage tables contain images            (text ratio 0.20 - 0.69)

   So: DATA = (a row has >=4 cells) AND (no images anywhere inside).

   Strategy below: stack everything first, then re-establish the grid only for
   tables that pass the data test. Later + more specific wins, so the two
   never fight.

   ESCAPE HATCH: if a table is ever misclassified, add class "data-table" or
   "layout-table" to it in the WordPress editor to force the behaviour. Those
   two rules sit last and beat the automatic detection.
   ------------------------------------------------------------------------ */

@supports selector(:has(*)) {
  @media screen and (max-width: 768px) {

    /* ---- 1. Default: stack every content table ------------------------- */

    .post-single table,
    .post-single table > :is(thead, tbody, tfoot),
    .post-single table > :is(thead, tbody, tfoot) > tr,
    .post-single table > :is(thead, tbody, tfoot) > tr > td,
    .post-single table > :is(thead, tbody, tfoot) > tr > th {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      min-width: 0 !important;
      overflow-x: visible !important;
      box-sizing: border-box !important;
      border-width: 0 !important;
    }

    .post-single table > :is(thead, tbody, tfoot) > tr > td,
    .post-single table > :is(thead, tbody, tfoot) > tr > th {
      /* valign="top" and cellpadding are meaningless once stacked. */
      vertical-align: top !important;
      padding: 0 0 1rem !important;
      text-align: start;
    }

    /* Empty spacer cells left over from the collage layouts. */
    .post-single table > :is(thead, tbody, tfoot) > tr > td:empty {
      display: none !important;
    }

    /* ---- 2. Re-grid genuine DATA tables and let them scroll ------------- */

    .post-single table:has(> :is(thead, tbody, tfoot) > tr > *:nth-child(4)):not(:has(img)) {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      /* Affordance that there is more content to the right. */
      border: 1px solid rgba(0, 0, 0, 0.14) !important;
      border-radius: 4px;
      margin-bottom: 1.5em;
    }

    .post-single table:has(> :is(thead, tbody, tfoot) > tr > *:nth-child(4)):not(:has(img)) > :is(thead, tbody, tfoot) {
      display: table !important;
      width: max-content !important;
      min-width: 100% !important;
    }

    .post-single table:has(> :is(thead, tbody, tfoot) > tr > *:nth-child(4)):not(:has(img)) > :is(thead, tbody, tfoot) > tr {
      display: table-row !important;
      width: auto !important;
    }

    .post-single table:has(> :is(thead, tbody, tfoot) > tr > *:nth-child(4)):not(:has(img)) > :is(thead, tbody, tfoot) > tr > td,
    .post-single table:has(> :is(thead, tbody, tfoot) > tr > *:nth-child(4)):not(:has(img)) > :is(thead, tbody, tfoot) > tr > th {
      display: table-cell !important;
      width: auto !important;
      height: auto !important;
      min-width: 6.5em;
      white-space: normal;
      vertical-align: top !important;
      padding: 0.5rem !important;
      font-size: 0.875rem;
      border-width: 1px !important;
      box-sizing: border-box !important;
    }

    /* First column of a data table reads as the row label. */
    .post-single table:has(> :is(thead, tbody, tfoot) > tr > *:nth-child(4)):not(:has(img)) > :is(thead, tbody, tfoot) > tr > *:first-child {
      min-width: 3.5em;
    }

    /* Never hide a blank cell inside a data table — it is a real gap in the
       data and removing it would shift every following column. */
    .post-single table:has(> :is(thead, tbody, tfoot) > tr > *:nth-child(4)):not(:has(img)) > :is(thead, tbody, tfoot) > tr > td:empty {
      display: table-cell !important;
    }

    /* ---- 3. Manual overrides (highest precedence) ---------------------- */

    .post-single table.layout-table,
    .post-single table.layout-table > :is(thead, tbody, tfoot),
    .post-single table.layout-table > :is(thead, tbody, tfoot) > tr,
    .post-single table.layout-table > :is(thead, tbody, tfoot) > tr > td,
    .post-single table.layout-table > :is(thead, tbody, tfoot) > tr > th {
      display: block !important;
      width: 100% !important;
      overflow-x: visible !important;
    }

    .post-single table.data-table {
      display: block !important;
      overflow-x: auto !important;
      width: 100% !important;
    }

    .post-single table.data-table > :is(thead, tbody, tfoot) {
      display: table !important;
      width: max-content !important;
      min-width: 100% !important;
    }

    .post-single table.data-table > :is(thead, tbody, tfoot) > tr {
      display: table-row !important;
    }

    .post-single table.data-table > :is(thead, tbody, tfoot) > tr > td,
    .post-single table.data-table > :is(thead, tbody, tfoot) > tr > th {
      display: table-cell !important;
      width: auto !important;
      min-width: 6.5em;
      padding: 0.5rem !important;
    }
  }
}

/* Images inside stacked cells centre rather than sitting flush left. */
@media screen and (max-width: 768px) {
  .post-single td img,
  .post-single th img {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
  }
}

/* Widget tables (e.g. the WP Calendar widget) are always real data. The
   Customizer's unscoped `table, tbody, tr, td { display: block !important }`
   would flatten them, so restore the table box model explicitly. */
.widget table {
  display: table !important;
  width: 100% !important;
  max-width: 100% !important;
}

.widget table > thead,
.widget table > tbody,
.widget table > tfoot {
  display: table-row-group !important;
  width: auto !important;
}

.widget table > thead {
  display: table-header-group !important;
}

.widget table > thead > tr,
.widget table > tbody > tr,
.widget table > tfoot > tr {
  display: table-row !important;
  width: auto !important;
}

.widget table th,
.widget table td {
  display: table-cell !important;
  width: auto !important;
  height: auto !important;
}


/* ==========================================================================
   8. Legacy inline width/height attributes
   533 <td width="NNN"> and 500 <img width="NNN"> across the legacy pages,
   plus 5 tables at width="823" / "749" / "702" / "535". At 375px the widest
   is 2.2x the viewport.

   Desktop keeps them (they carry the intended proportions). Only mobile
   neutralises them.
   ========================================================================== */

@media screen and (max-width: 768px) {
  .post-single table[width],
  .post-single table[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .post-single td[width],
  .post-single th[width],
  .post-single td[style*="width"],
  .post-single th[style*="width"] {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Inline `height: NNNpx` on tables/rows/cells forces blank space once the
     content re-flows. */
  .post-single table[style*="height"],
  .post-single tr[style*="height"],
  .post-single td[style*="height"],
  .post-single th[height],
  .post-single td[height] {
    height: auto !important;
  }

  .post-single img[width],
  .post-single img[height] {
    max-width: 100% !important;
    height: auto !important;
  }

  /* float="left/right" and align="left/right" on legacy images strand text in
     a 40px gutter on a phone. */
  .post-single img[align="left"],
  .post-single img[align="right"],
  .post-single [style*="float"] {
    float: none !important;
  }
}

/* The scrolling admission strip must not widen the document. */
.admission-scroll {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.admission-scroll marquee {
  max-width: 100%;
}

@media screen and (max-width: 640px) {
  .admission-scroll {
    font-size: 1rem;
  }

  .contact-bar {
    font-size: 1rem !important;
  }
}


/* ==========================================================================
   9. Forms & inputs
   iOS Safari auto-zooms the page whenever a focused input has a computed
   font-size below 16px. #s (the search field) is 13px in style.css.
   ========================================================================== */

@media screen and (max-width: 1181px) {
  #s,
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px;
  }
}

@media screen and (max-width: 640px) {
  #searchform {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
  }

  #s {
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
  }

  #searchsubmit {
    float: none;
    flex: 0 0 auto;
    min-height: 44px;
  }

  #commentform input,
  #commentform textarea {
    width: 100%;
    box-sizing: border-box;
  }
}

/* Comment avatars stop crowding the metadata on narrow screens. */
@media screen and (max-width: 460px) {
  .comment-author .avatar {
    float: none;
    display: block;
    margin: 0 0 0.75rem;
  }

  .comment-tools {
    float: none;
    display: block;
    margin-top: 0.5rem;
  }
}


/* ==========================================================================
   10. Footer
   ========================================================================== */

@media screen and (max-width: 1181px) {
  .site-footer {
    /* style.css sets `text-align: end`, which reads oddly once the columns
       have collapsed. */
    text-align: center;
  }

  .pre-footer {
    text-align: start;
  }
}

@media screen and (max-width: 640px) {
  .wrapper-footer {
    margin-bottom: 1.875rem;
    padding-top: 2.5rem;
    padding-inline: 1.25rem;
  }

  .govt-links {
    line-height: 2.2;
    padding-inline: 1rem;
    box-sizing: border-box;
  }

  /* wp-custom-css puts `white-space: nowrap !important` on these; each label is
     short so they wrap between links rather than inside them. */
  .govt-links a {
    display: inline-block !important;
    padding: 2px 0;
  }
}


/* ==========================================================================
   11. Small-phone tuning (<=420px)
   ========================================================================== */

@media screen and (max-width: 420px) {
  .wrapper-frame,
  .wrapper {
    padding-inline: 1rem;
  }

  .post-single {
    font-size: 0.9375rem;
  }

  .post-single h2 {
    font-size: 1.125rem;
  }

  .post-single h3,
  .post-single h4 {
    font-size: 1.0625rem;
  }

  .ilovewp-page-inner .title-page {
    font-size: 1.5rem;
  }

  /* Legacy pages often set explicit small type inline; keep it legible. */
  .post-single [style*="font-size: 12px"],
  .post-single [style*="font-size:12px"] {
    font-size: 0.875rem !important;
  }
}


/* ==========================================================================
   12. Reduced motion
   The admission strip uses <marquee>, which cannot be paused from the
   keyboard (WCAG 2.2.2). Honour the OS-level preference at minimum.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   13. Statutory disclosure links (footer)
   Added with the .compliance-links block in footer.php. The Anti-Ragging and
   UGC Mandatory Disclosure pages were already written and live but reachable
   only through the 21-item main menu; this row is what makes them findable.
   ========================================================================== */

.compliance-links {
  border-top: 1px solid var(--edupress-border-color-100);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin-top: 1.25rem;
  padding: 1.25rem 1.25rem 0;
  text-align: center;
}

.compliance-links strong {
  color: var(--edupress-neutral-color-100);
  flex: 0 0 100%;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.compliance-links a {
  color: currentColor;
  /* Comfortable tap target without making the row feel loose on desktop. */
  padding: 0.375rem 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.compliance-links a:hover,
.compliance-links a:focus {
  color: var(--edupress-neutral-color-100);
}

@media screen and (max-width: 640px) {
  .compliance-links {
    gap: 0.25rem 1rem;
    padding-inline: 1rem;
  }

  .compliance-links a {
    min-height: 44px;
  }
}


/* ==========================================================================
   14. Committee rosters and statutory contact blocks

   Deliberately built on lists rather than tables. The content in these pages
   is maintained by college staff through the WordPress editor, and a list
   survives editing far better than a table. It also sidesteps section 7
   entirely — no stacking rules to fight — and stays readable at 320px.
   ========================================================================== */

.post-single .committee-list {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.post-single .committee-list > li {
  background: var(--edupress-neutral-color-100);
  border: 1px solid var(--edupress-border-color-900);
  border-inline-start: 3px solid var(--edupress-link-color);
  border-radius: 3px;
  padding: 0.875rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
}

.post-single .committee-list .cm-name {
  font-weight: 600;
  flex: 1 1 12rem;
}

.post-single .committee-list .cm-role {
  color: var(--edupress-secondary-text-color);
  font-size: 0.9375rem;
  flex: 0 1 auto;
}

.post-single .committee-list .cm-tel {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
  /* Comfortable tap target — these are the numbers a person in difficulty
     is expected to actually call. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Definition blocks used on the RTI page. */
.post-single .statutory-contact {
  border: 1px solid var(--edupress-border-color-900);
  border-radius: 3px;
  padding: 1rem 1.125rem;
  margin: 0 0 1.25rem;
  background: var(--edupress-neutral-color-100);
}

.post-single .statutory-contact h3 {
  font-size: 1.0625rem;
  margin: 0 0 0.625rem;
}

.post-single .statutory-contact dl {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}

.post-single .statutory-contact dt {
  font-weight: 600;
  color: var(--edupress-secondary-text-color);
  font-size: 0.9375rem;
}

.post-single .statutory-contact dd {
  margin: 0;
}

@media screen and (max-width: 460px) {
  .post-single .statutory-contact dl {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .post-single .statutory-contact dt {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.5rem;
  }
}

/* Category badge, used on the IQAC roster where NAAC requires members to be
   shown against a defined category (Chairperson, Teacher, Management, and so
   on). Kept as a badge rather than nine sub-headings so eighteen members stay
   scannable on a phone. */
.post-single .committee-list .cm-cat {
  flex: 0 0 auto;
  order: -1;
  align-self: center;
  background: var(--edupress-primary-accent-color);
  color: var(--edupress-primary-accent-complementary-color);
  border-radius: 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2em 0.5em;
  white-space: nowrap;
}

.post-single .committee-list > li:has(.cm-cat) {
  align-items: center;
}

@media screen and (max-width: 460px) {
  .post-single .committee-list .cm-cat {
    flex: 0 0 100%;
    align-self: flex-start;
    margin-bottom: 0.15rem;
  }

  .post-single .committee-list .cm-name {
    flex: 1 1 100%;
  }
}

/* Fee refund scale. Deliberately a list, not a table: the "point of time"
   column is a long sentence, and a data table sized to max-content would be
   several viewports wide on a phone. As a list the percentage reads as the
   leading value and the condition wraps naturally at any width. */
.post-single .refund-scale > li {
  border-inline-start-color: var(--edupress-link-color-hover);
}

.post-single .refund-scale .cm-cat {
  background: var(--edupress-link-color-hover);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  min-width: 3.75rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.post-single .refund-scale .cm-name {
  font-weight: 400;
  flex: 1 1 14rem;
}


/* ==========================================================================
   15. Facility gallery (.facility-gallery)
   Used by the Land & Infrastructure page, the Laboratories index and the
   individual lab and library pages.

   Context: every <img> that existed on those pages was broken. Eight carried
   a literal, never-executed `<?php bloginfo('template_directory'); ?>` inside
   src — the PHP was pasted into the editor and stored as text in the database
   — and one pointed at the dev hostname http://server/davsohn/. So this
   section is not restyling anything; those pages had no working imagery at
   all.

   Two sources feed the gallery and they differ a lot in quality, which is
   why the grid is sized by min track width rather than a fixed column count:
     - 12 camera photographs, 4128x2322 originals, downscaled to 1200px
     - 17 geo-tagged room photographs recovered from a scanned NAAC 4.1.1
       album, 326-604px native. These CANNOT be enlarged. The grid must never
       stretch one past its natural size, hence the max-width on the figure.

   The tiles are plain <figure> elements, not a WordPress gallery block, so
   this survives an editor switch and needs no plugin.
   ========================================================================== */

.facility-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
  padding: 0;
  list-style: none;
}

.facility-gallery > figure {
  margin: 0;
  border: 1px solid var(--edupress-border-color-100);
  background: var(--edupress-neutral-color-100);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.facility-gallery a {
  display: block;
  line-height: 0;
  text-decoration: none;
}

/* 4:3 with object-fit keeps a portrait doorway shot and a landscape hall shot
   on the same baseline. The full frame is still reachable through the link. */
.facility-gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
  /* beats wp-custom-css, which sets a fixed height on some content images */
  max-width: 100% !important;
}

.facility-gallery figcaption {
  font-family: var(--edupress-ff-accent);
  font-size: 0.875rem;
  line-height: 1.35;
  padding: 0.625rem 0.75rem;
  color: var(--edupress-primary-text-color);
  border-top: 1px solid var(--edupress-border-color-100);
  margin-top: auto;
}

.facility-gallery a:hover img,
.facility-gallery a:focus-visible img {
  opacity: 0.88;
}

.facility-gallery a:focus-visible {
  outline: 2px solid var(--edupress-link-color-hover);
  outline-offset: 2px;
}

/* Sub-heading between groups of tiles (Classrooms / Laboratories / ...). */
.facility-group {
  font-family: var(--edupress-ff-accent);
  font-size: 1.0625rem;
  margin: 1.75rem 0 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--edupress-primary-accent-color);
}

/* A single photograph dropped into the body of a lab page, not in a grid. */
.facility-figure {
  margin: 1.25rem 0 1.5rem;
  max-width: 40rem;
}

.facility-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--edupress-border-color-100);
  max-width: 100% !important; /* beats wp-custom-css */
}

.facility-figure figcaption {
  font-family: var(--edupress-ff-accent);
  font-size: 0.875rem;
  color: var(--edupress-secondary-text-color);
  padding-top: 0.5rem;
}

/* The 17 scanned room photographs top out at 604px wide. Below this the grid
   would upscale them into mush, so the tracks are allowed to get narrower
   instead of the images getting bigger. */
@media screen and (max-width: 640px) {
  .facility-gallery {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.875rem;
  }

  .facility-gallery figcaption {
    font-size: 0.8125rem;
    padding: 0.5rem 0.625rem;
  }
}

@media screen and (max-width: 380px) {
  .facility-gallery {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   16. Statutory disclosure bar (.compliance-bar)

   THE HEADER BAR IS SWITCHED OFF (21 Aug 2026, at the college's request). The
   call is commented out in header.php and re-enabling it is a one-line edit
   there; these styles are kept intact so that it comes back looking right.

   .compliance-links — the SAME markup repeated in the FOOTER by footer.php —
   is still live on every page and is styled from here too (section 13 sets
   that block's own spacing). Do not delete this section.

   Why this exists: the MinervaInfo audit marked 10 of 12 compliance areas
   "absent". Most were published but buried in a 21-item menu — Anti-Ragging
   is 1,072 words and Mandatory Disclosure 984. The finding was reachability,
   so this puts every one of them one click from every page on the site.

   It must stay VISUALLY QUIET. It sits directly under a 5-row navigation and
   a masthead already ~340px tall; a second loud band would compete with the
   menu and push the actual page content further down. Hence small type, a
   flat tint, and no borders beyond a single hairline.
   ========================================================================== */

/* DO NOT use var(--edupress-special-background-color) here. It reads like a
   light "special" tint from its name but is actually #042351, a near-black
   navy — the bar rendered dark with #181818 text on it, i.e. invisible. The
   colours below are set explicitly for that reason. */
.compliance-bar {
  background: #f4f1ea;
  border-top: 3px solid var(--sld-maroon, #7a1620);
  border-bottom: 1px solid #ddd6c9;
  font-family: var(--edupress-ff-accent);
  font-size: 0.8125rem;
  line-height: 1.4;
  padding: 0.5rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 1rem;
  justify-content: center;
  position: relative;
  z-index: 6;
}

/* Cancel the theme's `#site-main { margin-block-start: -3.75rem }` (style.css
   1399), which pulls the content card 60px up into the masthead.

   That overlap was designed for a header ending in 70px of padding. It does
   not survive this layout: the header now ends flush on the nav band and its
   10px red rule, so -60px drags the page content up over the menu itself.
   It also used to paint over the disclosure bar, leaving only the far left
   and right of it visible — which is why this started as
   `.compliance-bar + .content-home`. The bar was switched off on 21 Aug, so
   that sibling selector stopped matching and the rule had to stand on its own.

   `#site-main.content-home` is (1,1,0) and beats the theme's `#site-main`
   (1,0,0) without !important. Every template gives the element both hooks. */
#site-main.content-home {
  margin-block-start: 0;
}

.compliance-bar strong {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--sld-maroon, #7a1620);
}

.compliance-bar a {
  color: var(--sld-navy, #0d2b5c);
  text-decoration: none;
  padding: 0.125rem 0;
  border-bottom: 1px solid transparent;
}

.compliance-bar a:hover,
.compliance-bar a:focus-visible {
  color: var(--sld-maroon, #7a1620);
  border-bottom-color: currentColor;
}

/* On a phone the bar would otherwise become five stacked rows of links before
   the visitor reaches any content. One horizontally scrollable line keeps it
   to ~34px. Scrolling is a real affordance here, not a way of hiding
   something: the fade on the right edge signals there is more. */
@media screen and (max-width: 768px) {
  .compliance-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 0.875rem;
    padding: 0.4375rem 0.875rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .compliance-bar::-webkit-scrollbar {
    display: none;
  }

  .compliance-bar strong,
  .compliance-bar a {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

/* Touch targets: 44px is the WCAG 2.5.5 target size. The bar is only ~34px
   tall, so the links get their height from padding instead of the bar. */
@media screen and (max-width: 1181px) {
  .compliance-bar a {
    padding: 0.5rem 0;
  }
}


/* ==========================================================================
   17. Homepage disclosure panel (.disclosure-panel)
   Pasted into the homepage content through the editor — see
   PAGE-CONTENT-homepage.html. The bar in section 16 is a thin site-wide
   reminder; this is the version a visitor (or an auditor) actually reads,
   with each item named and described rather than reduced to a link.

   Sized so the whole panel is visible without scrolling on a laptop and takes
   about one thumb-scroll on a phone.
   ========================================================================== */

.disclosure-panel {
  border: 1px solid var(--edupress-border-color-100);
  border-top: 3px solid var(--edupress-primary-accent-color);
  background: var(--edupress-neutral-color-100);
  padding: 1.125rem 1.25rem 1.375rem;
  margin: 0 0 1.5rem;
}

.disclosure-panel > h2 {
  font-size: 1.1875rem;
  margin: 0 0 0.25rem;
  padding: 0;
  border: 0;
}

.disclosure-panel > p {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  color: var(--edupress-secondary-text-color);
}

.disclosure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* beats wp-custom-css, which sets `.post-single ul li { list-style: disc }` */
.disclosure-grid > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.disclosure-grid a {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  height: 100%;
  padding: 0.625rem 0.75rem;
  background: #fff;
  border: 1px solid var(--edupress-border-color-100);
  border-inline-start: 3px solid var(--edupress-primary-accent-color);
  text-decoration: none;
  color: inherit;
}

.disclosure-grid a:hover,
.disclosure-grid a:focus-visible {
  border-inline-start-color: var(--edupress-link-color-hover);
  background: var(--edupress-special-background-color, #f4f6f9);
}

.disclosure-grid .dl-name {
  font-family: var(--edupress-ff-accent);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--edupress-link-color);
  line-height: 1.25;
}

.disclosure-grid .dl-note {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--edupress-secondary-text-color);
}

@media screen and (max-width: 480px) {
  .disclosure-grid {
    grid-template-columns: 1fr;
  }

  .disclosure-panel {
    padding: 1rem 0.875rem 1.125rem;
  }
}


/* ==========================================================================
   18. Reading & visual refresh
   The UI/UX pass, benchmarked against kvadav.ac.in (which scored 5/5 in the
   same audit). NOT a clone of it — the palette below is the college's OWN,
   recovered from the Customizer CSS already on this site.

   WHAT WAS ACTUALLY WRONG. Measured on the live site, 20 Aug 2026:

     - Body copy on content pages runs the full 1100px column: about **138
       characters per line**. A readable measure is 45–75; past roughly 90 the
       eye loses its place on the carriage return. This is the largest
       readability defect on the site and it affects every long page.
     - `body { font-size: 62.5% }` in style.css sets a 10px root, and
       `line-height: 1.5rem` pins leading to a fixed 24px that cannot scale
       with the text.
     - `body { text-align: center }` — inherited centring, overridden ad hoc.
     - The homepage puts body copy at **12px**, via inline `style` on two <td>
       elements, which then cascades into ~36 descendants.
     - Headings collapse: h3 and h4 both compute to 20px, so there is no
       visible hierarchy below the 40px entry title.
     - 16 of 18 homepage images are under 250px natural width (2012 assets).

   The benchmark, for reference: 16px/1.5 body, Poppins headings, maroon
   #641320 with gold #FEC004, cards with small radii.

   NO NEW WEBFONT IS LOADED. The theme already ships Inter / Inter Tight.
   Adding Poppins would mean another render-blocking request on a site whose
   audience is largely on mobile data, for no legibility gain.
   ========================================================================== */

:root {
  /* The college's own colours. #7a1620 and #0d2b5c were already in the
     Customizer CSS (admission strip, contact bar); they are simply given
     names here so the rest of this section can be consistent with them. */
  --sld-maroon: #7a1620;
  --sld-maroon-dark: #5c1018;
  --sld-navy: #0d2b5c;
  /* Gold is 3.01:1 on white — measured, not assumed. That clears the 3:1
     bar for non-text elements (WCAG 1.4.11) but NOT the 4.5:1 for body
     text, so it is used only for rules and underlines, never for words. */
  --sld-gold: #c8880d;
  --sld-rule: #e2ddd6;      /* card hairlines */
  --sld-rule-strong: #c3b9a9; /* table grids, where the line carries meaning */
  --sld-ink: #1b1b1b;
  --sld-ink-soft: #4a4a4a;
  --sld-measure: 72ch;
}

/* --- Measure -------------------------------------------------------------
   Applied to the text elements, not to .post-single itself: the container has
   to stay full width or tables, galleries and image rows get squeezed into a
   72ch column along with the prose. */
.post-single > p,
.post-single > ul,
.post-single > ol,
.post-single > blockquote,
.post-single > h2,
.post-single > h3,
.post-single > h4,
.post-single > .text > p,
.post-single > .text > ul,
.post-single > .text > ol,
.post-single > .text > blockquote,
.post-single > .text > h2,
.post-single > .text > h3,
.post-single > .text > h4 {
  max-width: var(--sld-measure);
}

/* Without this a centred page keeps its centring and the new narrow column
   sits glued to the left edge. */
.post-single {
  text-align: start;
}

/* --- Type scale ----------------------------------------------------------
   h3 and h4 both computed to 20px. This restores a usable ramp underneath the
   40px entry title, which is left alone. */
.post-single h2 {
  font-size: 1.625rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--sld-maroon);
  margin: 2rem 0 0.625rem;
  padding-bottom: 0.375rem;
  border-bottom: 2px solid var(--sld-gold);
}

.post-single h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 650;
  color: var(--sld-navy);
  margin: 1.75rem 0 0.5rem;
}

.post-single h4 {
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 650;
  color: var(--sld-ink);
  margin: 1.5rem 0 0.375rem;
  letter-spacing: 0.01em;
}

.post-single p,
.post-single li {
  line-height: 1.65;
  color: var(--sld-ink);
}

.post-single p {
  margin: 0 0 1.125rem;
}

/* --- The homepage 12px cascade -------------------------------------------
   Inline styles, so !important is the only thing that reaches them. Scoped to
   the two cells that actually carry it rather than thrown site-wide. */
.post-single td[style*="font-size: 12px"],
.post-single td[style*="font-size:12px"] {
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

.post-single td[style*="font-size: 12px"] *,
.post-single td[style*="font-size:12px"] * {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* The rest of the homepage sits in table cells that inherit 14px from the
   theme's table styling. The homepage carries the college's main description
   — the first prose most visitors read — so it gets the same 16px as every
   other page. Scoped to body.home so dense legacy tables elsewhere keep the
   smaller size they were laid out for. */
body.home .post-single td,
body.home .post-single td p,
body.home .post-single td li {
  font-size: 1rem;
  line-height: 1.6;
}

/* --- Links ---------------------------------------------------------------- */
.post-single a:not(.cm-tel) {
  color: var(--sld-navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.post-single a:not(.cm-tel):hover {
  color: var(--sld-maroon);
}

/* Keyboard focus was invisible site-wide. WCAG 2.4.7. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  /* Navy, not gold: 13.84:1 against white versus gold's 3.01:1. A focus ring
     is the one thing a keyboard user has to find, so it takes the strongest
     colour in the palette rather than the prettiest. */
  outline: 3px solid var(--sld-navy);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- The 2012 thumbnails --------------------------------------------------
   These cannot be made sharper. What they can stop doing is looking like a
   mistake: a hairline and a small white mat read as "small photograph"
   rather than "broken image". They are never scaled past natural size. */
.post-single .facility-images img {
  background: #fff;
  border: 1px solid var(--sld-rule);
  padding: 3px;
}

/* --- Homepage columns as cards --------------------------------------------
   The homepage is a three-column layout table carrying inline
   width="30%/44%/26%". Those proportions are the only thing holding the
   layout together, so they are left alone and the cells get the card
   treatment instead. Desktop only: section 7 already stacks this table on
   mobile, where cards in a single column would just add noise. */
@media screen and (min-width: 769px) {
  body.home .post-single > table > tbody > tr > td {
    background: #fff;
    border: 1px solid var(--sld-rule);
    border-top: 3px solid var(--sld-maroon);
    padding: 1.125rem 1.25rem !important;
    vertical-align: top;
  }

  body.home .post-single > table {
    border-collapse: separate !important;
    border-spacing: 0.875rem;
  }
}

/* Section headings inside those cards. */
body.home .post-single h3,
body.home .post-single h4 {
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sld-maroon);
  border-bottom: 2px solid var(--sld-gold);
  padding-bottom: 0.375rem;
  margin: 0 0 0.75rem;
}

.admission-scroll {
  border-radius: 3px;
}

/* --- Data tables ---------------------------------------------------------- */
.post-single table.data-table {
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.post-single table.data-table th[scope="col"] {
  background: var(--sld-navy);
  color: #fff;
  text-align: start;
  font-weight: 650;
  padding: 0.5rem 0.625rem;
}

.post-single table.data-table td,
.post-single table.data-table th[scope="row"] {
  border: 1px solid var(--sld-rule-strong);
  padding: 0.5rem 0.625rem;
  text-align: start;
  vertical-align: top;
}

.post-single table.data-table tbody tr:nth-child(even) > * {
  background: #faf9f7;
}

.post-single table.data-table caption {
  caption-side: bottom;
  font-size: 0.8125rem;
  color: var(--sld-ink-soft);
  padding-top: 0.5rem;
  text-align: start;
}

.post-single .entry-title,
.entry-header .entry-title {
  color: var(--sld-maroon);
}

@media screen and (max-width: 768px) {
  :root {
    --sld-measure: 100%;
  }

  .post-single h2 {
    font-size: 1.375rem;
  }

  .post-single h3 {
    font-size: 1.125rem;
  }
}


/* ==========================================================================
   19. Hero slideshow (.hero-slider)
   The homepage photo strip, built from the nine full-resolution photographs
   supplied on 20 August.

   THE SLIDESHOW IS CSS. A scroll-snap track, not a carousel script: swipe on
   touch, trackpad or shift+wheel on desktop, all native.

   The dots needed 3 KB of vanilla JS (js/edupress-slider.js) and it is worth
   saying why, because the first attempt was pure CSS and it did not work.
   Dots were plain anchor links to #slide-N, the standard JS-free pattern.
   Measured on this page: neither `location.hash` nor `scrollIntoView()` moves
   the track, while `track.scrollTo()` moves it correctly every time. Shipping
   dots that look clickable and do nothing was the worse option.

   What is still avoided:
     - no jQuery — superfish.min.js already broke every other script on this
       site once, and nothing here goes near it;
     - no dependency on flexslider (functions.php enqueues that with `true` in
       the $ver slot, so it loads in <head> with version "1" — a separate bug);
     - no <script> in post content, which WordPress strips for any user
       without the unfiltered_html capability.
   If the JS fails to load, the track still scrolls. Only the dots go inert.

   It does NOT auto-advance. Auto-advancing carousels move content the visitor
   did not ask to move (WCAG 2.2.2), and this site already has one <marquee>
   with that problem. Swipe on touch, trackpad-scroll or the dots on desktop.
   ========================================================================== */

.hero-slider {
  position: relative;
  margin: 0 0 1.5rem;
}

.hero-slider-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sld-rule, #e2ddd6);
  background: #0c1c33;
  scrollbar-width: none;
}

.hero-slider-track::-webkit-scrollbar {
  display: none;
}

.hero-slider figure {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  position: relative;
  min-width: 0;
}

.hero-slider img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* beats wp-custom-css, which forces a fixed height on some content images */
  max-width: 100% !important;
  height: auto !important;
  max-height: 30rem;
}

/* The caption sits on the photograph, so it needs its own contrast rather than
   borrowing the page's. The gradient guarantees it regardless of what is
   underneath — a bright sky and a dark interior both occur in this set. */
.hero-slider figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.5rem 1.25rem 0.875rem;
  color: #fff;
  font-family: var(--edupress-ff-accent);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-align: start;
  background: linear-gradient(to top, rgba(6, 16, 30, 0.88), rgba(6, 16, 30, 0));
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Dots are anchor links, which is what keeps this JS-free. */
.hero-slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 0 0;
  margin: 0;
  list-style: none;
}

.hero-slider-dots li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.hero-slider-dots a {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #cfc7ba;
  border: 1px solid #b3a996;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none !important;
}

.hero-slider-dots a:hover,
.hero-slider-dots a:focus-visible {
  background: var(--sld-maroon, #7a1620);
  border-color: var(--sld-maroon, #7a1620);
}

/* Set by js/edupress-slider.js from the track's actual scroll position, so it
   stays correct whether the visitor used a dot or swiped. */
.hero-slider-dots a[aria-current="true"] {
  background: var(--sld-maroon, #7a1620);
  border-color: var(--sld-maroon, #7a1620);
  transform: scale(1.15);
}

/* Pause / play. The slideshow advances every 3 seconds, and WCAG 2.2.2
   requires a way to stop anything that moves on its own for more than five
   seconds. The button is created by the JS, not by the pasted markup, so a
   visitor without JS is never shown a control that cannot do anything.
   It also pauses on hover and on keyboard focus, and stops for good the
   moment the visitor picks a slide themselves. */
.hero-slider-toggle {
  position: absolute;
  top: 0.625rem;
  inset-inline-end: 0.625rem;
  z-index: 2;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
  background: rgba(6, 16, 30, 0.62);
  color: #fff;
  font-family: var(--edupress-ff-accent);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3125rem 0.625rem;
  cursor: pointer;
  min-width: 3.75rem;
  line-height: 1.2;
}

.hero-slider-toggle:hover {
  background: rgba(6, 16, 30, 0.85);
}

.hero-slider-toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

@media screen and (max-width: 480px) {
  .hero-slider-toggle {
    font-size: 0.6875rem;
    padding: 0.375rem 0.5625rem;
  }
}

@media screen and (max-width: 768px) {
  .hero-slider figcaption {
    font-size: 0.9375rem;
    padding: 2rem 0.875rem 0.75rem;
  }

  .hero-slider img {
    max-height: 17rem;
  }
}

@media screen and (max-width: 420px) {
  .hero-slider img {
    max-height: 13rem;
  }

  .hero-slider figcaption {
    font-size: 0.875rem;
  }
}