/* GAIA enhancement layer for explorer/content pages.
 * Font/headline scale, button hover glow, opt-in fade-ins. No smooth-scroll,
 * no WebGL — keeps data tables fully functional and Lighthouse-friendly. */

/* Display-scale headlines (Space Grotesk already loaded site-wide) */
h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.04; letter-spacing: -0.02em;
}
h2 {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.015em;
}

/* Button hover: scale 1.03 + soft teal glow */
.btn { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.btn:hover {
  transform: scale(1.03);
  box-shadow: 0 0 0 1px rgba(13,158,118,0.5), 0 10px 30px -10px rgba(13,158,118,0.55);
}

/* nav blur on scroll */
nav { transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease; }
nav.scrolled { backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(0,0,0,0.05); }

/* opt-in fade-up — hidden state gated behind html.js so content is ALWAYS
   visible if JS fails to run (protects the data pages). */
html.js .fade-up { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
html.js .fade-up.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover { transform: none; }
}

/* Occupation detail panel — radar + demographics (Task 10) */
.occ-detail-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 1.25rem; align-items: start; padding-top: .4rem; }
.occ-radar-card { padding: 1.1rem; }
@media (max-width: 760px) { .occ-detail-grid { grid-template-columns: 1fr; } }

/* Compare mode (Task 11) */
.cmp-check { margin-right: .55rem; accent-color: #0D9E76; cursor: pointer; vertical-align: middle; width: 15px; height: 15px; }
.cmp-fab {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 200;
  background: #0D9E76; color: #fff; border: 0; border-radius: 999px;
  padding: .8rem 1.5rem; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(13,158,118,.6); transition: transform .15s;
}
.cmp-fab:hover { transform: scale(1.04); }
.cmp-fab[hidden] { display: none; }
.cmp-modal { position: fixed; inset: 0; z-index: 300; background: rgba(3,10,16,.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.cmp-modal[hidden] { display: none; }
.cmp-modal-inner { position: relative; background: #0A1628; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 1.5rem; width: min(780px, 94vw); box-shadow: 0 30px 90px -30px #000; }
.cmp-close { position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #C7D3E0; border-radius: 8px; width: 30px; height: 30px; cursor: pointer; line-height: 1; }
.cmp-close:hover { background: rgba(13,158,118,.22); color: #fff; }

/* Country bubble legend (Task 12) */
.cty-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: .8rem; }
.cty-leg { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: #9fb3c2; }
.cty-leg i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }