/* ============================================================================
   site.css — shared responsive layer for Riragia TVC
   ----------------------------------------------------------------------------
   Loaded AFTER each page's own <style> block, which matters: several pages pin
   the nav dropdowns with `position:absolute !important`, and the drawer rules
   below need to win that fight. Later + equal specificity + !important does it.

   Three jobs:
     1. The off-canvas navigation drawer (built at runtime by site-nav.js).
     2. Site-wide overflow guards — images, tables, long words.
     3. Small-screen layout rules for the pages that never got media queries.

   Design language is unchanged: maroon #800000, Inter, the same pill shapes and
   rounded cards already used across the site.
   ========================================================================== */

:root {
  /* ── Brand ──────────────────────────────────────────────────────────────────
     One palette for the whole site. The college colour is maroon #800000; the
     other two are its darker and lighter shades, used for depth and hover states.
     Gold is the single accent. Nothing else is a brand colour.

     These replace roughly ten near-identical maroons that had drifted across the
     pages — eight-b, six-a, double-six, nine-a, a3001a, a52a2a and 4a2121 variants —
     plus a navy accent that belonged to no scheme at all. Hex values are spelled
     out in words here deliberately, so a future find-and-replace over the palette
     cannot rewrite this explanation along with the code. */
  --rtvc-maroon: #800000;
  --rtvc-maroon-dark: #5a0000;
  --rtvc-maroon-light: #a04545;
  --rtvc-gold: #d4a017;

  /* ── Ink and surfaces ─────────────────────────────────────────────────────── */
  --rtvc-ink: #1f2937;         /* body text */
  --rtvc-ink-soft: #4b5563;    /* secondary text */
  --rtvc-ink-faint: #6b7280;   /* captions, metadata */
  --rtvc-surface: #ffffff;     /* cards */
  --rtvc-surface-alt: #f8fafc; /* page background */
  --rtvc-surface-sunk: #f3f4f6;
  --rtvc-border: #e5e7eb;

  /* ── Shape and depth ──────────────────────────────────────────────────────── */
  --rtvc-radius: 12px;
  --rtvc-radius-lg: 16px;
  --rtvc-radius-pill: 999px;
  --rtvc-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --rtvc-shadow-lg: 0 10px 25px -12px rgba(128, 0, 0, 0.28);

  --rtvc-drawer-w: 300px;
  /* Below this width the drawer owns navigation. The bar carries 11 top-level
     items, so it already wrapped badly on tablets at the old 768px. */
  --rtvc-nav-bp: 1024px;
}

/* ── 0. Brand normalisation ──────────────────────────────────────────────────
   The pages were written over a long period and drifted: gradients in some hero
   and CTA blocks, flat maroon in others. The scripted pass folded the stray hexes
   onto the palette above; these rules are the backstop for gradients written
   inline, where a stylesheet rule only wins by being !important.

   Scoped to the containers that actually carried a brand gradient, so decorative
   gradients elsewhere (progress bars, image overlays) are left alone. */

header[style*="gradient"],
.hero[style*="gradient"],
.hero-section[style*="gradient"],
.cta-section[style*="gradient"],
.page-hero[style*="gradient"],
[class*="bg-gradient-to"].bg-maroon {
  background-image: none !important;
  background-color: var(--rtvc-maroon) !important;
}

/* ── 1. Overflow guards ──────────────────────────────────────────────────────
   The single most common cause of a page scrolling sideways on a phone is an
   image or table wider than its container. These are cheap and global. */

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

img,
video {
  height: auto;
}

/* Long unbroken strings (URLs, email addresses) must not force a wider page. */
p,
li,
h1,
h2,
h3,
h4,
td,
th,
a {
  overflow-wrap: break-word;
}

/* site-nav.js wraps any table that is not already inside a scroll container.
   .table-container is the hand-written equivalent already used by the course
   brochures; it is treated as a scroll container by wrapTables(), so it needs the
   same guards — without max-width it was 8px wider than a 360px viewport and
   scrolled the whole page sideways. */
.table-scroll,
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  box-sizing: border-box;
}

.table-scroll > table {
  min-width: 100%;
}

/* Backstop. `clip` rather than `hidden` so it cannot break position:sticky
   headers the way overflow:hidden on an ancestor does. */
body {
  overflow-x: clip;
}

