/*
 * compat.css — cross-browser / cross-device compatibility layer
 * Loaded after styles-*.css. Only adds vendor-prefixed fallbacks and
 * device-safe defaults; does not change the visual design.
 */

/* Base sizing reset (avoids Safari/old-Android box-model quirks) */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;   /* stop iOS Safari auto text zoom on rotate */
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; /* remove grey flash on Android/iOS taps */
  scroll-behavior: smooth;
}
*, *::before, *::after { box-sizing: inherit; }

/* Respect users who disable animation (also avoids jank on low-end devices) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none; /* stop iOS/Chrome pull-to-refresh rubber-banding on modals */
}

/* Mobile-safe full-height sections: 100vh is wrong on iOS Safari / Android Chrome
   because the address bar resizes the viewport after first paint. Use dvh where
   supported and fall back to a JS-measured custom property (set in compat.js)
   everywhere else. */
.min-h-screen, [class*="min-h-screen"] {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
}
@supports (min-height: 100dvh) {
  .min-h-screen, [class*="min-h-screen"] {
    min-height: 100dvh;
  }
}
.h-screen, [class*="h-screen"] {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
@supports (height: 100dvh) {
  .h-screen, [class*="h-screen"] {
    height: 100dvh;
  }
}

/* backdrop-filter needs the -webkit- prefix for Safari (incl. iOS) */
[style*="backdrop-filter"],
.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-md, .backdrop-blur-lg, .backdrop-blur-xl {
  -webkit-backdrop-filter: blur(8px);
}

/* position: sticky needs the -webkit- prefix on older Safari/iOS */
.sticky, [class*="sticky"] {
  position: -webkit-sticky;
  position: sticky;
}

/* Buttons/inputs: reset native OS chrome so they render the same everywhere */
button, input, select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: inherit;
}
button { -webkit-user-select: none; user-select: none; }

/* iOS Safari zooms the page if a focused input has font-size < 16px.
   Force a safe minimum only inside forms, without changing the visual size
   the design already targets on larger screens. */
@media (max-width: 767px) {
  input, select, textarea {
    font-size: max(16px, 1em);
  }
}

/* Custom scrollbars: webkit browsers + Firefox both styled so the page
   doesn't look broken/unstyled on Firefox or Edge */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.35);
  border-radius: 9999px;
}

/* Images/media: prevent overflow and layout shift-induced horizontal
   scrollbars on narrow devices */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Safe-area padding for notched devices (iPhone X+, Android punch-hole) */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.fixed.bottom-0, [class*="fixed"][class*="bottom-0"] {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Prevent accidental horizontal scroll on any device */
html, body { max-width: 100%; overflow-x: hidden; }

/* Keyboard-focus ring visible for accessibility/keyboard + gamepad nav,
   without showing it on mouse/touch clicks */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #1c2b12;
  outline-offset: 2px;
}

/* Print styles so “print this page” isn't broken by fixed/sticky nav */
@media print {
  .fixed, .sticky, [class*="fixed"], [class*="sticky"] { position: static !important; }
  header, nav, .no-print { display: none !important; }
}

/* ---------------------------------------------------------------------
 * Premium header / navigation polish
 * Purely additive — styles the existing header/nav markup and any Radix
 * dropdown/menu panels it opens. Nothing here changes DOM structure or
 * class names, so it can't interfere with the site's own JS.
 * ------------------------------------------------------------------- */

/* Subtle depth on the sticky header once content scrolls behind it */
header.sticky {
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 24px -16px rgba(0, 0, 0, 0.35);
}

/* Gold micro-underline sweep on primary nav items, top-bar links and
   footer link columns — a small, consistent "premium" hover signature
   instead of a flat color swap. */
header nav a,
header nav button,
.head-shell a:not([class*="bg-"]) {
  position: relative;
}
header nav a::after,
footer a:not([class*="rounded"])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1.5px;
  background: currentColor;
  opacity: 0.9;
  transition: right 0.25s ease;
}
header nav a:hover::after,
header nav a:focus-visible::after {
  right: 0;
}

/* Slightly lift primary CTA buttons on hover/focus for a tactile,
   high-end feel instead of a plain color change. */
a[class*="bg-signal"], button[class*="bg-signal"],
a[class*="bg-gold"], button[class*="bg-gold"],
a[class*="bg-primary"], button[class*="bg-primary"] {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
a[class*="bg-signal"]:hover, button[class*="bg-signal"]:hover,
a[class*="bg-gold"]:hover, button[class*="bg-gold"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.45);
}
a[class*="bg-signal"]:active, button[class*="bg-signal"]:active,
a[class*="bg-gold"]:active, button[class*="bg-gold"]:active {
  transform: translateY(0);
}

