/* ========================================
   BASE STYLES
   ======================================== */

html,
body {
  margin: 0;
  padding: 0;
  font: 12px/1 helvetica, arial, sans-serif;
  color: #000;
}

body {
  position: relative;
  background: #8199cb;
  z-index: 0;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

ul,
li,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a img {
  border: 0;
}

h2,
h3,
h4 {
  color: #000;
  margin: 8px 0 6px;
  font-weight: bold;
}

html:not(.backstop) div,
html:not(.backstop) span {
  scroll-margin: 2.5em 0 0 0;
}

/* ========================================
   LAYOUT
   ======================================== */

#wrap {
  max-width: 1280px;
  margin: 0 auto;
  background: #fff;
  position: relative;
  border-left: 1px solid #607cb7;
  border-right: 1px solid #607cb7;
  box-shadow: 0 0 27px #3e4b68;
}

#wrap > * {
  box-sizing: border-box;
  width: 100%;
}

#wrap > div,
#wrap > ul {
  position: relative;
  clear: both;
}

#content {
  min-height: 200px;
  padding: 12px 12px 20px;
}

#content > div {
  margin-top: 20px;
  margin-bottom: 10px;
}

/* ========================================
   HEADER
   ======================================== */

#header {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 8px 16px 0;
  background: #fff;
  border-bottom: 0;
}

#header,
#header * {
  min-width: 0;
}

.site-logo img,
.site-logo svg,
#logo img,
#logo svg {
  display: block;
  height: 64px;
  width: auto;
  max-width: 100%;
  padding-left: 10px;
  margin-bottom: -6px;
}

/* Navigation Bar */
#header #nav {
  background: #e9e9e9;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #c9c9c9;
  padding: 0 12px;
  margin: 8px 0 0;
  min-height: 32px;
  box-sizing: border-box;
  width: 100%;
  flex-basis: 100%;
}

#header #main_nav {
  display: flex !important;
  align-items: center;
  gap: 22px;
  height: 32px;
  padding: 0;
  margin: 0;
  overflow: visible !important;
}

#header #main_nav > li {
  display: inline-block !important;
  float: none !important;
  border: 0 !important;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-weight: 600;
  font-size: 1.1rem;
  color: #333;
  padding-right: 15px;
}

#header #main_nav a {
  display: inline-block;
  line-height: 32px;
  padding: 0 2px;
  color: #2a2a2a;
  text-decoration: none;
}

#header #main_nav a:hover {
  text-decoration: underline;
}

/* Subnav */
#header #subnav {
  display: none;
}

/* ========================================
   SEARCH
   ======================================== */

.player-search {
  position: relative;
  max-width: 400px;
}

#header .player-search {
  margin-left: auto;
  flex: 1 1 320px;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 20px;
}

#header .player-search .LitillHeader {
  display: none;
}

.player-search-input {
  font-size: 1.2em;
}

#header .player-search-input {
  width: 82%;
  padding: 6px 8px;
  border: 1px solid #c9cbcd;
  border-radius: 4px;
  font-size: 1.2rem;
}

#header .player-search .Hnappur {
  padding: 6px 10px;
  border: 1px solid #c9cbcd;
  border-radius: 4px;
  background: #efefef;
  cursor: pointer;
}

/* Autocomplete */
.player-search .autocomplete-results-2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  max-height: 260px;
  overflow: auto;
  z-index: 2147483647;
  border: 0;
  box-shadow: none;
}

.player-search .autocomplete-results-2:has(.autocomplete-result) {
  border: 1px solid #ccc;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}

#header .player-search .autocomplete-results-2 {
  top: calc(100% + 4px);
  z-index: 9999;
  font-size: 1.4em;
}

.player-search .autocomplete-result {
  padding: 4px 6px;
  cursor: pointer;
}

.player-search .autocomplete-result:hover {
  background: #f0f0f0;
}

.player-search .ps-submit {
  margin-top: 4px;
}

/* ========================================
   MOBILE MENU
   ======================================== */

.menu-toggle {
  display: none;
}

.mobile-nav {
  display: none;
}

/* ========================================
   CONTENT BLOCKS / CARDS
   ======================================== */

#content .flexindex > div {
  border: 1px solid #ddd;
  box-shadow: 0 6px 12px -3px #454340;
  padding: 6px 12px;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 15px;
  margin-right: 10px;
}

