/* Government Polytechnic, Chhotaudepur — main stylesheet
   No frameworks, no build step. Mobile-first; larger layouts are added with
   min-width media queries. Original palette — deliberately not modelled on
   any other institution's visual identity. */

/* ---------- Design tokens ---------- */
:root {
  --color-primary: #123a5e;
  --color-primary-dark: #0b2740;
  --color-primary-tint: #e8eef4;
  --color-accent: #b8791b;
  --color-accent-dark: #935f12;
  --color-text: #1c1f24;
  --color-text-muted: #52585f;
  --color-bg: #ffffff;
  --color-bg-alt: #f4f6f8;
  --color-border: #d7dce1;

  --font-heading: Georgia, "Times New Roman", Times, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius: 4px;
  --container-width: 1180px;
  --nav-breakpoint: 960px;
  --transition: 0.2s ease;

  /* Dropdown open/close motion (desktop hover/focus-within/click and the
     mobile accordion's opening fade) — a slightly slower ease-out on open,
     a quicker one on close so the menu feels responsive, not sluggish. */
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dropdown-duration-open: 200ms;
  --dropdown-duration-close: 140ms;

  /* Site-wide text-size accessibility control (js/main.js) — a multiplier
     applied to body's font-size, not to html's, so spacing/layout tokens
     above (all in rem, relative to html) never move: only text does. */
  --text-scale: 1;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: calc(1rem * var(--text-scale));
}
/* Structural chrome stays a fixed size regardless of the text-size control —
   only readable page content should grow/shrink. .utility-bar already pins
   itself via its own fixed rem font-size further down; header nav links and
   footer links have no such override, so they need it stated explicitly. */
.site-header,
.site-footer {
  font-size: 1rem;
}
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--color-primary); }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}
p { margin: 0 0 var(--space-4); }
address { font-style: normal; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

@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;
  }
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: -999px;
  background: var(--color-primary-dark);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 1000;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

/* ---------- Layout helpers ---------- */
.section-inner,
.header-inner,
.utility-bar-inner,
.footer-grid,
.footer-bottom {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.section { padding-block: var(--space-7); }
.section-alt { background: var(--color-bg-alt); }
.section-title { font-size: 1.5em; }
.section-lede {
  color: var(--color-text-muted);
  max-width: 65ch;
}
/* Homepage About preview: one short sentence in a wide section — the shared
   65ch cap above (sized for longer lede copy, e.g. departments.html) left
   most of the section empty here, so let this one use the section's width. */
#about-heading + .section-lede { max-width: none; }

/* Long-form body copy: justified across the page container's full width for
   a formal, document-style page, in English and Gujarati alike. Scoped to
   genuine paragraph text only — class-less, id-less <p> placed directly in a
   page section, the Important callout, the homepage Principal's Message
   excerpt and the course descriptions on academics/courses.html. Buttons
   (.external-link-action), .link-more, one-line .section-lede intros, short
   .card figures, JS status lines (#staff-*), table cells, headings, nav and
   footer are deliberately left out. */
main .section-inner > p:not([class]):not([id]),
main .section-inner > .important-note,
.principal-content > p,
.course-card p {
  text-align: justify;
}
/* On the narrowest phones at the two largest text sizes a line holds only
   three or four words (fewer still in Gujarati), and justification spreads
   them with very wide gaps — fall back to left alignment there only. The
   text-size control's only CSS-visible output is --text-scale on <html>
   (js/main.js), so a container style query reads it directly; browsers
   without style-query support simply stay justified. */
@media (max-width: 375px) {
  @container style(--text-scale: 1.2) or style(--text-scale: 1.3) {
    main .section-inner > p:not([class]):not([id]),
    main .section-inner > .important-note,
    .principal-content > p,
    .course-card p {
      text-align: left;
    }
  }
}
/* Gujarati vowel signs sit above and below the baseline; the English 1.6
   line-height crowds them in multi-line paragraphs. */
main .section-inner > p:not([class]):not([id]):lang(gu),
main .section-inner > .important-note:lang(gu),
.principal-content > p:lang(gu),
.course-card p:lang(gu),
.section-lede:lang(gu) {
  line-height: 1.8;
}

/* ---------- Utility bar ---------- */
.utility-bar {
  background: var(--color-primary-dark);
  color: #fff;
  font-size: 0.8rem;
}
.utility-bar-inner {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-2);
}
.utility-bar ul { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.utility-bar a {
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
}
.utility-bar a:hover,
.utility-bar a:focus-visible { opacity: 1; text-decoration: underline; }

/* Text-size accessibility control — sits at the end of the utility bar on
   every page (see js/main.js). Fixed size regardless of --text-scale: it's
   a control, not page content (see .utility-bar's own font-size above). */
.text-size-control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.text-size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75em;
  padding: 0.15em 0.55em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
}
.text-size-btn:hover:not(:disabled),
.text-size-btn:focus-visible:not(:disabled) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #1c1300;
}
.text-size-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.text-size-value {
  white-space: nowrap;
  opacity: 0.9;
}

