/* Growth Technology Limited - Custom CSS overrides */
/* Keep this file minimal - Tailwind handles 95% of styling */

/* ── Custom brand color utilities ────────────────────────────────────────────
   Tailwind Play CDN processes tailwind.config at runtime, but JIT generation
   of custom colors can silently fail for dynamically-injected HTML (shared.js
   header/footer). These declarations ensure the colors always apply.
   ─────────────────────────────────────────────────────────────────────────── */

/* Backgrounds */
.bg-navy          { background-color: #0F2952; }
.bg-navy-light    { background-color: #1a3a6b; }
.bg-navy-dark     { background-color: #091d3a; }
.bg-brand         { background-color: #0EA5E9; }
.bg-brand-dark    { background-color: #0284C7; }
.bg-gold          { background-color: #F59E0B; }
.bg-gold-dark     { background-color: #D97706; }
.bg-surface       { background-color: #F8FAFC; }

/* Opacity backgrounds */
.bg-brand\/10     { background-color: rgba(14, 165, 233, 0.10); }
.bg-brand\/20     { background-color: rgba(14, 165, 233, 0.20); }
.bg-gold\/5       { background-color: rgba(245, 158, 11,  0.05); }
.bg-gold\/10      { background-color: rgba(245, 158, 11,  0.10); }
.bg-navy\/50      { background-color: rgba(15,  41,  82,  0.50); }
.bg-navy\/80      { background-color: rgba(15,  41,  82,  0.80); }
.bg-navy\/90      { background-color: rgba(15,  41,  82,  0.90); }

/* Text */
.text-navy        { color: #0F2952; }
.text-navy-light  { color: #1a3a6b; }
.text-brand       { color: #0EA5E9; }
.text-brand-dark  { color: #0284C7; }
.text-gold        { color: #F59E0B; }
.text-gold-dark   { color: #D97706; }

/* Borders */
.border-navy      { border-color: #0F2952; }
.border-brand     { border-color: #0EA5E9; }
.border-gold      { border-color: #F59E0B; }
.border-brand\/20 { border-color: rgba(14, 165, 233, 0.20); }
.border-brand\/30 { border-color: rgba(14, 165, 233, 0.30); }

/* Hover states */
.hover\:bg-brand:hover      { background-color: #0EA5E9; }
.hover\:bg-brand-dark:hover { background-color: #0284C7; }
.hover\:bg-gold:hover       { background-color: #F59E0B; }
.hover\:bg-gold-dark:hover  { background-color: #D97706; }
.hover\:bg-navy:hover       { background-color: #0F2952; }
.hover\:text-brand:hover    { color: #0EA5E9; }
.hover\:text-gold:hover     { color: #F59E0B; }
.hover\:border-brand:hover  { border-color: #0EA5E9; }

/* Gradient stops (mirrors Tailwind's CSS custom property pattern) */
.from-navy-dark {
  --tw-gradient-from: #091d3a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(9 29 58 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-navy {
  --tw-gradient-to: rgb(15 41 82 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #0F2952 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-navy-light {
  --tw-gradient-to: #1a3a6b var(--tw-gradient-to-position);
}
.to-navy {
  --tw-gradient-to: #0F2952 var(--tw-gradient-to-position);
}
.from-brand {
  --tw-gradient-from: #0EA5E9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(14 165 233 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Ring/focus */
.ring-brand         { --tw-ring-color: #0EA5E9; }
.focus\:ring-brand:focus { --tw-ring-color: #0EA5E9; }

/* ── Mega menu smooth transition ── */
#mega-panel {
  transition: opacity 0.18s ease, transform 0.18s ease;
  transform-origin: top center;
}
#mega-panel.hidden {
  pointer-events: none;
}

/* ── Mobile nav drawer transition ── */
#mobile-nav {
  transition: transform 0.25s ease;
}

/* ── Horizontal tab strip custom scrollbar ── */
.tab-strip::-webkit-scrollbar { height: 3px; }
.tab-strip::-webkit-scrollbar-track { background: #F1F5F9; }
.tab-strip::-webkit-scrollbar-thumb { background: #0F2952; border-radius: 2px; }

/* ── Hero typewriter cursor ── */
.typewriter::after {
  content: '|';
  color: #0EA5E9;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ── Sticky sub-nav active indicator ── */
.subnav-link.active {
  color: #0EA5E9;
  border-bottom: 2px solid #0EA5E9;
}

/* ── Table row hover for data tables ── */
.data-table tbody tr:hover { background-color: #F8FAFC; }

/* ── Card hover lift ── */
.card-hover {
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.card-hover:hover {
  box-shadow: 0 10px 30px -5px rgba(15,41,82,0.12);
  transform: translateY(-2px);
}

/* ── Form focus ring ── */
.form-input:focus {
  outline: none;
  border-color: #0EA5E9;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
}

/* ── Accordion transition ── */
.accordion-body {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
}
.accordion-body.open {
  max-height: 600px;
  opacity: 1;
}

/* ── Print: hide nav and footer ── */
@media print {
  #site-header, #site-footer { display: none; }
  main { margin: 0; }
}