/* Mastriva Custom Enterprise Styling */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../assets/fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../assets/fonts/jakarta-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../assets/fonts/mono-latin.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --bg-primary: #f7f9fc;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #eef4fb;
  --bg-surface-glass: rgba(255, 255, 255, 0.9);
  --border-subtle: #dce5ef;
  --border-glow: rgba(59, 130, 246, 0.3);
  --primary-blue: #2563eb;
  --primary-cyan: #0e7490;
  --text-main: #13243d;
  --text-muted: #475569;
  --text-faint: #526174;
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-arabic: 'Cairo', 'Inter', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

.font-mono {
  font-family: var(--font-mono);
}

.font-arabic {
  font-family: var(--font-arabic);
}

/* Background Gradients & Grid */
.bg-grid-pattern {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(30, 64, 175, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 64, 175, 0.045) 1px, transparent 1px);
}

.radial-glow-hero {
  background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.18) 0%, rgba(6, 182, 212, 0.05) 35%, transparent 70%);
}

.radial-glow-cyan {
  background: radial-gradient(circle at 100% 50%, rgba(6, 182, 212, 0.12) 0%, transparent 60%);
}

.radial-glow-blue {
  background: radial-gradient(circle at 0% 50%, rgba(37, 99, 235, 0.12) 0%, transparent 60%);
}

/* Glassmorphism Cards */
.glass-panel {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 8px 32px rgba(31, 53, 88, 0.045);
}

.glass-panel:hover {
  border-color: rgba(59, 130, 246, 0.35);
}

.glass-panel-elevated {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 16px 48px rgba(31, 53, 88, 0.07);
}

/* Text Gradients */
.text-gradient-cyan {
  background: linear-gradient(135deg, #0e7490 0%, #0369a1 60%, #1d4ed8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-blue {
  background: linear-gradient(135deg, #13243d 0%, #1d4ed8 60%, #0369a1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-silver {
  background: linear-gradient(180deg, #13243d 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glow Borders */
.border-glow-active {
  box-shadow: 0 0 25px -5px rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.5);
}

/* Pill Badges */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #edf2f8;
  border: 1px solid var(--border-subtle);
}

.badge-pill-cyan {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.3);
  color: #0e7490;
}

.badge-pill-blue {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
  color: #1d4ed8;
}

.badge-pill-emerald {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #047857;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #eef2f7;
}
::-webkit-scrollbar-thumb {
  background: #b8c7d8;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #8196ad;
}

/* Pulse beacon */
.status-beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
  background-color: #10b981;
}
.status-beacon::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(16, 185, 129, 0.6);
  animation: beacon-pulse 2s infinite ease-out;
}

@keyframes beacon-pulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Interactive Tabs */
.tab-btn.active {
  background-color: #e8f2fc;
  color: #0369a1;
  border-color: rgba(56, 189, 248, 0.4);
}

/* Accordion transition */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out, opacity 0.3s ease;
  opacity: 0;
}
.accordion-content.open {
  max-height: 1200px;
  opacity: 1;
}

