/* ============================================================
   Central Alberta Works - Main CSS
   Theme variables + custom utilities that extend Tailwind CDN
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ── CSS Custom Properties (design tokens) ── */
:root {
  --radius: 0.875rem;
  --background: #ffffff;
  --surface: #f5f7fb;
  --foreground: #1a2744;
  --primary: #074982;
  --primary-foreground: #ffffff;
  --secondary: #1b4580;
  --secondary-foreground: #ffffff;
  --accent: #fbd84c;
  --accent-foreground: #074982;
  --muted: #f2f4f8;
  --muted-foreground: #827f83;
  --card: #ffffff;
  --card-foreground: #1a2744;
  --popover: #ffffff;
  --popover-foreground: #1a2744;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #e3e7f0;
  --input: #e3e7f0;
  --ring: #074982;
  --shadow-card: 0 1px 2px rgb(7 73 130 / 0.06), 0 8px 24px -12px rgb(7 73 130 / 0.14);
  --shadow-elev: 0 10px 40px -12px rgb(7 73 130 / 0.22);
}

/* ── Base ── */
*, *::before, *::after { border-color: var(--border); box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* ── Custom Utility Classes ── */
.font-display { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; }

.bg-hero-gradient {
  background-color: #07223d;
  background-image:
    radial-gradient(70% 55% at 12% 8%, rgb(251 216 76 / 0.38) 0%, transparent 60%),
    radial-gradient(55% 55% at 95% 95%, rgb(7 73 130 / 0.55) 0%, transparent 65%),
    linear-gradient(150deg, rgba(7,34,61,0.55) 0%, rgba(10,84,148,0.45) 45%, rgba(27,69,128,0.7) 100%);
}

.bg-hero-overlay {
  background-image:
    linear-gradient(180deg, rgba(7,34,61,0.35) 0%, rgba(7,34,61,0.10) 35%, rgba(7,34,61,0.70) 100%),
    linear-gradient(95deg, rgba(7,34,61,0.55) 0%, rgba(7,34,61,0.05) 55%, rgba(251,216,76,0.10) 100%);
}

.bg-mesh-soft {
  background-image:
    radial-gradient(60% 60% at 10% 0%, rgb(251 216 76 / 0.10) 0%, transparent 60%),
    radial-gradient(50% 50% at 100% 50%, rgb(7 73 130 / 0.08) 0%, transparent 60%);
}

.text-gold { color: #fbd84c; }
.bg-gold { background-color: #fbd84c; }

/* ── Shadows ── */
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-elev { box-shadow: var(--shadow-elev); }

/* ── Animations ── */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(2deg); }
}
@keyframes float-slower {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(10px) translateX(-8px); }
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgb(251 216 76 / 0.55); }
  100% { box-shadow: 0 0 0 18px rgb(251 216 76 / 0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes count-up { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

.animate-float { animation: float-slow 7s ease-in-out infinite; }
.animate-float-slow { animation: float-slower 9s ease-in-out infinite; }
.animate-pulse-ring { animation: pulse-ring 2.2s ease-out infinite; }
.animate-fade-in { animation: fade-in 0.5s ease both; }
.animate-slide-down { animation: slide-down 0.2s ease both; }

/* ── Scroll-triggered animations ── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}
.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }

/* ── Hover card lift ── */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elev);
}

/* ── Mega menu ── */
.mega-panel {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mega-panel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Carousel ── */
.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.carousel-item { flex-shrink: 0; }

/* ── Form focus styles ── */
.form-input {
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(7 73 130 / 0.12);
}
.form-textarea {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(7 73 130 / 0.12);
}
.form-select {
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23827f83' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(7 73 130 / 0.12);
}

/* ── Details/Summary (FAQ accordion) ── */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] summary .chevron-icon { transform: rotate(180deg); }
.chevron-icon { transition: transform 0.2s ease; }

/* ── Sticky header ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(7,73,130,0.07);
  box-shadow: 0 1px 0 0 rgba(7,73,130,0.04);
}

/* ── Search bar ── */
.search-bar { display: none; }
.search-bar.open { display: block; }

/* ── Mobile overlay backdrop ── */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7, 22, 48, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-overlay.open { display: block; opacity: 1; }

/* ── Mobile drawer (slides in from right) ── */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 88vw);
  background: var(--background);
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(7, 34, 61, 0.2);
}
.mobile-menu.open { transform: translateX(0); }

/* Sub-menu accordion */
.mobile-nav-sub { display: none; }
.mobile-nav-sub.open { display: block; }
.mobile-nav-chevron { transition: transform 0.25s ease; }
.mobile-nav-trigger.open .mobile-nav-chevron { transform: rotate(180deg); }

/* ── Tabs ── */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--muted); }
::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 3px; }

