/* Open pill (bottom-right on hero video) */
.openPill{
  position:absolute;
  right:18px;
  bottom:18px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(9,18,32,.55);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  color:#e8f7ef;
  font-weight:800;
  font-size:14px;
  letter-spacing:.2px;
  z-index:5;
}
.openPill .dot{
  width:10px;height:10px;border-radius:50%;
  background:#28e07a;
  box-shadow:0 0 0 6px rgba(40,224,122,.14), 0 0 24px rgba(40,224,122,.55);
  animation:cowboysPulseDot 1.35s ease-in-out infinite;
}

@keyframes cowboysPulseDot{
  0%   { transform: scale(.92); filter: brightness(.95); box-shadow:0 0 0 5px rgba(40,224,122,.10), 0 0 14px rgba(40,224,122,.35); }
  50%  { transform: scale(1.08); filter: brightness(1.15); box-shadow:0 0 0 9px rgba(40,224,122,.18), 0 0 28px rgba(40,224,122,.70); }
  100% { transform: scale(.92); filter: brightness(.95); box-shadow:0 0 0 5px rgba(40,224,122,.10), 0 0 14px rgba(40,224,122,.35); }
}

/* If video can't autoplay, we add a subtle hint */
.videoNeedsTap .openPill{ border-color: rgba(40,224,122,.35); }
.videoNeedsTap .openPill::after{
  content:"tap";
  margin-left:8px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  color: rgba(255,255,255,.85);
  opacity:.75;
}
.videoShell{position:relative}



/* --- Footer social icon clamp (prevents huge PNGs rendering full-size) --- */
.siteFooter .socialIcons img,
.siteFooter .footerSocial img,
footer .socialIcons img,
footer .footerSocial img{
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  display: block;
}

.siteFooter .socialIcons a,
.siteFooter .footerSocial a,
footer .socialIcons a,
footer .footerSocial a{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.siteFooter .socialIcons{ gap: 10px !important; }

/* Footer logo clamp (covers Cowboys_Logo.png and any oversized logo variants) */
.siteFooter img.footerLogo,
.siteFooter .footerLogo,
.siteFooter .footerLogo img,
footer img.footerLogo{
  max-width: 220px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ---------------------------------------------------------------------
   Commercial modal
   ---------------------------------------------------------------------
   A lightweight modal used to display the commercial video. The modal is
   hidden by default (via the hidden attribute in HTML) and becomes
   visible when the "Watch Commercial" button is clicked. The overlay
   covers the entire viewport with a semi‑transparent dark backdrop,
   while the modal content centers the video on the screen. You can
   adjust max‑width/height to change the modal size. The close button
   sits in the top‑right corner.
*/