/* National Teams chapter explorer. Intentionally scoped to the section. */
.fmg-national-teams-page .fmg-national-teams {
  --fmg-nt-site-header-height: 76px;
  --fmg-nt-admin-offset: var(--drupal-displace-offset-top, 0px);
  --fmg-nt-header-offset: calc(var(--fmg-nt-site-header-height) + var(--fmg-nt-admin-offset));
  --fmg-nt-floating-top: calc(var(--fmg-nt-header-offset) + clamp(1rem, 2vw, 1.75rem));
}

/* Drupal offsets the body for its fixed toolbar, but the fixed site header is
 * displaced by the same amount. Shift the section shell by the header's own
 * rendered height only for authenticated layouts, without page padding. */
.fmg-national-teams-page.toolbar-fixed .fmg-national-teams__shell {
  position: relative;
  inset-block-start: 0;
  margin-block-end: 0;
}

/* Drupal switches to a compact vertical toolbar at narrow widths. In that
 * mode the body already reserves the toolbar strip, so only the remaining
 * portion of the responsive site header needs to be added. */
.fmg-national-teams-page.toolbar-vertical .fmg-national-teams__shell {
  --fmg-nt-vertical-header-gap: max(0px, calc(var(--fmg-nt-site-header-height) - var(--fmg-nt-admin-offset)));
  position: relative;
  inset-block-start: 0;
  margin-block-end: 0;
}

.fmg-national-teams-nav {
  position: static;
  display: block;
  height: 0;
  margin: 0;
}

.fmg-national-teams-nav__floating {
  position: fixed;
  z-index: 520;
  top: var(--fmg-nt-floating-top);
  right: clamp(1rem, 2vw, 2rem);
  display: flex;
  align-items: flex-start;
  filter: drop-shadow(0 .9rem 1.4rem rgba(7, 27, 56, .2));
}

.fmg-national-teams-nav__floating[hidden] {
  display: none !important;
}

.fmg-national-teams-nav__floating.is-dismissing {
  pointer-events: none;
  animation: fmg-nt-floating-out 160ms ease-in both;
}

.fmg-national-teams-nav__trigger {
  position: relative;
  min-width: 17.5rem;
  min-height: 3.5rem;
  justify-content: flex-start;
  gap: .75rem;
  padding: .55rem 3rem .55rem .65rem;
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(199, 163, 55, .68);
  border-radius: .35rem;
  background: #0a2041;
  box-shadow: none;
  text-align: left;
  transition: transform 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out;
}

.fmg-national-teams-nav__dismiss {
  position: absolute;
  z-index: 2;
  top: .45rem;
  right: .45rem;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  place-items: center;
  color: #d8e0ea;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: .2rem;
  background: rgba(255,255,255,.08);
  font-size: .7rem;
  transition: color 160ms ease-out, border-color 160ms ease-out, background 160ms ease-out;
}

.fmg-national-teams-nav__dismiss:hover,
.fmg-national-teams-nav__dismiss:focus-visible {
  color: #071831;
  border-color: #d6b650;
  background: #d6b650;
}

.fmg-national-teams-nav__trigger::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(#006847 0 33%, #ffffff 33% 66%, #ce1126 66%);
  content: '';
}

.fmg-national-teams-nav__trigger:hover {
  color: #fff;
  border-color: #dfbf61;
  box-shadow: 0 1rem 2.4rem rgba(7, 27, 56, .22);
  transform: translateY(-2px);
}

.fmg-national-teams-nav__trigger-mark {
  display: grid;
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  color: #0a2041;
  border: 0;
  border-radius: 50%;
  background: #d6b650;
  font-size: 1rem;
  transition: transform 220ms ease-out;
}

.fmg-national-teams-nav__trigger:hover .fmg-national-teams-nav__trigger-mark {
  transform: rotate(22deg);
}

.fmg-national-teams-nav__trigger-copy {
  display: grid;
  flex: 1;
  gap: .08rem;
}

.fmg-national-teams-nav__trigger-copy strong {
  font-size: .875rem;
  letter-spacing: .055em;
  line-height: 1.2;
  text-transform: uppercase;
}

.fmg-national-teams-nav__trigger-short { display: none; }

.fmg-national-teams-nav__trigger-copy small {
  color: #ccd5e1;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1.2;
}

.fmg-national-teams-nav__trigger-arrow {
  color: #d6b650;
  font-size: .75rem;
  transition: transform 180ms ease-out;
}

.fmg-national-teams-nav__trigger:hover .fmg-national-teams-nav__trigger-arrow {
  transform: translateX(.2rem);
}

