/* ==========================================================================
   BCCS Wiki — brand palette, landing page hero + tweaks
   Palette derived from the BCCS lion logo: crimson #de0030, black, white.
   ========================================================================== */

:root {
  --bccs-red: #de0030;        /* logo mane crimson */
  --bccs-red-light: #ff3a59;
  --bccs-red-dark: #a2092a;   /* mane shadow */
  --bccs-black: #0b0b0d;
}

/* Material custom palette (theme.palette primary/accent: custom).
   Applied across both light and dark schemes. */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--bccs-red);
  --md-primary-fg-color--light: var(--bccs-red-light);
  --md-primary-fg-color--dark: var(--bccs-red-dark);
  --md-primary-bg-color: #fff;            /* header text/icons on red */
  --md-primary-bg-color--light: rgba(255, 255, 255, .7);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--bccs-red-light);
  --md-accent-fg-color--transparent: rgba(222, 0, 48, .1);
}

/* Use the deeper mane red for the header + tab bar only; the brighter
   --bccs-red stays in play for links, buttons and accents. */
.md-header,
.md-tabs {
  background-color: var(--bccs-red-dark);
}

/* Announcement banner — black with crimson accents (see overrides/main.html). */
.md-banner {
  background-color: var(--bccs-black);
  color: #fff;
}

.bccs-announce {
  color: #fff;
}

.bccs-announce strong,
.bccs-announce:hover {
  color: var(--bccs-red-light);
}

.bccs-hero {
  position: relative;
  width: 100%;
  padding: 5rem 1rem 4.5rem;
  text-align: center;
  color: #fff;
  overflow: hidden;
  /* Brand gradient: black base with twin crimson glows, echoing the logo. */
  background:
    radial-gradient(1100px 480px at 78% -12%, rgba(222, 0, 48, .42), transparent 60%),
    radial-gradient(900px 480px at 8% 115%,  rgba(162, 9, 42, .50), transparent 55%),
    linear-gradient(135deg, #0b0b0d 0%, #1a0a0f 45%, #2a0b15 100%);
}

/* Optional photographic background.
   Drop an image at docs/img/hero.jpg and uncomment this block. */
/*
.bccs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/hero.jpg") center / cover no-repeat;
  opacity: .22;
  mix-blend-mode: luminosity;
}
*/

/* Subtle diagonal "speed" sheen across the hero. */
.bccs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 58%, rgba(255, 255, 255, .06) 58% 62%, transparent 62%);
  pointer-events: none;
}

.bccs-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin: 0 auto;
}

.bccs-hero__logo {
  display: block;
  width: clamp(120px, 22vw, 170px);
  height: auto;
  margin: 0 auto 1.1rem;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .5));
}

.bccs-hero__title {
  margin: 0;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.bccs-hero__tagline {
  margin: .6rem 0 0;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
}

.bccs-hero__subtitle {
  margin: .9rem auto 0;
  max-width: 38rem;
  font-size: .98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .75);
}

.bccs-hero__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}

/* The hero sits on a dark background, so give the default (outline) buttons
   a light treatment for contrast. md-button--primary keeps the accent fill. */
.bccs-hero .md-button {
  border-width: 2px;
  color: #fff;
  border-color: rgba(255, 255, 255, .65);
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}

.bccs-hero .md-button:hover {
  background-color: #fff;
  color: var(--bccs-red-dark);
  border-color: #fff;
  transform: translateY(-2px);
}

.bccs-hero .md-button--primary {
  border-color: transparent;
}

.bccs-hero .md-button--primary:hover {
  transform: translateY(-2px);
  color: #fff;
  border-color: transparent;
  filter: brightness(1.08);
}

/* Discord brand accent on hover. */
.bccs-hero .bccs-btn--discord:hover {
  background-color: #5865f2;
  border-color: #5865f2;
  color: #fff;
}

/* Slightly lift the grid cards below the hero for a more "landing" feel. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > :is(ul, ol) > li {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > :is(ul, ol) > li:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
}