/* ── Full-page cinematic globe backdrop ──────────────────────────────────────
   #trade-canvas is position:fixed behind all content.
   html.dark  → dark cinematic panels (globe clearly visible)
   html.light → frosted light panels  (globe subtly visible beneath)
   Theme toggle works normally in both modes.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Always-on: canvas, page bg, stacking ───────────────────────────────── */

#trade-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* Dark mode: deep space */
html,
html.dark {
  background: #060d0a;
}

/* Light mode: soft sage gradient — globe reads as a planet on pale sky */
html.light {
  background: radial-gradient(ellipse 90% 70% at 50% 45%, #c2e0d0 0%, #ddf0e6 50%, #eef8f3 100%);
}

body {
  background: transparent;
}

/* Globe labels — fixed overlay above canvas, below section content */
#globe-labels {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Sections must sit above canvas (z:0) and labels (z:1) */
.section,
.section--alt,
.hero {
  position: relative;
  z-index: 2;
}

.site-header {
  z-index: 52;
}

.site-footer {
  position: relative;
  z-index: 2;
}

/* ── Country label chips ─────────────────────────────────────────────────── */

.globe-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transform: translate(-50%, -100%);
  pointer-events: none;
  will-change: opacity, left, top;
}

.globe-label-text {
  font-family: var(--font-body-face), sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #c8e6d7;
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.9),
    0 0 20px rgba(6, 13, 10, 0.95);
  white-space: nowrap;
}

.globe-label-tick {
  width: 1px;
  height: 7px;
  background: linear-gradient(to bottom, rgba(61, 184, 122, 0.65), transparent);
}

/* Light mode: dark-green labels on pale sage canvas */
html.light .globe-label-text {
  color: #0d3d27;
  text-shadow:
    0 0 6px rgba(238, 248, 243, 0.95),
    0 0 14px rgba(210, 240, 225, 0.9);
}

html.light .globe-label-tick {
  background: linear-gradient(to bottom, rgba(13, 61, 39, 0.7), transparent);
}

/* Cinematic sticky: transparent so fixed canvas shows through */
.cinematic-sticky {
  background: transparent !important;
}