/* ---------- Header & brand ---------- */
/* Sticky (not fixed) so it re-joins the flow with no height to compensate for
   — the utility bar above it simply scrolls away first, then the header
   sticks at top:0. z-index 500 keeps it above ordinary page content while
   staying under .skip-link's 1000, which must win on focus. */
.site-header {
  background: var(--color-bg);
  border-bottom: 3px solid var(--color-accent);
  position: sticky;
  top: 0;
  z-index: 500;
  transition: background-color var(--transition);
}
/* Scrolled state: background alpha only, never opacity, so the logo, nav
   text and controls inside stay fully readable — see CLAUDE.md-adjacent task
   notes. rgba(255,255,255,…) mirrors --color-bg (#fff); custom properties
   can't be split into r/g/b components for rgba() without a second token. */
.site-header.header-scrolled {
  background-color: rgba(255, 255, 255, 0.55);
}
/* Keyboard focus always restores full opacity, on every pointer type. */
.site-header.header-scrolled:focus-within {
  background-color: var(--color-bg);
}
/* Hover restore is scoped to devices with reliable hover (mouse/trackpad) —
   touch browsers can latch :hover after a tap with no matching "leave"
   event, which would strand the header opaque or flickering. */
@media (hover: hover) and (pointer: fine) {
  .site-header.header-scrolled:hover {
    background-color: var(--color-bg);
  }
}
/* Mobile menu open always wins over the translucent scrolled state,
   regardless of hover/focus above, so menu items stay readable. */
.site-header.header-scrolled.nav-open {
  background-color: var(--color-bg);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header.header-scrolled {
    background-color: var(--color-bg);
  }
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}
.brand-emblem {
  flex-shrink: 0;
  height: 58px;
  width: auto;
  display: block;
}
@media (min-width: 960px) {
  .brand-emblem { height: 74px; }
}
.brand-text { display: flex; flex-direction: column; }
.brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary-dark);
}
.brand-sub {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* ---------- Nav toggle (hamburger) ---------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: var(--color-primary-dark);
}
.nav-toggle-icon {
  position: relative;
  width: 20px;
  height: 2px;
  background: var(--color-primary-dark);
}
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--color-primary-dark);
}
.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }

/* ---------- Primary navigation ---------- */
.primary-nav { width: 100%; }
.primary-menu {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-3);
}
.primary-menu.is-open { display: flex; }

.nav-item { position: relative; border-bottom: 1px solid var(--color-border); }
.nav-item > a,
.dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-2);
  text-decoration: none;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.nav-item > a:hover,
.dropdown-toggle:hover { color: var(--color-accent-dark); }
.dropdown-arrow { font-size: 0.7em; margin-left: var(--space-2); }

/* Mobile accordion: display:none/flex keeps the closed menu out of the
   document flow (no gap in the stacked list), so the entrance uses a CSS
   *animation* (not a transition) — animations run when an element goes
   from display:none to rendered, which a transition cannot do. Closing is
   an instant display:none, which reads as fast/responsive on touch rather
   than needing a matching exit animation. */
