/* 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;
}

/* 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: 768px) {
  #brx-header .topNav:has(.nextMatch > .nextMatch__vs) > .brxe-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

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

  #brx-header .topNav:has(.nextMatch > .nextMatch__vs) > .brxe-container > .brxe-button:last-child {
    justify-self: end;
    margin-left: 0;
  }
}

@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;
  }
}