/**
 * ANSC signature UI components — hand-maintained, loaded after styles.css
 * (compiled Tailwind) and perf-overrides.css, so a Tailwind recompile can't
 * wipe it. Every class is `ansc-` prefixed.
 *
 * Mobile-perf rule (see perf-overrides.css): everything here is static —
 * no blur filters, no looping animation. Decoration is plain gradients.
 */
:root {
  --ansc-navy: #001e35;
  --ansc-navy-deep: #00121f;
  --ansc-gold: #d09945;
  --ansc-gold-soft: #e8c98f;
  --ansc-sky: #87e1ff;
  --ansc-cut: 14px; /* signature clipped-corner size */
}

/* ---------- Page banner: navy field, gold "gate" frame, corner cuts ---------- */
.ansc-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(135, 225, 255, .16), transparent 55%),
    linear-gradient(135deg, var(--ansc-navy) 0%, var(--ansc-navy-deep) 100%);
  border-bottom: 4px solid var(--ansc-gold);
}
/* fine diagonal "ledger" texture */
.ansc-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 14px);
}
/* gold bracket in the top-left and bottom-right corners */
.ansc-banner::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--ansc-gold), var(--ansc-gold)) top left / 56px 2px no-repeat,
    linear-gradient(var(--ansc-gold), var(--ansc-gold)) top left / 2px 56px no-repeat,
    linear-gradient(var(--ansc-gold), var(--ansc-gold)) bottom right / 56px 2px no-repeat,
    linear-gradient(var(--ansc-gold), var(--ansc-gold)) bottom right / 2px 56px no-repeat;
  opacity: .85;
}
.ansc-banner__title {
  display: inline-block;
  padding-bottom: .6rem;
  background: linear-gradient(var(--ansc-gold), var(--ansc-gold)) bottom center / 4.5rem 3px no-repeat;
}
@media (max-width: 767px) {
  .ansc-banner::after { inset: 8px; opacity: .7; }
}

