/**
 * FILE: public/styles/clubs/calgary-wild.css
 *
 * PremiumSportProfiles - Calgary Wild FC public club skin.
 */

.clubPublicHeader,
.clubRecruitingPage,
.clubTeamsDirectoryPage,
.clubTeamPage,
.clubContextProfilePage--calgary-wild {
  --wild-heading-font:
    var(--font-club-space-grotesk), "Space Grotesk", "Raleway", Arial,
    sans-serif;
  --wild-body-font: var(--font-club-raleway), "Raleway", Arial, sans-serif;

  color: var(--club-public-black, #12001c);
  font-family: var(--wild-body-font);
}

.clubPublicHeader {
  --club-sales-module-accent: var(--club-public-white, #ffffff);
  --club-sales-module-accent-hover: var(--club-public-secondary, #ff0028);
  --club-sales-module-active-line: var(
    --club-public-menu-underline,
    var(--club-public-secondary, #ff0028)
  );
  --club-public-mobile-menu-bg: var(--club-public-primary, #300047);
  --club-public-mobile-menu-text: var(--club-public-white, #ffffff);
  --wild-site-max-width: 1440px;
  --wild-site-gutter: clamp(18px, 4vw, 64px);
  --wild-header-logo-height: 84px;
  --wild-header-vertical-padding: clamp(18px, 2.6vw, 34px);
  --wild-mobile-header-logo-height: 58px;

  font-family: var(--wild-heading-font);
}

.clubPublicHeader--brand-bar .clubPublicAnnouncement {
  display: none;
}

.clubPublicHeader--brand-bar .clubPublicNavShell {
  background: var(--club-public-nav-bg, #300047);
}

.clubPublicHeader--brand-bar .clubPublicNavInner {
  column-gap: clamp(1rem, 3vw, 3rem);
  margin: 0 auto;
  max-width: var(--wild-site-max-width);
  min-height: calc(
    var(--wild-header-logo-height) + (var(--wild-header-vertical-padding) * 2)
  );
  padding: var(--wild-header-vertical-padding) var(--wild-site-gutter);
  width: 100%;
}

.clubPublicHeader--brand-bar .clubPublicLogoLink img {
  height: var(--wild-header-logo-height);
  width: auto;
}

.clubPublicHeader--brand-bar .clubPublicDesktopNav a,
.clubPublicHeader--brand-bar .clubPublicMobileToggle,
.clubPublicHeader--brand-bar .clubPublicMobilePanel > a,
.clubPublicHeader--brand-bar .clubPublicMobilePageTop > a,
.clubPublicHeader--brand-bar .clubPublicMobileRecruitingTop > a {
  color: var(--club-public-menu-text, #ffffff);
  font-family: var(--wild-heading-font);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.clubPublicHeader--brand-bar .clubPublicDesktopNav a:hover,
.clubPublicHeader--brand-bar .clubPublicDesktopNav a.is-active {
  color: var(--club-public-secondary, #ff0028);
}

.clubPublicHeader--brand-bar .clubPublicDesktopNav a:hover::after,
.clubPublicHeader--brand-bar .clubPublicDesktopNav a.is-active::after,
.clubPublicHeader--brand-bar.clubPublicHeader--psp-module-nav
  .clubPublicDesktopNav
  .is-psp-module.is-active::after {
  background: var(
    --club-public-menu-underline,
    var(--club-public-secondary, #ff0028)
  );
  height: 2px;
}

.clubPublicHeader--brand-bar .clubPublicNavDropdown,
.clubPublicHeader--brand-bar .clubPublicMegaPanel--site-dropdown {
  background: var(--club-public-dropdown-surface, rgba(48, 0, 71, 0.98));
  border: 1px solid rgba(255, 0, 40, 0.42);
  border-radius: 4px;
  box-shadow: 0 18px 38px rgba(18, 0, 28, 0.3);
  color: var(--club-public-dropdown-text, var(--club-public-white, #ffffff));
}

.clubPublicHeader--brand-bar .clubPublicDesktopNav .clubPublicNavDropdown a,
.clubPublicHeader--brand-bar
  .clubPublicMegaPanel--site-dropdown
  .clubPublicMegaTeamLink {
  color: var(--club-public-dropdown-text, var(--club-public-white, #ffffff));
  font-family: var(--wild-heading-font);
  font-weight: 800;
  letter-spacing: 0;
}

.clubPublicHeader--brand-bar
  .clubPublicDesktopNav
  .clubPublicNavDropdown
  a:hover,
.clubPublicHeader--brand-bar
  .clubPublicMegaPanel--site-dropdown
  .clubPublicMegaTeamLink:hover {
  background: rgba(255, 0, 40, 0.18);
  color: var(--club-public-secondary, #ff0028);
}

.clubPublicHeader--brand-bar
  .clubPublicMegaPanel--site-dropdown
  .clubPublicMegaFooter {
  display: none;
}

.clubRecruitingPage h1,
.clubRecruitingPage h2,
.clubRecruitingPage h3,
.clubTeamsDirectoryPage h1,
.clubTeamsDirectoryPage h2,
.clubTeamsDirectoryPage h3,
.clubTeamPage h1,
.clubTeamPage h2,
.clubTeamPage h3 {
  font-family: var(--wild-heading-font);
  letter-spacing: 0;
}

.clubTeamsDirectoryPage,
.clubTeamPage,
.clubContextProfilePage--calgary-wild {
  background: linear-gradient(180deg, #ffffff 0%, #fbf7ff 58%, #ffe8ed 100%);
}

.clubTeamsDirectoryList,
.clubTeamPhotoCard,
.clubTeamPhotoPlaceholder,
.clubTeamRoster,
.clubTeamSponsorSlot,
.clubContextProfilePage--calgary-wild .clubContextProfileCard,
.clubContextProfilePage--calgary-wild .clubContextProfileMetrics {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(48, 0, 71, 0.12);
  border-radius: 6px;
  box-shadow:
    0 16px 38px rgba(18, 0, 28, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.clubTeamRosterNumber {
  background: var(--club-public-primary, #300047);
  color: var(--club-public-white, #ffffff);
  font-family: var(--wild-heading-font);
  font-weight: 800;
}

.clubTeamRosterPlayerLink:hover,
.clubTeamSimpleBreadcrumbs a:hover,
.clubTeamRosterCta,
.clubContextProfilePage--calgary-wild .clubContextListRow > span {
  color: var(--club-public-secondary, #ff0028);
}

.clubContextProfilePage--calgary-wild {
  --club-context-primary: var(--club-public-primary, #300047);
  --club-context-secondary: var(--club-public-secondary, #ff0028);
  --club-context-text: var(--club-public-black, #12001c);
  --club-context-surface: var(--club-public-white, #ffffff);
  --club-context-hero-text: var(--club-public-white, #ffffff);
  --club-context-page-max: var(--an-page-max);
  --club-context-page-background: #fbf7ff;
  --club-context-hero-background: var(--club-context-primary);
  --club-context-hero-avatar-border: 0;
  --club-context-breadcrumb-color: rgba(255, 255, 255, 0.76);
  --club-context-breadcrumb-hover-color: var(--club-context-secondary);
  --club-context-module-accent: var(--club-context-secondary);
  --an-primary: var(--club-context-primary);
  --an-primary-contrast: var(--club-context-hero-text);
  --an-module-accent: var(--club-context-module-accent);
  --an-accent: var(--club-context-secondary);
}

@media (max-width: 767px) {
  .clubPublicHeader--brand-bar .clubPublicNavInner {
    min-height: calc(
      var(--wild-mobile-header-logo-height) +
        (var(--wild-header-vertical-padding) * 2)
    );
  }

  .clubPublicHeader--brand-bar .clubPublicLogoLink img {
    height: var(--wild-mobile-header-logo-height);
  }
}