.flexindex > div > div {
  margin-bottom: 10px;
}

.flexindex > div > h2 {
  margin: -6px -12px 12px;
  background-color: #483d8b;
  padding: 5px 8px;
  color: #efeeed;
  font-weight: bold;
  font-size: 15px;
}

.flexindex > div > h3 {
  margin: 16px -12px 3px;
  background-color: #8f89b5;
  padding: 5px 8px;
  color: #efeeed;
  font-weight: bold;
  font-size: 13px;
}

h4.standings-sub {
  margin: 3px 0px 3px;
  background-color: #ca5e24;
  padding: 5px 15px;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
}

h4.sidustu-leikir-sub {
  margin: 3px 0px 3px;
  background-color: #8f89b5;
  padding: 5px 15px;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
}

/* ========================================
   PLAYER CARDS / LISTS
   ======================================== */

/*.front #players {
  max-width: 380px;
}
.front #teams {
  max-width: 480px;
}*/
/*.front #player-cards {
  max-width: 320px;
}*/

/* Player cards on front page */
#player-cards .images {
  display: block;
  gap: 50;
}

#player-cards .player-forsida {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 12px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid #ddd;
  box-shadow: 0 6px 12px -3px #454340;
  background: #fff;
  margin-bottom: 10px;
}

#player-cards .player-forsida > a {
  grid-column: 1;
  grid-row: 1 / -1;
  justify-self: start;
}

#player-cards .player-forsida > a img {
  width: 120px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 2px solid #000;
  display: block;
  background: #000;
}

#player-cards .player-forsida > div {
  grid-column: 2;
  line-height: 1.35;
}

#player-cards .player-forsida-name {
  position: relative;
  display: inline-block;
  margin: 0 0 4px -50px;
  padding: 2px 6px;
  background: #e8f1ff;
  border-radius: 3px;
  z-index: 2;
  font-weight: 700;
}

/* Vertical player list */
.player-list {
  display: grid;
  gap: 12px;
}

.front .player-list .player-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 0px 12px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid #ccc;
  box-shadow: 0 6px 12px -3px rgba(0, 0, 0, .15);
  background: #f5f4fb;
}

.front .player-list .player-thumb {
  grid-column: 1;
  grid-row: 1 / span 5;
  width: 84px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid #000;
  background: #eee;
}

.front .player-list .player-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: transparent !important;
}

.front .player-list .player-meta {
  grid-column: 2;
  line-height: 1.35;
}

.player-stat {
  font-size: 0.95rem;
}

/* Player images gallery (3 per row) */
.front .images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.front .images a {
  display: block;
}

.front .images img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 2px solid #000;
  display: block;
  background: #000;
}

/* Headshots */
.MyndLeikmadurHeadshot img,
.player-headshot img,
.headshot img {
  width: 84px;
  max-width: 84px;
  height: auto;
  object-fit: cover;
}

/* Team logos row */
.team-logos,
.player-logos {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: -6px;
}

.team-logos img,
.player-logos .logo-small {
  height: 20px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.0));
}

.player-era {
  font-size: 0.95rem;
  margin: 6px 0 0px;
}

/* ========================================
   STANDINGS / STATS TABLES
   ======================================== */

.tablecontainer {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 6px 12px -3px #c4c3c1;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 12px;
  line-height: 1.0;
  color: #111;
  border: solid 1px #ccc;
  
}

.stats-table caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 6px 0;
  color: #222;
}

.stats-table thead th,
.TolfraediTaflaHeader td,
.TolfraediTaflaHeader th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #555f8c;
  color: #dedede;
  font-weight: 600;
  border-bottom: 1px solid #d1d5db;
  padding: 2px 4px;
  white-space: nowrap;
  line-height: 1.3rem;
}

.stats-table td,
.stats-table th[scope="row"],
.TolfraediTaflaInnihald td {
  padding: 4px 6px;
  border-bottom: 1px solid #e5e7eb;
}

.stats-table .left {
  text-align: left;
}

.stats-table .right {
  text-align: right;
}

.stats-table .center {
  text-align: center;
}

.stats-table td,
.stats-table th {
  font-variant-numeric: tabular-nums;
}

.stats-table tbody tr:nth-child(even),
.TolfraediTaflaInnihald#TolfraediMod0 {
  background: #fafafa;
}

.stats-table tbody tr:hover {
  background: #f1f5f9;
}