/* Accent text (hero headline span) — always green */
.text-accent {
  color: #3db87a;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — cinematic dark panels, globe clearly visible
   ══════════════════════════════════════════════════════════════════════════ */

html.dark .section,
html.dark .section--alt,
html.dark .hero {
  background: rgba(6, 13, 10, 0.82);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

html.dark .section--alt {
  background: rgba(10, 20, 16, 0.78);
}

html.dark .site-header {
  background: rgba(6, 13, 10, 0.92) !important;
  border-bottom-color: rgba(34, 139, 94, 0.25) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.dark .site-footer {
  background: rgba(6, 13, 10, 0.88);
  border-top: 1px solid rgba(34, 139, 94, 0.2);
}

/* Typography */
html.dark body                                       { color: #edf8f3; }
html.dark p,
html.dark li,
html.dark .text-muted,
html.dark .section-intro,
html.dark .lead                                      { color: #a8c9b8; }
html.dark h1, html.dark h2, html.dark h3, html.dark h4,
html.dark .section-title,
html.dark .display-title                             { color: #edf8f3; }
html.dark a                                          { color: #3db87a; }
html.dark a:hover                                    { color: #5dd49a; }

/* Nav */
html.dark .nav-link                                  { color: #a8c9b8 !important; }
html.dark .nav-link:hover,
html.dark .nav-link:focus-visible                    { color: #3db87a !important; }
html.dark .nav-link.is-active                        { color: #3db87a !important; background: rgba(21, 87, 64, 0.35); }
html.dark .site-title-link                           { color: #edf8f3 !important; }
html.dark .nav-toggle-bar                            { background: #c8e6d7 !important; }

/* Buttons */
html.dark .btn-ghost {
  color: #edf8f3;
  border-color: rgba(34, 139, 94, 0.45);
}
html.dark .btn-ghost:hover {
  border-color: #3db87a;
  color: #3db87a;
}

/* Cards */
html.dark .card,
html.dark .office-card,
html.dark .needs-card,
html.dark .partner-point,
html.dark .partner-spotlight-card {
  background: rgba(10, 25, 18, 0.75);
  border-color: rgba(34, 139, 94, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
html.dark .card-title,
html.dark .office-country,
html.dark .needs-card-title,
html.dark .partner-point-title  { color: #edf8f3; }
html.dark .card-text,
html.dark .office-address,
html.dark .office-email,
html.dark .partner-testimonial-text { color: #a8c9b8; }

/* Why list */
html.dark .why-num     { background: rgba(21, 87, 64, 0.4); color: #3db87a; }
html.dark .why-heading { color: #edf8f3; }

/* Table */
html.dark .needs-table                          { background: rgba(10, 25, 18, 0.85); }
html.dark .needs-table thead th                 { background: rgba(21, 40, 30, 0.9); color: #7ab89a; border-bottom-color: rgba(34, 139, 94, 0.3); }
html.dark .needs-table td,
html.dark .needs-table tbody th                 { border-bottom-color: rgba(34, 139, 94, 0.15); color: #d5ede3; }
html.dark .needs-table tr:nth-child(even) td,
html.dark .needs-table tr:nth-child(even) th    { background: rgba(21, 40, 30, 0.4); }
html.dark .needs-dl-row dt                      { color: #7ab89a; }
html.dark .needs-dl-row dd                      { color: #d5ede3; }
html.dark .needs-subhead                        { color: #a8c9b8; }

/* Scope food */
html.dark .scope-food               { background: rgba(10, 25, 18, 0.7); border-color: rgba(34, 139, 94, 0.25); }
html.dark .scope-food-title         { color: #edf8f3; }
html.dark .scope-commodity-list li  { color: #a8c9b8; border-color: rgba(34, 139, 94, 0.2); }

html.dark .scope-gallery-title           { color: #edf8f3; }
html.dark .scope-gallery-row             { background: rgba(10, 25, 18, 0.7); border-color: rgba(34, 139, 94, 0.25); }
html.dark .scope-gallery-figure          { border-color: rgba(34, 139, 94, 0.25); background: rgba(10, 25, 18, 0.5); }
html.dark .scope-gallery-heading         { color: #edf8f3; }
html.dark .scope-gallery-text.text-muted { color: #a8c9b8; }
html.dark .scope-metals-spec-label       { color: #a8c9b8; }
html.dark .scope-metals-spec-table th,
html.dark .scope-metals-spec-table td     { border-color: rgba(34, 139, 94, 0.25); }
html.dark .scope-metals-spec-table thead th,
html.dark .scope-metals-spec-table tbody th { background: rgba(10, 25, 18, 0.5); color: #edf8f3; }
html.dark .scope-metals-spec-table tbody td { color: #a8c9b8; }

/* Partner */
html.dark .partner-spotlight-name          { color: #edf8f3; }
html.dark .partner-spotlight-url           { color: #7ab89a; }
html.dark .partner-testimonial-attribution { color: #7ab89a; }

/* Footer */
html.dark .footer-brand,
html.dark .footer-tag,
html.dark .footer-nav-heading { color: #7ab89a; }
html.dark .footer-link        { color: #a8c9b8; }
html.dark .footer-link:hover  { color: #3db87a; }

/* Hide hero blobs on dark (look wrong) */
html.dark .hero-bg { display: none; }


/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — frosted light panels, globe subtly visible beneath
   Text keeps its original dark-on-light contrast. Globe peeks through edges.
   ══════════════════════════════════════════════════════════════════════════ */

html.light .section,
html.light .section--alt,
html.light .hero {
  background: rgba(243, 250, 246, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

html.light .section--alt {
  background: rgba(255, 255, 255, 0.90);
}

html.light .site-header {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom-color: rgba(21, 87, 64, 0.15) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.light .site-footer {
  background: rgba(243, 250, 246, 0.94);
  border-top: 1px solid rgba(21, 87, 64, 0.12);
}

/* Cards — keep their original light look, just slightly translucent */
html.light .card,
html.light .office-card,
html.light .needs-card,
html.light .partner-point,
html.light .partner-spotlight-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Light mode keeps its original text/link colors from globals.css — no overrides needed */

/* ── Mobile — strip backdrop-filter for GPU performance ─────────────────── */

@media (max-width: 767px) {
  html.dark .section,
  html.dark .section--alt,
  html.dark .hero {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(6, 13, 10, 0.93);
  }
  html.dark .site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(6, 13, 10, 0.97) !important;
  }
  html.dark .card,
  html.dark .office-card,
  html.dark .needs-card,
  html.dark .partner-point,
  html.dark .partner-spotlight-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html.light .section,
  html.light .section--alt,
  html.light .hero {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(243, 250, 246, 0.97);
  }
  html.light .site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.98) !important;
  }
  html.light .card,
  html.light .office-card,
  html.light .needs-card,
  html.light .partner-point,
  html.light .partner-spotlight-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .section,
  .section--alt,
  .hero,
  .site-header,
  .card,
  .office-card,
  .needs-card,
  .partner-point,
  .partner-spotlight-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}