/* ----------------------------------------------------------------

Cool Blue Theme

April 2025 - upgrade to website Fixtures & Results with club logo's

- Brendan Doyle

---------------------------------------------------------------- */


/* League-table header */
.league-table__table thead th {
  background: #2a3d54;  /* deep slate */
  color:      #e1efff;  /* pale ice */
  border-bottom: 3px solid #1f2a38;
}

/* Date header */
.fixtures__header--date {
  background: #2a3d54;
  color:      #e1efff;
}

/* Round header */
.fixtures__header--round {
  background: #f0f4f8;
  color:      #2a3d54;
}

/* Fixture stripes */
.fixtures__row--odd .fixtures__item,
.fixtures__row--odd .fixtures__details {
  background: #fafcff;
}
.fixtures__row--even .fixtures__item,
.fixtures__row--even .fixtures__details {
  background: #eef4fc;
}

/* “More…” banner */
.comp-headerXX {
  background: #d7e3f2;
  color:      #1f2a38;
}

	/* force padding on every time badge, odd or even */
.fixtures__time {
  padding: 0px 3px 0px 3px !important;
}





/* ----------------------------------------------------------------



=== BELOW SECTION ADDED SEPTEMBER 2025 BEFORE RELEASE on LIVE ===


---------------------------------------------------------------- */


