/* Keep the compact header fixture on one line on phones. */
#brx-header .topNav:has(.nextMatch > .nextMatch__vs) {
  cursor: pointer;
}

#brx-header [data-fortis-match-toggle="true"]:focus-visible {
  outline: 3px solid #000;
  outline-offset: 5px;
}

#brx-header .topNav:has(.nextMatch > .nextMatch__vs) a {
  cursor: pointer;
}

/* The disclosure icon must not take space from only the right-hand team. */
#brx-header .brxe-div:has(> .brxe-shortcode > .nextMatch > .nextMatch__vs) {
  position: relative;
}

#brx-header .brxe-div:has(> .brxe-shortcode > .nextMatch > .nextMatch__vs) > .brxe-icon {
  position: absolute;
  right: 0;
}

/* Reserve the icon's width when the fixture is open and the label says Sluiten. */
body.nextGameVisible #brx-header .topNav [data-fortis-match-toggle="true"] {
  padding-right: 32px;
}

/* Keep VS on the true centre line; team names grow away from it. */
#brx-header .nextMatch:has(> .nextMatch__vs) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding-inline: 32px;
}

#brx-header .nextMatch:has(> .nextMatch__vs) > .nextMatch__thuisploeg {
  min-width: 0;
  text-align: right;
}

#brx-header .nextMatch:has(> .nextMatch__vs) > .nextMatch__uitploeg {
  min-width: 0;
  text-align: left;
}

@media (min-width: 900px) {
  body:not(.nextGameVisible) #brx-header .topNav:has(.nextMatch > .nextMatch__vs) > :is(.topnavcontainer, .brxe-container) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  #brx-header .topNav:has(.nextMatch > .nextMatch__vs) > :is(.topnavcontainer, .brxe-container) > :first-child {
    justify-self: start;
  }

  body:not(.nextGameVisible) #brx-header .topNav:has(.nextMatch > .nextMatch__vs) > :is(.topnavcontainer, .brxe-container) > [data-fortis-match-toggle="true"] {
    grid-column: 2;
    justify-self: center;
  }
}

@media (max-width: 767px) {
  #brx-header .brxe-div:has(> .brxe-shortcode > .nextMatch > .nextMatch__vs) {
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
  }

  #brx-header .brxe-shortcode:has(> .nextMatch > .nextMatch__vs) {
    flex: 1 1 auto;
    min-width: 0;
  }

  #brx-header .nextMatch:has(> .nextMatch__vs) {
    column-gap: clamp(6px, 2.2vw, 12px);
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    font-size: clamp(13px, 4.2vw, 18px);
    line-height: 1.1;
  }

  #brx-header .nextMatch:has(> .nextMatch__vs) > .nextMatch__thuisploeg,
  #brx-header .nextMatch:has(> .nextMatch__vs) > .nextMatch__uitploeg {
    display: block;
    white-space: nowrap;
  }

  #brx-header .nextMatch:has(> .nextMatch__vs) > .nextMatch__thuisploeg {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* The first programme card has logos above the names; keep their top edges level. */
.programma > li:first-child .programma__match > .programma__matchhome,
.programma > li:first-child .programma__match > .programma__matchout {
  justify-content: flex-start;
}

/* Keep the team logos next to VS in the smaller white fixture cards. */
.programma > li:not(:first-child) .programma__match > .programma__matchhome {
  justify-content: flex-start;
}

.programma > li:not(:first-child) .programma__match > .programma__matchout {
  justify-content: flex-start;
}

/* Locations belong to the centre line of every fixture card. */
.programma .programma_match__location {
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media (max-width: 767px) {
  .programma > li:not(:first-child) .programma__matchhome > img {
    align-self: flex-end;
  }

  .programma > li:not(:first-child) .programma__matchout > img {
    align-self: flex-start;
  }
}