.stats-table a {
  color: #120f76;
  text-decoration: none;
}

.stats-table a:hover {
  text-decoration: underline;
}

.stats-table.sortable thead th {
  cursor: pointer;
}

.stats-table.compact td,
.stats-table.compact th {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 13.5px;
}

/* Standings grid */
.standings-grid {
  display: flex;
  gap: 16px;
}

.standings-col {
  flex: 1 1 0;
  min-width: 0;
}

.standings-sub {
  margin: 0 0 6px 0;
  font-size: 1rem;
  font-weight: 600;
  color:#ffffff;
  text-decoration: none;
}

.standings-col .tablecontainer {
  margin: 0;
}

.standings-col table {
  width: 100%;
}

/* ========================================
   FOOTER
   ======================================== */

.footer {
  display: grid;
  gap: 16px;
  padding: 20px 12px;
  background: #f6f7f8;
  border-top: 1px solid #e1e3e6;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.footer h4 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: #333;
}

.footer ul {
  list-style: disc;
  padding-left: 1.1rem;
}

.footer li {
  margin: 4px 0;
}

.footer a {
  color: #002b7f;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.Hofundarrettur {
  text-align: center;
  padding: 10px 12px 28px;
  color: #000;
  font-size: 0.95rem;
  background: #fff;
}

/* ========================================
   UTILITIES
   ======================================== */

.BilStort {
  height: 15px;
}

.ForsidaTenglalisti,
.ForsidaTenglalistiUndir {
  margin: 6px 0 10px;
  padding-left: 1.1rem;
  font-size: 1.15rem;
}

.ForsidaTenglalisti {
  list-style: disc;
}

.ForsidaTenglalisti > li {
  margin: 6px 0;
}

.ForsidaTenglalistiUndir {
  list-style: circle;
}

.ForsidaTenglalistiUndir > li {
  margin: 4px 0;
}

.bug-report-btn {
  display: inline-block;
  padding: 0.6em 0.7em;
  background: #e00013;
  color: #fff !important;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  transition: transform .1s, box-shadow .2s;
}

.bug-report-btn:hover,
.bug-report-btn:active,
.bug-report-btn:visited {
  color: #fff !important;
  background: #e00013;
}

.bug-report-btn:hover {
  transform: translateY(-1px);
}

#wrap > .Villuhnappur {
  position: absolute !important;
  top: 8px;
  right: 8px;
  left: auto !important;
  width: auto !important;
  z-index: 200;
}

.uni_holder.section a.poptip::before,
img.poptip {
  content: attr(data-tip);
  width: 70px;
  font-size: .83em;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  color: #000;
}

.uni_holder.section a[href].poptip::before {
  color: #34d;
}

/* ========================================
   RESPONSIVE: MOBILE (≤735px)
   ======================================== */

