/* ========== BASIS / RESET ========== */
html, body { overflow-x: hidden !important; margin: 0; }

.kogel-radio-wrapper {
  position: relative;
  width: min(720px, 92vw) !important;  /* desktop cap + responsive */
  margin: 0 auto 16px !important;
  overflow: visible !important;        /* VU mag boven/onder uitsteken */
}

.kogel-vumeter-canvas { display: none !important; }   /* oude canvas uit */

.kogel-rds-display { font-size: clamp(18px, 5vw, 42px) !important; }
.kogel-radio-wrapper .kogel-rds-text {
  position: relative;
  z-index: 5 !important;               /* altijd boven de LEDs */
}
.kogel-radio-wrapper.vumeter-active .kogel-rds-text { display: block !important; }

/* ========== VU-METER ========== */
.led-vumeter{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 22% !important;              /* <<< eindpunt desktop/tablet */
  opacity: 0; transition: opacity .3s ease;
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px;
  background: rgba(192,192,192,0.9);
  border-radius: 6px;
  box-shadow: inset 0 0 4px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.5);
  pointer-events: none;                /* niet klikbaar, puur visueel */
  z-index: 2;                          /* onder RDS-tekst, boven radio */
}
.kogel-radio-wrapper.vumeter-active .led-vumeter{ opacity: 1; z-index: 4 !important; }

.led-row { display: flex; gap: 4px; }
.led { width: 12px; height: 20px; background: rgba(255,255,255,.1); border-radius: 2px; }

/* ========== TOGGLE-KNOP: ONZICHTBAAR MAAR KLIKBAAR (ALLE SCHERMEN) ========== */
.kogel-vumeter-toggle {
  background: transparent !important;
  border: 0 !important;
  opacity: 0 !important;            /* verberg visueel */
  pointer-events: auto !important;  /* WEL klikbaar */
  cursor: pointer;
  outline: none !important;
  z-index: 9999 !important;         /* gegarandeerd boven alles */
  /* laten we positie/afmeting ongemoeid; die had je al goed staan */
}

/* ========== MOBIEL — PORTRAIT ========== */
@media (max-width: 480px) and (orientation: portrait) {
  .kogel-radio-wrapper {
    width: 94vw !important;
    max-width: 94vw !important;
    margin: 0 auto 12px !important;
  }
  .kogel-rds-display {
    top: 46% !important; left: 30% !important;
    width: 40% !important; height: 26% !important;
    font-size: clamp(10px, 6.2vw, 28px) !important;
  }
  .kogel-rds-text { letter-spacing: 0.4px; font-size: 0.7em !important; } /* jouw wens */

  .led-vumeter { bottom: 28% !important; gap: 2px; padding: 4px; }        /* <<< eindpunt portrait */
  .led { width: 8px !important; height: 12px !important; }
}

/* ========== MOBIEL — LANDSCAPE ========== */
@media (max-width: 820px) and (orientation: landscape) {
  .kogel-radio-wrapper {
    width: 96vw !important; max-width: 96vw !important;
    margin: 0 auto 8px !important;
  }
  .kogel-rds-display {
    top: 44% !important; left: 32% !important;
    width: 42% !important; height: 28% !important;
    font-size: clamp(16px, 5vw, 32px) !important;   /* iets groter in landscape */
  }
  .kogel-rds-text { font-size: 1.1em !important; letter-spacing: 0.5px; } /* opt. boost */

  .led-vumeter { bottom: 24% !important; gap: 2px; padding: 4px; }        /* <<< eindpunt landscape */
  .led { width: 9px !important; height: 13px !important; }
}

/* ========== XL DESKTOP (optioneel) ========== */
@media (min-width: 1200px){
  .kogel-radio-wrapper{ width: 760px !important; }
}


/* FINAL OVERRIDES — VU e i n d p u n t   o p   d e   r a d i o */
.led-vumeter { bottom: 22% !important; }  /* desktop/tablet */

@media (max-width: 480px) and (orientation: portrait) {
  .led-vumeter { bottom: 101% !important; }  /* mobiel staand */
}

@media (max-width: 820px) and (orientation: landscape) {
  .led-vumeter { bottom: 100% !important; }  /* mobiel liggend */
}

/* zeker weten niet afknippen & boven de radio-laag */
.kogel-radio-wrapper { overflow: visible !important; }
.kogel-radio-wrapper.vumeter-active .led-vumeter { z-index: 4 !important; }


/* Onzichtbare maar klikbare power-knop: ALTijd bovenop */
.kogel-vumeter-toggle{
  position: absolute !important;
  background: transparent !important;
  border: 0 !important;
  opacity: 0 !important;           /* onzichtbaar */
  pointer-events: auto !important; /* wel klikbaar */
  cursor: pointer;
  outline: none !important;
  z-index: 9999 !important;
  /* desktop maat/positie kun je zo laten als in je theme */
}

/* MOBIEL – staand (portrait): positie + grotere hitbox */
@media (max-width: 480px) and (orientation: portrait){
  .kogel-vumeter-toggle{
    top: 30% !important;         /* verplaats desnoods 1–2% */
    left: 86% !important;        /* dit gebruikte je eerder ook */
    transform: translateX(-50%);
    width: 64px !important;      /* royale hitbox */
    height: 64px !important;
  }
}

/* MOBIEL – liggend (landscape): eigen positie + hitbox */
@media (max-width: 820px) and (orientation: landscape){
  .kogel-vumeter-toggle{
    top: 28% !important;
    left: 50% !important;
    transform: translateX(-50%);
    width: 56px !important;
    height: 56px !important;
  }
}