.fmg-national-teams-nav__dialog {
  width: min(88rem, calc(100% - 2rem));
  max-width: none;
  max-height: min(92vh, 58rem);
  overflow: auto;
  color: #f7f3e8;
  border: 1px solid rgba(214, 182, 80, .36);
  border-radius: .5rem;
  background:
    radial-gradient(circle at 85% 12%, rgba(35, 93, 139, .34), transparent 25rem),
    linear-gradient(135deg, #071831, #0a2041 56%, #102d52);
  box-shadow: 0 2rem 8rem rgba(0, 0, 0, .48);
}

.fmg-national-teams-nav__dialog[open] {
  animation: fmg-nt-dialog-in 240ms cubic-bezier(.2, .8, .2, 1) both;
}

.fmg-national-teams-nav__dialog.is-closing {
  animation: fmg-nt-dialog-out 180ms ease-in both;
}

.fmg-national-teams-nav__dialog::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 85% 20%, transparent 0 2.4rem, rgba(255,255,255,.028) 2.45rem 2.5rem, transparent 2.55rem 4.9rem);
  content: '';
  animation: fmg-nt-contours 9s ease-in-out infinite alternate;
}

.fmg-national-teams-nav__dialog::backdrop {
  background: rgba(2, 12, 27, .82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.fmg-national-teams-nav__dialog.is-fallback[open] {
  position: fixed;
  z-index: 1200;
  inset: 1rem;
  width: auto;
  height: auto;
  margin: 0;
  box-shadow: 0 0 0 100vmax rgba(2, 12, 27, .82), 0 2rem 8rem rgba(0, 0, 0, .48);
}

.fmg-national-teams-nav__dialog-head {
  position: relative;
  z-index: 2;
  align-items: flex-start;
  padding: clamp(1.35rem, 3vw, 2.75rem);
  border-bottom: 1px solid rgba(255,255,255,.16);
  background: transparent;
}

.fmg-national-teams-nav__dialog-head::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  width: min(28vw, 18rem);
  height: 3px;
  background: linear-gradient(90deg, #006847 0 33%, #ffffff 33% 66%, #ce1126 66%);
  content: '';
}

.fmg-national-teams-nav__dialog-head p { color: #d6b650; }
.fmg-national-teams-nav__dialog-head h2 { max-width: 18ch; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.03em; }
.fmg-national-teams-nav__dialog-head > div > span { display: block; max-width: 44rem; margin-top: .75rem; color: #bdc9d8; font-size: .92rem; line-height: 1.5; }

.fmg-national-teams-nav__close {
  border-radius: .3rem;
  transition: color 160ms ease-out, border-color 160ms ease-out, background 160ms ease-out;
}

.fmg-national-teams-nav__close:hover {
  color: #071831;
  border-color: #d6b650;
  background: #d6b650;
}

.fmg-national-teams-nav__panel {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: clamp(1rem, 2.5vw, 2.25rem);
}

.fmg-national-teams-nav__group { padding: clamp(.65rem, 1.3vw, 1.15rem); }
.fmg-national-teams-nav__group + .fmg-national-teams-nav__group { border-left-color: rgba(255,255,255,.13); }
.fmg-national-teams-nav__group h2 { min-height: 2em; color: #d6b650; }
.fmg-national-teams-nav__group ul { gap: .32rem; }

.fmg-national-teams-nav__group a {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: start;
  min-height: 4.4rem;
  padding: .72rem .65rem;
  color: #f7f3e8;
  border: 1px solid transparent;
  border-radius: .25rem;
  background: transparent;
  transition: background 170ms ease-out, border-color 170ms ease-out, transform 170ms ease-out;
}

.fmg-national-teams-nav__group a:hover,
.fmg-national-teams-nav__group a:focus-visible {
  color: #fff;
  border-color: rgba(214, 182, 80, .32);
  background: rgba(255,255,255,.075);
  transform: translateX(.2rem);
}

.fmg-national-teams-nav__group a[aria-current='page'] {
  color: #fff;
  border-color: rgba(214, 182, 80, .7);
  background: linear-gradient(90deg, rgba(214,182,80,.2), rgba(255,255,255,.07));
  box-shadow: inset 3px 0 #d6b650;
}

.fmg-national-teams-nav__item-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  color: #d6b650;
  border: 1px solid rgba(214,182,80,.35);
  border-radius: 50%;
  font-size: .78rem;
}

.fmg-national-teams-nav__item-copy { display: grid; gap: .18rem; }
.fmg-national-teams-nav__item-copy strong { font-size: .9rem; line-height: 1.25; }
.fmg-national-teams-nav__item-copy small { color: #aebdce; font-size: .875rem; font-weight: 450; line-height: 1.32; }
.fmg-national-teams-nav__current { grid-column: 2; width: max-content; margin-top: .2rem; color: #e2c86f; font-size: .875rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.fmg-national-teams-nav__item-arrow { align-self: center; color: #d6b650; font-size: .65rem; opacity: 0; transform: translateX(-.25rem); transition: opacity 160ms ease-out, transform 160ms ease-out; }
.fmg-national-teams-nav__group a:hover .fmg-national-teams-nav__item-arrow,
.fmg-national-teams-nav__group a:focus-visible .fmg-national-teams-nav__item-arrow { opacity: 1; transform: none; }

.fmg-national-teams-nav__dialog[open] .fmg-national-teams-nav__group {
  animation: fmg-nt-group-in 260ms ease-out both;
}
.fmg-national-teams-nav__dialog[open] .fmg-national-teams-nav__group:nth-child(2) { animation-delay: 35ms; }
.fmg-national-teams-nav__dialog[open] .fmg-national-teams-nav__group:nth-child(3) { animation-delay: 70ms; }
.fmg-national-teams-nav__dialog[open] .fmg-national-teams-nav__group:nth-child(4) { animation-delay: 105ms; }

@keyframes fmg-nt-dialog-in { from { opacity: 0; transform: translateY(1rem) scale(.992); } }
@keyframes fmg-nt-dialog-out { to { opacity: 0; transform: translateY(.6rem) scale(.995); } }
@keyframes fmg-nt-group-in { from { opacity: 0; transform: translateY(.55rem); } }
@keyframes fmg-nt-contours { to { transform: translate3d(-.45rem, .3rem, 0); } }
@keyframes fmg-nt-floating-out { to { opacity: 0; transform: translateX(.65rem); } }

@media (max-width: 900px) {
  .fmg-national-teams-nav__panel { grid-template-columns: 1fr 1fr; }
  .fmg-national-teams-nav__group:nth-child(odd) { border-left: 0; }
  .fmg-national-teams-nav__group { border-top: 1px solid rgba(255,255,255,.13); }
}

@media (max-width: 1024px) {
  .fmg-national-teams-page .fmg-national-teams {
    --fmg-nt-site-header-height: 70px;
    --fmg-nt-header-offset: var(--fmg-nt-site-header-height);
  }
  .fmg-national-teams__shell { padding-top: clamp(1.25rem, 3vw, 2rem); }
  .fmg-national-teams-nav__floating {
    z-index: 1300;
    top: auto;
    right: .75rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  .fmg-national-teams-nav__trigger { min-width: 0; min-height: 3.25rem; }
  .fmg-national-teams-nav__dismiss { top: .25rem; right: .25rem; width: 2.75rem; height: 2.75rem; }
}

@media (max-width: 580px) {
  .fmg-national-teams-nav__floating { right: .6rem; bottom: calc(.7rem + env(safe-area-inset-bottom)); }
  .fmg-national-teams-nav__trigger { width: 3.25rem; min-width: 3.25rem; min-height: 3.25rem; padding: .5rem; justify-content: center; border-radius: 50%; }
  .fmg-national-teams-nav__trigger-copy,
  .fmg-national-teams-nav__trigger-arrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fmg-national-teams-nav__trigger-mark { flex-basis: 2rem; width: 2rem; height: 2rem; }
  .fmg-national-teams-nav__dismiss { top: -.55rem; right: -.55rem; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: #0a2041; }
  .fmg-national-teams-nav__dialog { height: 100%; max-height: 100%; border: 0; border-radius: 0; }
  .fmg-national-teams-nav__dialog.is-fallback[open] { inset: 0; }
  .fmg-national-teams-nav__dialog-head { position: sticky; }
  .fmg-national-teams-nav__dialog-head h2 { font-size: 1.65rem; }
  .fmg-national-teams-nav__dialog-head > div > span { display: none; }
  .fmg-national-teams-nav__close span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fmg-national-teams-nav__close { width: 2.75rem; justify-content: center; }
  .fmg-national-teams-nav__panel { display: block; padding: .5rem; }
  .fmg-national-teams-nav__group + .fmg-national-teams-nav__group { border-left: 0; }
  .fmg-national-teams-nav__group h2 { min-height: 0; }
  .fmg-national-teams-nav__group a { min-height: 3.5rem; }
  .fmg-national-teams-nav__item-copy small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fmg-national-teams-nav__dialog[open],
  .fmg-national-teams-nav__dialog.is-closing,
  .fmg-national-teams-nav__dialog::before,
  .fmg-national-teams-nav__dialog[open] .fmg-national-teams-nav__group { animation: none; }
  .fmg-national-teams-nav__trigger,
  .fmg-national-teams-nav__dismiss,
  .fmg-national-teams-nav__trigger-mark,
  .fmg-national-teams-nav__trigger-arrow,
  .fmg-national-teams-nav__group a,
  .fmg-national-teams-nav__item-arrow { transition: none; }
  .fmg-national-teams-nav__floating.is-dismissing { animation: none; }
}