/* ============================================================
   theme.css — Colour themes + Hero background
   Themes: blue (default) | purple | magenta
   ============================================================ */

/* ── Hero background image ──────────────────────────────────── */
.hero--with-bg-img {
  position: relative;
}
.hero-bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/images/hero-bg.jpg');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}
/* Animated gradient overlay on top of photo */
.hero-bg-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    150deg,
    var(--theme-hero-from, rgba(4,16,45,0.92)) 0%,
    var(--theme-hero-mid,  rgba(7,30,80,0.82)) 50%,
    var(--theme-hero-to,   rgba(13,110,181,0.65)) 100%
  );
  transition: background 0.6s ease;
}

/* SVG grid overlay */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

/* All hero children need z-index > overlay */
.hero--with-bg-img .hero-bg-shapes,
.hero--with-bg-img .hero-content,
.hero--with-bg-img .hero-scroll {
  position: relative;
  z-index: 2;
}

/* ── Colour theme variables ─────────────────────────────────── */

/* DEFAULT: Blue + Teal ─────────────────────────────────────── */
:root,
[data-theme="blue"] {
  --theme-primary:      #0d6eb5;
  --theme-primary-dark: #094d85;
  --theme-primary-rgb:  13, 110, 181;
  --theme-primary-light:#e8f3fc;
  --theme-accent:       #0d9b8a;
  --theme-accent-dark:  #097367;
  --theme-accent-rgb:   13, 155, 138;
  --theme-gold:         #e8a020;
  --theme-navy:         #0d1f3c;
  --theme-values-bg:    #0d6eb5;

  /* Hero overlay colours */
  --theme-hero-from:    rgba(4,16,45,0.92);
  --theme-hero-mid:     rgba(7,30,80,0.82);
  --theme-hero-to:      rgba(13,80,160,0.60);

  /* Shape blob colours */
  --theme-shape-1:      #0d9b8a;
  --theme-shape-2:      #c8e8fc;
  --theme-shape-3:      #e8a020;

  /* CTA band */
  --theme-cta-from:     #0d1f3c;
  --theme-cta-to:       #094d85;

  /* Badge pill bg */
  --theme-badge-bg:     rgba(255,255,255,0.15);
}

/* PURPLE + ORANGE ──────────────────────────────────────────── */
[data-theme="purple"] {
  --theme-primary:      #7c3aed;
  --theme-primary-dark: #5b21b6;
  --theme-primary-rgb:  124, 58, 237;
  --theme-primary-light:#f3eeff;
  --theme-accent:       #f97316;
  --theme-accent-dark:  #c2510d;
  --theme-accent-rgb:   249, 115, 22;
  --theme-gold:         #f97316;
  --theme-navy:         #1e0a3c;
  --theme-values-bg:    #7c3aed;

  --theme-hero-from:    rgba(18,4,50,0.92);
  --theme-hero-mid:     rgba(40,10,90,0.82);
  --theme-hero-to:      rgba(100,30,180,0.60);

  --theme-shape-1:      #f97316;
  --theme-shape-2:      #e9d5ff;
  --theme-shape-3:      #fbbf24;

  --theme-cta-from:     #1e0a3c;
  --theme-cta-to:       #5b21b6;

  --theme-badge-bg:     rgba(255,255,255,0.14);
}

/* MAGENTA + YELLOW ─────────────────────────────────────────── */
[data-theme="magenta"] {
  --theme-primary:      #c026d3;
  --theme-primary-dark: #86198f;
  --theme-primary-rgb:  192, 38, 211;
  --theme-primary-light:#fce7ff;
  --theme-accent:       #eab308;
  --theme-accent-dark:  #a16207;
  --theme-accent-rgb:   234, 179, 8;
  --theme-gold:         #eab308;
  --theme-navy:         #2d0636;
  --theme-values-bg:    #c026d3;

  --theme-hero-from:    rgba(28,4,38,0.93);
  --theme-hero-mid:     rgba(60,5,70,0.83);
  --theme-hero-to:      rgba(160,20,180,0.58);

  --theme-shape-1:      #eab308;
  --theme-shape-2:      #fce7ff;
  --theme-shape-3:      #f0abfc;

  --theme-cta-from:     #2d0636;
  --theme-cta-to:       #86198f;

  --theme-badge-bg:     rgba(255,255,255,0.13);
}

/* ── Wire theme variables into site CSS ─────────────────────── */
:root {
  --blue:       var(--theme-primary);
  --blue-dark:  var(--theme-primary-dark);
  --blue-light: var(--theme-primary-light);
  --teal:       var(--theme-accent);
  --teal-dark:  var(--theme-accent-dark);
  --gold:       var(--theme-gold);
  --navy:       var(--theme-navy);
}