/* ---------- Buttons: clipped-corner, gold/navy ---------- */
.ansc-btn {
  --_bg: var(--ansc-gold);
  --_fg: var(--ansc-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .6rem 1.5rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  color: var(--_fg);
  background: var(--_bg);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  clip-path: polygon(var(--ansc-cut) 0, 100% 0, 100% calc(100% - var(--ansc-cut)), calc(100% - var(--ansc-cut)) 100%, 0 100%, 0 var(--ansc-cut));
  transition: filter .15s ease, transform .15s ease;
}
.ansc-btn:hover { filter: brightness(1.08); }
.ansc-btn:active { transform: translateY(1px); }
.ansc-btn:focus-visible { outline: 3px solid var(--ansc-sky); outline-offset: 3px; }
.ansc-btn--navy { --_bg: var(--ansc-navy); --_fg: #fff; }
.ansc-btn--light { --_bg: #fff; --_fg: var(--ansc-navy); }
/* outline variant: clip-path would cut a border, so fake it with an inset ring */
.ansc-btn--ghost {
  --_bg: transparent;
  --_fg: currentColor;
  box-shadow: inset 0 0 0 2px var(--ansc-gold);
}
.ansc-btn--sm { min-height: 2.25rem; padding: .4rem 1rem; font-size: .875rem; --ansc-cut: 10px; }

/* ---------- Badges: notched tag with gold edge ---------- */
.ansc-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .75rem .2rem .6rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ansc-navy);
  background: var(--ansc-gold-soft);
  border-left: 4px solid var(--ansc-gold);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
  padding-right: 1.1rem;
}
.ansc-badge--navy { color: #fff; background: var(--ansc-navy); border-left-color: var(--ansc-sky); }
.ansc-badge--sky { background: var(--ansc-sky); border-left-color: var(--ansc-navy); }
/* ---------- Hero carousel: layered landscape cards (assets/js/hero-carousel.js) ----------
 * The JS sizes/positions every card (16:9) and animates transform + opacity only. */
#hero-carousel-root { touch-action: pan-y; }
#hero-carousel-root:focus-visible { outline: 3px solid var(--ansc-sky); outline-offset: -3px; }
#hero-carousel-cards.ansc-hc-stage { position: absolute; inset: 0; width: auto; height: auto; }
.ansc-hc-card {
  position: absolute;
  left: 50%;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #0f172a;
  cursor: pointer;
  backface-visibility: hidden;
  will-change: transform, opacity;
  box-shadow: 0 24px 48px -26px rgba(2, 6, 23, .6), 0 8px 18px -10px rgba(2, 6, 23, .35);
}
.ansc-hc-card[data-d="0"] {
  cursor: default;
  box-shadow: 0 40px 80px -28px rgba(2, 6, 23, .7), 0 14px 30px -14px rgba(2, 6, 23, .45);
}
.ansc-hc-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.ansc-hc-veil { position: absolute; inset: 0; background: #020617; pointer-events: none; transition: opacity .5s ease; }

.ansc-hc-panel {
  position: absolute;
  z-index: 40;
  box-sizing: border-box;
  padding: 1.1rem 1.4rem 1.25rem;
  background: rgba(255, 255, 255, .96);
  border-radius: 1rem;
  box-shadow: 0 14px 34px rgba(2, 6, 23, .18);
  text-align: left;
  transition: opacity .22s ease;
}
.ansc-hc-panel.is-out { opacity: 0; }
/* phones: a slim text box (title + one button) so the card, not the caption, owns the screen */
.ansc-hc-panel--compact { padding: .7rem 1rem .8rem; border-radius: .85rem; box-shadow: 0 8px 20px rgba(2, 6, 23, .14); }
.ansc-hc-panel--compact .ansc-hc-panel__title { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ansc-hc-panel--compact .ansc-hc-panel__title:last-child { margin-bottom: 0; }
.ansc-hc-panel__bar { position: absolute; top: 0; left: 0; right: 0; height: 5px; display: flex; overflow: hidden; border-radius: 1rem 1rem 0 0; }
.ansc-hc-panel__bar i { flex: 1; }
.ansc-hc-panel__bar i:nth-child(1) { background: #2563eb; }
.ansc-hc-panel__bar i:nth-child(2) { background: #dc2626; }
.ansc-hc-panel__bar i:nth-child(3) { background: #facc15; }
.ansc-hc-panel__title { margin: .35rem 0 .4rem; font-size: 1.25rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: #0f172a; }
.ansc-hc-panel__text { margin: 0 0 .85rem; font-size: .9rem; line-height: 1.5; color: #475569; }
.ansc-hc-panel__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (min-width: 768px) {
  .ansc-hc-panel__title { font-size: 1.875rem; }
  .ansc-hc-panel__text { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ansc-hc-panel, .ansc-hc-veil { transition: none; }
}

/* Homepage hero stage (header spacer + notice marquee + carousel). On tablet/desktop it is exactly one
 * screen tall, so the nav bar, marquee, cards and dots all fit without scrolling; the carousel root is
 * flex-1 and hero-carousel.js sizes the cards to whatever height is left. Phones size to their content. */
@media (min-width: 768px) {
  .ansc-hero-stage { height: 100vh; height: 100svh; min-height: 620px; }
}
/* Phones too: nav + marquee + carousel fill exactly one screen (svh = the screen with the browser bars showing,
 * so nothing is cut off). hero-carousel.js sizes the card to whatever height is left under the marquee. */
@media (max-width: 767px) {
  .ansc-hero-stage { height: 100vh; height: 100svh; min-height: 540px; }
}

/* ---------- Button add-ons ---------- */
.ansc-btn:disabled, .ansc-btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; transform: none; }
/* ansc-btn sets display:inline-flex, which would otherwise beat Tailwind's responsive show/hide helpers */
.ansc-btn.hidden { display: none; }
@media (min-width: 640px) { .ansc-btn.hidden.sm\:inline-flex { display: inline-flex; } }
.ansc-btn--onDark { --_fg: #fff; }                 /* outline button on a dark background */
.ansc-btn--lg { min-height: 3.25rem; padding: .8rem 2rem; font-size: 1.05rem; --ansc-cut: 16px; }
.ansc-btn--icon { padding: 0; width: 2.5rem; min-height: 2.5rem; }

/* ghost button: the inset ring can't follow the clipped corners, so draw the two diagonal edges too */
.ansc-btn--ghost {
  background:
    linear-gradient(135deg, transparent calc(var(--ansc-cut) * .7071), var(--ansc-gold) calc(var(--ansc-cut) * .7071), var(--ansc-gold) calc(var(--ansc-cut) * .7071 + 2px), transparent calc(var(--ansc-cut) * .7071 + 2px)),
    linear-gradient(315deg, transparent calc(var(--ansc-cut) * .7071), var(--ansc-gold) calc(var(--ansc-cut) * .7071), var(--ansc-gold) calc(var(--ansc-cut) * .7071 + 2px), transparent calc(var(--ansc-cut) * .7071 + 2px));
}

/* ---------- Navigation bar (includes/header.php) ----------
 * Notched gold tab on hover, solid gold tab for the current page. Applied on top of the existing markup,
 * so the old white pill + cyan underline are switched off here rather than removed from the HTML. */
.ansc-nav-link { position: relative; isolation: isolate; border-radius: 0 !important; transition: color .2s ease; }
.ansc-nav-link > div.absolute,
.ansc-nav-link > span.absolute,
.ansc-nav-link span.rounded-full { display: none; }
.ansc-nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ansc-gold);
  opacity: 0;
  transition: opacity .2s ease;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.ansc-nav-link:hover { color: var(--ansc-gold-soft); }
.ansc-nav-link:hover::before { opacity: .2; }
.ansc-nav-link[aria-current="page"],
.ansc-nav-link[data-active] { color: var(--ansc-navy); }
.ansc-nav-link[aria-current="page"]::before,
.ansc-nav-link[data-active]::before { opacity: 1; }
.ansc-nav-link:focus-visible { outline: 3px solid var(--ansc-sky); outline-offset: 2px; }

.ansc-nav-sub { border-left: 3px solid transparent; border-radius: 0 !important; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.ansc-nav-sub:hover { background-color: rgba(208, 153, 69, .18); border-left-color: var(--ansc-gold); color: #fff; }
.ansc-nav-sub[aria-current="page"] { background-color: rgba(208, 153, 69, .14); border-left-color: var(--ansc-gold); color: var(--ansc-gold-soft); font-weight: 700; }

/* responsive show/hide for the shared button (ansc-btn sets display, which beats Tailwind's lg: helpers) */
@media (min-width: 1024px) {
  .ansc-btn.hidden.lg\:inline-flex { display: inline-flex; }
  .ansc-btn.lg\:hidden { display: none; }
}

/* Admissions (the main conversion) stays visibly highlighted even when it isn't the current page:
 * a bright gold outline with the signature cut corners, filling solid gold when it IS the current page. */
.ansc-nav-link--cta {
  --ansc-cut: 10px;
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--ansc-gold);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background:
    linear-gradient(135deg, transparent calc(var(--ansc-cut) * .7071), var(--ansc-gold) calc(var(--ansc-cut) * .7071), var(--ansc-gold) calc(var(--ansc-cut) * .7071 + 2px), transparent calc(var(--ansc-cut) * .7071 + 2px)),
    linear-gradient(315deg, transparent calc(var(--ansc-cut) * .7071), var(--ansc-gold) calc(var(--ansc-cut) * .7071), var(--ansc-gold) calc(var(--ansc-cut) * .7071 + 2px), transparent calc(var(--ansc-cut) * .7071 + 2px));
}
.ansc-nav-link--cta:hover::before { opacity: .25; }

/* Keep the two link groups symmetric around the logo: equal halves, a fixed gap for the crest. */
@media (min-width: 1024px) {
  #site-header .ansc-nav-wrap { left: 0; right: 0; transform: none; translate: none; display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem minmax(0, 1fr); gap: 0; }
  #site-header .ansc-nav-wrap > nav:first-child { justify-self: end; }
  #site-header .ansc-nav-wrap > nav:last-child { justify-self: start; }
}

/* Nav sizing: 5 links on the left of the logo, 3 on the right. The left group is the long one, so size the text
 * as large as the space beside the logo allows at each width (comfortable reading over perfect symmetry). */
@media (min-width: 1024px) {
  #site-header nav.hidden.lg\:flex { gap: .125rem; }
  #site-header nav .ansc-nav-link { padding-left: .55rem; padding-right: .55rem; font-size: .75rem; letter-spacing: 0; }
}
@media (min-width: 1100px) {
  #site-header nav.hidden.lg\:flex { gap: .2rem; }
  #site-header nav .ansc-nav-link { padding-left: .7rem; padding-right: .7rem; font-size: .8rem; letter-spacing: .02em; }
}
@media (min-width: 1280px) {
  #site-header nav.hidden.lg\:flex { gap: .4rem; }
  #site-header nav .ansc-nav-link { padding-left: .9rem; padding-right: .9rem; font-size: .875rem; letter-spacing: .03em; }
}
@media (min-width: 1536px) {
  #site-header nav.hidden.lg\:flex { gap: .6rem; }
  #site-header nav .ansc-nav-link { padding-left: 1.1rem; padding-right: 1.1rem; font-size: .9375rem; }
}

/* Mobile menu: when it is taller than the screen it scrolls inside itself (it used to be clipped, so the
 * bottom links could not be reached). The bottom padding reserves room for the cookie bar (set by header.js) so the last link can scroll clear of it. */
#mobile-menu.max-h-screen { max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#mobile-menu nav { padding-bottom: calc(var(--ansc-cookie-h, 0px) + 2rem + env(safe-area-inset-bottom, 0px)); }
/* solid background: the page text behind the open menu was faintly visible through the 95% panel */
#mobile-menu > div { background-color: #0f172a !important; }

/* News spotlight card: a bounded image area (same idea as the other news cards: fixed shape, image centred and
 * contained on a blurred backdrop). Before, the image was height:100% of an auto-height box, so a square or
 * portrait photo made the whole card as tall as the photo was wide - taller than the screen. */
.ansc-spotlight-media { position: relative; overflow: hidden; background: #020617; height: 300px; }
.ansc-spotlight-fg { position: absolute; inset: 0; z-index: 10; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 768px) {
  .ansc-spotlight-media { height: auto; min-height: clamp(340px, 52vh, 480px); }
}

/* ---------- Hero carousel background: the school's navy + gold instead of a blank pale panel ----------
 * Static only (gradients + one tiny repeating SVG tile): no blur, no animation, cheap on phones.
 *   1) a warm gold glow behind the front card, 2) a faint lotus-style geometric pattern (a nod to the Buddhist
 *   school), 3) a deep navy gradient, 4) a gold edge at the bottom, like the page banners. */
.ansc-hero-bg {
  background:
    radial-gradient(60% 58% at 50% 46%, rgba(208, 153, 69, .26) 0%, rgba(208, 153, 69, .08) 48%, transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23d09945' stroke-opacity='.13' stroke-width='1'%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Ccircle cx='0' cy='40' r='20'/%3E%3Ccircle cx='80' cy='40' r='20'/%3E%3Ccircle cx='40' cy='0' r='20'/%3E%3Ccircle cx='40' cy='80' r='20'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #0b2a47 0%, #001e35 52%, #00131f 100%);
  border-bottom: 4px solid var(--ansc-gold);
}
/* the front card gets a thin gold rim so it lifts off the dark background */
.ansc-hero-bg .ansc-hc-card[data-d="0"] {
  box-shadow: 0 0 0 1px rgba(208, 153, 69, .55), 0 40px 80px -28px rgba(0, 0, 0, .8), 0 14px 30px -14px rgba(0, 0, 0, .55);
}
.ansc-hero-bg .ansc-hc-card { box-shadow: 0 24px 48px -26px rgba(0, 0, 0, .75), 0 8px 18px -10px rgba(0, 0, 0, .5); }
/* dots on the dark background: soft white, active one gold */
.ansc-hero-bg #hero-carousel-dots button { background: rgba(255, 255, 255, .38) !important; }
.ansc-hero-bg #hero-carousel-dots button[aria-current] { background: var(--ansc-gold) !important; }
.ansc-hero-bg #hero-carousel-dots button:hover { background: rgba(255, 255, 255, .7) !important; }
.ansc-hero-bg:focus-visible { outline-offset: -4px; }

/* ---------- Light surface: the hero's design (warm gold glow + faint lotus pattern) on a light base ----------
 * Used instead of the plain pale-grey section backgrounds. Same recipe as .ansc-hero-bg, tuned for dark text on
 * warm ivory. Static only (gradients + one tiny tile), so it costs nothing on phones. */
.ansc-surface-light {
  background:
    radial-gradient(70% 85% at 50% 0%, rgba(208, 153, 69, .15) 0%, rgba(208, 153, 69, .05) 45%, transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23d09945' stroke-opacity='.17' stroke-width='1'%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Ccircle cx='0' cy='40' r='20'/%3E%3Ccircle cx='80' cy='40' r='20'/%3E%3Ccircle cx='40' cy='0' r='20'/%3E%3Ccircle cx='40' cy='80' r='20'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #fffdf8 0%, #faf5ea 100%);
  border-color: rgba(208, 153, 69, .3);
}