/* overrides.css (full file) */

html {
  font-size: 16px;
}

@media (min-width: 48rem) {
  html { font-size: 17px; }
}

@media (min-width: 58rem) {
  html { font-size: 18px; }
}

@media (min-width: 72rem) {
  html { font-size: 19px; }
}

@media (min-width: 80rem) {
  html { font-size: 20px; }
}

/* ------------------------------------------------------------
   Desktop: keep your existing theme intact, only neutralize
   the "layout-reverse" flip so sidebar is always LEFT.
   (This does NOT touch colors, spacing, typography, etc.)
------------------------------------------------------------ */
@media (min-width: 48em) {
  .layout-reverse .sidebar {
    left: 0;
    right: auto;
  }

  .layout-reverse .content {
    margin-left: calc(var(--sidebar-width) + var(--content-gutter));
    margin-right: var(--scrollbar-offset);
  }
}

/* ------------------------------------------------------------
   Webplayer: keep styling, only move overlay to the RIGHT
------------------------------------------------------------ */
.lp-player--overlay {
  right: 1.5rem;
  left: auto;
}

/* If you want it a bit tighter on mobile */
@media (max-width: 47.99em) {
  .lp-player--overlay {
    right: 1rem;
    left: auto;
    bottom: 1rem;
    width: min(520px, 92vw);
  }
}

/* Mobile theme for Radiobende.nl
   Applies only up to 48em. Desktop layout is in site-theme.css. */
@media (max-width: 47.99em) {
  /* Base sizing a bit smaller */
  html { font-size: 15px; }

  body { overflow: auto; }

  /* Compact orange panel */
  .sidebar {
    position: relative;
    padding: 1rem 1.25rem 1rem;
  }

  .sidebar-about { margin-bottom: 0.75rem; }

  .language-switcher {
    margin: 0 auto 0.5rem;
    font-size: 11px;
  }

  /* Smaller backpack */
  .sidebar-logo2 {
    display: block;
    margin: var(--space-3) auto var(--space-1);
    max-width: 80%;
    height: auto;
  }

  /* Smaller backpack */
  .sidebar-logo {
    display: block;
    margin: var(--space-3) auto var(--space-1);
    width: 200px;
    max-width: 45vw;
    height: auto;
  }

  /* Title + description line */
  .sidebar-about h1 {
    font-size: 1.8rem;
    margin-bottom: 0.25rem;
  }

  .sidebar .lead {
    font-size: 0.95rem;
    margin: 0 auto 0.75rem;
    max-width: 22rem;
  }

  /* Footer text a bit smaller */
  .sidebar-footer { margin-top: 0.75rem; }

  .sidebar-footer p {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
  }

  /* --- Hamburger icon --- */
  .nav-toggle {
    position: absolute;
    top: 0.7rem;
    right: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  .nav-toggle-bar {
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: #fff;
  }

  /* No text label on mobile */
  .nav-toggle-label { display: none; }

  /* Menu collapsed by default, opens with body.nav-open */
  .sidebar-nav-wrap { margin-top: 0.5rem; }

  .sidebar .sidebar-nav {
    display: none;
    margin: 0;
    padding: 0.5rem 0;
  }

  body.nav-open .sidebar .sidebar-nav { display: grid; }

  .sidebar .sidebar-nav-item { font-size: 1.05rem; }

  /* Content: normal document flow, not fixed-height scroll */
  .content {
    padding-top: 1.25rem;
    padding-bottom: var(--player-h);
    height: auto;
    overflow: visible;
  }

  .content .container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}