/**
 * Site overrides — migrated out of the WordPress Customizer "Additional CSS"
 * so they are version-controlled and deploy with the theme. Loaded on every
 * page (incl. the homepage). Heavy use of !important is inherited from the
 * original Customizer rules; preserved verbatim to keep behaviour identical.
 */

/* Latin CT display face — declared globally here (overrides.css loads on every
   page) so headlines render in the brand face site-wide, not just on the
   homepage. The .otf ships in /fonts/. */
@font-face {
  font-family: "Latin CT";
  src: url("../../fonts/LatinCT-NotWide.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Same physical face under the name the page bundles ask for, declared globally
   with the CORRECT path so it loads on every page (the per-bundle @font-face in
   assets/css/about.css used a broken ../fonts/ path and fell back to Impact). */
@font-face {
  font-family: "Latin CT Not Wide";
  src: url("../../fonts/LatinCT-NotWide.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Header / nav / logo layout is owned by homepage.css (front page) and
   site-header.css (every other page). The old Customizer logo-protrusion block
   that used to live here set fixed nav heights + logo sizes that fought those
   rules on mobile, so it has been removed. */
.marquee__item .flag-img { height: 15px; }
/* WMB — clean flag chip (no box, no border, subtle shadow) */
.band__flag {
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  height: auto !important;
}
.band__flag img,
.band__flag .flag-img {
  border: 0 !important;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.55));
}
/* WMB — small gap between band cards */
.lineup__grid {
  gap: 12px !important;
  border-top: 0 !important;
  border-left: 0 !important;
}
.band {
  border: 1px solid var(--border) !important;
}
.band__flag {
  top: auto !important;
  bottom: 14px !important;
}
.cl-tile__flag-wrap {
  width: 100% !important;
  height: 115px !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.cl-tile__flag-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
.band__photo {
  position: relative !important;
  overflow: hidden !important;
}

.band__flag {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  width: 42px !important;
  height: 28px !important;
  z-index: 20 !important;
  background: transparent !important;
}

.band__flag .flag-img {
  width: 42px !important;
  height: 28px !important;
  object-fit: cover !important;
  display: block !important;
}
.band__photo {
  position: relative !important;
  overflow: hidden !important;
}

.band__flag {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  top: auto !important;
  left: auto !important;

  width: 42px !important;
  height: 28px !important;

  z-index: 20 !important;
  background: transparent !important;
}

.band__flag .flag-img {
  width: 42px !important;
  height: 28px !important;
  object-fit: cover !important;
  display: block !important;
}
.hof-tile__photo {
  position: relative !important;
  overflow: hidden !important;
}

.hof-tile__flag {
  position: absolute !important;

  bottom: 10px !important;
  right: 10px !important;

  top: auto !important;
  left: auto !important;

  width: 42px !important;
  height: 28px !important;

  z-index: 20 !important;

  background: transparent !important;
}

.hof-tile__flag .flag-img {
  width: 42px !important;
  height: 28px !important;

  object-fit: cover !important;

  display: block !important;
}
.band__flag,
.hof-tile__flag {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;

  width: 42px !important;
  height: 28px !important;

  z-index: 20 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.hof-country-group__flag {
  width: 42px !important;
  height: 28px !important;

  flex: 0 0 42px !important;
  overflow: hidden !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hof-country-group__flag .flag-img {
  width: 42px !important;
  height: 28px !important;

  object-fit: cover !important;
  display: block !important;
}
/* ---- Unified hero / page title ----------------------------------------------
   Every page's hero title renders at the SAME size in the SAME brand face
   (Latin CT Not Wide). Centralised here because overrides.css loads on every
   page, so the per-page bundles can't drift. !important matches this file. */
.hero__title,
.l-hero__title,
.ap-hero__title,
.lp-hdr__title,
.cl-hero__title,
.r-hero__title,
.mhof-hero__title,
.listing-hero__title,
section h1 {
  font-family: "Latin CT Not Wide", "Latin CT", "Indubitably", "Oswald", "Impact", sans-serif !important;
  /* Scales smoothly from ~34px on a phone to 90px on desktop (reaches the 90 cap
     by ~1000px, so desktop is unchanged). The old 48px floor was bigger than the
     mobile design and let long words (e.g. "WORLDWIDE.") overflow on narrow
     phones, which read as the page "shaking" sideways. */
  font-size: clamp(34px, 9vw, 90px) !important;
  line-height: 0.88 !important;
  letter-spacing: -1.5px !important;
  overflow-wrap: break-word !important;
}
.menu-item a {
  font-size: 17px !important;
}
/* COUNTRY NAME */
.cl-tile__body h3,
.cl-tile__body [class*="title"] {
  font-size: 14px !important;
  line-height: 0.9 !important;
}

/* APPLICATIONS OPEN TEXT */
.cl-tile__meta,
.cl-tile__status,
.cl-tile__body small,
.cl-tile__body p {
  font-size: 10px !important;
  letter-spacing: 1px !important;
}
.cl-tile__code {
  display: none !important;
}
.promo-tile__photo {
  position: relative !important;
  overflow: hidden !important;
}

.promo-tile__photo > .flag-chip,
.promo-tile__photo span.flag-chip {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  top: auto !important;
  left: auto !important;

  display: flex !important;
  gap: 4px !important;
  z-index: 50 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.promo-tile__photo > .flag-chip .flag-img,
.promo-tile__photo span.flag-chip img {
  width: 28px !important;
  height: 18px !important;
  object-fit: cover !important;
  display: block !important;
}
.promo-tile__photo .flag-chip {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;

  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.promo-tile__photo .flag-chip img,
.promo-tile__photo .flag-chip .flag-img {
  width: 28px !important;
  height: 18px !important;
  display: block !important;
  object-fit: cover !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ---- Page content alignment -------------------------------------------------
   Several page bundles ship their content wrappers as `max-width:1440;
   margin:auto` with NO horizontal padding, so content sat flush at the 1440
   edge — 40px to the left of the homepage, whose .wrap insets content by the
   gutter. Inset these wrappers by the same gutter so every page's content edge
   lines up with the homepage. (Pages whose gutter lives on a wrapper or section
   — home, promoters, Hall of Fame — already align and are not listed.) */
.ap-hero, .cl-hero__inner, .cl-section__inner,
.cd-hero__inner, .cd-back__inner, .cd-section__inner,
.r-hero__inner, .r-layout, .r-footer__inner,
.ap-sec__inner, .ap-closing__inner, .ap-partner__inner, .ap-cta,
.wmb-section__inner {
  /* Explicit gutter (NOT var(--gutter) — the page bundles redefine it to their
     own values, which is exactly what threw the edges out of alignment). Matches
     the homepage scale: 40 / 32 / 24 / 18. */
  padding-left: 40px !important;
  padding-right: 40px !important;
}
@media (max-width: 1279px) {
  .ap-hero, .cl-hero__inner, .cl-section__inner,
  .cd-hero__inner, .cd-back__inner, .cd-section__inner,
  .r-hero__inner, .r-layout, .r-footer__inner,
  .ap-sec__inner, .ap-closing__inner, .ap-partner__inner, .ap-cta,
  .wmb-section__inner { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (max-width: 1023px) {
  .ap-hero, .cl-hero__inner, .cl-section__inner,
  .cd-hero__inner, .cd-back__inner, .cd-section__inner,
  .r-hero__inner, .r-layout, .r-footer__inner,
  .ap-sec__inner, .ap-closing__inner, .ap-partner__inner, .ap-cta,
  .wmb-section__inner { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 767px) {
  .ap-hero, .cl-hero__inner, .cl-section__inner,
  .cd-hero__inner, .cd-back__inner, .cd-section__inner,
  .r-hero__inner, .r-layout, .r-footer__inner,
  .ap-sec__inner, .ap-closing__inner, .ap-partner__inner, .ap-cta,
  .wmb-section__inner { padding-left: 18px !important; padding-right: 18px !important; }
}
/* The About hero ships full-bleed with no inner wrapper (unlike every other
   page's hero), so it also needs the 1440 cap + centering to line up. */
.ap-hero {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- Standard mobile / tablet content bleed ---------------------------------
   The page bundles used inconsistent small-screen gutters — the override pages
   sat at 18px, but Promoters (--gx) and Hall of Fame (--m-pad) were 20px, and
   the .wrap pages drifted to 24px in the 641–767 band. Normalise every page to
   the homepage scale (18px phones, 24px tablets) so the left/right bleed is
   identical across the whole site on mobile. */
@media (max-width: 1023px) {
  .promo-page { --gx: 24px !important; }
  .mhof { --m-pad: 24px !important; }
}
@media (max-width: 767px) {
  :root { --gutter: 18px; }
  .promo-page { --gx: 18px !important; }
  .mhof { --m-pad: 18px !important; }
}