/* Light theme compatibility for the existing utility-based page templates. */
[class~="text-white"], [class~="text-slate-100"], [class~="text-slate-200"] { color: var(--text-main); }
[class~="text-slate-300"], [class~="text-slate-400"] { color: var(--text-muted); }
[class~="text-slate-500"] { color: var(--text-faint); }
[class~="text-cyan-200"], [class~="text-cyan-300"], [class~="text-cyan-400"] { color: #0e7490; }
[class~="text-blue-200"], [class~="text-blue-300"], [class~="text-blue-400"] { color: #1d4ed8; }
[class~="text-emerald-300"], [class~="text-emerald-400"] { color: #047857; }
[class~="text-amber-300"], [class~="text-amber-400"] { color: #92400e; }
[class~="text-red-300"], [class~="text-red-400"] { color: #b91c1c; }
[class~="text-purple-300"], [class~="text-purple-400"] { color: #7e22ce; }
[class*="bg-slate-900"], [class*="bg-slate-950"] { background-color: #ffffff; }
[class*="bg-slate-800"] { background-color: #edf2f8; }
[class*="bg-blue-950"], [class*="bg-blue-900"] { background-color: #edf4ff; }
[class*="bg-emerald-950"], [class*="bg-emerald-900"] { background-color: #ecfdf5; }
[class*="bg-cyan-900"] { background-color: #ecfeff; }
[class*="bg-indigo-900"] { background-color: #eef2ff; }
[class*="bg-red-950"] { background-color: #fff1f2; }
[class*="border-slate-"], [class*="divide-slate-"] > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-subtle); }
[class~="from-blue-950/80"] { --tw-gradient-from: #eaf2fc var(--tw-gradient-from-position); --tw-gradient-to: rgb(234 242 252 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
[class~="via-slate-900"] { --tw-gradient-stops: var(--tw-gradient-from), #f5f8fc var(--tw-gradient-via-position), var(--tw-gradient-to); }
[class~="to-slate-950"] { --tw-gradient-to: #f5f8fc var(--tw-gradient-to-position); }
[class~="from-slate-950"] { --tw-gradient-from: #ffffff var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
[class~="hover:text-white"]:hover { color: #13243d; }
[class~="hover:text-cyan-300"]:hover, [class~="hover:text-cyan-400"]:hover { color: #0e7490; }
[class~="hover:bg-slate-800"]:hover, [class~="hover:bg-slate-700"]:hover { background-color: #e3ebf5; }

/* Filled actions stay white-on-blue; ordinary cards/headings use navy text. */
.btn-primary, .btn-primary:hover { color: #ffffff; background: linear-gradient(115deg, #1d4ed8, #0e7490); }
.btn-primary [class*="text-"], .btn-primary svg { color: #ffffff; }
.btn-primary:hover { background: linear-gradient(115deg, #1e40af, #155e75); }
[class~="bg-blue-600"][class~="text-white"] { color: #ffffff; background-color: #1d4ed8; }
.photo-caption, .photo-caption * { color: #ffffff; }
.photo-caption span[class*="bg-"] { background-color: rgba(19, 36, 61, .9); }
.media-overlay { background: linear-gradient(to top, rgba(19,36,61,.75), transparent 70%); }
img[src$="mastriva-logo.png"] { filter: brightness(0) saturate(100%); }
header { background: rgba(255,255,255,.94) !important; }
header nav { gap: 1.1rem !important; }
header nav a { white-space: nowrap; font-size: .8rem; }
header > div > div:last-of-type a { white-space: nowrap; }
header a[aria-current="page"], nav a[aria-current="page"] { color: #0369a1; font-weight: 700; }
body { overflow-wrap: break-word; }
main { min-width: 0; }
section[id], main[id], [data-tab-panel] { scroll-margin-top: 6.5rem; }
#three-hero-canvas { opacity: .3; }
#mobile-menu { overflow-y: auto; overscroll-behavior: contain; background: rgba(255,255,255,.98); gap: 2rem; }
button, input, textarea, select { touch-action: manipulation; }
input:not([type="checkbox"]), textarea, select { min-width: 0; color: #13243d; background: #ffffff; border-color: #cbd5e1; }
input::placeholder, textarea::placeholder { color: #64748b !important; opacity: 1; }
input[type="checkbox"] { accent-color: #1d4ed8; min-width: 1rem; min-height: 1rem; }
:focus-visible { outline: 3px solid #2563eb !important; outline-offset: 4px; }
button:disabled { cursor: wait; opacity: .7; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 100; transform: translateY(-150%); background: #ffffff; color: #13243d; padding: .75rem 1rem; border: 2px solid #2563eb; border-radius: .5rem; }
.skip-link:focus { transform: translateY(0); }
.form-note, .form-status { color: #475569; font-size: .8rem; line-height: 1.7; }
.form-status { margin-top: 1rem; padding: 1rem; border: 1px solid #cbd5e1; background: #f7f9fc; border-radius: .75rem; }
.form-status a, .form-note a { color: #1d4ed8; text-decoration: underline; font-weight: 600; }
.form-status pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 18rem; overflow-y: auto; font-size: .75rem; margin: 1rem 0; }
.form-status button { border: 1px solid #cbd5e1; border-radius: .5rem; padding: .5rem .75rem; margin: 0 .5rem .5rem 0; }
.module-results { margin-bottom: 1rem; color: #475569; font-size: .875rem; }
@media (max-width: 640px) {
  input:not([type="checkbox"]), textarea, select { font-size: 16px !important; }
  #mobile-menu a, #mobile-menu button, header button { min-height: 44px; }
  .photo-caption { font-size: .7rem; }
  .badge-pill { letter-spacing: .025em; }
  .glass-panel > .flex.items-center.justify-between { flex-wrap: wrap; gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #three-hero-canvas { display: none; }
}