/* ============================================
   Longmax Industries — Alternate design themes
   --------------------------------------------
   Two override layers the client can preview alongside the default
   ("Classic") look. Loaded AFTER style.css. Each theme is scoped under
   html.theme-<name>, so with no class set the site renders exactly as
   the Classic design — style.css is never modified.

   Activated locally via the preview switcher (bottom-left). The switcher
   only appears on localhost (html.preview-tools), so it never shows to
   real visitors even if this file is deployed.

   Themes:
     theme-industrial — Bold Industrial Dark (dark canvas, Oswald, cyan)
     theme-gradient   — Modern Tech Gradient (light, rounded, gradients)
   ============================================ */

/* ──────────────────────────────────────────────
   Preview switcher (local only)
   ────────────────────────────────────────────── */
.theme-switcher { display: none; }
html.preview-tools .theme-switcher {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 90;
  padding: 0.5rem 0.6rem;
  background: #0B1E35;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  font-family: 'Inter', sans-serif;
}
.theme-switcher-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}
.theme-switcher-btns { display: flex; gap: 0.25rem; }
.theme-switcher button {
  padding: 0.32rem 0.62rem;
  border-radius: 6px;
  color: #cdd7e3;
  font-weight: 600;
  font-size: 0.78rem;
  border: 1px solid transparent;
  transition: background 150ms ease, color 150ms ease;
}
.theme-switcher button:hover { color: #fff; background: rgba(255,255,255,0.10); }
.theme-switcher button.is-active { background: #1AB6E8; color: #06121A; }
@media (max-width: 540px) {
  .theme-switcher-label { display: none; }
  html.preview-tools .theme-switcher { left: 0.5rem; bottom: 0.5rem; }
}

/* ══════════════════════════════════════════════
   THEME 1 — BOLD INDUSTRIAL DARK
   ══════════════════════════════════════════════ */
html.theme-industrial {
  --navy:     #EAF0F7;   /* now the light "ink"/heading color on dark */
  --navy-2:   #FFFFFF;
  --ink:      #D7DEE8;
  --body:     #ABB7C6;
  --muted:    #7A8696;
  --line:     #2A313C;
  --line-2:   #20262F;
  --bg:       #0E1116;
  --bg-soft:  #161A21;
  --bg-dark:  #090B0F;
  --cyan:     #2BC2F5;
  --cyan-dk:  #19A6DA;
  --accent:   #E8B84B;
  --surface:  #161A21;
  --shadow-s: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-m: 0 10px 30px rgba(0,0,0,0.50);
  --radius:   0px;
  --radius-2: 0px;
  --font-display: 'Oswald', 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
  color-scheme: dark;
}
/* Oswald reads better without the tight tracking the base sets */
html.theme-industrial h1,
html.theme-industrial h2,
html.theme-industrial h3,
html.theme-industrial h4 { letter-spacing: 0; font-weight: 600; }
html.theme-industrial h1 { font-weight: 700; letter-spacing: 0.005em; }
html.theme-industrial .eyebrow { color: var(--accent); }

/* Dark surfaces that the base paints with var(--navy) (now light) */
html.theme-industrial .hero,
html.theme-industrial .page-hero,
html.theme-industrial .cta-band,
html.theme-industrial .industry-card,
html.theme-industrial .video-block { background: #0A0D12; }
html.theme-industrial .bg-dark { background: #0A0D12; }

/* Cards / panels the base hardcodes to white */
html.theme-industrial .tile,
html.theme-industrial .stat-cell,
html.theme-industrial .location-card,
html.theme-industrial .office,
html.theme-industrial .map-block,
html.theme-industrial .form-row input,
html.theme-industrial .form-row select,
html.theme-industrial .form-row textarea {
  background: var(--surface);
  color: var(--ink);
}
html.theme-industrial .form-row input:focus,
html.theme-industrial .form-row select:focus,
html.theme-industrial .form-row textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(43,194,245,0.18);
}

/* Primary actions become the cyan accent for contrast on dark */
html.theme-industrial .btn-primary,
html.theme-industrial .nav-menu .nav-cta,
html.theme-industrial .nav-menu a.nav-cta.active {
  background: var(--cyan);
  color: #06121A;
  border-color: var(--cyan);
}
html.theme-industrial .btn-primary:hover,
html.theme-industrial .nav-menu .nav-cta:hover,
html.theme-industrial .nav-menu a.nav-cta.active:hover {
  background: var(--cyan-dk);
  border-color: var(--cyan-dk);
  color: #06121A;
}
html.theme-industrial .btn-outline:hover { border-color: var(--cyan); color: var(--navy); }
html.theme-industrial .tile-arrow { background: var(--cyan); color: #06121A; }

/* Sticky nav + mobile drawer */
html.theme-industrial .nav { background: rgba(14,17,22,0.90); border-bottom-color: var(--line); }
@media (max-width: 860px) {
  html.theme-industrial .nav-menu { background: #0E1116; }
}

/* Footer a touch darker than the canvas */
html.theme-industrial footer { background: #08090C; }

/* World map on dark */
html.theme-industrial .world-map { background: var(--surface); border-color: var(--line); }
html.theme-industrial .world-map .sea { fill: #11161C; }
html.theme-industrial .world-map .cc { fill: #283039; stroke: #0E1116; }
html.theme-industrial .world-map .facility-label { fill: #FFFFFF; stroke: #0E1116; }
html.theme-industrial .world-map .cc.is-served { fill: var(--cyan); }
html.theme-industrial .world-map .cc.is-served:hover { fill: #FFFFFF; stroke: #FFFFFF; }
html.theme-industrial .world-map .market-dot { stroke: #0E1116; }
html.theme-industrial .world-map .facility-dot { fill: #FFFFFF; stroke: #0E1116; }
html.theme-industrial .lg-swatch.lg-facility { background: #FFFFFF; box-shadow: 0 0 0 3px rgba(43,194,245,0.35); }

/* Tile hover edge */
html.theme-industrial .tile:hover { border-color: var(--cyan); }

/* ══════════════════════════════════════════════
   THEME 2 — MODERN TECH GRADIENT
   ══════════════════════════════════════════════ */
html.theme-gradient {
  --navy:     #14224A;
  --navy-2:   #1D2F63;
  --ink:      #233047;
  --body:     #47566E;
  --muted:    #7C8BA4;
  --line:     #E6ECF6;
  --line-2:   #F0F4FB;
  --bg:       #FFFFFF;
  --bg-soft:  #F3F7FF;
  --bg-dark:  #14224A;
  --cyan:     #1AA8E8;
  --cyan-dk:  #1486D8;
  --accent:   #6C5CE7;
  --surface:  #FFFFFF;
  --shadow-s: 0 2px 8px rgba(37,99,235,0.06);
  --shadow-m: 0 14px 34px rgba(37,99,235,0.12);
  --radius:   10px;
  --radius-2: 12px;
  --font-display: 'Space Grotesk', 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
}

/* Gradient heroes + CTA band */
html.theme-gradient .hero,
html.theme-gradient .page-hero {
  background: linear-gradient(135deg, #0E1E46 0%, #1466C9 55%, #1AB6E8 100%);
}
html.theme-gradient .cta-band {
  background: linear-gradient(120deg, #1466C9 0%, #1AB6E8 100%);
}
html.theme-gradient .hero-media,
html.theme-gradient .page-hero-media { opacity: 0.14; }

/* Gradient, pill-rounded primary actions */
html.theme-gradient .btn { border-radius: 999px; }
html.theme-gradient .btn-primary,
html.theme-gradient .btn-cyan,
html.theme-gradient .nav-menu .nav-cta,
html.theme-gradient .nav-menu a.nav-cta.active {
  background: linear-gradient(135deg, #2563EB 0%, #1AB6E8 100%);
  color: #FFFFFF;
  border: 0;
  box-shadow: 0 6px 18px rgba(37,99,235,0.28);
}
html.theme-gradient .btn-primary:hover,
html.theme-gradient .btn-cyan:hover,
html.theme-gradient .nav-menu .nav-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: #FFFFFF;
}

/* Rounded, floating cards */
html.theme-gradient .tile,
html.theme-gradient .office,
html.theme-gradient .location-card,
html.theme-gradient .img-block,
html.theme-gradient .tile-img,
html.theme-gradient .map-block,
html.theme-gradient .video-block,
html.theme-gradient .world-map { border-radius: var(--radius-2); }
html.theme-gradient .stats-row,
html.theme-gradient .coverage-stats { border-radius: var(--radius-2); overflow: hidden; }
html.theme-gradient .tile {
  border-color: transparent;
  box-shadow: var(--shadow-m);
}
html.theme-gradient .tile:hover {
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(37,99,235,0.18);
}

/* Softer, brighter nav */
html.theme-gradient .nav {
  background: rgba(255,255,255,0.90);
  border-bottom-color: var(--line);
  box-shadow: 0 2px 20px rgba(37,99,235,0.05);
}

/* World map: cooler blue-gray land, brand-cyan served markets preserved */
html.theme-gradient .world-map { background: var(--bg-soft); border-color: var(--line); }
html.theme-gradient .world-map .sea { fill: #EDF3FC; }
html.theme-gradient .world-map .cc { fill: #D8E1F0; stroke: #FFFFFF; }
html.theme-gradient .world-map .cc.is-served { fill: var(--cyan); }
html.theme-gradient .world-map .cc.is-served:hover { fill: var(--navy); stroke: var(--navy); }

/* ══════════════════════════════════════════════
   THEME 4 — ENGINEERING (technical / blueprint)
   Engineering-paper grid, monospace data + labels, amber accent,
   CAD corner brackets, sharp edges. A deliberately technical, "built by
   engineers" feel — the opposite of the clean corporate/finance look.
   ══════════════════════════════════════════════ */
html.theme-engineering {
  --navy:     #14263c;
  --navy-2:   #1d3557;
  --ink:      #1e2d3f;
  --body:     #41515f;
  --muted:    #6a7889;
  --line:     #ccd6df;
  --line-2:   #e5ebf0;
  --bg:       #FBFCFD;
  --bg-soft:  #EDF1F5;
  --bg-dark:  #0D1A2B;
  --cyan:     #E8792B;   /* engineering amber — the "not finance" signal */
  --cyan-dk:  #C4611A;
  --accent:   #1F6F8B;   /* technical teal for eyebrow labels */
  --radius:   0px;
  --radius-2: 0px;
  --grid-line: rgba(20, 50, 85, 0.06);
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* Engineering-paper grid behind the whole page */
html.theme-engineering body {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Monospace technical labels + datasheet numerals */
html.theme-engineering .eyebrow,
html.theme-engineering .stat-label,
html.theme-engineering .coverage-stat-label,
html.theme-engineering .location-type,
html.theme-engineering .region-name,
html.theme-engineering .nav-menu a,
html.theme-engineering .side-nav h4,
html.theme-engineering .breadcrumb,
html.theme-engineering .press-tag,
html.theme-engineering .block .sub-head,
html.theme-engineering .theme-switcher-label {
  font-family: var(--font-mono);
}
html.theme-engineering .stat-num,
html.theme-engineering .coverage-stat-num,
html.theme-engineering .hero-meta strong,
html.theme-engineering .timeline-year,
html.theme-engineering .reason-num,
html.theme-engineering .region-count {
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}
html.theme-engineering .eyebrow { letter-spacing: 0.16em; }

/* Hero: dark with a blueprint grid overlay on the photo */
html.theme-engineering .hero,
html.theme-engineering .page-hero { background: var(--bg-dark); }
html.theme-engineering .hero-media { opacity: 0.20; }
html.theme-engineering .hero > .container { position: relative; z-index: 2; }
html.theme-engineering .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* White datasheet cards */
html.theme-engineering .value-card,
html.theme-engineering .tile,
html.theme-engineering .stat-cell,
html.theme-engineering .coverage-stat,
html.theme-engineering .location-card,
html.theme-engineering .office,
html.theme-engineering .map-block { background: #FFFFFF; }

/* CAD-style corner brackets on the value cards */
html.theme-engineering .value-card { position: relative; }
html.theme-engineering .value-card::before,
html.theme-engineering .value-card::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid var(--cyan);
}
html.theme-engineering .value-card::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
html.theme-engineering .value-card::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

/* Amber primary action (readable dark text on amber) */
html.theme-engineering .btn-cyan { color: #1a0f04; }
html.theme-engineering .nav-menu .nav-cta,
html.theme-engineering .nav-menu a.nav-cta.active { background: var(--navy); color: #FFFFFF; }

/* World map: amber served markets on cool land */
html.theme-engineering .world-map { background: #FFFFFF; }
html.theme-engineering .world-map .sea { fill: #F2F7FB; }
html.theme-engineering .world-map .cc { fill: #DBE3EB; stroke: #FFFFFF; }
html.theme-engineering .world-map .cc.is-served { fill: var(--cyan); }
html.theme-engineering .world-map .cc.is-served:hover { fill: var(--navy); stroke: var(--navy); }
html.theme-engineering .world-map .facility-dot { fill: var(--navy); }