/* Bootstrap 5.3 supplies spacing, typography, dropdowns, carousel and offcanvas.
   Keep the school palette and the remaining layout constraints here. */
:root {
  --bs-primary-rgb: 45, 105, 247;
  --bs-secondary-rgb: 51, 142, 224;
  --bs-info-rgb: 45, 200, 247;
  --bs-link-color: #338ee0;
  --bs-link-color-rgb: 51, 142, 224;
  --bs-link-hover-color-rgb: 43, 121, 191;
  --bs-border-radius: .25rem;
  --bs-font-sans-serif: "Segoe UI", "Microsoft JhengHei", sans-serif;
}
body { min-height: 100vh; min-height: 100dvh; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: calc(100% - 2rem); max-width: 1320px; }
.wrap, .main-area > *, .content-grid > *, .news-item, .footer-grid > *, .filters { min-width: 0; }

/* Login: native Bootstrap controls with a Lucide select arrow. */
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-size: 16px 16px; }
.form-status:empty { display: none; }

/* Header: HTML holds logo dimensions; utilities handle spacing and icon alignment. */
.nav .nav-trigger {
  color: inherit;
  --bs-btn-hover-bg: rgba(0,0,0,.1);
  --bs-btn-active-bg: rgba(0,0,0,.1);
}
.nav .dropdown-toggle::after { display: none; }
.nav .dropdown-menu { width: max-content; max-width: calc(100vw - 2rem); min-width: 14rem; }

/* Original carousel image heights and cyan title block. Indicators are native BS5. */
.hero { background: #f0f8ff; }
.hero-photo { height: 375px; }
.carousel-caption { bottom: .25rem; padding: 1.5rem 1rem; opacity: .95; }
.carousel-caption h2 { font-size: 2rem; line-height: 1.5; }

/* Desktop layout: fixed login and related-link widths, flexible news column.
   Bootstrap d-grid and responsive gap utilities handle display and spacing. */
.main-area { grid-template-columns: minmax(0,1fr) 200px; }
.content-grid { grid-template-columns: 240px minmax(0,1fr); }
.history { grid-template-columns: repeat(3,minmax(0,1fr)); }
.footer-grid { grid-template-columns: repeat(3,minmax(0,1fr)) minmax(0,.8fr); }

/* News: title and filters share a desktop row; JS sets rows for column-first order. */
.news-heading { grid-template-columns: auto minmax(0,1fr) auto; min-height: 3.5rem; }
.filters button, .menu-toggle, .drawer-close { min-width: 3rem; min-height: 3rem; }
.filters button[aria-pressed=true] { text-decoration: underline; text-underline-offset: .5rem; text-decoration-thickness: .125rem; }
.news-list { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-flow: column; grid-template-rows: repeat(var(--news-rows,4),auto); }
.news-item { border-bottom: 1px solid var(--bs-border-color); }
.news-item.column-end { border-bottom: 0; }

/* Related links: preserve the requested 40px desktop height; QR size is in HTML. */
.partner-list a { height: 40px; }
.footer-bottom { border-top: 1px solid #ffffff40; }

/* Native responsive Offcanvas owns the backdrop, animation, scroll lock and focus. */
.menu-drawer { --bs-offcanvas-width: 360px; }

/* Match Bootstrap lg: mobile below 992px, desktop from 992px. */
@media (max-width: 991.98px) {
  .crest { width: 48px; height: 56px; }
  .wordmark { width: 128px; }
  .hero-photo { height: 260px; object-position: center !important; }
  .carousel-caption { inset: auto 0 0; padding: .25rem 1rem 1rem; }
  .carousel-caption h2 { font-size: 1rem; }
  .main-area, .content-grid, .history, .footer-grid { grid-template-columns: minmax(0,1fr); }

  /* Keep login before news; filters on a second row, one list column. */
  .news-heading { grid-template-columns: 1fr auto; }
  .more { grid-column: 2; grid-row: 1; }
  .filters { grid-column: 1/-1; grid-row: 2; }
  .filters button { flex: 1; }
  .news-item.column-end { border-bottom: 1px solid var(--bs-border-color); }
  .news-item.last-visible { border-bottom: 0; }

  /* Login and related links retain comfortable touch targets. */
  .login-body :is(.form-control,.form-select,.btn) { min-height: 3rem; }
  .partner-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .partner-list a { min-width: 0; height: 4rem; }
  .contact { border-bottom: 1px solid #ffffff40; }

  /* Drawer submenus expand in the document flow instead of floating over links. */
  .menu-drawer { max-width: 88%; }
  .offcanvas-header { padding-top: max(1rem,env(safe-area-inset-top)); }
  .offcanvas-body { padding-bottom: max(1.5rem,env(safe-area-inset-bottom)); }
  .menu-drawer .dropdown { min-width: 0; border-bottom: 1px solid var(--bs-border-color); }
  .menu-drawer .nav-trigger { min-height: 3rem; color: #34495b; }
  .menu-drawer .dropdown-menu { position: static !important; transform: none !important; width: 100%; min-width: 0; border: 0; }
  .menu-drawer .dropdown-item { min-height: 3rem; }
}