/* Today.FM Hotfix v2.2
   - schützt alle Social-Icons in der Desktop-Navigation vor Überlauf
   - schaltet bei zu wenig Platz früher auf die vollständige Mobile-Navigation
   - gestaltet den Werbeportal-Eintrag unter "Mehr Musik. Mehr Today."
*/

.station-nav,
.station-nav__social {
  min-width: 0;
}

.station-nav__social > a {
  flex: 0 0 auto;
}

/* Mittlere Desktop-Breiten: Navigation kompakter halten, ohne Einträge abzuschneiden. */
@media (min-width:1261px) and (max-width:1540px) {
  .station-header__bar {
    grid-template-columns: 205px minmax(0,1fr) minmax(300px,350px);
    gap: 10px;
    padding-inline: 14px;
  }

  .station-brand { width: 195px; }
  .station-brand img { height: 76px; }

  .station-nav {
    justify-content: center;
    gap: 7px;
  }

  .station-nav > a,
  .station-nav__trigger {
    gap: 3px;
    font-size: 9px;
    letter-spacing: .018em;
  }

  .station-nav > a svg,
  .station-nav__trigger > svg:first-child {
    width: 11px;
    height: 11px;
    flex-basis: 11px;
  }

  .station-nav__chevron {
    width: 8px !important;
    height: 8px !important;
    flex-basis: 8px !important;
  }

  .station-nav__search {
    width: 22px;
    justify-content: center;
  }

  .station-nav__social {
    margin: 0 2px 0 0;
    padding-left: 6px;
    gap: 1px;
  }

  .station-nav__social > a {
    width: 22px;
    height: 22px;
  }

  .station-nav__social > a svg {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }

  .station-nav__social b { font-size: 13px; }

  .station-player {
    grid-template-columns: 48px minmax(0,1fr) 42px 30px;
    gap: 6px;
    padding: 7px 8px;
  }

  .station-player__cover {
    width: 48px;
    height: 48px;
  }

  .station-player__button {
    width: 42px;
    height: 42px;
  }
}

/* Sobald die Desktopzeile nicht mehr zuverlässig passt, vollständiges Menü verwenden. */
@media (max-width:1260px) {
  :root { --header-height:78px; }

  .station-header__bar {
    height:78px;
    grid-template-columns:145px 44px minmax(0,1fr);
    padding:0 14px;
    gap:9px;
  }

  .station-brand { width:140px; }
  .station-brand img { height:64px; }
  .station-nav { display:none !important; }

  .nav-toggle {
    display:flex;
    width:42px;
    height:42px;
    padding:10px;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    border:1px solid var(--line);
    background:transparent;
  }

  .nav-toggle span {
    display:block;
    width:100%;
    height:2px;
    background:var(--green);
  }

  .station-player {
    grid-template-columns:minmax(0,1fr) 40px 30px;
    padding:5px 6px;
  }

  .station-player__cover { display:none; }
  .station-player__button { width:40px; height:40px; }
  .station-player__popup { width:28px; }
  .station-player__track strong { font-size:11px; }
  .station-player__track span { font-size:9px; }
  .station-player__volume { grid-template-columns:11px minmax(32px,1fr); gap:4px; }
  .station-player__volume svg { width:11px; height:11px; }

  .station-nav-mobile {
    display:grid;
    grid-template-columns:1fr 1fr;
    max-height:0;
    overflow:hidden;
    padding:0 18px;
    background:#080b09;
    transition:max-height .3s ease,padding .3s ease;
  }

  .station-nav-mobile a,
  .station-nav-mobile__dropdown > summary {
    padding:14px 8px;
    display:flex;
    align-items:center;
    gap:9px;
    border-bottom:1px solid var(--line);
    font-size:12px;
    font-weight:700;
  }

  .station-nav-mobile a svg,
  .station-nav-mobile__dropdown > summary svg {
    width:17px;
    height:17px;
    flex:0 0 17px;
    overflow:visible;
    fill:none;
    stroke:var(--green);
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .station-nav-mobile__dropdown { grid-column:1/-1; }
  .station-nav-mobile__dropdown > summary { cursor:pointer; list-style:none; }
  .station-nav-mobile__dropdown > summary::-webkit-details-marker { display:none; }
  .station-nav-mobile__chevron {
    width:11px !important;
    height:11px !important;
    flex-basis:11px !important;
    margin-left:auto;
    transition:transform .2s ease;
  }
  .station-nav-mobile__dropdown[open] .station-nav-mobile__chevron { transform:rotate(180deg); }
  .station-nav-mobile__dropdown > div {
    display:none;
    grid-template-columns:repeat(3,1fr);
    background:#0d120e;
    border-bottom:1px solid var(--line);
  }
  .station-nav-mobile__dropdown[open] > div { display:grid; }
  .station-nav-mobile__dropdown > div > a {
    padding-left:14px;
    color:#dce2dd;
    font-size:10px;
  }
  .station-nav-mobile__dropdown > div > a svg {
    width:15px;
    height:15px;
    flex-basis:15px;
  }

  .station-nav-mobile__social {
    grid-column:1/-1;
    padding:14px 8px 4px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }

  .station-nav-mobile__social > span {
    color:#8e988f;
    font-size:9px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
  }

  .station-nav-mobile__social > div { display:flex; gap:7px; }
  .station-nav-mobile .station-nav-mobile__social a {
    width:36px;
    height:36px;
    padding:0;
    display:grid;
    place-items:center;
    color:var(--green);
    border:1px solid rgba(186,255,57,.25);
    border-radius:50%;
  }
  .station-nav-mobile .station-nav-mobile__social a svg {
    width:17px;
    height:17px;
    flex-basis:17px;
  }
  .station-nav-mobile__social .is-filled { fill:currentColor; stroke:none; }
  .station-nav-mobile__social b { font:400 17px/1 'Alata',sans-serif; }
  .nav-open .station-nav-mobile { max-height:900px; padding:10px 18px 18px; }
}

/* Werbeportal als eigener CTA unter den vier Social-Media-Karten. */
.site-social nav > a.site-social__portal {
  grid-column:1 / -1;
  min-height:118px;
  margin-top:5px;
  border-color:rgba(186,255,57,.42);
  border-top-color:var(--green);
  background:
    radial-gradient(circle at 88% 50%,rgba(186,255,57,.12),transparent 26%),
    linear-gradient(145deg,#111811,#080b09);
}

.site-social nav > a.site-social__portal strong {
  font-size:clamp(22px,2vw,30px);
}

.site-social nav > a.site-social__portal small {
  color:var(--green);
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media (max-width:680px) {
  .site-social nav > a.site-social__portal {
    grid-column:1;
    min-height:105px;
  }
}