/**
 * @file
 * CC Soccer header branding overrides.
 *
 * Transforms the Olivero header from default styling to CC Soccer branded:
 * - Dark red gradient background on the branding area
 * - White text and links
 * - Appropriately sized logo
 * - Dev mode text adapted for dark background
 */

/* ============================================
   HEADER BACKGROUND
   ============================================ */

/*
 * The .site-branding element in Olivero has a gradient from
 * --color--primary-50 to --color--primary-40. With base_primary_color
 * set to #8B0000, Olivero generates these automatically.
 * We reinforce with our token colors for consistency.
 */
.site-branding {
  background-image: linear-gradient(
    160deg,
    var(--color-primary-dark) 0%,
    var(--color-primary) 78.66%
  );
}

[dir="rtl"] .site-branding {
  background-image: linear-gradient(
    -160deg,
    var(--color-primary-dark) 0%,
    var(--color-primary) 78.66%
  );
}

/* The initial bar (sticky header trigger area) */
.site-header__initial {
  background-color: var(--color-primary-dark);
}

/* ============================================
   LOGO SIZING
   ============================================ */

/*
 * Olivero constrains logo height via max-height at each breakpoint.
 * We override to give the CC Soccer shield logo proper visibility.
 */
.site-branding__logo img {
  max-height: 40px;
}

@media (min-width: 31.25rem) {
  .site-branding__logo img {
    max-height: 50px;
  }
}

@media (min-width: 43.75rem) {
  .site-branding__logo img {
    max-height: 60px;
  }
}

@media (min-width: 75rem) {
  .site-branding__logo img {
    max-height: 70px;
  }
}

/* ============================================
   TEXT COLORS ON DARK BACKGROUND
   ============================================ */

/*
 * Olivero already sets .site-branding__text to --color--white,
 * but we ensure all child elements inherit properly,
 * especially for dev mode content.
 */
.site-branding__text {
  color: var(--color-white);
}

.site-branding__text a {
  color: var(--color-white);
}

.site-branding__name a {
  color: var(--color-white);
}

/* Dev mode text - lighter for contrast on dark background */
.site-branding .site-name-dev-info {
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================
   HEADER NAV AREA (white section)
   ============================================ */

/*
 * On desktop, Olivero shows a white nav section next to the branding.
 * We keep this clean but add a subtle bottom border for definition.
 */
@media (min-width: 75rem) {
  .site-header__inner {
    border-block-end: 2px solid var(--color-primary);
  }
}

/* ============================================
   MOBILE HEADER ADJUSTMENTS
   ============================================ */

/*
 * On mobile, the branding area is smaller.
 * Ensure adequate padding for the logo.
 */
@media (max-width: 43.6875rem) {
  .site-branding {
    padding-block: var(--space-2);
  }
}

/*
 * When the Drupal admin tray is open on mobile, step the site header
 * behind the tray so admin menu items aren't hidden behind it.
 */
@media (max-width: 74.9375rem) {
  body.toolbar-tray-open .site-header {
    z-index: 1;
  }
}