/* === MOBILE: centre teams on either side; crest above name; scores centred === */
@media (max-width: 768px){

  /* 3-column grid: [home] [scores/time] [away] */
  .fixtures__item{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;             /* vertical centring across all three cells */
    column-gap: .6rem;
    row-gap: .25rem;
    padding: .55em .9em !important;  /* remove desktop inset padding */
  }

  /* team blocks: centre in their column */
  .fixtures__team{
    display: flex !important;
    flex-direction: column !important;   /* crest on top, name below */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  /* centre BOTH sides – override older start/end rules */
  .fixtures__team--home,
  .fixtures__team--away{
    justify-self: center !important;
  }

  /* kill desktop absolute positioning; stack crest above name */
  .fixtures__logo,
  .fixtures__logo--home,
  .fixtures__logo--away{
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    transform: none !important;
    display: block !important;
    width: 30px !important;              /* 28–34px is fine */
    height: auto !important;
    margin: 0 0 .28rem 0 !important;     /* gap above name */
    order: 0 !important;                 /* << crest first */
  }

  /* name under crest, centred, truncates if long */
  .fixtures__name{
    order: 1 !important;                 /* << name second */
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.15 !important;
  }

  /* keep scores/time pill centred in the middle column */
  .fixtures__middle{
    justify-self: center !important;
    overflow: visible !important;
  }
}


/* TV logo — scale to row height, never huge */
.fixtures .fixtures__details--meta .fixtures__meta-item--tv{
  display:inline-flex;
  align-items:center;
  line-height:0;                     /* trims extra baseline gap */
}

.fixtures .fixtures__details--meta .fixtures__tv-logo{
  height: clamp(14px, 1.15em, 20px) !important;  /* responsive cap */
  width: auto !important;                         /* keep aspect ratio */
  object-fit: contain;                             /* handle odd logos */
  display: block;
}
@media (max-width: 768px){
  .fixtures .fixtures__details--meta .fixtures__tv-logo{
    height: clamp(12px, 1.05em, 18px) !important;
  }
}


/* === Fixtures detail colors (icons vs text) =============================== */
/* Tweak these variables or override them per-page/competition if you want. 

Coloured version

:root{

  --fx-venue-icon: #d91212;   --fx-venue-text: #333333;


  --fx-ref-icon:   #2f2f2f;   --fx-ref-text:   #333333;


  --fx-round-info-icon:  #319ef2;  --fx-round-info-text:  #333333;


  --fx-round-qf-icon:    #7d3cff;  --fx-round-qf-text:    #7d3cff;


  --fx-round-sf-icon:    #ff8c00;  --fx-round-sf-text:    #ff8c00;


  --fx-round-final-icon: #2e7d32;  --fx-round-final-text: #2e7d32;
}

*/



/* === Grey version =============================== */
:root{
  /* Venue */
  --fx-venue-icon: #cccccc;   --fx-venue-text: #333333;

  /* Referee */
  --fx-ref-icon:   #cccccc;   --fx-ref-text:   #333333;

  /* Round / Stage defaults (info = regular round like 'Rd 1') */
  --fx-round-info-icon:  #cccccc;  --fx-round-info-text:  #333333;

  /* Quarter-Final */
  --fx-round-qf-icon:    #7d3cff;  --fx-round-qf-text:    #7d3cff;

  /* Semi-Final */
  --fx-round-sf-icon:    #ff8c00;  --fx-round-sf-text:    #ff8c00;

  /* Final */
  --fx-round-final-icon: #2e7d32;  --fx-round-final-text: #2e7d32;
}




/* Make the stage label inherit the text color we set below */
.fixtures__stage{ color: inherit; font-weight: 600; }

/* Venue: icon vs text */
.fixtures__meta-item--venue .fixtures__icon       { color: var(--fx-venue-icon); }
.fixtures__meta-item--venue .fixtures__meta-text  { color: var(--fx-venue-text); }

/* Referee: icon vs text */
.fixtures__meta-item--ref .fixtures__icon         { color: var(--fx-ref-icon); }
.fixtures__meta-item--ref .fixtures__meta-text    { color: var(--fx-ref-text); }

/* Round/Stage: choose palette by stage key (info/qf/sf/final) */
.fixtures__meta-item--round.stage-info  .fixtures__icon      { color: var(--fx-round-info-icon);  }
.fixtures__meta-item--round.stage-info  .fixtures__meta-text { color: var(--fx-round-info-text);  }

.fixtures__meta-item--round.stage-qf    .fixtures__icon      { color: var(--fx-round-qf-icon);    }
.fixtures__meta-item--round.stage-qf    .fixtures__meta-text { color: var(--fx-round-qf-text);    }

.fixtures__meta-item--round.stage-sf    .fixtures__icon      { color: var(--fx-round-sf-icon);    }
.fixtures__meta-item--round.stage-sf    .fixtures__meta-text { color: var(--fx-round-sf-text);    }

.fixtures__meta-item--round.stage-final .fixtures__icon      { color: var(--fx-round-final-icon); }
.fixtures__meta-item--round.stage-final .fixtures__meta-text { color: var(--fx-round-final-text); }



 


/* chip button (looks like plain text) */
.fixtures__chip-btn{
  all: unset;
  display:inline-flex; align-items:center; gap:.45rem;
  cursor:pointer; color:inherit;
}
.fixtures__chip-btn:focus-visible{
  outline:2px solid rgba(21,101,192,.6); outline-offset:2px; border-radius:4px;
}

/* anchor for tooltip */
.fixtures__meta-item{ position:relative; }

/* tooltip */
.fixtures__tooltip{
  position:absolute; bottom:100%; left:50%; transform:translate(-50%,-8px);
  background:rgba(0,0,0,.88); color:#fff; padding:.45rem .6rem; border-radius:6px;
  font-size:.85em; line-height:1.2; white-space:normal; max-width:260px;
  box-shadow:0 6px 20px rgba(0,0,0,.18); z-index:50;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.fixtures__tooltip::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:rgba(0,0,0,.88);
}
/* show on hover, focus, or when JS toggles .is-open */
.fixtures__meta-item--venue:hover .fixtures__tooltip,
.fixtures__meta-item--venue:focus-within .fixtures__tooltip,
.fixtures__meta-item--venue.is-open .fixtures__tooltip{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,-12px); transition-delay:0s;
}
@media (max-width:420px){ .fixtures__tooltip{ max-width:85vw; } }