@media (max-width: 735px) {
  /* Header adjustments */
  #header {
    position: relative;
    padding: 8px 12px 0;
  }

  .site-logo img,
  .site-logo svg,
  #logo img,
  #logo svg {
    height: 40px;
    padding-left: 0;
  }

  .site-logo {
    display: inline-block;
    max-width: 62vw;
  }

  /* Hide desktop nav, show mobile menu */
  #header #nav {
    display: none !important;
  }

  #header #subnav,
  .Villuhnappur {
    display: none !important;
  }

  /* Mobile menu button */
  .menu-toggle {
    display: inline-flex !important;
    position: absolute;
    top: 0;
    right: 0px;
    align-items: center;
    gap: 0px;
    padding: 16px 15px 11px 3px;
    border: 0px;
    background: #8f89b5;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    width: 58px;
    margin: 0;
    font-size: 2em;
  }

  .menu-toggle .label {
    letter-spacing: .02em;
  }

  .menu-toggle .bars {
    position: relative;
    width: 16px;
    height: 12px;
  }

  .menu-toggle .bars::before,
  .menu-toggle .bars::after,
  .menu-toggle .bars::marker {
    display: none;
  }

  .menu-toggle .bars:after,
  .menu-toggle .bars:before,
  .menu-toggle .bars i {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
  }

  .menu-toggle .bars:before {
    top: 0;
  }

  .menu-toggle .bars:after {
    bottom: 0;
  }

  .menu-toggle .bars i {
    top: 5px;
    display: block;
  }

  /* Mobile nav panel */
  .mobile-nav {
    display: block !important;
    position: relative;
    z-index: 1000;
    margin: 8px -12px 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
    border-top: 1px solid #dad6e8;
  }

  .mobile-nav[hidden] {
    display: none !important;
  }

  .mobile-nav.open {
    display: block !important;
    width: 95%;
    margin-left: 18px;
    margin-top: 5px;
  }

  .mobile-nav ul {
    margin: 0;
    padding: 6px 10px;
    list-style: none;
  }

  .mobile-nav li {
    padding: 14px 22px;
    font-size: 20px;
    font-weight: 600;
    color: #302b6a;
    position: relative;
  }

  .mobile-nav li + li {
    border-top: 1px solid #e6e0d6;
  }

  .mobile-nav a {
    color: inherit;
    text-decoration: none;
    display: block;
  }

  .mobile-nav a:active {
    background: #ededf5;
  }

  #header::after {
    content: "";
    display: block;
    height: 4px;
    background: #472ab1;
    margin-top: 8px;
  }

  /* Search repositioning */
  #header .SearchPanel,
  #header .leit,
  #header form.search,
  #header .player-search {
    order: 3;
    flex: 1 1 100%;
    margin-left: 0;
  }

  .player-search {
    clear: both;
    margin-top: 10px;
    max-width: 100%;
  }

  #wrap > .Villuhnappur {
    top: 6px;
    right: 6px;
  }

  /* Player cards adjustments */
  #player-cards .player-forsida {
    grid-template-columns: 1fr;
  }

  #player-cards .player-forsida > a {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  #player-cards .player-forsida > a img {
    width: 100%;
    max-width: 160px;
  }

  .player-row {
    grid-template-columns: 110px 1fr !important;
  }

  .player-thumb {
    grid-column: 1;
    grid-row: 2;
    order: 2;
    width: 110px;
  }

  .team-logos img,
  .player-logos .logo-small {
    height: 16px;
  }

  /* Prevent rendering issues */
  #content,
  #header,
  .mobile-nav {
    -webkit-backface-visibility: hidden;
  }
}

/* ========================================
   RESPONSIVE: SMALL TABLET (≥481px)
   ======================================== */

@media (min-width: 481px) {
  h2,
  h3 {
    font-size: 1.6em;
  }

  .front .player-list .player-row {
    grid-template-columns: 96px 1fr;
  }

  .front .player-list .player-thumb {
    width: 96px;
  }
}

/* ========================================
   RESPONSIVE: TABLET (≥736px)
   ======================================== */

@media (min-width: 736px) {
  h2,
  h3 {
    font-size: 1.8em;
    line-height: 1.2em;
  }

  #wrap > #header {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: -8px;
    border-bottom: 0;
    background: #fff;
    margin-bottom: -18px;
  }

  /* Show desktop nav, hide mobile menu */
  #header #nav {
    display: block !important;
  }

  .menu-toggle,
  #mobileNav {
    display: none !important;
  }
}

/* ========================================
   RESPONSIVE: STATS TABLE (≥768px)
   ======================================== */

@media (max-width: 768px) {
  .stats-table .left {
    white-space: normal;
  }

  .stats-table td,
  .stats-table th {
    padding: 7px 8px;
  }
}

/* ========================================
   RESPONSIVE: STANDINGS GRID (≥900px)
   ======================================== */

@media (max-width: 900px) {
  .standings-grid {
    flex-direction: column;
  }
}

/* ========================================
   RESPONSIVE: DESKTOP (≥1020px)
   ======================================== */

@media (min-width: 1020px) {
  #content > .flexindex {
    margin-left: 12px;
  }

  #content .flexindex {
    max-width: 1020px;
  }

  #content > * {
    width: 98%;
  }

  #header #nav > * {
    display: block !important;
  }

  #header #subnav {
    display: block;
    color: #c9cbcd;
    background-color: #483d8b;
    width: 100%;
    padding: 0;
    height: 22px;
  }

  #header #subnav > li:first-child {
    display: block;
    border-left: none;
  }

  #header #subnav > li {
    font-size: .785714286em;
    float: left;
    padding: 2px 10px 2px;
    margin-top: 3px;
    position: relative;
    border-left: 1px solid #425465;
    height: 12px;
  }
}

/* ========================================
   PROGRESSIVE ENHANCEMENT: CSS GRID
   ======================================== */

