/* CSS styles for the game store. */

/* this makes every game cover be the same size regardless of the image's dimensions. 

object-fit: cover crops to fill the box without stretching. */
.game-cover {
  height: 185px;
  object-fit: cover;
  width: 100%;
}

/* cap the height of the image on a game's detail page */
.game-cover-detail {
  max-height: 420px;
  object-fit: cover;
  width: 100%;
}

/* lift game cards on hover */
.card {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* homepage hero banner: fiery gradient with a background image on top of it. If static/img/hero.jpg is not there the gradient still shows up */
.hero {
  background:
    linear-gradient(135deg, rgba(20, 6, 0, 0.78), rgba(255, 90, 31, 0.35)),
    url("../img/hero.df3b356d6df4.jpg") center / cover no-repeat,
    linear-gradient(135deg, #1a0600 0%, #7a1f00 45%, #ff5a1f 100%);
  border: 1px solid rgba(255, 90, 31, 0.35);
}

/* keep the footer at the bottom even on short pages */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}

/* Fiery theme*/
:root {
  --fire-orange: #ff5a1f;
  --fire-amber: #ff9800;
}

/* recolour Bootstrap's "primary" and links to fiery orange and darken the page */
[data-bs-theme="dark"] {
  --bs-primary: #ff5a1f;
  --bs-primary-rgb: 255, 90, 31;
  --bs-link-color: #ff8a3c;
  --bs-link-hover-color: #ffab6b;
  --bs-link-color-rgb: 255, 138, 60;
  --bs-body-bg: #0f1012;
  --bs-body-color: #e9ecef;
}

/* buttons orange */
.btn-primary {
  --bs-btn-bg: #ff5a1f;
  --bs-btn-border-color: #ff5a1f;
  --bs-btn-hover-bg: #e64a19;
  --bs-btn-hover-border-color: #e64a19;
  --bs-btn-active-bg: #d84315;
  --bs-btn-active-border-color: #d84315;
  --bs-btn-disabled-bg: #ff5a1f;
  --bs-btn-disabled-border-color: #ff5a1f;
}

/* cards slightly lighter than the page so they are visible */
[data-bs-theme="dark"] .card {
  background-color: #17191c;
  border-color: #2a2d31;
}

/* the brand name glows */
.navbar-brand {
  font-weight: 700;
  color: var(--fire-orange) !important;
}

/* card titles are light and turn to ember on hover */
.card-title-link {
  color: #f1f3f5;
}
.card-title-link:hover {
  color: var(--fire-orange);
}

/* section headings get an ember bar on the left */
.section-heading {
  border-left: 4px solid var(--fire-orange);
  padding-left: 0.6rem;
}

/* footer accent line */
footer {
  border-top: 3px solid var(--fire-orange);
}