/* ==========================================================================
   IIAME — 2026 visual identity
   --------------------------------------------------------------------------
   Loaded last so it wins on equal specificity. Touches colour, type, radius,
   shadow and borders only — never layout — so the existing Tailwind grid and
   spacing keep working exactly as before.
   ========================================================================== */

@import url('/fonts/fonts.css');

:root {
  /* --- primary: deep instrument teal (replaces the old orange/red) -------- */
  --brand-50:  #ecfdfc;
  --brand-100: #d0f7f5;
  --brand-200: #a5eeec;
  --brand-300: #6ddfdf;
  --brand-400: #34c7c9;
  --brand-500: #109598;
  --brand-600: #0a7679;   /* buttons — 5.4:1 with white */
  --brand-700: #0a6063;
  --brand-800: #0d4d50;
  --brand-900: #0f4143;
  --brand-950: #042b2d;

  /* --- accent: signal gold, the new secondary signature ------------------- */
  --accent-300: #f7cd74;
  --accent-400: #f2b544;
  --accent-500: #e09f1f;
  --accent-600: #b87d10;

  /* --- neutrals: cooled from the original warm greys --------------------- */
  --ink-50:  #f6f8f9;
  --ink-100: #eceff2;
  --ink-200: #dbe1e6;
  --ink-300: #c0cad3;
  --ink-400: #90a0ad;
  --ink-500: #6b7d8c;
  --ink-600: #536472;
  --ink-700: #43515d;
  --ink-800: #39434e;
  --ink-900: #202a33;

  /* --- typography -------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* --- repoint the original brand tokens (error/success/info stay put) ---- */
  --color-primary: var(--brand-600);
  --color-primary-light: var(--brand-500);
  --color-primary-dark: var(--brand-700);
  --color-primary-darker: var(--brand-800);

  --gradient-primary: linear-gradient(160deg, var(--brand-600), var(--brand-800));
  --gradient-primary-hover: linear-gradient(160deg, var(--brand-700), var(--brand-900));

  --color-text-primary: var(--ink-900);
  --color-text-secondary: var(--ink-500);
  --color-text-muted: var(--ink-400);
  --color-bg-gray: var(--ink-50);
  --color-bg-dark: var(--ink-800);
  --color-bg-darker: var(--ink-900);
  --color-border-light: var(--ink-200);
  --color-border-medium: var(--ink-300);

  --radius: 14px;
  --shadow-soft: 0 1px 2px rgba(16, 34, 40, .05), 0 8px 24px -8px rgba(16, 34, 40, .12);
  --shadow-lift: 0 2px 4px rgba(16, 34, 40, .06), 0 18px 40px -12px rgba(16, 34, 40, .20);
}

/* --------------------------------------------------------------- type ---- */

*,
body,
p, span, li, td, th, label, input, textarea, select, button, a, div {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: var(--font-display);
  letter-spacing: -0.022em;
  font-weight: 700;
}

h1 { line-height: 1.08; }
h2 { line-height: 1.15; }

body {
  color: var(--ink-700);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A quiet gold rule under section headings — the signature detail that most
   distinguishes this design from the original. */
section h2:not(.no-rule)::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-top: .7rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-400), var(--brand-500));
}
section .text-center h2:not(.no-rule)::after,
section h2.text-center:not(.no-rule)::after { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------ surfaces --- */

.rounded, .rounded-lg, .rounded-xl { border-radius: var(--radius) !important; }
.rounded-2xl, .rounded-3xl { border-radius: calc(var(--radius) + 8px) !important; }

.shadow, .shadow-md, .shadow-lg { box-shadow: var(--shadow-soft) !important; }
.shadow-xl, .shadow-2xl { box-shadow: var(--shadow-lift) !important; }

/* Cards gain a hairline edge and a lift on hover. */
.bg-white.shadow, .bg-white.shadow-md, .bg-white.shadow-lg,
.bg-white.shadow-xl, .bg-white.rounded-xl, .bg-white.rounded-2xl {
  border: 1px solid var(--ink-200);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bg-white.shadow-lg:hover, .bg-white.shadow-xl:hover,
.bg-white.rounded-xl:hover, .bg-white.rounded-2xl:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift) !important;
  border-color: var(--brand-200);
}

/* -------------------------------------------------------------- forms ---- */

.form-input:focus, .form-textarea:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--brand-600) !important;
  box-shadow: 0 0 0 3px var(--brand-100) !important;
  outline: none !important;
}

.card-icon-circle { background-color: var(--brand-600) !important; }

/* ------------------------------------------------------------ buttons ---- */

/* Do NOT set `background-image: none` here. Several buttons — including the
   admission form's "Submit Application" — are styled entirely with a Tailwind
   gradient (bg-gradient-to-r), which is a background-image. Clearing it left
   white text on a white card and the button vanished. The gradient already
   picks up the new palette via tailwind.config, so it just needs leaving alone. */
.btn-primary,
button[type="submit"],
.bg-orange-500, .bg-orange-600 {
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Safety net: a submit button can never end up invisible, even if some other
   rule strips its background. */
button[type="submit"] {
  background-color: var(--brand-600);
  color: #fff;
}

/* brand-500 is a mid-tone: fine as a fill, but white text on it lands at
   3.64:1, under the 4.5:1 minimum. Anything acting as a button steps down to
   brand-600 (5.41:1) instead. */
a.bg-orange-500,
button.bg-orange-500,
.bg-orange-500.text-white,
label.bg-orange-500 {
  background-color: var(--brand-600) !important;
}

/* Gradient stops.
   Several buttons read "from-orange-500 to-red-600", which after the palette
   remap renders teal -> red and clashes badly. The red ramp itself is left
   alone on purpose — text-red-500 marks required fields and error states — so
   only the gradient-stop utilities are retargeted, where red is decorative. */
.to-red-600, .to-pink-600 { --tw-gradient-to: var(--brand-700) !important; }
.to-red-700 { --tw-gradient-to: var(--brand-800) !important; }
.from-red-50 {
  --tw-gradient-from: var(--brand-50) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(236 253 252 / 0)) !important;
}
.btn-primary:hover,
button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(10, 118, 121, .45);
}

/* --------------------------------------------------------- scroll etc. --- */

::selection { background: var(--brand-200); color: var(--brand-900); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-100); }
::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 6px; border: 3px solid var(--ink-100); }
::-webkit-scrollbar-thumb:hover { background: var(--brand-500); }

a { transition: color .18s ease; }

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .bg-white.shadow-lg:hover, .bg-white.shadow-xl:hover,
  .bg-white.rounded-xl:hover, .bg-white.rounded-2xl:hover,
  .btn-primary:hover, button[type="submit"]:hover { transform: none; }
  a, .bg-white.shadow, .btn-primary { transition: none; }
}

/* ==========================================================================
   Portal login — hidden
   The student and teacher portals were never part of this build, so the Login
   button led nowhere. Hidden rather than deleted, so it can be repointed at an
   external school-management system in one edit.
   ========================================================================== */
[onclick*="openLoginModal"] { display: none !important; }
#loginModal { display: none !important; }

/* ==========================================================================
   Nav dropdown hover bridge
   The Courses and Admission menus are pure CSS (group-hover) and their panel
   sits 8px below the trigger (mt-2). That gap belongs to neither element, so
   moving the pointer down loses hover and the menu closes before the link can
   be clicked. This lays an invisible strip across the gap — it is a child of
   the panel, so hovering it keeps .group:hover true. Nothing moves visually.
   ========================================================================== */
.group > .absolute.top-full::before {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 0;
  right: 0;
  height: 0.75rem;
}