/* global.css — base layout, typography, shared components */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--c-text);
  background-color: var(--c-bg-primary);
  overflow-x: clip;            /* contain off-canvas mobile menu, no horizontal scroll */
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -60px;
  z-index: 2000;
  background: var(--c-accent-light);
  color: var(--c-btn-dark-text);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  font-weight: var(--fw-bold);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0.5rem; }

/* Focus visibility */
:focus-visible {
  outline: 3px solid var(--c-accent-light);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Main spacing */
.main { display: block; }
.section { margin-block: var(--sp-section); }
.section--tight { margin-block: clamp(1.5rem, 3vw, 2.25rem); }

/* Typography */
h1, .h1 { font-size: var(--fs-h1); color: var(--c-white); font-weight: var(--fw-extra); }
h2, .h2 {
  font-size: var(--fs-h2);
  color: var(--c-heading);
  font-weight: var(--fw-bold);
  position: relative;
  padding-bottom: 0.5rem;
}
h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 0.6rem;
  background: var(--grad-cta);
  border-radius: 3px;
}
h3, .h3 { font-size: var(--fs-h3); color: var(--c-white); font-weight: var(--fw-semibold); }

.section h2 { margin-bottom: var(--sp-h2-text); }
.section h3 { margin-bottom: var(--sp-h3-text); margin-top: var(--sp-paragraph); }
.prose p { margin-bottom: var(--sp-paragraph); }
.prose p:last-child { margin-bottom: 0; }
.prose a {
  color: var(--c-heading);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.prose a:hover { color: var(--c-neon); }
.prose ul { margin: 0 0 var(--sp-paragraph); padding-left: 1.25rem; }
.prose ul li { position: relative; padding-left: 1.25rem; margin-bottom: 0.5rem; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 8px;
  background: var(--c-neon);
  border-radius: 50%;
}
.prose strong { color: var(--c-white); font-weight: var(--fw-semibold); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  text-align: center;
  transition: transform var(--transition-fast), filter var(--transition-fast), background var(--transition-fast);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--cta {
  background: var(--grad-cta);
  color: var(--c-btn-dark-text);
  box-shadow: var(--shadow-soft);
}
.btn--cta:hover { filter: brightness(1.05); }
.btn--register {
  background: var(--c-neon);
  color: var(--c-btn-dark-text);
}
.btn--outline {
  background: transparent;
  color: var(--c-white);
  border: 1px solid var(--c-btn-outline);
}
.btn--outline:hover { background: rgba(193, 138, 46, 0.15); }
.btn--lg { padding: 0.95rem 2rem; font-size: clamp(1rem, 2vw, 1.125rem); }
.btn--block { width: 100%; }

.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--sp-paragraph); }

/* Breadcrumb */
.breadcrumb { margin-top: 1rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.875rem; }
.breadcrumb li { display: flex; align-items: center; gap: 0.4rem; color: var(--c-text); }
.breadcrumb li:not(:last-child)::after { content: "›"; color: var(--c-heading); }
.breadcrumb a { color: var(--c-heading); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--c-white); }

/* Tables */
.table-wrap { overflow-x: auto; border-radius: var(--radius); margin-block: var(--sp-paragraph); min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch; }
.data-table {
  min-width: 420px;
  background: var(--c-card);
  border-radius: var(--radius);
  overflow: hidden;
}
.data-table caption {
  caption-side: top;
  text-align: left;
  color: var(--c-white);
  font-weight: var(--fw-semibold);
  padding: 0.75rem 1rem;
  font-size: 1.05rem;
}
.data-table th, .data-table td {
  padding: 0.8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--c-border-soft);
  vertical-align: top;
}
.data-table thead th {
  background: var(--c-bg-dark);
  color: var(--c-heading);
  font-weight: var(--fw-semibold);
}
.data-table tbody th { color: var(--c-white); font-weight: var(--fw-medium); width: 42%; }
.data-table tbody tr:last-child td,
.data-table tbody tr:last-child th { border-bottom: none; }
.data-table tbody tr:nth-child(even) { background: rgba(23, 5, 29, 0.4); }

/* Content section with image */
.content-section { }
.content-figure {
  margin-block: var(--sp-h2-text);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-bg-dark);
}
.content-figure img {
  width: 100%;
  height: auto;          /* full image, never cropped */
  display: block;
}

/* Intro block */
.intro { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--c-white); }
.intro p { margin-bottom: var(--sp-paragraph); }
.intro p:last-child { margin-bottom: 0; }

/* Section intro (lead paragraph under H2 before H3) */
.lead { color: var(--c-white); }

/* Divider accent */
.gold-line { height: 2px; background: linear-gradient(90deg, var(--c-heading), transparent); border: 0; margin-block: var(--sp-section); opacity: 0.6; }

/* Utility */
.text-center { text-align: center; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Fade-in (animations.js adds .is-visible) */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; }
}

/* Cards grid generic */
.card-grid { display: grid; gap: var(--sp-grid-gap); }

/* 404 error page */
.error-page {
  display: flex;
  align-items: center;
  min-height: 60dvh;
  padding-block: var(--sp-section);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 211, 41, 0.08), transparent 60%),
    var(--c-bg-dark);
}
.error-page__inner { text-align: center; max-width: 640px; }
.error-page__code {
  font-size: clamp(5rem, 22vw, 10rem);
  font-weight: var(--fw-extra);
  line-height: 1;
  background: var(--grad-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.5rem;
}
.error-page__title { color: var(--c-white); margin-bottom: 1rem; }
.error-page__text { color: var(--c-text); font-size: 1.1rem; margin-bottom: 1.5rem; }
.error-page__cta { justify-content: center; }

/* Info callout */
.callout {
  background: var(--c-card);
  border-radius: var(--radius);
  padding: var(--sp-card-pad);
  margin-block: var(--sp-paragraph);
}
.callout--gold { border-left: 3px solid var(--c-heading); }