/* ============================================================
   Global Styles — Reset, Base, Typography, Utilities
   CNC Website · Dhofar University · 2026
   ============================================================ */

/* ── Modern CSS Reset ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
  overflow-x: hidden; /* ← HERE, not on body — body overflow-x:hidden breaks position:fixed in Chrome */
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  background-color: var(--color-bg);
  overflow-x: clip; /* clip (not hidden) — does not create a scroll container, so position:fixed works correctly */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[dir="rtl"] body { font-family: var(--font-arabic); }

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; }

/* ── Custom Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--color-bg-surface); }
::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: var(--radius-full);
  opacity: 0.6;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); }

/* ── Selection ──────────────────────────────────────────── */
::selection {
  background: var(--color-green);
  color: #ffffff;
}

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-heading);
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  font-family: var(--font-arabic);
  letter-spacing: 0;
}
h1 { font-size: clamp(var(--text-4xl), 6vw, var(--text-7xl)); }
h2 { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); }
h3 { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); }
h4 { font-size: clamp(var(--text-xl),  2.5vw, var(--text-3xl)); }
h5 { font-size: clamp(var(--text-lg),  2vw,   var(--text-2xl)); }
h6 { font-size: clamp(var(--text-base),1.5vw, var(--text-xl)); }

p  { line-height: var(--leading-relaxed); color: var(--color-text-body); text-align: justify; }
/* Preserve centre/left alignment for short UI text */
.page-hero__sub, .page-hero__badge,
.section__header p, .section__tag,
.goals-section__header p,
.stat-card__label,
.mv-card__label, .mv-card__heading,
.cta-strip__sub,
.navbar p, .footer p { text-align: center; }
.mono { font-family: var(--font-mono); }

/* ── Layout ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}
.container--lg { max-width: var(--container-lg); }
.container--md { max-width: var(--container-md); }

/* ── Sections ───────────────────────────────────────────── */
.section { padding-block: var(--space-20); background: var(--color-bg-card); }
.section--alt     { background: var(--color-bg-alt); }
.section--surface { background: var(--color-bg-surface); }
.section--blue    {
  background: var(--color-primary);
  color: var(--color-text-light);
}
/* Dark section — keep for footer / legacy pages */
.section--dark    { background: var(--color-bg-dark); }

/* Heading overrides inside coloured sections */
.section--blue h1, .section--blue h2, .section--blue h3,
.section--blue h4, .section--blue h5, .section--blue h6 {
  color: var(--color-text-light);
}
.section--blue p { color: rgba(248,250,252,0.82); }

.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 {
  color: var(--color-text-light);
}
.section--dark p { color: var(--color-text-muted); }

/* Legacy light-mode override */
.section--light   { background: var(--color-bg); }
.section--light h1, .section--light h2, .section--light h3,
.section--light h4, .section--light h5, .section--light h6 {
  color: var(--color-text-heading);
}
.section--light p { color: var(--color-text-body); }

.section__header  { text-align: center; margin-bottom: var(--space-16); }

.section__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.section__tag::before, .section__tag::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

