/* ========================================================================
   MELILLA TITANS — theme-jersey.css
   Cinematic Social Studio
   ------------------------------------------------------------------------
   Palette override matching the 2026/27 kit: navy + champagne gold + white
   paper. Replaces the electric-yellow eSports feel with a classic football
   club aesthetic.

   Load AFTER main.css. Everything using var(--yellow), var(--cream), etc.
   inherits the new palette automatically. Specific over-rides at the end
   handle the footer (was full-yellow, now navy-with-gold) and the paper
   surfaces (now with a subtle vertical pinstripe echoing the jersey fabric).
   ======================================================================== */

:root {
  /* --- Primary tokens --- */
  --navy:            #0A1A3E;     /* Slightly warmer navy matching kit collar */
  --navy-deep:       #060F2A;     /* Deeper accent for footer */
  --gold:            #D4B76A;     /* Champagne gold — kit trim */
  --gold-bright:     #E4CB7F;     /* Brighter gold for hovers */
  --gold-deep:       #A0894C;     /* Aged gold for depth */
  --paper:           #F5F1E8;     /* Warm off-white — poster background */
  --paper-deep:      #EBE4D3;     /* Depth paper */
  --white:           #FFFFFF;

  /* --- Text colors on each surface --- */
  --on-navy:         #C5D0E8;
  --on-navy-mute:    #7C8CB0;
  --on-paper:        rgba(10, 26, 62, .82);
  --on-paper-mute:   rgba(10, 26, 62, .55);

  /* --- Hairlines --- */
  --hair-on-navy:         rgba(255,255,255,.10);
  --hair-on-navy-strong:  rgba(255,255,255,.20);
  --hair-on-paper:        rgba(10, 26, 62, .12);
  --hair-on-paper-strong: rgba(10, 26, 62, .24);

  /* --- Backward-compat aliases so existing CSS continues to work --- */
  --yellow:                 var(--gold);
  --cream:                  var(--paper);
  --on-cream:               var(--on-paper);
  --on-cream-mute:          var(--on-paper-mute);
  --hair-on-cream:          var(--hair-on-paper);
  --hair-on-cream-strong:   var(--hair-on-paper-strong);
  --muted:                  var(--on-navy-mute);
  --hair:                   var(--hair-on-navy);
}

/* ========================================================================
   Paper surfaces get a subtle vertical pinstripe — echoing the jersey
   fabric weave visible in the reference photo. 3% opacity, 40px pitch.
   ======================================================================== */

.hero,
.origen,
.feat.flip,
.staff {
  background-color: var(--paper) !important;
  background-image:
    linear-gradient(
      to right,
      transparent 0,
      transparent 39px,
      rgba(10, 26, 62, .035) 39px,
      rgba(10, 26, 62, .035) 40px
    ) !important;
  background-size: 40px 100% !important;
  background-repeat: repeat !important;
}

/* ========================================================================
   FOOTER — reworked from full-yellow surface to deep navy with gold
   accents, echoing the classic sports-club footer.
   ======================================================================== */

.foot {
  background: var(--navy-deep) !important;
  color: var(--on-navy) !important;
  border-top: 3px solid var(--gold) !important;
}
.foot .m { color: var(--gold) !important; }
.foot .big { color: var(--white) !important; }
.foot .big em { color: var(--gold) !important; }
.foot .big em::after {
  background: var(--gold) !important;
  opacity: 0.4 !important;
}
.foot .row-b {
  color: var(--on-navy-mute) !important;
  border-top: 1px solid var(--hair-on-navy) !important;
}
.foot .row-b span,
.foot .row-b .lks a {
  color: var(--on-navy) !important;
}
.foot .row-b .lks a:hover { color: var(--gold) !important; }
.foot-credit { color: var(--on-navy-mute) !important; }
.foot-credit a { color: var(--gold) !important; }
.foot-credit a:hover { border-bottom-color: var(--gold) !important; }

/* ========================================================================
   TOP BAR — slight refinement so the tickers and CTA read gold-on-navy
   like the sponsor labels on the jersey.
   ======================================================================== */

.bar {
  background: var(--navy-deep) !important;
  border-bottom: 1px solid var(--hair-on-navy) !important;
}
.bar-tickers .live {
  color: var(--gold) !important;
}
.bar-cta {
  background: var(--gold) !important;
  color: var(--navy-deep) !important;
}
.bar-cta:hover { background: var(--gold-bright) !important; }

/* ========================================================================
   HERO — knockout block picks up the paper background it lives on
   ======================================================================== */

.hero h1 .y {
  color: var(--paper) !important;
}
.hero h1 .y::after {
  background: var(--navy) !important;
}

/* ========================================================================
   Radar — the SMIL-animated pings inside the SVG still use hardcoded
   colors (attribute-based), so they're patched in the section markup.
   Non-animated radar elements pick up the palette via variables.
   ======================================================================== */

/* ========================================================================
   Buttons — gold surface for primary CTAs, matches the kit trim.
   ======================================================================== */

.btn-y, .btn-primary-on-y, .btn-primary-on-n {
  background: var(--gold) !important;
  color: var(--navy-deep) !important;
}
.btn-y:hover, .btn-primary-on-y:hover, .btn-primary-on-n:hover {
  background: var(--gold-bright) !important;
  color: var(--navy-deep) !important;
}

/* Outline buttons on paper surfaces get gold border on hover */
.btn-o:hover {
  border-color: var(--gold) !important;
  color: var(--gold-deep) !important;
}

/* ========================================================================
   Stat strip numerals — already use gold fill + navy stroke via
   var(--yellow), which now IS gold. Result: classic jersey number look.
   Just tighten the stroke slightly to match the sharper trim.
   ======================================================================== */

.stat .v em {
  -webkit-text-stroke: 2px var(--navy) !important;
}

/* ========================================================================
   STATS BAR — labels and subtext colors.
   The stats bar sits on a navy surface, but the base main.css colors for
   .stat .k / .v / .x were tuned for a paper background (dark navy on
   light). Result of naive theme swap: text was invisible (navy on navy).
   Only the .v em survived because it has the outlined jersey-number
   treatment. Restore visibility with light colors that fit the palette.
   ======================================================================== */

.stats {
  background: var(--navy) !important;
}
.stat .k {
  color: var(--gold) !important;        /* kicker labels: DIVISIONES, etc. */
}
.stat .v {
  color: var(--white) !important;       /* non-em portion of value: "Nacional", "Melilla" */
}
.stat .x {
  color: var(--on-navy) !important;     /* subtext: "Torneos internacionales", etc. */
}