/* ==========================================================================
   Global styles
   ========================================================================== */
body {
  font-family: var(--font-main);
  background: var(--color-bg-primary);
  color: var(--color-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
}

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

.skip-link {
  position: absolute;
  left: 0;
  top: -100%;
  background: var(--color-accent);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  z-index: 999;
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 0;
}

:focus-visible {
  outline: 3px solid var(--color-heading-accent);
  outline-offset: 2px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-white);
  font-weight: var(--fw-heading);
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
}
p, li, td, th, a {
  overflow-wrap: break-word;
}
html, body {
  overflow-x: hidden; /* safety net: horizontal scroll should only ever occur inside .content-section__table-wrap */
}
h2[id], h3[id] {
  scroll-margin-top: 5.5rem; /* keeps anchor targets clear of the sticky header */
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); color: var(--color-heading-accent); }
h3 { font-size: var(--fs-h3); }

main { display: block; }

.page-section {
  padding-block: var(--space-section);
}

.page-section--tight {
  padding-block-start: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: var(--fw-btn);
  font-size: 0.95rem;
  padding: 0.9rem 1.75rem;
  clip-path: var(--card-clip);
  border: none;
  transition: transform var(--transition-fast), filter var(--transition-fast);
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--gradient-btn-primary);
  color: var(--color-btn-text);
}
.btn--secondary {
  background: var(--gradient-btn-secondary);
  color: var(--color-btn-text);
}
.btn--block { width: 100%; }

/* Cards */
.card {
  background: var(--color-card-bg);
  clip-path: var(--card-clip);
  padding: var(--space-card-padding);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-text);
}
.breadcrumb a { color: var(--color-text); }
.breadcrumb a:hover { color: var(--color-heading-accent); }
.breadcrumb__sep { color: var(--color-cool-accent); }
.breadcrumb__current { color: var(--color-white); }

/* Content sections (shared for parsed page content) */
.content-section { padding-block: calc(var(--space-section) / 1.6); }
.content-section__intro { padding-block: calc(var(--space-section) / 1.3); }
.content-section__text { margin-block-end: var(--space-paragraph); max-width: var(--text-block-width); }
.content-section__text:last-child { margin-block-end: 0; }
.content-section h2 { margin-block-end: var(--space-h2-text); }
.content-section__h3 { margin-block: 1.75rem var(--space-h3-text); color: var(--color-heading-accent); }
.content-section__list {
  margin-block-end: var(--space-paragraph);
  display: grid;
  gap: 0.6rem;
  max-width: var(--text-block-width);
}
.content-section__list-item {
  position: relative;
  padding-inline-start: 1.25rem;
}
.content-section__list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
}
.content-section__list--numbered { counter-reset: godz-ol; }
.content-section__list--numbered .content-section__list-item { counter-increment: godz-ol; }
.content-section__list--numbered .content-section__list-item::before {
  content: counter(godz-ol);
  width: auto; height: auto; background: none;
  color: var(--color-heading-accent);
  font-weight: var(--fw-btn);
  top: 0;
}
/* Tables match the same column width as the surrounding text, instead of
   stretching to the full content-section width; overflow-x:auto is the one
   place on the page allowed to scroll horizontally, for genuinely wide tables. */
.content-section__table-wrap {
  overflow-x: auto;
  margin-block-end: var(--space-paragraph);
  max-width: var(--text-block-width);
}
.content-section__table { width: 100%; background: var(--color-card-bg); }
.content-section__table th, .content-section__table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-cool-accent);
  font-size: 0.9rem;
}
.content-section__table th {
  background: var(--color-bg-dark);
  color: var(--color-heading-accent);
  font-weight: var(--fw-btn);
}
/* Contextual in-text internal links (see INTERNAL_LINKS) get their own
   accent colour + underline so they stand out from surrounding body copy
   without relying on the inherited `a { color: inherit }` reset. */
.content-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: rgba(0, 156, 169, 0.45);
  text-underline-offset: 3px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.content-link:hover, .content-link:focus-visible {
  color: var(--color-heading-accent);
  text-decoration-color: currentColor;
}
.content-section__image {
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-block-end: 1.5rem;
}
.content-section__cta { margin-block-start: 1.5rem; }

@media (min-width: 1441px) {
  .content-section--with-image .content-section__image { order: 2; }
  .content-section--with-image .content-section__body { order: 1; }
}

/* Two column layout (App page, Login/Support contact) */
.two-col {
  display: grid;
  gap: var(--space-card-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .two-col { grid-template-columns: 1fr 1fr; }
}
.two-col > * {
  min-width: 0; /* grid items default to min-width: auto — prevents wide children (tables, buttons) from overflowing the track */
  width: 100%;
}

/* Contact list */
.contact-list { display: grid; gap: 0.75rem; margin-block: 1rem; }
.contact-list a { color: var(--color-heading-accent); word-break: break-word; }
.contact-list a:hover { text-decoration: underline; }

/* Scroll to top */
.scroll-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-btn-primary);
  color: var(--color-white);
  clip-path: var(--card-clip);
  z-index: var(--z-scrolltop);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.scroll-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* 404 */
.error-page {
  text-align: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 8rem);
  color: var(--color-heading-accent);
  font-weight: var(--fw-heading);
}
.error-page__text { max-width: 60ch; margin-inline: auto; margin-block: 1rem 2rem; }

/* Age badge + payments row */
.footer__age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-danger);
  color: var(--color-white);
  font-weight: var(--fw-heading);
  font-size: 0.9rem;
}

.animate-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .animate-in { opacity: 1; transform: none; transition: none; }
}

.bonus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
}
@media (min-width: 640px) {
  .bonus-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .bonus-grid { grid-template-columns: repeat(4, 1fr); }
}
.bonus-grid__item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0; /* grid items default to min-width: auto, which lets wide content push the track past 100vw */
  width: 100%;
}
.bonus-grid__image { width: 100%; height: auto; object-fit: contain; background: var(--color-bg-dark); }
.bonus-grid__title { font-size: 1.05rem; }
.bonus-grid__text { flex-grow: 1; margin-block-end: 0.25rem; }

/* Feature cards (App page: Android / iOS two-column) */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  width: 100%;
}
.feature-card__title { display: flex; align-items: center; gap: 0.6rem; }

/* Small fixed-size platform icons (App page: Android / iOS) — deliberately
   NOT sharing a class with full-width banner/content images, so an icon
   never inherits width: 100%. */
.platform-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
}