/* =====================================================================
   BASE.CSS
   Design tokens (colours, fonts, spacing), typography, buttons and
   small utilities. Loaded on every page, after Bootstrap.
   ===================================================================== */

/* ---------- 1. Design tokens -------------------------------------- */
:root {
  /* Brand colours (kept from the original site, deepened for contrast) */
  --ink: #12303f;          /* deepest navy: dark sections, footer */
  --navy: #1e4356;         /* original heading colour */
  --navy-2: #284e62;       /* original dark surface */
  --steel: #2f6f93;        /* links and accents on white */
  --sky: #68a4c4;          /* original accent, used on dark backgrounds */
  --maroon: #8e2a35;       /* buttons and calls to action */
  --maroon-dark: #73212b;
  --gold: #e2a925;         /* from the emblem; small highlights only */

  /* Neutrals */
  --paper: #f3f6f8;        /* alternate section background */
  --white: #ffffff;
  --line: #dbe3e8;
  --text: #33434d;
  --muted: #5d6e78;

  /* Type */
  /* Same three fonts as the original site */
  --font-display: "Raleway", "Segoe UI", system-ui, sans-serif;      /* headings */
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* text */
  --font-ui: "Poppins", "Segoe UI", system-ui, sans-serif;           /* menu, buttons, pills */

  /* Glass (frosted) surfaces */
  --glass-light: rgba(255, 255, 255, .66);
  --glass-light-border: rgba(255, 255, 255, .75);
  --glass-dark: rgba(14, 38, 50, .74);
  --glass-blur: blur(16px) saturate(170%);
  --glass-ring: 0 0 0 1px rgba(18, 48, 63, .08), 0 10px 30px -14px rgba(18, 48, 63, .35);

  /* Cut corners */
  --cut: 18px;          /* size of the cut on cards */
  --cut-media: 30px;    /* size of the cut on photos */

  /* Shape and depth */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(18, 48, 63, .06), 0 2px 6px rgba(18, 48, 63, .05);
  --shadow: 0 10px 30px -12px rgba(18, 48, 63, .25);

  /* Layout */
  --header-h: 116px;       /* top bar + main bar; updated by main.js */
  --section-y: clamp(4rem, 8vw, 6.5rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --spring: cubic-bezier(.34, 1.36, .5, 1);   /* slight overshoot, used by sliding pills */

  /* Bootstrap overrides */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--text);
  --bs-link-color: var(--steel);
  --bs-link-color-rgb: 47, 111, 147;
  --bs-link-hover-color: var(--navy);
  --bs-border-color: var(--line);
}

/* ---------- 2. Page basics ---------------------------------------- */
/* Space kept above a section when the page jumps to it (fixed header + pill bar).
   main.js updates --jump-h with the real height of the pill bar. */
html { scroll-behavior: smooth; scroll-padding-top: calc(66px + var(--jump-h, 0px) + 16px); }
html.js { scroll-behavior: auto; } /* main.js does its own, smoother scrolling */
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  /* Soft colour wash behind the page so the frosted-glass bars have something to blur */
  background:
    radial-gradient(900px 520px at 100% 0%, rgba(104, 164, 196, .14), transparent 65%),
    radial-gradient(800px 480px at 0% 55%, rgba(142, 42, 53, .07), transparent 60%),
    radial-gradient(700px 420px at 85% 100%, rgba(226, 169, 37, .08), transparent 60%),
    var(--white);
  background-attachment: fixed;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
::selection { background: var(--sky); color: var(--ink); }

/* Visible focus for keyboard users */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 1rem; top: -60px; z-index: 2000;
  background: var(--gold); color: var(--ink); padding: .6rem 1rem;
  border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- 3. Typography ----------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); font-weight: 800; }
/* Bootstrap's .h1–.h6 classes (e.g. <h2 class="h3">) use the same heading style */
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-display); font-weight: 700; color: var(--ink); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.8rem, 3.1vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.08rem; }
p  { max-width: 70ch; text-wrap: pretty; }
.lead { font-size: 1.2rem; line-height: 1.6; color: var(--text); }
small, .small { font-size: .875rem; }
.text-muted-2 { color: var(--muted); }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
strong { font-weight: 600; color: var(--ink); }

/* ---------- 4. Buttons -------------------------------------------- */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.35rem;
  --bs-btn-padding-y: .72rem;
  --bs-btn-border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-ui); font-weight: 500; font-size: .95rem; letter-spacing: .005em;
  --bs-btn-border-radius: 999px;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-sm { --bs-btn-padding-x: .9rem; --bs-btn-padding-y: .42rem; font-size: .875rem; }