/* ── Background/surface utilities for Tailwind ── */
.bg-background { background-color: var(--background); }
.bg-surface { background-color: var(--surface); }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-accent { background-color: var(--accent); }
.bg-muted { background-color: var(--muted); }
.bg-card { background-color: var(--card); }
.text-foreground { color: var(--foreground); }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-accent { color: var(--accent); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-secondary-foreground { color: var(--secondary-foreground); }
.text-accent-foreground { color: var(--accent-foreground); }
.text-card-foreground { color: var(--card-foreground); }
.text-destructive { color: var(--destructive); }
.border-border { border-color: var(--border); }
.ring-border { --tw-ring-color: var(--border); }
.ring-primary { --tw-ring-color: var(--primary); }

/* opacity variants */
.bg-primary\/5 { background-color: rgb(7 73 130 / 0.05); }
.bg-primary\/10 { background-color: rgb(7 73 130 / 0.10); }
.bg-primary\/20 { background-color: rgb(7 73 130 / 0.20); }
.bg-secondary\/10 { background-color: rgb(27 69 128 / 0.10); }
.bg-accent\/10 { background-color: rgb(251 216 76 / 0.10); }
.bg-accent\/15 { background-color: rgb(251 216 76 / 0.15); }
.bg-accent\/20 { background-color: rgb(251 216 76 / 0.20); }
.bg-accent\/25 { background-color: rgb(251 216 76 / 0.25); }
.bg-accent\/30 { background-color: rgb(251 216 76 / 0.30); }
.bg-muted\/40 { background-color: rgb(242 244 248 / 0.40); }
.bg-muted\/70 { background-color: rgb(242 244 248 / 0.70); }
.bg-background\/95 { background-color: rgb(255 255 255 / 0.95); }
.text-primary-foreground\/65 { color: rgb(255 255 255 / 0.65); }
.text-primary-foreground\/70 { color: rgb(255 255 255 / 0.70); }
.text-primary-foreground\/75 { color: rgb(255 255 255 / 0.75); }
.text-primary-foreground\/80 { color: rgb(255 255 255 / 0.80); }
.text-primary-foreground\/85 { color: rgb(255 255 255 / 0.85); }
.text-primary-foreground\/90 { color: rgb(255 255 255 / 0.90); }
.text-foreground\/40 { color: rgb(26 39 68 / 0.40); }
.text-foreground\/70 { color: rgb(26 39 68 / 0.70); }
.text-foreground\/80 { color: rgb(26 39 68 / 0.80); }
.text-foreground\/85 { color: rgb(26 39 68 / 0.85); }
.text-foreground\/90 { color: rgb(26 39 68 / 0.90); }
.border-border\/60 { border-color: rgb(227 231 240 / 0.60); }
.border-border\/70 { border-color: rgb(227 231 240 / 0.70); }
.border-primary\/20 { border-color: rgb(7 73 130 / 0.20); }
.border-accent\/40 { border-color: rgb(251 216 76 / 0.40); }
.border-secondary\/40 { border-color: rgb(27 69 128 / 0.40); }
.border-secondary\/50 { border-color: rgb(27 69 128 / 0.50); }
.border-secondary\/60 { border-color: rgb(27 69 128 / 0.60); }
.bg-primary-foreground\/5  { background-color: rgb(255 255 255 / 0.05); }
.bg-primary-foreground\/10 { background-color: rgb(255 255 255 / 0.10); }
.bg-primary-foreground\/15 { background-color: rgb(255 255 255 / 0.15); }
.bg-primary-foreground\/30 { background-color: rgb(255 255 255 / 0.30); }
.ring-primary-foreground\/15 { --tw-ring-color: rgb(255 255 255 / 0.15); }
.ring-primary-foreground\/20 { --tw-ring-color: rgb(255 255 255 / 0.20); }
.ring-primary-foreground\/30 { --tw-ring-color: rgb(255 255 255 / 0.30); }
.ring-accent\/40 { --tw-ring-color: rgb(251 216 76 / 0.40); }
.ring-accent\/50 { --tw-ring-color: rgb(251 216 76 / 0.50); }
.ring-border\/60 { --tw-ring-color: rgb(227 231 240 / 0.60); }
.bg-secondary\/40 { background-color: rgb(27 69 128 / 0.40); }
.bg-primary\/50 { background-color: rgb(7 73 130 / 0.50); }
.bg-card\/60 { background-color: rgb(255 255 255 / 0.60); }
.bg-background\/85 { background-color: rgb(255 255 255 / 0.85); }
.text-primary-foreground\/95 { color: rgb(255 255 255 / 0.95); }
.text-foreground\/75 { color: rgb(26 39 68 / 0.75); }
.text-muted-foreground\/80 { color: rgb(130 127 131 / 0.80); }
.ring-accent\/60 { --tw-ring-color: rgb(251 216 76 / 0.60); }
.border-secondary\/15 { border-color: rgb(27 69 128 / 0.15); }
.divide-border\/60 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(227 231 240 / 0.60); }
.hover\:bg-accent\/90:hover { background-color: rgb(251 216 76 / 0.90); }
.hover\:bg-secondary\/90:hover { background-color: rgb(27 69 128 / 0.90); }
.hover\:bg-primary\/90:hover { background-color: rgb(7 73 130 / 0.90); }
.hover\:bg-primary-foreground\/15:hover { background-color: rgb(255 255 255 / 0.15); }
.hover\:bg-primary-foreground\/25:hover { background-color: rgb(255 255 255 / 0.25); }
.hover\:border-secondary\/40:hover { border-color: rgb(27 69 128 / 0.40); }

