/******* BEGIN TTS *******/

/* =================================================================
   1. REGULAR TEXT & RECTANGULAR IMAGES HIGHLIGHT
   ================================================================= */
.icd-speaking-image {
    /* Snug, matching border outline for normal landscape/portrait images */
    box-shadow: 0 0 5px blueviolet !important;
    border-radius: 0px !important;
    
    transition: box-shadow 0.2s ease-in-out, border-radius 0.2s ease-in-out;
}

/* =================================================================
   2. UNIVERSAL ROUNDED OVERRIDE (FOR ALL CIRCULAR IMAGES)
   ================================================================= */
/* Matches any <figure> whose ID starts with "idImg_round_" */
figure[id^="idImg_round_"] img.icd-speaking-image,
/* Flexible fallback for the core WordPress block style variation if ever used */
.wp-block-image.is-style-rounded img.icd-speaking-image {
    
    /* Force both the element canvas and its shadow to render as a perfect circle */
    border-radius: 50% !important;
    
    /* Safely forces the picture contents to stay inside the circular boundary */
    overflow: hidden !important;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  overflow-wrap: normal; /* deprecated: word-wrap: normal; */
  direction: ltr; /* left to right */
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
  /* background:white; */
}

/* BEGIN Responsive Flexbox */
* {
  box-sizing: border-box;
}

#idFlexMenu {
	margin: 15px; /* ruimte voor de glowing_border */
	display: none;
}

/* De hoofdcontainer van de gehele play bar */
.flex-container {
    display: flex !important;
    flex-direction: row;
    align-items: center !important;
    box-sizing: border-box !important;
    
    margin-left:  15px !important;
    margin-right: 10px !important;
    margin-top:    0px !important;
    margin-bottom: 0px !important;
    
    /* 🔴 VERANDER DE VASTE HOOGTE NAAR INTERNE ADEMRUIMTE: */
    height: auto !important;             /* Laat de hoogte flexibel bepalen */
    padding-top:    0px !important;
    padding-bottom: 0px !important;
    overflow: visible !important;        /* Dwingt de browser om de box-shadow aan de onderkant WEL te tonen */
	
    position: relative !important;       /* Maakt het mogelijk om z-index te gebruiken */
    z-index: 999 !important;             /* Dwingt de balk (en zijn schaduw) BOVENOP de rest van de pagina */
}	

/* TTS active menu border */
/* @@@weg .wp-block-kadence-advancedbtn.kb-buttons-wrap.active { */
#idFlexMenu.active {	
	border: 2px solid #0078cd !important;
    display: inline-flex !important; /* Makes the box wrap tightly around buttons */
    padding: 0px !important;          /* 🟢 Geen extra padding toevoegen! */
    border-radius: 20px !important;  /* Optional: gives it a pill-shaped 'audio player' look */	
}

/* Visual Feedback while the voice is actually speaking:
   The "Glowing" Border */
#idFlexMenu.glowing-border {
    box-shadow: 0 0 15px blueviolet;
    transition: box-shadow 0.3s ease-in-out;
}

#idFlexMenu.inactive {
	display: none;
}

/* linkerdeel van de balk */
.flex-item-left {
  display: flex !important;
  align-items: center !important;     /* 🟢 Centreert de knop verticaal */
  justify-content: center !important; /* Centreert de knop horizontaal */
  background-color: transparent !important; /* #f1f1f1; */
  padding: 0 !important;              /* 🟢 VERWIJDERT DE DIKMAKENDE PADDING! (verticale obesitas*/
  height: 100% !important;
}

/* rechterdeel van de balk */
.flex-item-right {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;     /* 🟢 Trekt alle losse knoppen en groepen op de centrale as */
    justify-content: flex-start !important;
    gap: 10px !important;
}

/* 2. De groepen (volume en snelheid) gedragen zich exact hetzelfde */
.flex-item-right .control-group {
    display: flex !important;           /* 🟢 Maakt ook van de groep een flexbox */
    flex-direction: row !important;
    align-items: center !important;     /* 🟢 Trekt de knop, de slider en het getal op de centrale as */
    gap: 4px !important;
}

/* 3. Alle knoppen overal even groot (geen dansende hoogtes) */
.flex-item-right button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    width: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.flex-item-right #btnPlay {
	margin-left:  15px !important; /* Duwt de knop x pixels van de linkerrand af */
}