/* Fluid header title — replaces the inline font-size:25px that never shrank. */
header .bg-maroon span.font-bold {
  font-size: clamp(0.95rem, 3.2vw, 1.5rem) !important;
  line-height: 1.25 !important;
}

/* The maroon contact bar is a nowrap flex row holding the college name, two
   phone numbers, an email and up to four pill buttons. Around 1024px that is
   wider than the container and the whole page scrolls sideways. Letting the row
   wrap and its items shrink fixes it without changing the layout at widths
   where everything already fits. */
header .bg-maroon > .container {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

header .bg-maroon > .container > div,
header .bg-maroon > .container > div > div {
  min-width: 0;
}

/* A flex item defaults to min-width:auto, so an <input> refuses to shrink below
   its intrinsic size and pushes the adjacent button out of the container. This
   is what overflows the newsletter form in the footer. */
input,
select,
textarea {
  min-width: 0;
}

form.flex > input,
.newsletter > input,
.newsletter-input {
  min-width: 0;
  flex-shrink: 1;
}

/* Screen-reader-only helper (used by the intake section heading). */
.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;
}

/* ── 1b. Shared header for pages that had none ───────────────────────────────
   site-nav.js builds .rtvc-shell on the pages that carried a one-off navbar or
   no navigation at all (the course brochures, the online application, downloads,
   the modular tracker, 404). Styled to match the header the PHP pages render, so
   moving between them is seamless. */

.rtvc-shell {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--rtvc-surface);
  box-shadow: var(--rtvc-shadow);
  /* Belt and braces for pages whose <body> is a flex or grid container: even if
     the JS wrapper has not run, the header spans the full width rather than
     lining up beside the content. */
  width: 100%;
  flex: 0 0 100%;
  grid-column: 1 / -1;
}

.rtvc-shell__top {
  background: var(--rtvc-maroon);
  color: #fff;
  padding: 0.7rem 1rem;
}

.rtvc-shell__top-inner,
.rtvc-shell__top-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.rtvc-shell__top-inner {
  max-width: 1280px;
  margin: 0 auto;
  justify-content: space-between;
}

.rtvc-shell__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(0.95rem, 3.2vw, 1.35rem);
  line-height: 1.2;
  min-width: 0;
}

.rtvc-shell__brand img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rtvc-shell__contact {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

.rtvc-shell__utility {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rtvc-shell__utility a {
  background: #fff;
  color: var(--rtvc-maroon);
  border-radius: var(--rtvc-radius-pill);
  padding: 0.45rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}

.rtvc-shell__utility a:hover { background: var(--rtvc-surface-sunk); }

.rtvc-shell__nav { max-width: 1280px; margin: 0 auto; }

.rtvc-shell__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
}

.rtvc-shell__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--rtvc-ink);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0.45rem 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.rtvc-shell__link:hover,
.rtvc-shell__link[aria-current='page'] {
  color: var(--rtvc-maroon);
  border-bottom-color: var(--rtvc-maroon);
}

.rtvc-shell__dropdown {
  background: var(--rtvc-maroon);
  border-radius: var(--rtvc-radius);
  padding: 0.4rem 0;
  box-shadow: var(--rtvc-shadow-lg);
  min-width: 210px;
}

.rtvc-shell__dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  color: #fff;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
}

.rtvc-shell__dropdown a:hover { background: var(--rtvc-maroon-light); }

/* The shared header replaces whatever navigation the page had. */
[data-rtvc-hidden-nav] { display: none !important; }

/* ── 2. Off-canvas drawer ─────────────────────────────────────────────────── */

.rtvc-burger {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rtvc-maroon);
  border-radius: 8px;
  background: #fff;
  color: var(--rtvc-maroon);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.rtvc-burger:hover,
.rtvc-burger[aria-expanded='true'] {
  background: var(--rtvc-maroon);
  color: #fff;
}

.rtvc-burger svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.rtvc-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rtvc-drawer-w);
  max-width: 85vw;
  background: var(--rtvc-maroon-dark);
  color: #fff;
  z-index: 10001;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.28);
  overscroll-behavior: contain;
}

.rtvc-drawer.is-open {
  transform: translateX(0);
}

.rtvc-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

.rtvc-drawer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
}

.rtvc-drawer__brand img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rtvc-drawer__close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.rtvc-drawer__close:hover {
  background: rgba(255, 255, 255, 0.24);
}

