/* =========================================================
   Power Digits - shared styles for every page
   Change the colors and fonts here and every page follows.
   ========================================================= */

@font-face {
  font-family: "Quantify";
  src: url("../fonts/Quantify.ttf") format("truetype");
  font-display: swap;
}

:root {
  --pd-dark: #2b2b2b;        /* header bar */
  --pd-gold: #bdad7c;        /* brand gold */
  --pd-gold-text: #d6c48f;   /* gold numbers in the table */
  --pd-row: #2e2e2e;         /* stat row background */
  --pd-row-alt: #3a3a3a;     /* alternating stat row */
  --pd-white: #ffffff;
  --pd-good: #5fd68a;        /* top-20 stat (green) */
  --pd-bad: #ff6b6b;         /* bottom-20 stat (red) */
  --pd-display-font: "Quantify", var(--pd-font);

  /* Metallic gold: light and dark bands around the brand gold */
  --pd-gold-metal: linear-gradient(
    90deg,
    #7a6a3f 0%, #e9dcae 18%, #bdad7c 38%, #8a7a4c 52%,
    #f1e6bf 72%, #bdad7c 88%, #7a6a3f 100%
  );
  --pd-gold-metal-text: linear-gradient(
    180deg,
    #f4ead0 0%, #d9c98f 42%, #a8955f 58%, #e3d4a3 100%
  );

  /* Page background: base color + geometric pattern image */
  --pd-page-bg: #1b1b1b;
  --pd-page-pattern: url("../img/bg-geo.svg");

  --pd-font: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--pd-page-bg);
  font-family: var(--pd-font);
  color: var(--pd-white);
}

/* The pattern stays fixed behind the page while you scroll */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--pd-page-pattern) center / cover no-repeat;
}

/* Metallic gold text (menu, logo text, table headers) */
.metal-text,
.site-nav a,
.site-logo-text {
  background: var(--pd-gold-metal-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- Global header ---------- */

.site-header {
  background: var(--pd-dark);
  /* metallic gold line between the header and the page */
  border-bottom: 3px solid;
  border-image: var(--pd-gold-metal) 1;
}

.site-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-logo img {
  height: 48px;
  display: block;
}

.site-logo-text {
  font-weight: 700;
  font-size: 1.4rem;
  text-decoration: none;
  letter-spacing: 0.05em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-nav a {
  position: relative;
  text-decoration: none;
  font-size: 0.9rem;
  padding-bottom: 4px;
}

.site-nav a:hover {
  background: none;
  color: var(--pd-white);
  -webkit-text-fill-color: var(--pd-white);
}

/* small white line under the page you are on */
.site-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--pd-white);
}

/* ---------- Mobile menu (hamburger) ---------- */

.menu-toggle {
  display: none;            /* shown only on small screens */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: none;
  background: none;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--pd-gold-metal);
}

@media (max-width: 699px) {
  .site-header-inner {
    padding: 0.9rem 1rem;
  }

  .site-logo img {
    height: 40px;
  }

  .menu-toggle {
    display: flex;
  }

  /* links drop down as a list under the logo row when the menu is open */
  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 0.5rem;
  }

  .site-header.menu-open .site-nav {
    display: flex;
  }

  .site-nav a {
    font-size: 1rem;
    padding: 0.6rem 0;
  }

  .site-nav a.active::after {
    bottom: 0.35rem;
    right: auto;
    width: 2.5rem;
  }
}

/* ---------- Page content area ---------- */

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

/* Page heading + intro line (used on the rankings page) */
.page-title {
  margin: 0 0 0.4rem;
  font-family: var(--pd-display-font);
  font-size: 1.9rem;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.9));
}

.page-intro {
  max-width: 46rem;
  margin: 0 auto 1.25rem;
  color: #d9d3c3;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}

/* No bold text anywhere on the site */
*,
*::before,
*::after {
  font-weight: 400 !important;
}