/*
  Atlantichouse International School brand theme.
  Palette taken directly from the crest (wwwroot/img/AHIS_crest_light.png / AHIS_crest_dark.png):
  navy (primary), maroon and gold (accents), off-white background.
  Overrides Bootstrap 5's CSS custom properties — no Sass build step required.
*/

/*
  Plus Jakarta Sans, self-hosted as a single variable-font woff2 (matches every other front-end
  dependency in this project — Bootstrap, Bootstrap Icons, jQuery, Leaflet — all vendored under
  wwwroot/lib, zero CDN calls). One file covers weights 400-800: browsers resolve the exact
  static weight requested by each @font-face block from the font's built-in variable axis, same
  as how Google Fonts itself serves it.
*/
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/lib/fonts/plus-jakarta-sans/plus-jakarta-sans-latin-variable.woff2") format("woff2");
}

/*
  Lora — the "editorial/institutional" half of the type pairing introduced August 2026. Reserved
  for headings (h1-h3 and .display-*) so pages read like a well-set prospectus rather than
  software; UI chrome (buttons, labels, h4-h6 card/section titles, nav) stays on Plus Jakarta Sans
  for density and legibility at small sizes. Same self-hosting convention as the sans face —
  vendored under wwwroot/lib, zero CDN calls.
*/
@font-face {
    font-family: "Lora";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/lib/fonts/lora/lora-latin-variable.woff2") format("woff2");
}
@font-face {
    font-family: "Lora";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("/lib/fonts/lora/lora-latin-italic-variable.woff2") format("woff2");
}

:root {
    --ahis-navy: #14283f;
    --ahis-navy-dark: #0c1a2b;
    --ahis-maroon: #6e1423;
    --ahis-maroon-dark: #4e0e19;
    --ahis-gold: #f2b705;
    --ahis-gold-dark: #c99804;
    --ahis-cream: #faf8f3;
    --ahis-paper: #fffdf9;
    --ahis-shadow-sm: 0 0.35rem 0.75rem rgba(41, 25, 12, 0.07);
    --ahis-shadow-md: 0 0.75rem 1.5rem rgba(41, 25, 12, 0.10);
    --ahis-shadow-lg: 0 1.25rem 2.5rem rgba(41, 25, 12, 0.16);

    --bs-primary: var(--ahis-navy);
    --bs-primary-rgb: 20, 40, 63;
    --bs-link-color: var(--ahis-navy);
    --bs-link-color-rgb: 20, 40, 63;
    --bs-link-hover-color: var(--ahis-maroon);
    --bs-link-hover-color-rgb: 110, 20, 35;
    --bs-body-font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ahis-serif: "Lora", Georgia, "Times New Roman", serif;
}

body {
    font-family: var(--bs-body-font-family);
}

/* Editorial scale — page titles and major section headings. text-wrap: balance keeps a
   two-line title from breaking into an awkward 4-word/1-word split. */
h1, h2, h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--ahis-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* Lora's self-hosted range only covers 400-700 (see the @font-face above) — .fw-extrabold (800)
   on a serif display heading also reads heavier than the editorial direction wants, so it's
   dialled back specifically where the two combine, rather than everywhere .fw-extrabold is used
   (it still means "the boldest weight available" on sans-face UI text). */
.display-1.fw-extrabold, .display-2.fw-extrabold, .display-3.fw-extrabold,
.display-4.fw-extrabold, .display-5.fw-extrabold, .display-6.fw-extrabold {
    font-weight: 700 !important;
}

/* UI scale — card/section titles, the nav wordmark. Stays on the sans face: serif at these
   smaller, denser sizes (an admin table's "h6" section label, a stat tile caption) loses
   legibility rather than gaining warmth. */
h4, h5, h6,
.navbar-brand {
    font-family: var(--bs-body-font-family);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* A small letter-spaced label above a heading — "eyebrow" copy, the classic editorial device
   for giving a section a category before its title (e.g. "ADMISSIONS" above "Apply Today"). */
.ahis-eyebrow {
    display: inline-block;
    font-family: var(--bs-body-font-family);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ahis-maroon);
}

[data-bs-theme="dark"] .ahis-eyebrow {
    color: var(--ahis-gold);
}

/* A short gold rule, the letterhead/diploma-adjacent flourish used under an eyebrow+heading
   pair or above a footer — a deliberate, restrained callback to formal institutional print. */
.ahis-rule {
    display: block;
    width: 3rem;
    height: 3px;
    background: var(--ahis-gold);
    border: 0;
    border-radius: 2px;
    margin: 0.6rem 0 1rem;
}

.fw-extrabold {
    font-weight: 800 !important;
}

.btn-primary {
    --bs-btn-bg: var(--ahis-navy);
    --bs-btn-border-color: var(--ahis-navy);
    --bs-btn-hover-bg: var(--ahis-navy-dark);
    --bs-btn-hover-border-color: var(--ahis-navy-dark);
    --bs-btn-active-bg: var(--ahis-navy-dark);
    --bs-btn-active-border-color: var(--ahis-navy-dark);
    --bs-btn-disabled-bg: var(--ahis-navy);
    --bs-btn-disabled-border-color: var(--ahis-navy);
}

.btn-outline-primary {
    --bs-btn-color: var(--ahis-navy);
    --bs-btn-border-color: var(--ahis-navy);
    --bs-btn-hover-bg: var(--ahis-navy);
    --bs-btn-hover-border-color: var(--ahis-navy);
    --bs-btn-active-bg: var(--ahis-navy);
    --bs-btn-active-border-color: var(--ahis-navy);
}

.btn-light.btn-lg {
    color: var(--ahis-navy);
    font-weight: 600;
}