/* Zorg dat de VU niet wordt afgeknipt en boven de radio komt */
.kogel-radio-wrapper{ overflow: visible !important; }
.kogel-radio-wrapper.vumeter-active .led-vumeter{ z-index: 4 !important; }


/* ——— VU-METER: forceer zichtbaarheid bij actief (mobiel & desktop) ——— */
.kogel-radio-wrapper.vumeter-active .led-vumeter{
  display: flex !important;
  opacity: 1 !important;
  z-index: 6 !important;      /* zeker boven de radio-bg */
}

/* ——— Mobiel: eindpunt van de VU ——— */
@media (max-width: 480px) and (orientation: portrait){
  .led-vumeter{ bottom: 100% !important; }
}
@media (max-width: 820px) and (orientation: landscape){
  .led-vumeter{ bottom: 101% !important; }
}

/* ——— Veiligheid: niet afknippen ——— */
.kogel-radio-wrapper{ overflow: visible !important; }



/* zeker weten niet afknippen en zichtbaar */
.kogel-radio-wrapper { overflow: visible !important; }
.kogel-radio-wrapper.vumeter-active .led-vumeter { opacity: 1 !important; z-index: 6 !important; }

/* === FINAL VU POSITION (desktop/tablet + mobiel) === */
html body .kogel-radio-wrapper .led-vumeter { bottom: 22% !important; }   /* desktop/tablet */

@media (max-width: 480px) and (orientation: portrait) {
  html body .kogel-radio-wrapper .led-vumeter { bottom: 100% !important; } /* mobiel staand */
}

@media (max-width: 820px) and (orientation: landscape) {
  html body .kogel-radio-wrapper .led-vumeter { bottom: 99% !important; } /* mobiel liggend */
}

/* zichtbaarheid en stacking bij actief */
html body .kogel-radio-wrapper.vumeter-active .led-vumeter {
  display: flex !important;
  opacity: 1 !important;
  z-index: 6 !important;
}

/* nooit afknippen */
html body .kogel-radio-wrapper { overflow: visible !important; }

/* toggle onzichtbaar maar klikbaar (laat positie/maat zoals je die al had) */
html body .kogel-vumeter-toggle {
  background: transparent !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: auto !important;
  cursor: pointer;
  z-index: 9999 !important;
}

/* =========================
   HEADER – responsive & netjes centreren
========================= */
.site-header, header.site-header, .header, .wp-site-header, .wp-block-group.header {
  display: flex;
  align-items: center;
  justify-content: center;          /* mobile: centreer alles */
  gap: 12px;
  padding: clamp(8px, 2vw, 16px) 12px;
  flex-wrap: wrap;
}

.site-header .site-branding,
.header .site-branding,
.custom-logo-link,
.header .logo {
  flex: 0 1 auto;
}

.main-navigation, .primary-navigation {
  flex: 1 1 100%;
  order: 2;                         /* nav onder logo op mobiel */
}

.main-navigation ul, .primary-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;          /* mobile: menu centreren */
  padding-left: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .site-header, header.site-header, .header, .wp-site-header {
    justify-content: space-between; /* desktop: logo links, menu rechts */
  }
  .main-navigation, .primary-navigation {
    flex: 0 1 auto;
    order: 0;
  }
  .main-navigation ul, .primary-navigation ul {
    justify-content: flex-end;
  }
}

/* =========================
   PLAYER – centreren & schalen
   (Gebruik het eerste dat matcht. Als je kunt, wikkel je player in .pt-player-wrap)
========================= */

/* 1) Als je een wrapper kunt toevoegen rond je player */
.pt-player-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 12px auto;
  max-width: min(520px, 96vw);
}

/* 2) Veelvoorkomende player containers (Luna/shortcode/etc.) */
#lunaplayer,
.lunaplayer,
.luna-player,
.audio-player,
.mejs-container,
.player,
.player-wrap {
  display: block;
  margin-inline: auto !important;   /* centreer */
  max-width: min(520px, 96vw);      /* schaal netjes mee */
}

/* 3) Fallback: centreer het sectieblok waar de player in zit */
.section--player, .player-section, .audio-section {
  text-align: center;
}
.section--player > *, .player-section > *, .audio-section > * {
  margin-inline: auto;
}

/* 4) Mobiel: iets compacter */
@media (max-width: 480px) {
  #lunaplayer,
  .lunaplayer,
  .luna-player,
  .audio-player,
  .mejs-container,
  .player,
  .player-wrap,
  .pt-player-wrap {
    max-width: min(440px, 94vw);
  }
}
/* FINAL OVERRIDES — VU eindpunt */
.led-vumeter { bottom: 22% !important; }  /* desktop/tablet */

@media (max-width: 480px) and (orientation: portrait) {
  .led-vumeter { bottom: 100% !important; }  /* mobiel staand */
}

@media (max-width: 820px) and (orientation: landscape) {
  .led-vumeter { bottom: 99% !important; }  /* mobiel liggend */
}

/* === FINAL OVERRIDES — VU eindpunt per platform === */

/* Desktop / tablet */
@media (min-width: 821px) {
  html body .kogel-radio-wrapper .led-vumeter { bottom: 100% !important; }
}

/* Mobiel staand (portrait) */
@media (max-width: 480px) and (orientation: portrait) {
  html body .kogel-radio-wrapper .led-vumeter { bottom: 101% !important; }
}

/* Mobiel liggend (landscape) */
@media (max-width: 820px) and (orientation: landscape) {
  html body .kogel-radio-wrapper .led-vumeter { bottom: 99% !important; }
}

/* Zeker weten zichtbaar en niet afgeknipt */
html body .kogel-radio-wrapper { overflow: visible !important; }
html body .kogel-radio-wrapper.vumeter-active .led-vumeter {
  opacity: 1 !important;
  z-index: 6 !important;
}