.btn-lg { --bs-btn-padding-x: 1.75rem; --bs-btn-padding-y: .9rem; font-size: 1.05rem; }

.btn-maroon {
  background-image: linear-gradient(135deg, #a3323f 0%, var(--maroon) 55%, var(--maroon-dark) 100%);
  box-shadow: 0 8px 20px -10px rgba(142, 42, 53, .8), inset 0 1px 0 rgba(255, 255, 255, .18);
  --bs-btn-bg: var(--maroon); --bs-btn-border-color: var(--maroon); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--maroon-dark); --bs-btn-hover-border-color: var(--maroon-dark); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--maroon-dark); --bs-btn-active-color: #fff;
}
.btn-navy {
  --bs-btn-bg: var(--navy); --bs-btn-border-color: var(--navy); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); --bs-btn-hover-color: #fff;
}
.btn-outline-navy {
  --bs-btn-color: var(--navy); --bs-btn-border-color: currentColor;
  --bs-btn-hover-bg: var(--navy); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--navy);
}
.btn-outline-light {
  --bs-btn-border-color: rgba(255,255,255,.55);
  --bs-btn-hover-color: var(--ink);
}

/* Text link with a sliding arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-ui); font-weight: 500; color: var(--steel); text-decoration: none;
}
.link-arrow .bi-arrow-right { transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--navy); }
.link-arrow:hover .bi-arrow-right { transform: translateX(4px); }

/* ---------- 5. Sections ------------------------------------------- */
.section { padding-block: var(--section-y); }
.section-tight { padding-block: calc(var(--section-y) * .6); }
.bg-paper { background: rgba(232, 240, 245, .55); }
.bg-ink { background: var(--ink); color: rgba(255,255,255,.82); }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4 { color: #fff; }

.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 46rem; }
.section-head.is-center { margin-inline: auto; text-align: center; }
.section-head.is-center p { margin-inline: auto; }
.section-title { margin-bottom: .75rem; }
.section-lead { color: var(--muted); font-size: 1.1rem; margin: 0; }

/* Section heading with a link on the right (e.g. "All activities") */
.section-head-row {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head-row .section-head { margin-bottom: 0; }

/* ---------- 6. The Naga band --------------------------------------
   A thin stripe inspired by the bands on a Naga shawl. Used as a
   divider under page banners, the hero and above the footer. */
.naga-band {
  height: 9px;
  background: linear-gradient(180deg,
    var(--maroon) 0 5px,
    var(--gold) 5px 6px,
    var(--maroon) 6px 7px,
    #0b1f29 7px 9px);
}

/* ---------- 7. "Coming soon" chip ---------------------------------- */
.chip-soon {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: 999px;
  background: #fff6e0; color: #7a5300; border: 1px solid #f1d9a0;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
}

/* ---------- 8. Scroll reveal (see main.js) -------------------------
   Elements with data-reveal fade up once when they enter the screen. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Respect people who turn off animations in their device settings */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 9. Glass surfaces ------------------------------------- */
.glass {
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-light-border);
  box-shadow: var(--glass-ring);
}

/* ---------- 10. Cut corners ("colour cuts") ------------------------
   The top-right corner is cut off at 45°, and a thin coloured band
   runs along the cut. Set --cut-accent on an element to change the
   colour of the band (subject cards use their subject colour). */
.cut {
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.cut::after {
  content: ""; position: absolute; top: 0; right: 0; z-index: 4; pointer-events: none;
  width: calc(var(--cut) + 8px); height: calc(var(--cut) + 8px);
  background: linear-gradient(45deg, transparent 50%, var(--cut-accent, var(--maroon)) 50%);
}
/* Photos: two opposite corners cut, gold band on the top one */
.cut-media {
  position: relative;
  --cut-accent: var(--gold);
  clip-path: polygon(0 0, calc(100% - var(--cut-media)) 0, 100% var(--cut-media), 100% 100%, var(--cut-media) 100%, 0 calc(100% - var(--cut-media)));
}
.cut-media::after {
  content: ""; position: absolute; top: 0; right: 0; z-index: 4; pointer-events: none;
  width: calc(var(--cut-media) + 9px); height: calc(var(--cut-media) + 9px);
  background: linear-gradient(45deg, transparent 50%, var(--cut-accent) 50%);
}