/* ── Brand tokens ────────────────────────────────────────────────── */
:root {
  --brand-red:  #bc2025;
  --brand-blue: #0e75bc;
}

/* ── Base ────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
img  { height: auto; }
.container { max-width: 1100px; }

/* ── Underline accent ────────────────────────────────────────────── */
/* Overrides the theme.scss definition (width:75%, dark border) */
.underline {
  display: inline-block;
  width: auto !important;
  padding-bottom: .2rem;
  border-bottom: .25rem solid var(--theme-color, var(--brand-red)) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* ── Section rhythm ──────────────────────────────────────────────── */
main > section { margin-bottom: 3rem; }

/* ── Hero ────────────────────────────────────────────────────────── */
.homepage-feature {
  background: linear-gradient(180deg, rgba(14,117,188,.08), rgba(14,117,188,0));
  border-radius: .5rem;
}
.hero-eyebrow {
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--brand-red);  /* solid colour — no opacity, keeps contrast ≥6:1 */
}

/* ── Links & focus (accessibility) ──────────────────────────────── */
a:hover { text-decoration: underline; }
a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--theme-color, var(--brand-red));
  outline-offset: 2px;
}

/* ── Bootstrap primary button → brand red ───────────────────────── */
.btn-primary {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: #a31c21;
  border-color: #a31c21;
  color: #fff;
}
.btn-primary:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(188,32,37,.35);
}
.btn-outline-primary {
  color: var(--brand-red);
  border-color: var(--brand-red);
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}

/* ── Badge (component commented out in SCSS — provide essentials) ── */
.badge {
  display: inline-block;
  padding: .35em .65em;
  font-size: .75em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
}

/* ── Stat colours (counts section) ──────────────────────────────── */
.stat-red  { color: var(--brand-red); }
.stat-blue { color: var(--brand-blue); }

/* ── Navbar ──────────────────────────────────────────────────────── */
.navbar-brand img { height: auto; max-width: 200px; }
@media (max-width: 576px) { .navbar-brand img { max-width: 150px; } }
.navbar .social-links i { line-height: 1; }

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer a:hover { text-decoration: underline; }

/* ── Social icons ────────────────────────────────────────────────── */
.social-links a { transition: transform .15s ease, color .15s ease; }
.social-links a:hover { transform: translateY(-1px); color: var(--theme-color, var(--brand-red)) !important; }

/* ── Responsive display ──────────────────────────────────────────── */
@media (max-width: 576px) { .display-2 { font-size: 2.5rem; } }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-lg { padding-inline: 1.25rem; }

/* ── Game feature card ───────────────────────────────────────────── */
.game-feature-card {
  background: linear-gradient(135deg, rgba(14,117,188,.06) 0%, rgba(14,117,188,.02) 100%);
  border: 1px solid rgba(14,117,188,.2);
}
.cup-and-counter-feature .badge { letter-spacing: .04em; }

/* ── Kit/mailing list wrapper ────────────────────────────────────── */
.kit-signup-wrapper {
  background: rgba(14,117,188,.04);
  border: 1px solid rgba(14,117,188,.18);
}

/* ── Portfolio site name headings ────────────────────────────────── */
.portfolio-site-name { font-size: 1.6rem; }

/* ── Game dev — screenshot thumbs ───────────────────────────────── */
.screenshot-thumb {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
@media (max-width: 576px) {
  .screenshot-thumb { height: 160px; }
}

/* ── Game dev — feature tiles ────────────────────────────────────── */
.feature-tile {
  background: rgba(14,117,188,.04);
  border: 1px solid rgba(14,117,188,.15);
  transition: border-color .15s ease, background .15s ease;
}
.feature-tile:hover {
  background: rgba(14,117,188,.08);
  border-color: rgba(14,117,188,.3);
}

/* ── Game dev — Steam CTA block ──────────────────────────────────── */
.steam-cta-block {
  background: linear-gradient(135deg, rgba(14,117,188,.07) 0%, rgba(14,117,188,.02) 100%);
  border: 1px solid rgba(14,117,188,.2);
}

/* ── Contact page ────────────────────────────────────────────────── */
.clr-brand-red { color: var(--brand-red); }
.clr-facebook  { color: #1877f2; }
.clr-linkedin  { color: #0a66c2; }
.clr-twitter   { color: #000000; }
.clr-instagram { color: #e1306c; }
.clr-youtube   { color: #ff0000; }
.clr-tiktok    { color: #111111; }

.contact-email-card {
  background: rgba(188,32,37,.04);
  border: 1px solid rgba(188,32,37,.2);
  color: var(--brand-red);
  transition: background .15s ease, border-color .15s ease;
}
.contact-email-card:hover {
  background: rgba(188,32,37,.08);
  border-color: rgba(188,32,37,.35);
}

.contact-social-link {
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(0,0,0,.02);
  transition: background .15s ease, border-color .15s ease;
  color: inherit;
}
.contact-social-link:hover {
  background: rgba(14,117,188,.05);
  border-color: rgba(14,117,188,.25);
}

.contact-topics li {
  padding: .45rem 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.contact-topics li:last-child { border-bottom: none; }

/* ── Swiper screenshot slider ────────────────────────────────────── */
.screenshot-swiper { aspect-ratio: 16 / 9; }
.swiper-screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.screenshot-swiper {
  --swiper-navigation-color: #fff;
  --swiper-pagination-color: #fff;
}
.swiper-button-prev::after,
.swiper-button-next::after { font-size: 1.25rem; font-weight: 700; }
.swiper-pagination-bullet { background: #fff; opacity: .6; }
.swiper-pagination-bullet-active { opacity: 1; }

/* ── Screenshot gallery thumbnails (game dev page) ───────────────── */
.screenshot-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: zoom-in;
}
.screenshot-thumb:hover {
  transform: scale(1.02);
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.18) !important;
}