/* Override specific site elements to use theme vars */
.btn-primary {
  background: var(--theme-primary) !important;
  box-shadow: 0 4px 16px rgba(var(--theme-primary-rgb), 0.35) !important;
}
.btn-primary:hover {
  background: var(--theme-primary-dark) !important;
  box-shadow: 0 6px 24px rgba(var(--theme-primary-rgb), 0.45) !important;
}
.btn-outline {
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary) !important;
}
.btn-outline:hover {
  background: var(--theme-primary) !important;
  color: #fff !important;
}
.section-eyebrow { color: var(--theme-primary) !important; }
.highlight-icon   { color: var(--theme-primary) !important; }
.product-icon     { background: var(--theme-primary-light) !important; color: var(--theme-primary) !important; }
.product-card li.more { color: var(--theme-primary) !important; }
.marquee-item i   { color: var(--theme-primary) !important; }
.nav-links a:hover { color: var(--theme-primary) !important; background: var(--theme-primary-light) !important; }
.nav-links a.nav-cta { background: var(--theme-primary) !important; }
.nav-links a.nav-cta:hover { background: var(--theme-primary-dark) !important; }
.infra-card-accent { background: var(--theme-primary) !important; }
.infra-stage-pill.active, .infra-stage-pill:hover { background: var(--theme-primary) !important; border-color: var(--theme-primary) !important; }
.value-icon       { color: var(--theme-primary) !important; }
.value-card:hover { border-color: var(--theme-primary-light) !important; }
.unit-badge       { background: var(--theme-primary) !important; }
.unit-tag         { background: var(--theme-primary) !important; }
.product-full-header { background: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-primary)) !important; }
.sector-pill      { background: var(--theme-primary) !important; }
.contact-office   { border-left-color: var(--theme-primary) !important; }
.contact-office h4 { color: var(--theme-primary) !important; }
.contact-email-box i, .contact-office p i, .unit-card p i, .unit-photo-info p i { color: var(--theme-primary) !important; }
.footer-contact i { color: var(--theme-primary) !important; }
.cert-icon        { color: var(--theme-primary) !important; }
.cert-card:hover  { }
.customer-icon    { background: var(--theme-primary-light) !important; color: var(--theme-primary) !important; }
.tag              { background: var(--theme-primary-light) !important; color: var(--theme-primary) !important; }
.about-card       { border-left-color: var(--theme-primary) !important; }
.about-card-icon  { color: var(--theme-primary) !important; }
.pp-card:hover    { }
.footer-logo-img  { }
.form-input:focus { border-color: var(--theme-primary) !important; box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb),.12) !important; }
.brand-ups        { background: var(--theme-primary) !important; }

/* Values strip uses theme colour */
.section-values-strip { background: var(--theme-values-bg) !important; }

/* CTA band uses theme */
.section-cta-band {
  background: linear-gradient(135deg, var(--theme-cta-from) 0%, var(--theme-cta-to) 100%) !important;
}

/* Hero shapes use theme */
.shape-1 { background: var(--theme-shape-1) !important; }
.shape-2 { background: var(--theme-shape-2) !important; }
.shape-3 { background: var(--theme-shape-3) !important; }

/* Badge pill */
.badge-pill { background: var(--theme-badge-bg) !important; }

/* Page hero variants */
.page-hero--blue  { background: linear-gradient(135deg, var(--theme-primary-dark) 0%, var(--theme-primary) 100%) !important; }

/* Team home section */
.section-team-home { background: var(--theme-navy) !important; }

/* Hero primary button gets theme colour */
.btn-hero-primary {
  background: var(--theme-primary) !important;
  box-shadow: 0 4px 20px rgba(var(--theme-primary-rgb), 0.5) !important;
}
.btn-hero-primary:hover {
  background: var(--theme-primary-dark) !important;
}

/* Specialty banner teal -> accent */
.specialty-banner-with-img,
.section-values-strip .value-item:hover {
  background: linear-gradient(135deg, var(--theme-accent-dark), var(--theme-accent)) !important;
}

/* ── Theme Switcher Widget ──────────────────────────────────── */
.theme-switcher {
  position: fixed;
  bottom: 32px;
  right: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--theme-primary, #0d6eb5);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: .6rem 1.1rem .6rem .9rem;
  font-family: 'Syne', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
  letter-spacing: .04em;
}
.theme-toggle-btn i { font-size: 1.05rem; }
.theme-toggle-btn:hover { transform: scale(1.05); box-shadow: 0 6px 28px rgba(0,0,0,.38); }

.theme-panel {
  display: none;
  background: #fff;
  border-radius: 16px;
  padding: 1rem 1.1rem;
  box-shadow: 0 12px 48px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
  min-width: 200px;
  animation: panelIn .2s cubic-bezier(.22,1,.36,1) both;
  border: 1px solid rgba(0,0,0,.06);
}
.theme-panel.open { display: block; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.theme-panel-title {
  font-family: 'Syne', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: .75rem;
}
.theme-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.theme-swatch {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #f8fafc;
  cursor: pointer;
  transition: .18s ease;
  font-family: 'DM Sans', sans-serif;
  font-size: .83rem;
  font-weight: 500;
  color: #334155;
  width: 100%;
  text-align: left;
}
.theme-swatch:hover { background: #f1f5f9; border-color: #cbd5e1; }
.theme-swatch.active { border-color: var(--theme-primary, #0d6eb5); background: #fff; }
.swatch-a, .swatch-b {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.swatch-b { margin-left: -6px; }
.swatch-label { flex: 1; }

/* ── Smooth transition on theme change ──────────────────────── */
*,
.btn-primary,
.section-eyebrow,
.section-values-strip,
.section-cta-band,
.hero-bg-photo::after,
.brand-ups,
.nav-links a.nav-cta,
.product-full-header {
  transition-property: background, background-color, border-color, color, box-shadow;
  transition-duration: .4s;
  transition-timing-function: ease;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .theme-switcher { bottom: 20px; right: 16px; }
  .theme-toggle-btn span { display: none; }
  .theme-toggle-btn { padding: .65rem; border-radius: 50%; }
  .theme-toggle-btn i { font-size: 1.1rem; margin: 0; }
}