@keyframes dropdown-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-menu {
  display: none;
  flex-direction: column;
  padding-left: var(--space-4);
  padding-bottom: var(--space-2);
}
.nav-item.is-open > .dropdown-menu {
  display: flex;
  animation: dropdown-fade-in var(--dropdown-duration-open) var(--dropdown-ease);
}
.dropdown-menu li a {
  display: block;
  padding: var(--space-2);
  margin-inline: var(--space-2);
  border-radius: 4px;
  text-decoration: none;
  color: var(--color-text);
  background-color: transparent;
  transition: background-color var(--transition), color var(--transition);
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible {
  background-color: var(--color-primary-tint);
  color: var(--color-accent-dark);
}

@media (min-width: 960px) {
  .header-inner { flex-wrap: nowrap; }
  .nav-toggle { display: none; }
  .primary-nav { width: auto; }
  .primary-menu {
    display: flex;
    flex-direction: row;
    border-top: none;
    margin-top: 0;
    flex-wrap: wrap;
  }
  .nav-item { border-bottom: none; }
  .nav-item > a,
  .dropdown-toggle { padding: var(--space-3) var(--space-3); }

  .dropdown-menu {
    /* Always laid out (position:absolute already removes it from flow, so
       this costs nothing) and hidden via opacity/visibility instead of
       display — that's what lets the close direction transition smoothly
       instead of vanishing instantly like the mobile accordion. */
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 24px rgba(11, 39, 64, 0.12);
    padding: var(--space-2) 0;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px);
    animation: none;
    transition: opacity var(--dropdown-duration-close) var(--dropdown-ease),
                transform var(--dropdown-duration-close) var(--dropdown-ease),
                visibility var(--dropdown-duration-close) var(--dropdown-ease);
  }
  .nav-item.has-dropdown:hover > .dropdown-menu,
  .nav-item.has-dropdown:focus-within > .dropdown-menu,
  .nav-item.is-open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-duration: var(--dropdown-duration-open);
  }
}