.section__title { margin-bottom: var(--space-4); }
.section__title--gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-body);
  max-width: 600px;
  margin-inline: auto;
  line-height: var(--leading-relaxed);
}
/* Subtitle on dark/blue sections */
.section--blue .section__tag  { color: rgba(248,250,252,0.7); }
.section--blue .section__subtitle { color: rgba(248,250,252,0.75); }
.section--blue .section__title--gradient {
  background: linear-gradient(135deg, #ffffff 0%, rgba(248,250,252,0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.875rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}
.btn:active { transform: scale(0.98) !important; }

/* Primary — DU Blue solid */
.btn--primary {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Green — DU Green solid */
.btn--green {
  background: var(--color-green);
  color: #ffffff;
  border-color: var(--color-green);
  font-weight: var(--font-bold);
}
.btn--green:hover {
  background: var(--color-green-dark);
  border-color: var(--color-green-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Outline — DU Blue border/text, transparent bg */
.btn--glow {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--glow:hover {
  background: var(--color-primary);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Gold — DU Gold solid */
.btn--gold {
  background: var(--color-secondary);
  color: var(--color-text-heading);
  border-color: var(--color-secondary);
  font-weight: var(--font-bold);
}
.btn--gold:hover {
  background: var(--color-secondary-light);
  border-color: var(--color-secondary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Accent — mapped to green */
.btn--accent {
  background: var(--color-green);
  color: #ffffff;
  border-color: var(--color-green);
  font-weight: var(--font-bold);
}
.btn--accent:hover {
  background: var(--color-green-dark);
  border-color: var(--color-green-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* White — for use on dark/blue section CTAs */
.btn--white {
  background: #ffffff;
  color: var(--color-primary);
  border-color: #ffffff;
  font-weight: var(--font-bold);
}
.btn--white:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-bg-alt);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Ghost — subtle outline */
.btn--ghost {
  background: transparent;
  color: var(--color-text-body);
  border-color: rgba(71,85,105,0.30);
}
.btn--ghost:hover {
  background: var(--color-bg-surface);
  border-color: rgba(71,85,105,0.50);
  transform: translateY(-2px);
}

.btn--lg { padding: 1rem 2.5rem; font-size: var(--text-base); }
.btn--sm { padding: 0.5rem 1.25rem; font-size: var(--text-xs); }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--color-bg-card);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: all var(--transition-base);
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
/* Legacy glass class → clean white card on light theme */
.card--glass {
  background: var(--color-bg-card);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: all var(--transition-base);
}
.card--glass:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* ── Text Gradients ──────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient--gold {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
}
.badge--success { background: rgba(34,197,94,0.10);  color: #15803d; border: 1px solid rgba(34,197,94,0.25); }
.badge--warning { background: rgba(245,158,11,0.10); color: #b45309; border: 1px solid rgba(245,158,11,0.25); }
.badge--error   { background: rgba(239,68,68,0.10);  color: #b91c1c; border: 1px solid rgba(239,68,68,0.25); }
.badge--accent  { background: rgba(30,58,138,0.08);  color: var(--color-primary); border: 1px solid rgba(30,58,138,0.20); }
.badge--gold    { background: rgba(200,168,75,0.10); color: #92400e; border: 1px solid rgba(200,168,75,0.25); }
.badge--info    { background: rgba(59,130,246,0.10); color: #1d4ed8; border: 1px solid rgba(59,130,246,0.25); }

/* ── Skip Link ───────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #ffffff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--font-bold);
  z-index: var(--z-loader);
  transition: top var(--transition-base);
}
.skip-link:focus { top: var(--space-4); }

/* ── Focus ───────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Main Content Offset ────────────────────────────────── */
#main-content { padding-top: var(--navbar-height); }

/* ── Divider ─────────────────────────────────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30,58,138,0.2), transparent);
}

/* ── Accessibility State Classes ────────────────────────── */
body.a11y-grayscale           { filter: grayscale(100%); }
body.a11y-high-contrast       { filter: contrast(175%) brightness(1.1); }
body.a11y-negative            { filter: invert(100%) hue-rotate(180deg); }
body.a11y-readable-font *     { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.05em !important; }
body.a11y-underline-links a   { text-decoration: underline !important; }
body.a11y-light-bg            { background: #fff !important; }

/* ── Floating Support Button ───────────────────────────── */
.support-float {
  position: fixed !important;
  bottom: 90px;
  right: 30px;
  z-index: 9999 !important;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #ffffff;
  background: var(--color-green, #22C55E);
  box-shadow: 0 4px 24px rgba(34, 197, 94, 0.42);
  text-decoration: none;
  animation: supportPulse 2.6s ease-in-out infinite;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.support-float:hover {
  transform: scale(1.12);
  background: var(--color-green-dark, #16A34A);
  box-shadow: 0 6px 36px rgba(34, 197, 94, 0.65);
  animation: none;
  color: #ffffff;
  text-decoration: none;
}
@keyframes supportPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(34,197,94,0.38); }
  50%       { box-shadow: 0 4px 32px rgba(34,197,94,0.70), 0 0 0 12px rgba(34,197,94,0.10); }
}
[dir="rtl"] .support-float { right: auto; left: 30px; bottom: 90px; }
@media (max-width: 768px) {
  .support-float { display: none; }
}

/* ── CTA Strip (shared across all pages) ───────────────── */
.cta-strip {
  padding-block: var(--space-16);
  background: var(--color-bg-dark);
}
.cta-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-12) var(--space-10);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-3xl);
}
.cta-strip__title {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  color: #ffffff;
  margin-bottom: var(--space-2);
}
.cta-strip__sub {
  font-size: var(--text-base);
  color: rgba(248,250,252,0.65);
  margin: 0;
}
@media (max-width: 767px) {
  .cta-strip__inner { flex-direction: column; text-align: center; }
}

/* ── Stats Section (shared across home + about) ─────────── */
.stats-section {
  background: var(--color-primary);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
.stat-card {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  background: var(--color-primary);
  transition: background var(--transition-base);
}
.stat-card:hover { background: rgba(255,255,255,0.06); }
.stat-card__value {
  font-family: var(--font-display);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.stat-card__number {
  font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
  font-weight: var(--font-bold);
  color: #ffffff;
}
.stat-card__label {
  font-size: var(--text-sm);
  color: rgba(248,250,252,0.70);
  font-weight: var(--font-medium);
  margin: 0;
}
@media (max-width: 767px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
}
body.a11y-light-bg #main-content * { background: transparent !important; color: #111 !important; }

/* ── Glow / glass legacy helpers (mapped to neutral) ─────── */
.glow-accent  { box-shadow: none; }
.text-glow    { text-shadow: none; }
.glass {
  background: var(--color-bg-card);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: var(--shadow-sm);
}

/* ── Flex / Grid Utilities ──────────────────────────────── */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.items-center   { align-items: center; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.grid  { display: grid; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

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