@supports (display: grid) {
  #content .flexindex {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    grid-gap: 10px;
    grid-auto-flow: dense;
  }

  #content .flexindex > div {
    width: auto;
    margin: 0;
  }

  @media screen and (min-width: 600px) {
    #content.front .flexindex {
      max-width: none;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
  }
}

/* =========================================================
   FINAL OVERRIDES — Forsíða: two fluid cols + fixed right rail
   Place AFTER your existing @supports block.
   ========================================================= */
@supports (display: grid) {
  .front #content .flexindex {
    max-width: none !important; /* beat the 1020px cap */
    display: grid;
    /* Left grows (>=280px), middle grows a bit more (>=380px),
       right rail is fixed 320px */
    grid-template-columns: minmax(280px, 1fr) minmax(380px, 1.6fr) 320px !important;
    gap: 16px;
    align-items: start;
  }

  /* Grid items must not keep inline-block sizing */
  .front #content .flexindex > div {
    display: block !important;
    width: auto !important;
    min-width: 0;
    margin: 0; /* clear the old inline card margins */
  }

  /* Fixed right column (player cards) */
  #player-cards {
    width: 320px !important;
    max-width: 320px !important;
    justify-self: end;
  }

  #players {
    width: 90% !important;
    /*max-width: 320px !important;*/
    /*justify-self: end;*/
  }
  
  #teams {
    width: 105% !important;
    /*max-width: 320px !important;*/
    /*justify-self: end;*/
  }

  /* Make sure left/middle tables stretch inside their tracks */
  #players .tablecontainer table,
  #teams   .tablecontainer table {
    width: 100%;
    table-layout: auto;
  }

  /* Responsive collapse */
  @media (max-width: 1200px) {
    .front #content .flexindex {
      grid-template-columns: 1fr 1fr !important; /* two columns */
    }
    #player-cards {
      width: auto !important;
      max-width: none !important;
      justify-self: stretch;
    }
  }

    @media (max-width: 820px) {
      .front #content .flexindex {
        grid-template-columns: 1fr !important;
        /* stack on small screens */
      }
  
      #teams {
        width: 90% !important;
        /*max-width: 320px !important;*/
        /*justify-self: end;*/
      }
    }
}


/* === Name banner behind headshot (front page player list) === */
.front .player-list {
  /* tweakable tokens */
  --thumb-w: 84px;      /* matches .player-thumb width on desktop */
  --gap-x: 12px;        /* grid gap between thumb and meta */
  --banner-h: 26px;     /* height of the name strip */
}

.front .player-list .player-row {
  position: relative; /* anchor for the absolute banner */
}

.front .player-list .player-thumb {
  position: relative;  /* layer above the banner */
  z-index: 2;
  width: var(--thumb-w);
}

.front .player-list .player-name {
  position: absolute;
  top: 6px;            /* line up with your card padding */
  left: 0;
  right: 0;
  height: var(--banner-h);
  display: flex;
  align-items: center;

  /* leave room under the image so the text starts to the right of it */
  padding-left: calc(var(--thumb-w) + var(--gap-x) + 6px);
  padding-right: 8px;

  background: #483d8b; /* your purple */
  color: #eee;
  font-weight: 700;
  font-size: 1.05rem;
  border-radius: 2px;

  z-index: 1; /* sits under the image */
}

/* push the rest of the meta down so it doesn't sit under the banner */
.front .player-list .player-meta {
  padding-top: calc(var(--banner-h) + 8px);
}

/* Mobile/other breakpoints: keep variables in sync with your thumb width */
@media (min-width: 481px) {
  .front .player-list {
    --thumb-w: 96px;
  }

  /* you set 96px at ≥481px */
}

@media (max-width: 735px) {
  .front .player-list {
    --thumb-w: 110px;
  }

  /* matches your mobile thumb */
}



/* Stats layout tweaks */
body.stats #content.stats-content {
  max-width: 1160px;   /* a touch narrower than Forsida wrap */
  margin: 0 auto;
}

/* ===== Timabil (stats) layout helpers ===== */
.stats .season-header .page-title { margin: 6px 0 4px; }
.stats .season-crosslink { margin: 0 0 10px; }

.season-switch { margin: 8px 0 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.season-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr; /* standings : right-rail */
  gap: 16px;
  align-items: start;
}

.season-rail { display: grid; gap: 12px; }