/* ---------- Hero ---------- */
.hero {
  background-color: var(--color-primary);
  /* JPEG fallback first: browsers without image-set() support ignore the
     second declaration below (invalid value) and keep this one. */
  background-image:
    linear-gradient(rgba(11, 39, 64, 0.6), rgba(11, 39, 64, 0.6)),
    url("../images/home/college-building.jpg");
  background-image:
    linear-gradient(rgba(11, 39, 64, 0.6), rgba(11, 39, 64, 0.6)),
    image-set(
      url("../images/home/college-building.webp") type("image/webp"),
      url("../images/home/college-building.jpg") type("image/jpeg")
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  border-bottom: 4px solid var(--color-accent);
}
.hero-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding: var(--space-8) var(--space-4);
}
.hero h1 { color: #fff; font-size: clamp(1.6em, 4vw, 2.4em); max-width: 24ch; }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
  border: 2px solid transparent;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn-primary { background: var(--color-accent); color: #1c1300; }
.btn-primary:hover { background: var(--color-accent-dark); color: #fff; }
.btn-outline { background: transparent; color: #fff; border-color: #fff; }
.btn-outline:hover { background: #fff; color: var(--color-primary-dark); }

/* ---------- Homepage About + Latest Notices ---------- */
.about-notices-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 860px) {
  .about-notices-grid { grid-template-columns: 1.6fr 1fr; align-items: start; }
}

/* ---------- Notice box (homepage) and notice list (Student Corner) ----------
   Both are populated by js/main.js from the same fetchNotices() call (Google
   Sheet via Apps Script, data/notices.json as a fallback only — see
   CLAUDE.md "Notice Board Maintenance"), sharing one .notice-item template.
   The homepage box additionally auto-scrolls a fixed-height, genuinely
   scrollable region — see .notice-scroll below. */
.notice-box {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.notice-box-title {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary-dark);
  border-bottom: 2px solid var(--color-accent);
}
.notice-box-viewall { display: block; margin-top: var(--space-3); }
.notice-box-status {
  margin: 0;
  padding: var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: 0.9em;
}

/* A real overflow:auto viewport, not a transform marquee — native touch,
   manual and keyboard scrolling keep working for free. js/main.js only
   nudges scrollTop for the auto-scroll effect, and never fights the visitor:
   it stops while hovered/focused/touched. */
.notice-scroll {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.notice-scroll-track { display: flex; flex-direction: column; }

.notice-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.notice-scroll-track .notice-item:last-child,
.notice-list .notice-item:last-child { border-bottom: none; }
.notice-item-date {
  margin: 0 0 var(--space-1);
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-accent-dark);
}
.notice-item-title { margin: 0 0 var(--space-1); font-weight: 700; color: var(--color-primary-dark); }
.notice-item-desc { margin: 0 0 var(--space-1); color: var(--color-text-muted); font-size: 0.9em; }
.notice-item-link { font-weight: 600; text-decoration: none; font-size: 0.9em; }
.notice-item-link:hover, .notice-item-link:focus-visible { text-decoration: underline; }

/* Compact box: clamp long descriptions to 2 lines rather than growing the
   box — graceful no-op in the rare browser without line-clamp support. */
.notice-scroll-track .notice-item-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Full listing (students/notices.html) — same item styling, no fixed height. */
.notice-list { display: flex; flex-direction: column; max-width: 70ch; }

/* ---------- Links / Read more ---------- */
.link-more {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  margin-top: var(--space-2);
}
.link-more:hover { text-decoration: underline; }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.card {
  display: block;
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover, .card:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 4px 14px rgba(11, 39, 64, 0.08);
}
.card h3 { margin-bottom: var(--space-2); font-size: 1.1em; }
.card p { margin: 0; color: var(--color-text-muted); }

/* ---------- Course overview cards (academics/courses.html) ---------- */
.course-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (min-width: 720px) {
  .course-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.course-card {
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.course-card h2 { margin-top: 0; margin-bottom: var(--space-3); font-size: 1.2em; }
.course-card h3 { margin: var(--space-4) 0 var(--space-1); font-size: 0.95em; color: var(--color-primary-dark); }
.course-card h3:first-of-type { margin-top: 0; }
.course-card p { margin: 0; color: var(--color-text-muted); }
.course-card .link-more { margin-top: var(--space-4); }

/* ---------- Principal's message ---------- */
.principal {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  align-items: flex-start;
}
.principal-content { flex: 1; min-width: 240px; }

/* ---------- Mission / statement lists (Vision & Mission, etc.) ---------- */
.mission-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 70ch;
}
.mission-list li {
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent);
}
.mission-list li strong {
  color: var(--color-primary-dark);
  margin-right: var(--space-1);
}

/* ---------- Institute Vision & Mission cards (about/vision-mission.html) ----------
   Own classes rather than reusing .mission-list, so department pages (which share
   .mission-list for their own Vision/Mission) don't pick up this hover treatment. */
.vm-heading { text-transform: uppercase; letter-spacing: 0.03em; }
.vm-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 70ch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vm-item {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.vm-item strong {
  color: var(--color-primary-dark);
  margin-right: var(--space-1);
}
.vm-item:hover, .vm-item:focus-visible {
  background: var(--color-primary-tint);
  border-color: var(--color-accent-dark);
  box-shadow: 0 2px 10px rgba(11, 39, 64, 0.08);
}

/* ---------- Stacked page sections (department pages, etc.) ---------- */
/* Extra breathing room between a run of h2 subsections in one .section-inner. */
.stacked-sections h2 { margin-top: var(--space-7); }
.stacked-sections h2:first-of-type { margin-top: 0; }

/* Numbered lists (e.g. SSIP submission steps) — keep the browser's own numbering,
   just add consistent spacing to match .mission-list's rhythm. */
.outcomes-list {
  margin: 0;
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 70ch;
}

/* ---------- Photo carousel (e.g. Training & Placement gallery) ----------
   Slides are absolutely positioned and cross-fade combined with a short
   horizontal move (right -> center on entry, center -> left on exit), giving
   a right-to-left feel without an abrupt slide. Non-active slides sit at
   opacity: 0 in their default (right-hand) position, which also means the
   whole thing degrades gracefully with JS disabled: only the first slide
   (marked .is-active in the markup) is visible, still satisfying "one photo
   at a time". See js/training-placement.js. */
.carousel {
  max-width: 720px;
  margin-top: var(--space-5);
}
.carousel-track {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}
.carousel-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  opacity: 0;
  transform: translateX(4%);
  transition: opacity 0.9s ease, transform 0.9s ease;
  pointer-events: none;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.carousel-slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
}
.carousel-slide.is-leaving {
  opacity: 0;
  transform: translateX(-4%);
  z-index: 1;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.carousel-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}
.carousel-dot.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent-dark);
}
.carousel-dot:hover,
.carousel-dot:focus-visible {
  border-color: var(--color-accent-dark);
}

@media (prefers-reduced-motion: reduce) {
  .carousel-slide,
  .carousel-slide.is-active,
  .carousel-slide.is-leaving {
    transition: opacity 0.4s ease;
    transform: none;
  }
}

/* ---------- External document repository link (e.g. TPO Google Drive) ---------- */
.external-link-action { margin-top: var(--space-4); }

/* ---------- Important note callout (e.g. college-fee vs. GTU-fee clarification) ----------
   Left accent border echoes .mission-list li; tint background echoes
   .notice-box/.data-table hover — reuses existing tokens rather than
   introducing a new (e.g. red/alarm) warning style. */
.important-note {
  background: var(--color-primary-tint);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.important-note strong { color: var(--color-primary-dark); }
/* Lists carry no bottom margin, so a callout that follows one directly
   (e.g. students/ssip.html) would otherwise touch its last item. */
.mission-list + .important-note { margin-top: var(--space-4); }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 720px) {
  .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.map-placeholder {
  min-height: 220px;
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-4);
}
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Data table (Faculty & Staff) ---------- */
.staff-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.staff-filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 100%;
}
.staff-filter-field label {
  font-weight: 600;
  font-size: 0.9em;
}
.staff-filter-field input,
.staff-filter-field select {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  min-width: min(240px, 100%);
  max-width: 100%;
}
#staff-status { color: var(--color-text-muted); }
#staff-count { color: var(--color-text-muted); font-size: 0.9em; margin-bottom: var(--space-5); }
#staff-no-results {
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-7) 0;
  border-top: 1px solid var(--color-border);
}