/* ZORG DAT DE SLIDERS EN OUTPUTS NETJES AANSLUITEN --- */
.control-group .horizontal-slider {
    margin: 0 4px !important;           /* Compacte ruimte naast de knop */
    vertical-align: middle !important;
}

.control-group .div_output {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 4px !important;
}

/* standaard verbergen van de sliders en de getallen (outputs) binnen de playbar */
.flex-item-right .control-group .horizontal-slider,
.flex-item-right .control-group .div_output {
    display: none !important; /* JavaScript kan dit overschrijven met 'inline-block' */
}


@media screen and (max-width: 600px) {
	/* On screens that are 600px wide or less,
	   make the columns stack on top of each other instead of next to each other */
	.flex-container {
		flex-direction: column;
	}

    .flex-item-right {
        gap: 4px !important;            /* Iets compacter op mobiel */
    }
    
    .flex-item-right button {
        height: 36px !important;        /* Knoppen iets compacter op mobiel */
        width:  36px !important;
    }

    /* Als de slider op mobiel geopend wordt, houden we hem smal zodat de sluitknop past */
    .flex-item-right .horizontal-slider {
        width: 35px !important;
    }
}

/* END Responsive Flexbox */

input[type=range] {
	vertical-align: middle;
	margin: 0;
}

.div_output{
	width: 30px;
	text-align: center;
	font-size: 14px;
}

/* button colors
   exclusief .btnTTS.inactive*/
.btnPlay.inactive, .btnPause.inactive, .btnStop.inactive,
.btnVolume_on.inactive, .btnVolume_off.inactive,
.btnVolume.inactive, .btnSpeed.inactive, .btnClose.inactive {
	background-color:white; color: black;
	display: none;
}

.btnTTS.active, .btnPlay.active, .btnPause.active, .btnStop.active,
.btnVolume_on.active, .btnVolume_off.active,
.btnVolume.active, .btnSpeed.active, .btnClose.active {
	background-color:#004A7F; color: white; /* #004A7F donkerblauw */
	display: inline-block;
} 

/* icon colors */
.iTTS.inactive   	  {color: #78A75A;} /* dark green */
.iPlay.inactive  	  {color: #78A75A;} /* dark green */
.iPause.inactive 	  {color: #78A75A;} /* dark green */
.iStop.inactive  	  {color: red; background:white;} /* red */
.iVolume_on.inactive  {color: black; background:white;}
.iVolume_off.inactive {color: black; background:white;}
.iVolume.inactive	  {color: black; background:white;}
.iSpeed.inactive 	  {color: black; background:white;}
.iClose.inactive 	  {color: black; background:white;}

.iTTS.active   		  {color: #78A75A;} /* dark green */
.iPlay.active  		  {color: white; background:#004A7F;} /* #004A7F donkerblauw */
.iPause.active 		  {color: white; background:#004A7F;} /* #004A7F donkerblauw */
.iStop.active  		  {color: white; background:#004A7F;} /* #004A7F donkerblauw */
.iVolume_on.active    {color: white; background:#004A7F;} /* #004A7F donkerblauw */
.iVolume_off.active   {color: white; background:#004A7F;} /* #004A7F donkerblauw */
.iVolume.active		  {color: white; background:#004A7F;} /* #004A7F donkerblauw */
.iSpeed.active 		  {color: white; background:#004A7F;} /* #004A7F donkerblauw */
.iClose.active 		  {color: white; background:#004A7F;} /* #004A7F donkerblauw */

.word {
    transition: background-color 0.1s ease, color 0.1s ease;
    padding: 0 2px;
    border-radius: 3px;
}

.word.highlight {
    background-color: blueviolet !important;
    color: white !important;
}

.reading-active {
    background-color: rgba(255, 255, 0, 0.2); /* Light yellow tint */
    border-left: 4px solid #005A9C; /* Strong blue accent */
    transition: background-color 0.3s ease;
}

/* .wp-block-kadence-advancedheading {
	 margin-top: 0 !important;
}
 */
.kt-inside-inner-col > .wp-block-kadence-advancedheading:first-child {
    margin-top: 0;
}

/******* END TTS *******/