/* gradient utilities - Tailwind-compatible stop chains */
.from-primary { --tw-gradient-from: var(--primary); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(7 73 130 / 0)); }
.from-primary\/95 { --tw-gradient-from: rgb(7 73 130 / 0.95); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(7 73 130 / 0)); }
.from-primary\/90 { --tw-gradient-from: rgb(7 73 130 / 0.90); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(7 73 130 / 0)); }
.from-primary\/80 { --tw-gradient-from: rgb(7 73 130 / 0.80); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(7 73 130 / 0)); }
.from-primary\/75 { --tw-gradient-from: rgb(7 73 130 / 0.75); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(7 73 130 / 0)); }
.from-primary\/70 { --tw-gradient-from: rgb(7 73 130 / 0.70); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(7 73 130 / 0)); }
.from-primary\/40 { --tw-gradient-from: rgb(7 73 130 / 0.40); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(7 73 130 / 0)); }
.from-muted\/40 { --tw-gradient-from: rgb(242 244 248 / 0.40); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(242 244 248 / 0)); }
.via-primary { --tw-gradient-stops: var(--tw-gradient-from), var(--primary), var(--tw-gradient-to, rgb(7 73 130 / 0)); }
.via-primary\/95 { --tw-gradient-stops: var(--tw-gradient-from), rgb(7 73 130 / 0.95), var(--tw-gradient-to, rgb(7 73 130 / 0)); }
.via-primary\/90 { --tw-gradient-stops: var(--tw-gradient-from), rgb(7 73 130 / 0.90), var(--tw-gradient-to, rgb(7 73 130 / 0)); }
.via-primary\/60 { --tw-gradient-stops: var(--tw-gradient-from), rgb(7 73 130 / 0.60), var(--tw-gradient-to, rgb(7 73 130 / 0)); }
.via-primary\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgb(7 73 130 / 0.40), var(--tw-gradient-to, rgb(7 73 130 / 0)); }
.via-primary\/30 { --tw-gradient-stops: var(--tw-gradient-from), rgb(7 73 130 / 0.30), var(--tw-gradient-to, rgb(7 73 130 / 0)); }
.via-primary\/25 { --tw-gradient-stops: var(--tw-gradient-from), rgb(7 73 130 / 0.25), var(--tw-gradient-to, rgb(7 73 130 / 0)); }
.via-primary\/10 { --tw-gradient-stops: var(--tw-gradient-from), rgb(7 73 130 / 0.10), var(--tw-gradient-to, rgb(7 73 130 / 0)); }
.via-background\/30 { --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.30), var(--tw-gradient-to, rgb(255 255 255 / 0)); }
.via-transparent { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, rgb(7 73 130 / 0)); }
.to-secondary { --tw-gradient-to: var(--secondary); }
.to-accent { --tw-gradient-to: var(--accent); }
.to-transparent { --tw-gradient-to: transparent; }
.to-primary\/85 { --tw-gradient-to: rgb(7 73 130 / 0.85); }
.to-primary\/70 { --tw-gradient-to: rgb(7 73 130 / 0.70); }
.to-primary\/60 { --tw-gradient-to: rgb(7 73 130 / 0.60); }


/* border radius custom values */
.rounded-xl { border-radius: calc(var(--radius) + 4px); }
.rounded-2xl { border-radius: calc(var(--radius) + 8px); }
.rounded-3xl { border-radius: calc(var(--radius) + 12px); }

/* ── Progress bars ── */
.progress-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--muted);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--secondary);
  transition: width 1s ease;
}

/* ── Image zoom on hover ── */
.img-zoom { transition: transform 0.7s ease; }
.group:hover .img-zoom { transform: scale(1.05); }

/* ── Backdrop blur fix for older browsers ── */
@supports not (backdrop-filter: blur(1px)) {
  .backdrop-blur-xl { background-color: rgba(255,255,255,0.97) !important; }
}

/* ── Hero search bar - glass placeholder ── */
.hero-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

/* ── Print ── */
@media print {
  .site-header, footer { display: none; }
  body { color: black; background: white; }
}


/* ══════════════════════════════════════════════════
   MOBILE RESPONSIVE IMPROVEMENTS  (max-width: 639px)
   Desktop layout is NEVER touched here.
   ══════════════════════════════════════════════════ */
@media (max-width: 639px) {

  /* Floating stat-card offsets */
  .stat-car

/* ── Custom grid utility ── */
@media (min-width: 1024px) {
  .lg\:grid-cols-8 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}