/* ============================================================================
   Goalkeeper.com — Component utilities (1:1 ports from DESIGN_TOKENS.md §6).
   Pairs with colors_and_type.css.
   ============================================================================ */

/* ─── Layout container ──────────────────────────────────────────────────── */
.section-container,
.section-container-padded {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--container-max);
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 640px)  { .section-container, .section-container-padded { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .section-container, .section-container-padded { padding-left: 0; padding-right: 0; } }

.section-tint    { background-color: var(--section-tint); }
.section-gap     { padding-top: var(--spacing-section);    padding-bottom: var(--spacing-section); }
.section-gap-sm  { padding-top: var(--spacing-section-sm); padding-bottom: var(--spacing-section-sm); }
.section-gap-md  { padding-top: var(--spacing-section-md); padding-bottom: var(--spacing-section-md); }
.section-gap-lg  { padding-top: var(--spacing-section-lg); padding-bottom: var(--spacing-section-lg); }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn-primary,
.btn-accent-light,
.btn-outline,
.btn-outline-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-btn);
  padding: 0.75rem 1.5rem;          /* px-6 py-3 */
  font-family: var(--font-content);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  transition: all 0.2s var(--ease-bounce);
}

.btn-primary {
  background-color: var(--color-primary);
  color: #000;
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-light);
  filter: drop-shadow(var(--shadow-primary-glow));
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) {
  background-color: var(--color-primary-dark);
  transform: translateY(1px) scale(0.98);
}
.btn-primary:disabled {
  background-color: var(--color-border);
  color: var(--color-muted);
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
  transform: none;
}

.btn-accent-light {
  background-color: var(--color-accent-light);
  color: #fff;
}
.btn-accent-light:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--color-accent-light) 85%, white);
  filter: drop-shadow(var(--shadow-accent-light-glow));
  transform: translateY(-1px);
}
.btn-accent-light:active:not(:disabled) {
  background-color: color-mix(in srgb, var(--color-accent-light) 85%, black);
  transform: translateY(1px) scale(0.98);
}
.btn-accent-light:disabled {
  background-color: var(--color-border);
  color: var(--color-muted);
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
  transform: none;
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-muted);
  transition: all 0.2s var(--ease-bounce);
}
.btn-outline:hover {
  border-color: var(--color-text);
  transform: translateY(-1px);
}

.btn-outline-primary {
  background-color: var(--tint-primary-soft);          /* primary @ 8% */
  color: var(--color-text);
  border: 1px solid var(--tint-primary-strong);        /* primary @ 19% */
}
.btn-outline-primary:hover:not(:disabled) {
  box-shadow: var(--shadow-primary-glow);
  transform: translateY(-1px);
}
.btn-outline-primary:hover:not(:disabled) > span {
  transform: translateX(3px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0.25rem 0.5rem;          /* px-2 py-1 */
  font-family: var(--font-content);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s var(--ease-bounce);
}
.btn-ghost:hover { transform: translateX(0.25rem); }

/* ─── Cards ─────────────────────────────────────────────────────────────── */
.card {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  padding: 24px;                     /* p-6 */
}

.card-alt {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-alt);
  padding: 20px;                     /* p-5 */
}

/* Form card — 18px radius, gradient ::before accent line, glow on .form-card--glow */
.form-card {
  position: relative;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-form-card);          /* 18px */
  overflow: hidden;
  box-shadow: var(--shadow-form-card);
  transition: box-shadow 0.8s ease;
}
.form-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 60%, white), transparent 80%);
  opacity: 0.7;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.form-card--glow {
  box-shadow: var(--shadow-form-card-glow);
}
.form-card--glow::before { opacity: 1; }

/* ─── Pill ──────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem;          /* py-1 px-3 */
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;             /* tracking-wider */
  color: var(--color-text);
}

