/* jimreeves.eu — uitklapmenu in de menubalk (zie js/nav.js). De basisregels voor .site-nav staan in de pagina zelf. */
.site-nav .nav-item { position: relative; display: inline-flex; align-items: center; }
.site-nav .nav-item > a { padding-right: .1rem; }
.site-nav .sub-toggle { border: 0; background: transparent; color: #fff; font: inherit; font-size: .7rem; line-height: 1; cursor: pointer;
  padding: .3rem .2rem .3rem .35rem; opacity: .8; }
.site-nav .sub-toggle:hover, .site-nav .nav-item:hover .sub-toggle { opacity: 1; color: #ff5500; }
.site-nav .sub-toggle i { transition: transform .2s; display: inline-block; }
.site-nav .nav-item.open .sub-toggle i { transform: rotate(180deg); }

.site-nav .sub { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); min-width: 230px; z-index: 60;
  background: #1c1c1c; border: 1px solid #333; border-radius: 8px; padding: .45rem 0; box-shadow: 0 10px 28px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s; text-align: left; }
.site-nav .nav-item:hover .sub, .site-nav .nav-item:focus-within .sub, .site-nav .nav-item.open .sub {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.site-nav .sub a { display: block; padding: .35rem 1rem; font-weight: 500; white-space: nowrap; }
.site-nav .sub a:hover { background: #2a2a2a; color: #ff5500; }
.site-nav .sub .sub-head { display: block; padding: .3rem 1rem .1rem; color: #8a8a8a; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.site-nav .sub hr { border: 0; border-top: 1px solid #333; margin: .4rem 0; }
.site-nav .sub .ext:after { content: "\2197"; font-size: .8em; opacity: .6; margin-left: .3rem; }

/* Logboek en Uitloggen komen er alleen bij als iemand is ingelogd (js/nav.js) */
.site-nav .nav-uitloggen { opacity: .7; font-weight: 500; }
.site-nav .nav-uitloggen:hover { opacity: 1; }

/* --- smal scherm: hamburgermenu in plaats van de balk (js/nav.js maakt het) --- */
.nav-mobile { display: none; }
.nav-panel { display: none; }
@media (max-width: 767px) {
  .site-nav { display: none !important; }
  .nav-mobile { display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: #1c1c1c; padding: .5rem .9rem; }
  .nav-brand { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.05rem; }
  .nav-brand:hover { color: #ff5500; }
  .nav-burger { position: relative; width: 42px; height: 36px; border: 1px solid #444; border-radius: 6px; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; }
  .nav-burger span { display: block; width: 20px; height: 2px; background: #fff; transition: transform .2s, opacity .2s; }
  .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-panel { display: block; max-height: 0; overflow: hidden; background: #232323; transition: max-height .25s ease; }
  .nav-panel.open { max-height: 80vh; overflow: auto; border-bottom: 3px solid #ff5500; }
  .nav-panel a { display: block; color: #fff; text-decoration: none; padding: .7rem 1.1rem; border-top: 1px solid #333; }
  .nav-panel a.np-main { font-weight: 700; }
  .nav-panel a.np-sub { padding-left: 2rem; font-weight: 500; color: #ddd; font-size: .95rem; }
  .nav-panel a.active { color: #3687ef; }
  .nav-panel a:hover, .nav-panel a:active { background: #2e2e2e; color: #ff5500; }
  .nav-panel a.ext:after { content: "\2197"; font-size: .8em; opacity: .6; margin-left: .3rem; }
  .nav-panel .np-head { display: block; padding: .55rem 1.1rem .15rem; color: #8a8a8a; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; border-top: 1px solid #333; }
}
@media (prefers-reduced-motion: reduce) { .nav-panel, .nav-burger span { transition: none; } }
@media (prefers-reduced-motion: reduce) { .site-nav .sub, .site-nav .sub-toggle i { transition: none; } }

/* De menubalk blijft bovenin staan bij het scrollen (ook het hamburgermenu op een smal scherm). */
.site-nav { position: sticky; top: 0; z-index: 70; }
@media (max-width: 767px) {
  .nav-mobile { position: sticky; top: 0; z-index: 70; }
  .nav-panel { position: sticky; top: 0; z-index: 69; }
}

/* Voettekst onderaan elke pagina: waar de shows te horen zijn, de wegwijzers en het copyright.
   Donker, zodat hij duidelijk als voettekst leest en niet als onderdeel van de pagina. */
.eg-voet { padding: 2.2rem 1rem 2.4rem; text-align: center; background: #1c1c1c; color: #9a9a9a;
           font: 400 15px/1.6 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
.eg-voet img { width: 150px; height: auto; display: inline-block; }
.eg-voet .eg-zin { margin: .6rem 0 0; color: #cfcfcf; }
.eg-voet a { color: #e8b64c; text-decoration: none; }
.eg-voet a:hover { color: #fff; text-decoration: underline; }
/* de uitzendtijden, in twee kolommen zolang het scherm het toelaat */
.eg-tijden { margin: 1.4rem auto 0; max-width: 760px; text-align: left; }
.eg-tijden .eg-kop { display: block; text-align: center; color: #fff; font-weight: 700;
                     font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 .6rem; }
.eg-tijden ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.4rem; }
.eg-tijden li { break-inside: avoid; padding: .18rem 0; font-size: .88rem; color: #bdbdbd; white-space: nowrap; }
.eg-tijden li b { color: #e8b64c; font-weight: 700; margin-right: .3rem; }
.eg-tijden li span { color: #7d7d7d; }
.eg-tijden li span::before { content: " \2014 "; }
@media (max-width: 575px) { .eg-tijden ul { columns: 1; } .eg-tijden li { text-align: center; } }

.eg-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem; margin: 1.2rem 0 0; }
.eg-links a { color: #fff; font-weight: 600; font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; }
.eg-links a:hover { color: #e8b64c; text-decoration: none; }
.eg-copy { margin: 1.1rem 0 0; font-size: .82rem; color: #7d7d7d; }