.rtvc-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 20px;
}

/* Top-level links and accordion triggers share one look. */
.rtvc-drawer a,
.rtvc-drawer .rtvc-acc__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px; /* comfortable touch target */
  padding: 11px 18px;
  color: #f2dede;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.rtvc-drawer a:hover,
.rtvc-drawer a:focus-visible,
.rtvc-drawer .rtvc-acc__btn:hover,
.rtvc-drawer .rtvc-acc__btn:focus-visible {
  background: var(--rtvc-maroon);
  color: #fff;
  border-left-color: var(--rtvc-gold);
  outline: none;
}

.rtvc-acc__btn {
  justify-content: space-between;
  font-weight: 600;
}

.rtvc-acc__btn .rtvc-acc__chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: auto;
}

.rtvc-acc__btn[aria-expanded='true'] .rtvc-acc__chevron {
  transform: rotate(180deg);
}

/* The accordion panel. Closed by default and in normal document flow — this is
   what replaces the absolutely-positioned dropdown that overflowed on phones. */
.rtvc-acc__panel {
  display: none;
  background: rgba(0, 0, 0, 0.22);
}

.rtvc-acc__panel.is-open {
  display: block;
}

.rtvc-acc__panel a {
  padding-left: 34px;
  font-size: 0.84rem;
  font-weight: 400;
  /* Long names such as "Information Communication Technology" must wrap here,
     not push the drawer sideways. */
  white-space: normal !important;
  line-height: 1.35;
}

.rtvc-drawer__foot {
  padding: 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

.rtvc-drawer__foot a {
  display: inline-flex;
  width: auto;
  min-height: 36px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--rtvc-maroon);
  font-size: 0.75rem;
  font-weight: 600;
}

.rtvc-drawer__foot a:hover {
  background: var(--rtvc-gold);
  color: #000;
  border-left-color: transparent;
}

.rtvc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.rtvc-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* Freeze the page behind the open drawer. */
body.rtvc-nav-open {
  overflow: hidden !important;
  touch-action: none;
}

/* ── 3. Breakpoint switch ─────────────────────────────────────────────────── */

@media (max-width: 1023.98px) {
  /* The drawer takes over: show our burger, hide the original inline menu and
     the page's own toggle button (site-nav.js keeps them in the DOM as the
     no-JS fallback, so they must be hidden rather than removed). */
  .rtvc-burger {
    display: inline-flex;
  }

  body.rtvc-has-drawer #nav-menu {
    display: none !important;
  }

  body.rtvc-has-drawer #nav-toggle {
    display: none !important;
  }

  /* The synthesised header collapses the same way the PHP one does. */
  .rtvc-shell__contact,
  .rtvc-shell__utility {
    display: none !important;
  }

  .rtvc-shell__nav {
    justify-content: flex-start;
    gap: 10px;
    padding: 0.65rem 1rem;
  }

  /* The nav bar itself becomes a single tidy row with the burger in it. */
  body.rtvc-has-drawer header nav.container {
    justify-content: flex-start;
    gap: 10px;
    padding: 0.65rem 1rem;
  }

  /* Top utility bar: keep it, but stop it eating half the screen. */
  header .bg-maroon {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
  }

  header .bg-maroon .container > div:first-child {
    margin-bottom: 0.5rem !important;
  }

  /* The utility pills move into the drawer footer, so hide the header copy. */
  body.rtvc-has-drawer header [data-site-utility],
  body.rtvc-has-drawer header .bg-maroon .flex.flex-wrap.items-center.gap-2,
  body.rtvc-has-drawer header .bg-maroon .flex.space-x-2 {
    display: none !important;
  }

  header .bg-maroon .text-sm span {
    font-size: 0.72rem;
  }
}

@media (min-width: 1024px) {
  /* Above the breakpoint nothing changes: the original inline nav and its hover
     dropdowns behave exactly as they did before. */
  .rtvc-burger,
  .rtvc-drawer,
  .rtvc-backdrop {
    display: none !important;
  }

  body.rtvc-has-drawer #nav-menu {
    display: flex !important;
  }
}

/* ── 4. Small-screen layout for pages with no media queries of their own ───── */