/* ─── Overlay gradients ─────────────────────────────────────────────────── */
.overlay-gradient-b    { background: linear-gradient(to bottom, transparent 0%, rgba(13, 17, 23, 0.8) 100%); }
.overlay-gradient-t    { background: linear-gradient(to top,    transparent 0%, rgba(13, 17, 23, 0.6) 100%); }
.overlay-gradient-full { background: rgba(13, 17, 23, 0.6); }

/* ─── Form input ────────────────────────────────────────────────────────── */
.gk-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-text);
  font-family: var(--font-content);
  font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gk-input::placeholder { color: var(--color-muted); }
.gk-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

/* ─── Featured card (top-accent pattern from previous spec, kept compatible) */
.featured-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-card);
  min-height: 360px;
  transition: box-shadow .2s ease, transform .2s ease;
  background-color: var(--color-surface-alt);
  text-decoration: none; color: inherit;
}
.featured-card:hover { transform: translateY(-2px); }
.featured-card--accent  { border: 1px solid rgba(232, 69, 124, .25); border-top: 3px solid #E8457C; }
.featured-card--accent:hover  { box-shadow: 0 8px 32px rgba(232, 69, 124, .15); }
.featured-card--primary { border: 1px solid rgba(0, 240, 123, .20);  border-top: 3px solid #00F07B; }
.featured-card--primary:hover { box-shadow: 0 8px 32px rgba(0, 240, 123, .12); }

/* ─── Hero gradients (theme-aware: dark anchor in dark, near-white in light) ── */
:root        { --hero-base: #0A0A0A; --hero-stop: #0A0A0A; }
:root.light  { --hero-base: #FFFFFF; --hero-stop: #F8FAFC; }

.hero-slide__theme-primary {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%,
      color-mix(in srgb, #00F07B 35%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, #00F07B 18%, var(--hero-base)) 0%,
      var(--hero-stop) 100%);
}
.hero-slide__theme-accent {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%,
      color-mix(in srgb, #A06CD5 40%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, #A06CD5 20%, var(--hero-base)) 0%,
      var(--hero-stop) 100%);
}
.hero-slide__theme-accent-light {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%,
      color-mix(in srgb, #E8457C 40%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, #E8457C 20%, var(--hero-base)) 0%,
      var(--hero-stop) 100%);
}
/* Light-mode tunings: lower saturation, push the wash further down */
:root.light .hero-slide__theme-primary {
  background:
    radial-gradient(ellipse 90% 80% at 50% 0%,
      color-mix(in srgb, #00A84E 28%, transparent) 0%,
      transparent 75%),
    linear-gradient(180deg,
      color-mix(in srgb, #00A84E 14%, #FFFFFF) 0%,
      #F8FAFC 100%);
}
:root.light .hero-slide__theme-accent {
  background:
    radial-gradient(ellipse 90% 80% at 50% 0%,
      color-mix(in srgb, #A06CD5 30%, transparent) 0%,
      transparent 75%),
    linear-gradient(180deg,
      color-mix(in srgb, #A06CD5 14%, #FFFFFF) 0%,
      #F8FAFC 100%);
}
:root.light .hero-slide__theme-accent-light {
  background:
    radial-gradient(ellipse 90% 80% at 50% 0%,
      color-mix(in srgb, #E8457C 30%, transparent) 0%,
      transparent 75%),
    linear-gradient(180deg,
      color-mix(in srgb, #E8457C 14%, #FFFFFF) 0%,
      #F8FAFC 100%);
}

/* ─── Marquee ────────────────────────────────────────────────────────────── */
@keyframes marquee {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 60s linear infinite;
  will-change: transform;
  display: flex;
}
.animate-marquee:hover,
.animate-marquee:focus-within,
.animate-marquee[data-hidden="true"] { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .animate-marquee { animation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ─── Skip link ─────────────────────────────────────────────────────────── */
.skip-link { position: absolute; left: -9999px; top: -9999px; }
.skip-link:focus {
  position: absolute; left: .5rem; top: .5rem; z-index: 9999;
  padding: .5rem 1rem;
  background-color: var(--color-primary);
  color: var(--color-base-dark);
  font-family: var(--font-mono);
  border-radius: var(--radius-btn);
}