/* Department directory: one heading + table per department */
.staff-department { scroll-margin-top: var(--space-4); }
.staff-department + .staff-department {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.staff-department-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-accent);
}
.staff-department-name {
  font-family: var(--font-heading);
  font-size: 1.05em;
  font-weight: 700;
  color: var(--color-primary-dark);
  letter-spacing: 0.02em;
  /* "ADMINISTRATIVE" is one word wider than a 320px screen at the A+ sizes;
     break it only when it genuinely can't fit rather than overflow the page. */
  min-width: 0;
  overflow-wrap: break-word;
}
.staff-department-count {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85em;
  color: var(--color-text-muted);
}

.table-responsive {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.data-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.data-table thead th {
  background: var(--color-bg-alt);
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--color-primary-tint); }
.data-table tbody tr[hidden] { display: none; }

/* Faculty & Staff tables (about/faculty-staff.html, department pages) stay a
   real table at every width. Real names contain long unbreakable words and
   designations run to ~45 characters, so three columns can't fit a 320px
   phone without breaking words mid-name. Instead the table keeps a readable
   minimum width (in em, so it grows with the A-/A+ text-size control) and
   .table-responsive scrolls it sideways inside its own box; the page itself
   never scrolls horizontally. Separate borders (visually identical here,
   since cells only have bottom borders) keep the sticky Name cell's border
   moving with it — collapsed borders don't follow position:sticky. */