@media (max-width: 767.98px) {
  /* Multi-column grids written as fixed column counts collapse to one column. */
  .footer-compact .grid,
  .compact-footer .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .cta-section {
    padding: 2rem 1rem !important;
  }

  .cta-section h2 {
    font-size: 1.6rem !important;
  }

  .section-card {
    padding: 1rem !important;
  }

  /* Sticky in-page navs must scroll rather than stack into a tall wall. */
  .department-nav {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Fixed-position helpers cluster in the corner on desktop; on a phone they
     must not sit on top of the content or each other. */
  .back-to-top,
  #back-to-top {
    bottom: 1rem !important;
    right: 1rem !important;
  }
}

@media (max-width: 639.98px) {
  h1 {
    font-size: clamp(1.4rem, 6.5vw, 2rem) !important;
    line-height: 1.2;
  }

  h2 {
    font-size: clamp(1.2rem, 5.5vw, 1.6rem) !important;
    line-height: 1.25;
  }

  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Buttons and links stay finger-sized. */
  header nav a,
  .nav-link,
  .cta-button,
  .department-brochure-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── 5. Intake cards ──────────────────────────────────────────────────────── */
/* .intake-card / .status-open / .status-closed / .btn-open / .btn-closed are
   already defined in index.php; these only add what that block lacks. */

.intake-card {
  min-width: 0; /* lets a grid child shrink instead of forcing the row wider */
}

.intake-card .btn-closed {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .rtvc-drawer,
  .rtvc-backdrop,
  .rtvc-acc__chevron,
  .intake-card {
    transition: none !important;
  }
}

/* ── 6. The server-rendered side menu ────────────────────────────────────────
 *
 * The drawer used to be built in JavaScript, which meant a page whose script
 * failed to load had no menu at all -- the live department pages 404'd on
 * site-nav.js and collapsed into an unstyled stacked list.
 *
 * partials/site_header.php now renders the drawer as markup, and these rules
 * open it from a checkbox. No JavaScript is involved in opening, closing or
 * expanding a group, so the menu works with scripting disabled. site-nav.js
 * still adds Escape-to-close, focus trapping and current-page marking on top.
 */
.rtvc-drawer-toggle:checked ~ .rtvc-drawer {
  transform: translateX(0);
}

.rtvc-drawer-toggle:checked ~ .rtvc-backdrop {
  opacity: 1;
  visibility: visible;
}

/* The burger is a <label>; give it the button affordances it no longer inherits. */
.rtvc-burger {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rtvc-maroon, #800000);
  border-radius: 0.375rem;
  color: var(--rtvc-maroon, #800000);
  cursor: pointer;
  background: transparent;
}

.rtvc-burger:hover,
.rtvc-burger:focus-visible {
  background: var(--rtvc-maroon, #800000);
  color: #fff;
}

.rtvc-drawer__close {
  cursor: pointer;
  user-select: none;
}

/* Groups are <details>, so they expand with no script. Strip the default marker
   and keep the row looking like the rest of the menu. */
.rtvc-drawer details.rtvc-acc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rtvc-drawer details.rtvc-acc > summary::-webkit-details-marker {
  display: none;
}

.rtvc-drawer details.rtvc-acc > summary::after {
  content: "\203A";
  transform: rotate(90deg);
  transition: transform 0.2s ease;
  font-size: 1.25rem;
  line-height: 1;
}

.rtvc-drawer details.rtvc-acc[open] > summary::after {
  transform: rotate(-90deg);
}

.rtvc-drawer .rtvc-acc__panel a {
  padding-left: 1.75rem;
  font-size: 0.9rem;
  opacity: 0.92;
}

/* Freeze the page behind an open drawer without needing a class on <body>. */
.rtvc-drawer-toggle:checked ~ .rtvc-drawer {
  overflow-y: auto;
}

@media (min-width: 1024px) {
  /* Above the breakpoint the inline nav takes over and the drawer is inert,
     including its checkbox, so a stray :checked cannot leak onto desktop. */
  .rtvc-burger,
  .rtvc-drawer-toggle:checked ~ .rtvc-drawer,
  .rtvc-drawer-toggle:checked ~ .rtvc-backdrop {
    display: none !important;
  }
}

/* The base rule above sets .rtvc-burger to display:none so it never shows on
   desktop; below the drawer breakpoint it has to come back. This rule sits after
   it deliberately -- an earlier @media rule of equal specificity would lose. */
@media (max-width: 1023px) {
  .rtvc-burger {
    display: inline-flex;
  }
}