/* ==========================================================================
   Site-wide components added by the Eleventy migration. Loaded on every page
   built on layouts/base.njk, after the global stack and before page CSS.
   Every colour resolves to a token in styles.css :root.
     .hero-record   homepage hero record line
     .ss-           status strip (live fight only)
     .ig-pill       header Instagram pill
     .nav-media     Media dropdown in the primary nav
     .fol-          follow band above the footer
     .igc-          end-of-content Instagram card
   ========================================================================== */

/* ---------- Hero record line ---------- */
.hero-record{font-family:var(--font-body);font-size:var(--gr-body);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--white);margin:14px 0 0;opacity:.9;}

/* ---------- Status strip ---------- */
.ss{background:linear-gradient(123deg,var(--redbar-a) 21%,var(--redbar-b) 71%);color:var(--white);}
.ss[hidden]{display:none;}
.ss-inner{display:flex;align-items:center;justify-content:center;gap:18px;min-height:40px;padding-top:6px;padding-bottom:6px;flex-wrap:wrap;}
.ss-text{font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:0;text-transform:uppercase;color:var(--white);margin:0;}
.ss-text strong{font-weight:700;}
.ss-cta{font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--redbar-b);background:var(--white);padding:5px 14px;border-radius:999px;}
.ss-cta:hover{color:var(--text);background:var(--white);}
.ss-close{background:none;border:0;color:var(--white);font-size:22px;line-height:1;cursor:pointer;padding:4px 8px;opacity:.85;}
.ss-close:hover{opacity:1;}
@media (max-width:600px){.ss-inner{gap:10px;justify-content:space-between;}.ss-text{font-size:12px;flex:1 1 60%;}}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- Header Instagram pill (overrides the round .topbar .social a) ---------- */
.topbar .social a.ig-pill{width:auto;padding:0 12px 0 8px;gap:7px;border-radius:15px;font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1;white-space:nowrap;}
.ig-pill-cta{font-weight:700;text-transform:uppercase;padding-left:7px;border-left:1px solid rgba(214,0,0,.3);}
@media (max-width:420px){.ig-pill-handle{display:none;}.ig-pill-cta{border-left:0;padding-left:0;}}

/* ---------- Media dropdown ---------- */
.nav-media{position:relative;}
.nav-media-btn{display:inline-flex;align-items:center;gap:2px;background:none;border:0;padding:6px 0;cursor:pointer;line-height:inherit;}
.nav-media-btn.is-current{color:var(--gold);}
.nav-caret{width:18px;height:18px;fill:currentColor;transition:transform .2s ease;}
.nav-media-list{position:absolute;top:100%;left:-18px;z-index:120;min-width:170px;padding:8px 0;background:var(--white);border:1px solid #e7e7e7;box-shadow:0 12px 24px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;}
.nav-media-list a{display:block;padding:9px 18px;white-space:nowrap;}
.nav-media-list a[aria-current="page"]{color:var(--gold);}
@media (hover:hover) and (min-width:1025px){
  .nav-media:hover .nav-media-list{opacity:1;visibility:visible;transform:none;transition-delay:0s;}
  .nav-media:hover .nav-caret{transform:rotate(180deg);}
}
@media (min-width:1025px){
  .nav-media:focus-within .nav-media-list,.nav-media-btn[aria-expanded="true"] + .nav-media-list{opacity:1;visibility:visible;transform:none;transition-delay:0s;}
  .nav-media-btn[aria-expanded="true"] .nav-caret{transform:rotate(180deg);}
}
/* mobile: an expanded group, not a dropdown */
@media (max-width:1024px){
  .nav-media-btn{display:block;width:100%;text-align:left;padding:14px 0 6px;font-size:13px;color:var(--muted);cursor:default;pointer-events:none;}
  .nav-caret{display:none;}
  .nav-media-list{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 14px;min-width:0;border-bottom:1px solid #eee;}
  .nav-right .nav-media-list a{padding:10px 0;border-bottom:0;}
}

/* ---------- Follow band (every page, above the footer) ---------- */
.fol{background:linear-gradient(180deg,var(--foot-a) 0%,var(--foot-b) 100%);color:var(--white);border-bottom:3px solid var(--gold);}
.fol-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-top:64px;padding-bottom:64px;flex-wrap:wrap;}
.fol-copy{flex:1 1 440px;}
.fol-eyebrow{margin:0 0 12px;}
.fol-title{font-size:var(--gr-heading);line-height:1.02;color:var(--white);margin:0;max-width:640px;}
.fol-action{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.fol-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:14px;font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--text);background:var(--gold);padding:14px 24px;transition:background .2s ease;}
.fol-btn:hover{background:var(--white);color:var(--text);}
.fol-btn svg{width:18px;height:18px;fill:currentColor;}
@media (max-width:700px){.fol-inner{padding-top:48px;padding-bottom:48px;gap:28px;}.fol-title{font-size:var(--gr-mid);}}

/* ---------- Instagram card (fight pages, posts, albums) ---------- */
.igc{padding:0 0 64px;background:transparent;}
.igc-inner{display:flex;align-items:center;gap:22px;padding:24px 28px;background:var(--off);border:1px solid #e7e7e7;border-left:4px solid var(--gold);}
.igc-icon{display:inline-flex;flex:0 0 auto;}
.igc-icon svg{width:40px;height:40px;fill:var(--text);}
.igc-copy{flex:1 1 auto;}
.igc-line{font-family:var(--font-display);font-size:var(--gr-sub);font-weight:700;line-height:1.1;text-transform:uppercase;color:var(--text);margin:0;}
.igc-handle{font-family:var(--font-body);font-size:var(--gr-body);font-weight:500;color:var(--muted);margin:4px 0 0;}
.igc-btn{display:inline-block;font-family:var(--font-body);font-size:14px;font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--white);background:var(--text);padding:13px 26px;transition:background .2s ease,color .2s ease;}
.igc-btn:hover{background:var(--gold);color:var(--text);}
@media (max-width:600px){.igc-inner{flex-wrap:wrap;padding:20px;}.igc-btn{width:100%;text-align:center;}}