/* "Contact Us" header nav item — its own bordered box with a tactile
   hover lift instead of the plain flat nav links around it, so it reads
   as a clear, clickable invitation in the header. */
.nav-contact-box {
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  transform: translateY(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease,
              background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease;
}
.nav-contact-box::after { content: none !important; } /* no underline sweep on this one — it's a box, not a text link */
.nav-contact-box:hover,
.nav-contact-box:focus-visible {
  transform: translateY(-3px);
  background: var(--accent, #c9a227) !important;
  border-color: var(--accent, #c9a227) !important;
  color: #1c2b12 !important;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5);
}
.nav-contact-box:active {
  transform: translateY(-1px);
}

/* Radix dropdown/menu panels (Programs, Institute, Locations, Portals):
   give the flyout a crisp card treatment with a soft entrance so it reads
   as a deliberate, designed panel rather than a bare list. */
[data-radix-popper-content-wrapper] [role="menu"],
[data-radix-popper-content-wrapper] > div {
  border-radius: 6px;
  box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.12);
  animation: cadets-menu-in 0.16s ease-out;
}
@keyframes cadets-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Deeper, more immersive Google Maps embed. The component ships two sizes
   (a short h-64 CTA strip and a taller h-80/h-full "Visit the campus"
   card) — both get a larger minimum height and a premium framed treatment
   so the map reads as a real destination shot, not a small thumbnail. */
iframe[src*="google.com/maps"] {
  min-height: 320px !important;
  height: 420px !important;
  filter: saturate(1.05);
  transition: filter 0.25s ease;
}
@media (min-width: 1024px) {
  iframe[src*="google.com/maps"] {
    height: 480px !important;
  }
}
iframe[src*="google.com/maps"]:hover {
  filter: saturate(1.15);
}
/* Give the map's wrapper card a premium gold-edged frame with real depth,
   overriding the plain thin border it ships with. */
div:has(> iframe[src*="google.com/maps"]) {
  border: 1.5px solid var(--accent, #c9a227) !important;
  border-radius: 10px !important;
  box-shadow: 0 28px 60px -30px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden;
}

/* Card hover lift for program/location/blog cards site-wide — consistent
   "premium" tactility without touching component markup. */
.ink-card, .tilt-card, [class*="shadow-card"] {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
a:hover > .ink-card, a:hover > [class*="shadow-card"],
.ink-card:hover, [class*="shadow-card"]:hover {
  box-shadow: 0 22px 40px -24px rgba(0, 0, 0, 0.5);
}

/* Gallery grid + lightbox */
.gallery-thumb {
  transition: transform 0.3s ease, filter 0.3s ease;
  will-change: transform;
}
figure:has(> .gallery-thumb) {
  transition: box-shadow 0.25s ease;
}
figure:has(> .gallery-thumb):hover {
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.5);
}
figure:has(> .gallery-thumb):hover .gallery-thumb {
  transform: scale(1.04);
}

.cadets-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 8, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.cadets-lightbox.is-open {
  display: flex;
  animation: cadets-lightbox-fade 0.2s ease;
}
@keyframes cadets-lightbox-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cadets-lightbox-stage {
  max-width: min(92vw, 1100px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cadets-lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
  background: #111;
}
.cadets-lightbox-counter {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cadets-lightbox-close,
.cadets-lightbox-nav {
  position: absolute;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.cadets-lightbox-close {
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  width: 40px;
  height: 40px;
  font-size: 24px;
  line-height: 1;
}
.cadets-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 28px;
}
.cadets-lightbox-prev { left: max(12px, env(safe-area-inset-left)); }
.cadets-lightbox-next { right: max(12px, env(safe-area-inset-right)); }
.cadets-lightbox-close:hover,
.cadets-lightbox-nav:hover {
  background: var(--accent, #c9a227);
  border-color: var(--accent, #c9a227);
  color: #1c2b12;
}
.cadets-lightbox-nav:active { transform: translateY(-50%) scale(0.94); }
@media (max-width: 640px) {
  .cadets-lightbox-nav { width: 40px; height: 40px; font-size: 22px; }
}

/* Refined, non-jumpy focus ring that still meets accessibility needs on
   every browser (Firefox/Safari draw default outlines differently). */
header nav a:focus-visible,
header nav button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
  border-radius: 2px;
}