/* ==========================================================================
   Global styles — layout, typography, buttons, shared content components
   ========================================================================== */
body {
  font-family: var(--font-family);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background-color: var(--color-bg-primary);
}

/* Skip link (a11y) */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100px;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--color-heading);
  color: var(--color-btn-text);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-card);
  transition: top var(--transition-base);
}
.skip-link:focus { top: 0.5rem; }

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* Layout rhythm */
main { display: block; }
.section { margin-block: var(--space-section); }
.section:first-of-type { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* Typography */
h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  color: var(--color-white);
  line-height: 1.15;
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  position: relative;
  padding-bottom: 0.6rem;
}
h2::after, .h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  background: var(--color-heading);
  border-radius: 2px;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-white);
}
h2 + p, .h2 + p { margin-top: var(--space-h2-text); }
h3 + p, .h3 + p { margin-top: var(--space-h3-text); }
p { margin-bottom: 0; }
p + p { margin-top: var(--space-paragraph); }
a.text-link { color: var(--color-heading); font-weight: var(--fw-semibold); text-decoration: underline; }
a.text-link:hover { color: var(--color-accent-green); }
strong { color: var(--color-white); font-weight: var(--fw-semibold); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-card);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  line-height: 1;
  text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.btn--primary {
  background: var(--gradient-cta);
  color: var(--color-btn-text);
  box-shadow: var(--shadow-soft);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn--outline {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
}
.btn--outline:hover { background: var(--color-white); color: var(--color-btn-text); }
.btn--block { width: 100%; }

/* Focus visibility (a11y) */
:focus-visible {
  outline: 3px solid var(--color-accent-green);
  outline-offset: 2px;
}

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

/* Intro block */
.intro p { max-width: none; }        /* intro spans the full container width */
.lead { font-size: clamp(1rem, 1.8vw, 1.15rem); color: var(--color-white); }

/* Content section (repeatable H2 + text + image) */
.content-section { margin-block: var(--space-section); }
.content-section__img {
  width: 100%;
  height: auto;               /* never crop images that follow an H2 */
  border-radius: var(--radius-card);
  margin-top: var(--space-h2-text);
  margin-bottom: var(--space-h2-text);
}
.content-section ul.bullets,
.rich ul.bullets {
  margin-top: var(--space-h3-text);
  display: grid;
  gap: 0.6rem;
}
.rich ul.bullets li {
  position: relative;
  padding-left: 1.5rem;
}
.rich ul.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-accent-green);
  border-radius: 2px;
}
.rich h3 { margin-top: var(--space-section); }
.rich h3:first-child { margin-top: 0; }
.rich > * + h2 { margin-top: var(--space-section); }
.cta-row { margin-top: var(--space-h2-text); display: flex; flex-wrap: wrap; gap: var(--space-card-gap); }

/* Data tables */
.table-wrap { margin-top: var(--space-h2-text); overflow-x: auto; border-radius: var(--radius-card); }
table.data {
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  overflow: hidden;
  min-width: 420px;
}
table.data caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 0.75rem;
  color: var(--color-white);
  font-weight: var(--fw-semibold);
}
table.data th, table.data td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  vertical-align: top;
}
table.data thead th {
  background: rgba(49, 184, 63, 0.14);
  color: var(--color-white);
  font-weight: var(--fw-semibold);
}
table.data tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
table.data tbody th { color: var(--color-white); font-weight: var(--fw-medium); }

/* Cards grid helpers */
.grid { display: grid; gap: var(--space-card-gap); }
.grid > * { min-width: 0; }
.card {
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding: var(--space-card-padding);
  min-width: 0;                 /* allow cards to shrink so inner tables scroll, not overflow */
}
.table-wrap { min-width: 0; max-width: 100%; }

/* Feature/benefits list */
.feature-list { display: grid; gap: 0.6rem; margin-top: var(--space-h2-text); }
.feature-list li { position: relative; padding-left: 1.75rem; }
.feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent-green);
  font-weight: var(--fw-bold);
}

/* Contact / email chips */
.contact-chips { display: flex; flex-wrap: wrap; gap: var(--space-card-gap); margin-top: var(--space-h2-text); }
.contact-chip {
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.contact-chip span { color: var(--color-white); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.contact-chip a { color: var(--color-heading); font-weight: var(--fw-semibold); }

/* Fade-in on scroll (opt-in via .animate) */
.animate { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .animate { opacity: 1; transform: none; }
}

/* Rating stars (hero) */
.rating { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: var(--fw-semibold); color: var(--color-white); }
.rating__stars { color: var(--color-heading); letter-spacing: 2px; }
.rating__value { color: var(--color-heading); font-weight: var(--fw-bold); }

/* Two-column layout for platform blocks */
.two-col { display: grid; gap: var(--space-card-gap); }
.two-col > * { min-width: 0; }
@media (min-width: 768px) { .two-col { grid-template-columns: 1fr 1fr; } }

/* Utility */
.center { text-align: center; }
.mt-section { margin-top: var(--space-section); }