.staff-table {
  min-width: 34em;
  border-collapse: separate;
  border-spacing: 0;
}
.staff-table td { overflow-wrap: break-word; }
.staff-table th:first-child,
.staff-table td:first-child { width: 36%; }

/* Below 700px, where the table starts to scroll, the Name column is pinned
   so every row stays identifiable while the visitor scrolls across to
   Designation / Qualification. Its width is capped so the scrolling columns
   keep most of the viewport, and headers may wrap onto two lines. */
@media (max-width: 699px) {
  .staff-table th,
  .staff-table td { padding: var(--space-3) var(--space-2); }
  .staff-table thead th { white-space: normal; }
  .staff-table th:first-child,
  .staff-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: min(9em, 38vw);
    background: var(--color-bg);
    box-shadow: inset -1px 0 0 var(--color-border);
  }
  .staff-table thead th:first-child { background: var(--color-bg-alt); }
  .staff-table tbody tr:hover td:first-child { background: var(--color-primary-tint); }
}

/* Small reference tables (Courses & Intake, Hostel) — few, short columns, so
   they fit a 320px screen with no horizontal scroll at all: the descriptive
   column takes the free width and wraps, the value column shrinks to its
   content. Capped on desktop so two or three columns don't stretch across
   the full 1180px container. */
.table-compact { max-width: 45em; }
.table-compact .data-table { min-width: 0; }
.table-compact .data-table th:last-child,
.table-compact .data-table td:last-child {
  width: 1%;
  white-space: nowrap;
}
.intake-table th:first-child,
.intake-table td:first-child {
  width: 1%;
  white-space: nowrap;
}
.intake-table th:last-child,
.intake-table td:last-child { text-align: right; }
@media (max-width: 699px) {
  .table-compact .data-table th,
  .table-compact .data-table td { padding: var(--space-3) var(--space-2); }
  /* Let "Sr. No." / "Intake" headers wrap so the table still fits 320px at
     the largest text size; the values themselves stay on one line. */
  .table-compact .data-table thead th:first-child,
  .table-compact .data-table thead th:last-child { white-space: normal; }
}

/* A single supporting photograph inside page body copy — sized down from
   full section width (rather than object-fit) so the full photograph shows
   with no cropping and no distortion. */
.content-photo {
  max-width: 640px;
  margin: var(--space-5) auto;
}
.content-photo img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.content-photo figcaption {
  margin-top: var(--space-2);
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* A large diagram (e.g. an organization chart) — wider than .content-photo
   since its text needs to stay legible, but still capped and centered
   rather than running full section width. */
.chart-figure {
  max-width: 960px;
  margin: var(--space-5) auto;
}
.chart-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.chart-figure figcaption {
  margin-top: var(--space-2);
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.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;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-primary-dark);
  color: #dbe4ee;
  padding-top: var(--space-7);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}
.footer-col h3 {
  color: #fff;
  font-size: 1rem;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}
.footer-brand { color: #fff; font-weight: 700; margin-bottom: var(--space-1); }
.footer-col address p { margin: 0 0 var(--space-1); }
.footer-col ul li { margin-bottom: var(--space-2); }
.site-footer a { color: #dbe4ee; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: #fff; text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-block: var(--space-4);
  text-align: center;
  font-size: 0.85rem;
  color: #b8c4d1;
}
.footer-bottom p { margin: 0; }
.footer-bottom p + p { margin-top: var(--space-1); }

/* ---------- Global visit counter (#visit-counter, js/main.js) ----------
   Same footer markup on every page: the first line of .footer-bottom, so it
   sits centred in normal flow directly above the disclaimer. No display value
   is set here, so the [hidden] attribute still hides it until a real count
   has loaded. */
#visit-counter {
  text-align: center;
  font-variant-numeric: tabular-nums;
}