/* ==========================================================================
   UhAI Intelligence — Base Styles
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--dur-base) var(--ease-out-quart), color var(--dur-base) var(--ease-out-quart);
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

a { color: inherit; text-decoration: none; }

ul, ol { padding: 0; margin: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-sm);
  color: var(--text-primary);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-sm); color: var(--text-secondary); }

.lead { font-size: var(--fs-body-lg); color: var(--text-secondary); }

::selection { background: var(--color-sky-500); color: #fff; }

/* ---- Focus states (accessibility) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-sky-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  z-index: 3000;
  background: var(--color-navy-900);
  color: #fff;
  padding: 0.9rem 1.4rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus {
  left: var(--space-md);
  top: var(--space-md);
}

/* ---- Layout helpers ---- */
.container-xl {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section {
  padding-block: var(--space-2xl);
  position: relative;
}

.section-sm { padding-block: var(--space-xl); }

.section-head {
  max-width: 720px;
  margin-bottom: var(--space-xl);
}

.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-sky-500);
  margin-bottom: var(--space-sm);
}

.eyebrow::before {
  content: "";
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--gradient-accent);
}

.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Technical grid texture — a faint dot-grid overlay that reads as
   "engineered" rather than a flat marketing gradient. Shared by the
   homepage hero and every interior page-hero band. ---- */
.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.55) 1px, transparent 1.5px);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
}
:root[data-theme="dark"] .hero::before,
:root[data-theme="dark"] .page-hero::before {
  background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1.5px);
  opacity: 1;
}

.bg-navy { background: var(--color-navy-900); color: #fff; }
.bg-surface-alt { background: var(--bg-surface-alt); }
.bg-soft-blue { background: var(--bg-soft-blue); }

/* ---- Grid utilities ---- */
.grid { display: grid; gap: var(--space-md); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 992px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---- Reveal-on-scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); }
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

.stagger > * { transition-delay: calc(var(--stagger-i, 0) * 90ms); }

/* ---- Page loading screen ---- */
.loader-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--ease-out-quart), visibility 0.6s;
}
.loader-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-mark {
  width: 64px; height: 64px;
  display: grid; place-items: center;
}
.loader-ring {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.12);
  border-top-color: var(--color-sky-400);
  border-right-color: var(--color-green-400);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Back to top ---- */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: none;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out-quart), transform var(--dur-base) var(--ease-out-quart), visibility var(--dur-base);
  z-index: 900;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow-blue); }

/* Google's reCAPTCHA v3 badge (contact.php/apply.php only — see includes/recaptcha.php)
   defaults to this exact same fixed bottom-right corner as .back-to-top above, so the two
   would otherwise overlap. Repositioning via CSS is explicitly allowed by Google's terms
   (only hiding it outright requires showing the attribution text elsewhere instead, which
   this site doesn't do) — nudged up clear of .back-to-top's 48px + its own bottom offset. */
.grecaptcha-badge { bottom: 88px !important; }

/* ---- Cookie banner ---- */
.cookie-banner {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 760px;
  margin-inline: auto;
  background: var(--bg-glass);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-md);
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
  z-index: 1200;
  transform: translateY(140%);
  transition: transform 0.6s var(--ease-out-expo);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner p { margin: 0; font-size: var(--fs-sm); flex: 1 1 320px; }
.cookie-banner .btn-group { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---- Utility spacing ---- */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.text-center { text-align: center; }
.text-muted-c { color: var(--text-muted); }

/* ---- Rich text (WYSIWYG-authored post bodies, e.g. news.php) ---- */
.rich-text { color: var(--text-secondary); line-height: 1.7; }
.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child { margin-bottom: 0; }
.rich-text p { margin: 0 0 1.1rem; }
.rich-text h2 { font-size: var(--fs-h3); margin: 1.85rem 0 0.75rem; color: var(--text-primary); }
.rich-text h3 { font-size: var(--fs-h4); margin: 1.5rem 0 0.6rem; color: var(--text-primary); }
.rich-text ul, .rich-text ol { margin: 0 0 1.1rem; padding-left: 1.35rem; }
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text li { margin-bottom: 0.4rem; }
.rich-text blockquote { margin: 1.35rem 0; padding-left: 1.1rem; border-left: 3px solid var(--color-green-500); font-style: italic; color: var(--text-primary); }
.rich-text a { color: var(--color-sky-600); text-decoration: underline; text-underline-offset: 2px; }
.rich-text strong, .rich-text b { font-weight: 700; color: var(--text-primary); }

@media (max-width: 768px) {
  .section { padding-block: var(--space-xl); }
}