/* cards */
.card { border: 1px solid #ddd; box-shadow: 0 6px 12px -3px rgba(0,0,0,.12); background: #fff; }
.card > h2,
.card > h3 { margin: 0; padding: 8px 10px; background: #8f89b5; color: #efeeed; font-size: 14px; }
.card .card-body { padding: 10px 12px; }

/* Games card full width under grid */
.card-games { margin-top: 12px; }

/* Responsive collapse */
@media (max-width: 980px) {
  .season-grid { grid-template-columns: 1fr; }
}



/* keep tooltip before-links only */
.uni_holder.section a.poptip::before {
  content: attr(data-tip);
  width: 70px;
  font-size: .83em;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  color: #000;
}

/* do NOT set content on images */
img.poptip {
  content: normal !important; /* crucial on iOS */
  width: 100%;               /* let existing thumb rules size it */
  display: block;            /* fine to keep */
}


@media (max-width: 735px) {
  img.poptip { content: normal !important; }
}




/* Standings: Felog-style zebra (base) */
.stats-table.standings-table tbody tr:nth-child(odd)  { background: #e8eeff; } /* light */
.stats-table.standings-table tbody tr:nth-child(even) { background: #b0c4de; } /* medium */

/* Playoff rows: use felog-style backgrounds */
.stats-table.standings-table tbody tr.is-playoff               { background: #e8eeff; }
.stats-table.standings-table tbody tr.is-playoff:nth-child(even){ background: #b0c4de; }
/* keep tint on hover */
/*.stats-table.standings-table tbody tr.is-playoff:hover          { background: #d0d7ee; }*/

/* Neutral rows: use soft gray backgrounds */
.stats-table.standings-table tbody tr.is-neutral               { background: #f5f5f5; }
.stats-table.standings-table tbody tr.is-neutral:nth-child(even){ background: #dedede; }
/* keep tint on hover */
/*.stats-table.standings-table tbody tr.is-neutral:hover          { background: #bebebe; }*/

/* Relegation rows: soft red backgrounds */
.stats-table.standings-table tbody tr.is-relegation               { background: #fdecec; }
.stats-table.standings-table tbody tr.is-relegation:nth-child(even){ background: #e8c8c8; }
/* keep tint on hover */
/*.stats-table.standings-table tbody tr.is-relegation:hover          { background: #daafaf; }*/




/* Subnav: first item left; items 2+ on the right */
#subnav {
  display: flex;
  align-items: center;
  gap: .5rem 1rem;       /* row gap / column gap */
  list-style: none;
  margin: 0;
  padding: .25rem 1rem;
}

/* reset any legacy float/inline-block from older CSS */
#subnav > li {
  float: none !important;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* THIS pushes the second li (and everything after it) to the right */
#subnav .subnav-push-right {
  margin-left: auto;
}

/* Status strip look on a dark bar */
#subnav .status-strip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .6rem;
  border-radius: .5rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  line-height: 1.25;
}
#subnav .status-strip a { color: #fff; text-decoration: underline; }
#subnav .status-strip .sep { opacity: .7; }

/* Bug-report button to match */
#subnav .bug-report-btn {
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
}
#subnav .bug-report-btn:hover { background: rgba(255,255,255,0.16); }

/* Mobile: stack; right items move below and align right */
@media (max-width: 680px) {
  #subnav {
    flex-wrap: wrap;
    gap: .25rem .5rem;
    padding: .25rem .5rem;
  }
  #subnav > li { width: 100%; }
  #subnav .subnav-push-right {
    margin-left: 0;
    justify-content: flex-end;   /* keep right items right-aligned when stacked */
  }
}


/* make sure the logo starts below the subnav in flow */
.site-logo { display: inline-block; clear: both; }

/* ensure the subnav creates its own stacking context above header background */
#subnav { position: relative; z-index: 1; }


/* --- Subnav flex fix: beat older float/height rules --- */
#header #subnav {
  display: flex !important;         /* override display:block from older rule */
  align-items: center;
  gap: .5rem 1rem;
  list-style: none;
  padding: .25rem 1rem;
  margin: 0;
  height: auto !important;          /* allow tall content */
  flex: 1 0 100% !important;        /* take its own full row in the header */
}

#header #subnav > li {
  float: none !important;           /* kill old float */
  display: flex;                    /* flex children horizontally */
  align-items: center;
  height: auto !important;          /* no clipping */
  margin: 0 !important;
  padding: 0;                       /* your original padding on the <li> isn't needed */
  border-left: 0 !important;        /* drop the old left borders */
}

/* Push the right side over (put this on the second <li>): <li class="subnav-push-right"> */
#header #subnav > li.subnav-push-right { margin-left: auto; }

/* Status strip visuals on dark bar (optional, matches your theme) */
#header #subnav .status-strip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .6rem;
  border-radius: .5rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  line-height: 1.25;
}
#header #subnav .status-strip a { color: #fff; text-decoration: underline; }
#header #subnav .status-strip .sep { opacity: .7; }

/* Bug-report button to match (keeps it from looking like a white pill) */
#header #subnav .bug-report-btn {
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff !important;
  text-decoration: none;
}
#header #subnav .bug-report-btn:hover { background: rgba(255,255,255,0.16); }