.text-gold {
    color: var(--ahis-gold-dark) !important;
}

.bg-navy {
    background-color: var(--ahis-navy) !important;
}

.text-maroon {
    color: var(--ahis-maroon) !important;
}

.bg-maroon {
    background-color: var(--ahis-maroon) !important;
}

.border-maroon {
    border-color: var(--ahis-maroon) !important;
}

[data-bs-theme="dark"] .text-gold {
    color: var(--ahis-gold) !important;
}

[data-bs-theme="dark"] .text-maroon {
    color: var(--ahis-maroon) !important;
}

/* A large serif figure for stat tiles/KPIs — numbers set in the editorial face read like an
   annual report, not a dashboard widget. Tabular-nums keeps digits aligned when the value updates. */
.ahis-stat-figure {
    font-family: var(--ahis-serif);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.form-check-input:checked {
    background-color: var(--ahis-navy);
    border-color: var(--ahis-navy);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--ahis-gold-dark);
    box-shadow: 0 0 0 0.2rem rgba(242, 183, 5, 0.25);
}

a {
    text-decoration-color: rgba(110, 20, 35, 0.4);
}

.badge.text-bg-success {
    background-color: #1f6f4f !important;
}

/*
  Dark theme. Built on Bootstrap 5.3's native color modes (toggling data-bs-theme="dark" on
  <html> already flips every Bootstrap-derived surface/border/text color automatically) — this
  block only re-tunes the brand-specific variables and the two components (buttons, links) that
  were hardcoded to navy above. Primary flips to gold in dark mode (navy would nearly disappear
  against a near-black background); the school crest's navy stays reserved for large surfaces
  (navbar, footer) via --ahis-navy, which is why wwwroot/img and the hero section use bg-navy
  rather than bg-primary — they're meant to stay navy in both modes, not flip with the accent.
*/
[data-bs-theme="dark"] {
    --ahis-navy: #16283d;
    --ahis-navy-dark: #0b1420;
    --ahis-maroon: #c4495f;
    --ahis-maroon-dark: #e0798c;
    --ahis-gold: #f2b705;
    --ahis-gold-dark: #d99f00;
    --ahis-cream: #0b1420;
    --ahis-paper: #101c2c;

    --bs-body-bg: #0b1420;
    --bs-body-color: #e8ecf1;
    --bs-primary: var(--ahis-gold);
    --bs-primary-rgb: 242, 183, 5;
    --bs-link-color: var(--ahis-gold);
    --bs-link-color-rgb: 242, 183, 5;
    --bs-link-hover-color: #ffd23d;
    --bs-link-hover-color-rgb: 255, 210, 61;
}

[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #14283f;
    --bs-btn-bg: var(--ahis-gold);
    --bs-btn-border-color: var(--ahis-gold);
    --bs-btn-hover-color: #14283f;
    --bs-btn-hover-bg: var(--ahis-gold-dark);
    --bs-btn-hover-border-color: var(--ahis-gold-dark);
    --bs-btn-active-color: #14283f;
    --bs-btn-active-bg: var(--ahis-gold-dark);
    --bs-btn-active-border-color: var(--ahis-gold-dark);
    --bs-btn-disabled-bg: var(--ahis-gold);
    --bs-btn-disabled-border-color: var(--ahis-gold);
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--ahis-gold);
    --bs-btn-border-color: var(--ahis-gold);
    --bs-btn-hover-color: #14283f;
    --bs-btn-hover-bg: var(--ahis-gold);
    --bs-btn-hover-border-color: var(--ahis-gold);
    --bs-btn-active-color: #14283f;
    --bs-btn-active-bg: var(--ahis-gold);
    --bs-btn-active-border-color: var(--ahis-gold);
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--ahis-gold);
    border-color: var(--ahis-gold);
}

[data-bs-theme="dark"] a {
    text-decoration-color: rgba(242, 183, 5, 0.4);
}

/*
  "Install app" banner (see pwa-install.js). Fixed at the bottom of the viewport, above any
  bottom nav bar via --ahis-bottom-inset (0 by default; layouts with a bottom tab bar — see
  portal.css — raise it so the two never overlap). Slides up on entrance; respects
  prefers-reduced-motion by skipping the transform entirely.
*/
.ahis-pwa-install {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(0.75rem + var(--ahis-bottom-inset, 0px) + env(safe-area-inset-bottom, 0px));
    z-index: 1080;
    max-width: 26rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    background: var(--ahis-paper);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    box-shadow: var(--ahis-shadow-lg);
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.ahis-pwa-install.show {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .ahis-pwa-install {
        transition: opacity 0.01s linear;
        transform: none;
    }
}

.ahis-pwa-install-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.ahis-pwa-install-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-size: 0.85rem;
    flex-grow: 1;
    min-width: 0;
}

.ahis-pwa-install-text strong {
    font-size: 0.9rem;
}

.ahis-pwa-install-text span {
    color: var(--bs-secondary-color);
}

.ahis-pwa-install-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Theme toggle button, present in every layout's header. */
.theme-toggle {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    color: inherit;
    border-radius: 0.375rem;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
}

/*
  Brand crest, swapped by theme on surfaces whose background actually changes with
  data-bs-theme (the public header, the auth card). The crest's navy line-art has good
  contrast on light surfaces but nearly disappears on dark ones, so the dark-theme crest
  is a separate asset with the line-art recolored to brand gold, not the same image.
  Surfaces with a fixed dark background regardless of theme (bg-navy: admin/portal top
  nav, public footer) skip this swap entirely and always use the gold crest directly.
*/
.theme-logo-dark { display: none; }
[data-bs-theme="dark"] .theme-logo-light { display: none; }
[data-bs-theme="dark"] .theme-logo-dark { display: inline-block; }