/* =====================================================
   West Ham United – Global Light Theme (Laravel Safe)
   Load AFTER bootstrap / template styles
   ===================================================== */

/* ---------- CSS Variables ---------- */
:root{
  --whu-claret:#7A263A;
  --whu-sky:#1BB1E7;
  --whu-cta:#F3D459; /* CTA ONLY */
  --whu-text:#212529;
  --whu-bg:#ffffff;
  --whu-surface:#f8f9fa;
  --whu-border:#dee2e6;
}

/* ---------- Global Light Base ---------- */
html, body{
  background: var(--whu-bg) !important;
  color: var(--whu-text) !important;
}

/* Fix template hard-coded white text */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
p,span,li,label,small,
.site-wrap,.site-section{
  color: var(--whu-text) !important;
}

/* Normalize Bootstrap text utilities */
.text-white,
.text-light{
  color: var(--whu-text) !important;
}

/* ---------- Dark Sections → Light ---------- */
.bg-dark,
.site-footer,
footer,
.footer,
.ftco-footer,
.section-dark,
.site-section.bg-dark{
  background: var(--whu-surface) !important;
  color: var(--whu-text) !important;
}

/* ---------- WEST HAM NAVBAR (CLARET) ---------- */
/* Add class "whu-navbar" to <header> */
.whu-navbar{
  background-color: var(--whu-claret) !important;
}

/* Logo */
.whu-navbar .site-logo img{
  max-height: 48px;
}

/* Nav links */
.whu-navbar .nav-link{
  color: #ffffff !important;
  font-weight: 500;
  transition: color .2s ease, border-color .2s ease;
}

/* Hover */
.whu-navbar .nav-link:hover,
.whu-navbar .nav-link:focus{
  color: var(--whu-sky) !important;
}

/* Active item (accent allowed – no fills) */
.whu-navbar .active > .nav-link{
  color: var(--whu-cta) !important;
  border-bottom: 2px solid var(--whu-cta);
}

/* Mobile menu icon */
.whu-navbar .icon-menu,
.whu-navbar .site-menu-toggle{
  color: #ffffff !important;
}

/* Sticky support */
.whu-navbar.is-sticky{
  background-color: #6b2232 !important;
}

/* ---------- Cards & Components ---------- */
.card,
.feature,
.unit-9,
.unit-10,
.unit-11,
.unit-12{
  background: var(--whu-bg) !important;
  color: var(--whu-text) !important;
  border-color: var(--whu-border) !important;
}

/* ---------- Forms ---------- */
.form-control,
input,
textarea,
select{
  background: var(--whu-bg) !important;
  color: var(--whu-text) !important;
  border-color: var(--whu-border) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder{
  color: rgba(33,37,41,.6) !important;
}

/* ---------- Links ---------- */
a{
  color: var(--whu-claret);
}
a:hover{
  color: var(--whu-sky);
}

/* ---------- CTA ONLY (Yellow) ---------- */
.btn-primary,
.btn.btn-primary{
  background: var(--whu-cta) !important;
  border-color: var(--whu-cta) !important;
  color: var(--whu-claret) !important;
  font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus{
  filter: brightness(.95);
  color: var(--whu-claret) !important;
}

/* Keep other buttons on brand (NO yellow) */
.btn-outline-primary{
  border-color: var(--whu-claret) !important;
  color: var(--whu-claret) !important;
}
.btn-outline-primary:hover{
  background: var(--whu-claret) !important;
  color: #ffffff !important;
}

/* ---------- Text Selection ---------- */
::selection{
  background: var(--whu-claret);
  color:#ffffff;
}
::-moz-selection{
  background: var(--whu-claret);
  color:#ffffff;
}

.countdown-segment {
  text-align: center;
  min-width: 60px;
}
.countdown-number {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}
.countdown-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  opacity: .85;
}

//* =====================================================
   TEAM VS – force true Claret / Sky split
   Put at VERY BOTTOM of whu-theme.css
   ===================================================== */

.team-vs{
  background: transparent !important;
  border: 1px solid var(--whu-border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

/* Ensure both halves really take 50% */
.team-vs .team-1,
.team-vs .team-2{
  width: 50% !important;
  flex: 0 0 50% !important;
  background: transparent !important; /* reset template */
}

/* Apply split to the element that actually fills the half */
.team-vs .team-1 .team-details{
  background: var(--whu-claret) !important;
}
.team-vs .team-2 .team-details{
  background: var(--whu-sky) !important;
}

/* Make sure the colored panels fill height */
.team-vs .team-details{
  width: 100%;
  height: 100%;
  padding: 24px 16px;
  color: #fff !important;
}

/* Text readable */
.team-vs .team-details h3,
.team-vs .team-details ul li,
.team-vs .team-details span{
  color: #fff !important;
}

/* Logos sit nicely */
.team-vs .team-details img{
  max-height: 64px;
  width: auto;
  margin-bottom: 10px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

/* Score badge – accent */
.team-vs .score{
  background: var(--whu-cta) !important;
  color: var(--whu-claret) !important;
  font-weight: 900;
  border-radius: 999px;
  padding: 10px 18px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);

  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 5;
}