/* --- FINAL OVERRIDES: Subnav layout + header position --- */

/* 1) Let subnav be a full-width row in the header (beats old float/height rules) */
#header #subnav {
  display: flex !important;
  align-items: center;
  gap: .5rem 1rem;
  padding: .25rem 1rem;
  margin: 0;
  height: auto !important;
  flex: 0 0 100% !important;   /* own row in the flex header */
  box-sizing: border-box;
}

/* kill old floats/borders/heights on lis */
#header #subnav > li {
  float: none !important;
  display: flex;
  align-items: center;
  height: auto !important;
  margin: 0 !important;
  padding: 0;
  border: 0 !important;
}

/* push the right side over: put this class on the SECOND li */
#header #subnav > li.subnav-push-right { margin-left: auto; }

/* 2) Keep header inside the white frame (remove the negative margins on desktop) */
@media (min-width: 736px) {
  #wrap > #header {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* 3) Visuals: make status plain text on the purple bar; keep bug button red */
#header #subnav .status-strip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0;                   /* no pill padding */
  background: transparent;      /* no pill background */
  border: 0;                    /* no pill border */
  color: #c9cbcd;               /* match your subnav text tone */
  line-height: 1.25;
}
#header #subnav .status-strip a { color: #ffffff; text-decoration: underline; }
#header #subnav .status-strip .sep { opacity: .7; }

/* keep the bug-report button as the only pill (your original red) */
#header #subnav .bug-report-btn {
  padding: 0.6em 0.7em;
  background: #e00013;
  color: #fff !important;
  border-radius: 6px;
  border: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
#header #subnav .bug-report-btn:hover { background: #d40013; }


/* === Subnav as 3-column grid (final override) === */
#header #subnav {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto; /* left grows, two right items hug right */
  column-gap: 1rem;
  align-items: center;
  padding: .25rem 1rem;
  margin: 0;
  height: auto !important;
  flex: 0 0 100% !important; /* own row in header flex container */
  box-sizing: border-box;
}

#header #subnav > li {
  /* kill legacy floats/borders/heights */
  float: none !important;
  border: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: 0.85em;
}

/* placement (keep your existing <li> order) */
#header #subnav > li:nth-child(1) { justify-self: start; }
#header #subnav > li:nth-child(2) { justify-self: end; }
#header #subnav > li:nth-child(3) { justify-self: end; }

/* visuals: status is plain text on purple bar; bug button stays pill */
#header #subnav .status-strip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0;                 /* no pill */
  background: transparent;
  border: 0;
  color: #c9cbcd;
  line-height: 1.25;
}
#header #subnav .status-strip a { color: #fff; text-decoration: underline; }
#header #subnav .status-strip .sep { opacity: .7; }

/* keep bug button as red pill */
#header #subnav .bug-report-btn {
  padding: 0.6em 0.7em;
  background: #e00013;
  color: #fff !important;
  border-radius: 6px;
  border: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
#header #subnav .bug-report-btn:hover { background: #d40013; }

/* ensure header sits inside the white frame (undo old negative margins) */
@media (min-width: 736px) {
  #wrap > #header {
    margin-top: 0 !important; 
    margin-bottom: 0 !important;
  }
}

/* Remove the white strip above the purple subnav */
#header { padding-top: 0 !important; }

/* Give the space back below the subnav so the logo breathes */
#header #subnav { margin-bottom: 8px; }

@media (max-width: 680px) {
  #header #subnav {
    display: none !important;
  }
}