/* ==========================================================================
   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;
}

/* ==========================================================================
   MRO network section — hidden
   Targeted via :has() because 10 sections share the same utility classes;
   a class selector would hide all of them. This matches exactly the one
   section containing the MRO network image.
   To show it again, delete this block.
   ========================================================================== */
section:has(img[src*="MRO_Network_Across_India"]) { display: none !important; }

/* ==========================================================================
   Aircraft Fleet section — hidden
   Hides both parts: the carousel section, and the heading div that sits
   immediately before it. Targeted via :has() because the heading is a plain
   <div class="w-full"> with no distinguishing class of its own.
   To show it again, delete this block.
   ========================================================================== */
section:has(.aircraft-carousel-container),
div:has(+ section .aircraft-carousel-container) { display: none !important; }

/* ==========================================================================
   "Future of Aircraft Maintenance Engineers" section — hidden
   That image is used twice: once as a hero carousel slide (in a .banner-slide
   div, no ancestor <section>) and once in this standalone section. Scoping to
   section:has() hides only the standalone one and leaves the hero alone.
   To show it again, delete this block.
   ========================================================================== */
section:has(img[src*="Future of Aircraft Maintenance Engineers"]) { display: none !important; }

/* Future of AME section — hidden (filename-agnostic fallback) */
section:has(img[src*="Future"][src*="Maintenance"]),
section:has(img[src*="Future%20of%20Aircraft"]) { display: none !important; }

/* Future of AME section — hidden.
   Matched on alt text, not the filename: the image can be replaced in the
   content editor (which changes src) without breaking this rule. */
section:has(img[alt*="Future of Aircraft Maintenance Engineers"]) { display: none !important; }

/* "Inside the Airport" MRO training section — hidden.
   Matched by its id, so replacing the image in the content editor cannot
   break this rule (unlike a src- or alt-based selector).
   To show it again, delete this block. */
#mro-training { display: none !important; }

/* Courses Offered: darken the backdrop so the white heading reads.
   My image recolour lifted this background from near-black to mid-teal,
   dropping white-text contrast from 12:1 to 6.6:1. */
section:has(img[alt="Courses Background"]) > .absolute.inset-0::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(4, 43, 45, 0.45);
}

/* ==========================================================================
   Headings that ask to be white, stay white
   --------------------------------------------------------------------------
   An inline <style> block on every page forces `h2 { color: ... !important }`.
   That overrides Tailwind's text-white, so headings on dark sections (Courses
   Offered, and 9 others) rendered in brand colour and became unreadable.
   h2.text-white is more specific than h2, and this file loads last.
   ========================================================================== */
h1.text-white, h2.text-white, h3.text-white, h4.text-white,
h1 .text-white, h2 .text-white, h3 .text-white { color: #ffffff !important; }

/* "Learning Advantages" sits on a dark photographic background but is marked
   text-orange-900, which the palette remap renders as dark teal - 1.17:1
   against that backdrop. (It was 1.58:1 in orange on the original site, so
   this was already unreadable before the rebrand.) White gives 13.28:1. */
section[style*="Benefits of our course background"] h2 { color: #ffffff !important; }

/* "Find Us" map — hidden.
   A placeholder the original site never filled in ("Map will be embedded
   here"). Targeted via the grey placeholder box, which appears exactly once
   and only on the contact page.
   To show it again, delete this block. */
div:has(> div.bg-gray-200.h-64) { display: none !important; }

/* About page: "Trusted DGCA Approved MRO in India" and "Nationwide MRO
   Network" sections — hidden. Matched by id (added by patch-about-ids.js)
   rather than by image filename or alt text, so a content edit cannot
   silently un-hide them. To show again, delete this block. */
#who-we-are, #mro-network { display: none !important; }

/* Clearing a list item's text in the content editor leaves an empty <li>,
   which still renders its bullet and its container's box. Hide empties, and
   hide a list entirely when nothing is left in it. */
li:empty { display: none !important; }
ul:not(:has(li:not(:empty))), ol:not(:has(li:not(:empty))) { display: none !important; }

/* About page: MRO capability sections — hidden.
   #core-services also wraps the certified-aircraft cards and the "Inside the
   Airport" box, so one rule covers all three. Matched by id so a content edit
   cannot silently un-hide them. To show again, delete this block. */
#who-we-are, #mro-network, #core-services,
#component-maintenance, #fleet-capability { display: none !important; }

/* About page: MRO capability sections — hidden.
   #core-services also wraps the certified-aircraft cards and the "Inside the
   Airport" box. Matched by id so content edits cannot un-hide them.
   To show again, delete this block. */
#who-we-are, #mro-network, #core-services, #component-maintenance,
#fleet-capability, #avionics-services { display: none !important; }