/* ================================
   1. Variables / Costum properties
================================*/
   /*Herbruikbare waarden (kleuren, afmetingen, fonts) in één plek definiëren. */

   :root
   /* bv. --color-primary, --font-sans, --radius-button */

 /* ===========================
    2. Basis Styles 
 =========================== */

 /*De globale, “baseline” typografie en links, paragrafen, headings, body-settings etc.
  Alles wat op elke pagina van toepassing is a en headings */

  body { 

  margin: 0;

  font-family: 'Roboto', sans-serif;

}


/* ===========================
    3. Layout
 ============================== */
 /*De grote container‐ en grid‐structuur die bepaalt hoe de pagina is opgebouwd: header, footer, grid-containers, flex-wrappers.
 .grid-container {   de containerbreedte + centrering .topbar,.footer {
   header- en footer-regels */

/* CSS VOOR HAMBURGER MENU MOBIEL*/
.topbar {

  background-color: #004e75;

  padding: 1rem 0;

}
 
.topbar-inner {

  display: flex;

  align-items: center;

}
 
.hamburger {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  width: 24px;

  height: 18px;

  margin-left: 10px;

  cursor: pointer;

}
 
.hamburger span {

  display: block;

  height: 3px;

  background-color: white;

  border-radius: 2px;

}
 
.logo-button {

  background-color: #e3f2f1;

  border-radius: 15px;

  padding: 0.4rem 1rem;

  display: inline-flex;

  align-items: center;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

}
 
.logo-img {

  height: 32px;

  margin-right: 0.5rem;

}
 
.logo-text {

  color: #00939c;

  font-weight: 700;

  font-size: 1.2rem;

}
 
/* Overlay menu */

#mobile-overlay-menu {

  position: fixed;

  inset: 0;

  background: #004e75;

  color: white;

  display: flex;

  flex-direction: column;

  padding: 0;

  z-index: 1000;

  transform: translateY(-100%);

  transition: transform 0.3s ease-in-out;

  box-sizing: border-box;

  overflow-y: auto; /* maakt menu scrollbaar */

}
 
/* Menu open status */

#mobile-overlay-menu.open {

  transform: translateY(0);

}


#mobile-overlay-menu[aria-hidden="true"] {

  display: none !important;

}
 

#mobile-overlay-menu[aria-hidden="false"] {

  display: block; /* of jouw standaard .open-stijl */

}


#mobile-overlay-menu.open, 
#mobile-overlay-menu[aria-hidden="false"] {
  
  display: flex;            
  
  flex-direction: column;    
  
  transform: translateY(0);

}


/* Logo altijd zichtbaar bovenaan in overlay */

.menu-logo {

  display: inline-flex;

  align-items: center;

  background-color: #e3f2f1;

  border-bottom: 1px solid white;

  border-radius: 15px;

  padding: 0.5rem 1rem;

  box-shadow: 0 4px 6px rgba(0,0,0,0.2);

  margin: 1rem auto;

  flex-shrink: 0; /* voorkom dat logo kleiner wordt */

}

 
/* Menu items onder het logo */

#mobile-overlay-menu > a {

  display: block;

  width: 100%;

  color: white;

  font-size: 1rem;

  text-decoration: none;

  padding: 0.6rem 0;

  border-bottom: 1px solid white;

  text-align: center;

  box-sizing: border-box;

  transition: background-color 0.2s ease-in-out;

  flex-shrink: 0;

}

 
#mobile-overlay-menu > a:last-child {

  border-bottom: none;

}

 
#mobile-overlay-menu a:hover {

  background-color: #033A57;

  color: #fff;

}

 
.menu-logo .logo-text {

  color: #00939c; /* bijvoorbeeld goudkleur, of elke gewenste kleur */

}


/*-- CSS VOOR BOTTOM NAVIGATIE BAR MOBIEL / FOOTER-------------*/
footer.navigatieBar {

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  display: flex;

  justify-content: space-around;

  align-items: center;

  background: #003D5E;

  border-top: 1px solid #ccc;

  padding: 0.5rem 0;

  z-index: 999;

}


.navigatieBar button {

  display: flex;

  flex-direction: column;

  align-items: center;

  background: none;

  border: none;

  font-size: 0.8rem;

  color: #fff;

  cursor: pointer;

}
 

.navigatieBar i {

  font-size: 1.5rem;

  padding-bottom: 5px;

}


.home-arc-button {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-top: -10px;

}


.arc {

  position: absolute;

  top: 0;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 50px;

  height: 25px;

  background: #003D5E;

  border-radius: 50px 50px 0 0;

  z-index: 0;

}
 

.home-button {

  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

}
 

.home-button img {

  width: 40px;

  height: 40px;

}
 
.home-button span {

  margin-top: 6px;
  
  color:#fff;

}
 
.mobile-app-icon-bar .home-button {

  transform: translateY(-10px);

}


 /* ===========================
    4. Components
 =========================== */
 /* Alle herbruikbare UI‐elementen, zoals knoppen, kaarten, navigatie‐balken, modals, tabs. 
 Ieder component krijgt zijn eigen blok in de CSS.*/

 /* 4.1 Buttons */
.btn--confirm {

  background-color: rgba(0, 80, 122, 1);

  border-radius: 1rem;

  font-size: 1.25rem;

  margin: 0.5rem; 
  
}

/* 4.2 Navigatie */  /* je nav- en skip-link-regels */

.skip-link {

  position: absolute;

  top: -40px;      /* buiten beeld */

  left: 0;

  color: white !important;  /* wit, forceren tegen andere stijlen */

  background-color: #004e75;

  padding: 8px 16px;

  z-index: 100;

  text-decoration: none;

  font-weight: bold;

  transition: top 0.3s ease;

}
 
.skip-link:focus {

  top: 0;          /* zichtbaar binnen beeld */

  outline: 3px solid #fff;

}


/* 4.3 Speech-bubble */

/*de tekstwolk zelf*/
.speech-bubble {

  position: relative;

  background: #A4DAEC;

  padding: 1.5rem;

  border-radius: 1rem;

  box-shadow: 0 4px 8px rgba(0,0,0,0.1);

  overflow: visible; /*Probeersel kijken of ik de tekstwolk scrollbaar kan maken*/

}


/*dit is het pijltje/staart onderaan*/
.speech-bubble:after {

	content: '';

	position: absolute;

	bottom: -1.25em;

	left: 75%;

  transform: translateX(-50%);

  border-width: 1.25em 0.9375em 0;

  border-style: solid;

  border-color: #a9e2f3 transparent;

}


/* Scroll-container binnenin */
.speech-bubble__inner {

  max-height: 20rem;       

  overflow-y: auto;         /* verticale scrollbalk als content te lang is */

  margin: 0 0 1rem;         /* alleen bottom margin voor de knop eronder */

  padding-right: 0.5rem;    /* ruimte voor scrollbar */

}

/* WCAG 2.1.1 zodat je in het tekstwolkje kan scrollen met het toetsenboord*/
.speech-bubble__inner:focus {

  outline: 3px solid #FFD700;

  outline-offset: 2px;

}


/* 4.4----DATUM EN TIJDSTIP-----------*/

.date-time-section {

  margin: 1rem 0;

}

.date-text {

  font-weight: 600;

  font-size: 1.25rem;    /* = 20px tegen 16px base */

  margin-bottom: 0.25rem;

  color: #003D5E;

}

.time-text {

  font-size: 3rem;       /* = 48px tegen 16px base */

  margin: 0;

  color: #003D5E;

}

.date-time-cell {

  text-align: center;

}

/* 4.5 Activiteiten-knoppen*/
/*  KNOPPEN index-----------------------------------*/

/* 4.5.1. Verticaal ruimte tussen elke rij buttons */
.activiteiten-section .button-cell {

  margin-bottom: 1rem;

}

/* 4.5.2 De blauwe, vierkante knop-achtergrond */
.activiteiten-section .button-cell .icon-button {

  /* Responsive vierkant: 80% van de cel, max 150px breed */
  width: 80%;

  max-width: 150px;

  aspect-ratio: 1 / 1;

  margin: 0 auto;

  display: flex;

  justify-content: center;

  align-items: center;


  background: #003D5E;

  border-radius: 12px;

  text-decoration: none;

  padding: 0;

  min-width: 2.75em;   /* voor WCAG 2.5.8*/

  min-height: 2.75em;

}

/* 4.5.3 Grootte van PNG-icoon in de knop */
.activiteiten-section .button-cell .button-icon {

  width:75%;     /* ± de helft van de knopbreedte */

  height: auto;

  display: block;

}

/* 4.5.4 Label-tekst onder de knop */
.activiteiten-section .button-cell .button-label {

  margin-top: 0.5rem;

  font-size: 1rem;

  line-height: 1.2;

  color: #003D5E;

  text-align: center;

}


/* 4.6 Panda GIF & Microfoon*/

/*voor de home pagina schuin*/
.panda-gif__img {

  display: block;

  width: 100%;

  max-width: 200px;

  height: auto;

  margin-left: -0.6rem;  

}

/* Microfoon-knop styling */
.mic-button {

  width: 4rem;            

  height: 4rem;

  padding: 0;

  border-radius: 50%;

  background-color: #00507A;

  display: flex;

  align-items: center;

  justify-content: center;

}

.mic-button .mic-icon {

  width: 3rem;          /* pas de PNG-grootte aan */

  height: auto;

}

/*------------------------------------------------------------------------------
ZODAT DE PANDA EN MIC ICOON NIET VERDWIJNEN BIJ INZOOMEN------------------------
------------------------------------------------------------------------------*/

.panda-mic-section .grid-x {

  display: flex;
  
  flex-wrap: wrap;
  
  align-items: center;
}


.panda-mic-section .cell img,
.panda-mic-section .cell button {

  max-width: 100%; 

  height: auto;

}


/*zodat panda en mic niet achter footer verdwijnen tijden zoom 400%*/
main#main-content {

  padding-bottom: 15vh; /*betekent 15% van de viewport hoogte*/

}


/* 4.7 Panda-bubble & vraagtekst*/


.panda-bubble-section {

  margin: 4rem 1rem;  /* ruimte voor de staart en bovenin */

  text-align: center;

}

/*extra styling voor de vraagtekst*/
.vraag-tekst {

  margin: 1rem;

  font-size: 1.5rem;

  color:black; /*voldoet aan WCAG 1.4.3 Contrast Minimum AA maar ook aan 1.4.6 Contrast Versterkt AAAA*/

}


/* Foundation button-stijlen kun ik eventueel finetunen */
.btn--reminder {

  background-color: rgba(0, 80, 122, 1);

  border-radius: 1rem;

  font-size: 1.25rem;

  margin: 0.5rem;

  display: inline-flex;

  align-items: center;

  justify-content: center;
  
  flex-wrap: wrap;
  
  padding: 0.5em 1em;

  white-space: normal;

  overflow-wrap: break-word;

  line-height: 1.2;  /* 1.2× de font-size */

}


/* Basis styling voor de “Terug” knop */
.btn-back {

  display: inline-flex;         /* icon + tekst naast elkaar */
  
  gap: 0.5rem;                  /* ruimte tussen icon en label */
  
  border-radius: 1rem;          
  
  background-color: rgba(0, 80, 122, 1);    /* Geslaagd voor WCAG 1.4.3 AA & 1.4.6 AAA & 1.4.11 AAA*/
  
  color: #fff;                    /*Contrastverhouding 8,6:1*/
  
  padding: 1rem 1.5rem;      
  
  transition: background .2s ease;

}



/* Zorg dat het SVG‐path meekleurt met de tekst */
.btn-back__icon {
  
  width: 1rem;
  
  height: 1rem;
  
  stroke: white;
  
  flex-shrink: 0;

}


#dag-antwoord {

  background-color: #FFFFFF;       /* wit, 1.0 contrastratio-achtergrond vs. body */

  color:            #003D5E;       /* donkerblauw, >7:1 contrast op wit */

  border:           2px solid #003D5E;
  
  padding:          0.75rem;

  font-size:        1rem;

  border-radius:    0.5rem;

  resize:           vertical;

}


/* Placeholder kleur met minimaal 4.5:1 contrast op wit */
#dag-antwoord::placeholder {
  
  color: #6A6A6A;                  /* ongeveer 5.2:1 contrast op #FFFFFF */

} 


/* ===========================
   5. Helpers & Utility-Classes
   =========================== */

   /*Kleine, generieke classes die je op eender welk element kunt plakken om snel iets te regelen: 
   visueel verbergen, marges, flex-helpers, clearfix, focus-styles.*/

   /* Screen-readers zien dit alleen*/
.visually-hidden,
.sr-only {

  position: absolute !important;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}

/* ============================================
   Duidelijke focus-states 
   WCAG AA succescriterium 2.4.7 Focus Visible
   ============================================ */

/*Voor extra toegankelijkheid*/ 
button:focus,
a:focus,
input:focus,
textarea:focus {

  outline: 3px solid #FFD700; /*contrast hoger dan 3:1 tegen witte achtergrond voor WCAG AA niveau*/ 

  outline-offset: 2px;

}


/*Extra focus-stijl voor form‐velden */
input:focus,
textarea:focus {

  background-color: #FFFF88;      

  border: 2px solid #00507A;      

  box-shadow: 0 0 0 3px rgba(0,147,156,0.3);

  outline: none;                  /*geen dubbele outline */

}

/* Error boodschap voor form WCAG 3.3.3 Error suggestion*/
.error-message {

  display: none;

  color: #c00;

  font-size: 0.9rem;

  margin-top: 0.25rem;

}

/*Als er een fout is, moet <p> zichtbaar worden*/
.error-message.is-visible {

  display: block;

}


/* Gevalideerd veld met fout */
textarea[aria-invalid="true"] {

  border-color: #c00;

  box-shadow: 0 0 0 2px rgba(255,0,0,0.5);

}

/* Focus‐state voor toetsenbord (WCAG 2.4.7) */
textarea:focus {

  outline: 3px solid #00507A;

  outline-offset: 2px;
}

 /* ===========================
   6. Page-specific overrides
 =========================== */

 /*------Vraag van de dag 1 pagina---------*/
.page--vraag-van-de-dag .panda-mic-section {

  margin-top: 7rem; 

}


/*----------HERINNERING PAGINA--------*/
.page--herinnering .button-klaar-section {

  margin: 1rem;

}

.page--herinnering .panda-mic-section {

  margin-top: 2rem;
}


/*------Antwoord verwerken pagina---------*/
/* Mobiel: full-width */
.page--nadenken img {

  max-width: 100%;

  height: auto;

  display: block;

  margin: 0 auto;

}

.loading-section{

  margin-top: 2rem;
}


.nadenken{
  margin-top: 3rem;
}


/*------REACTIE 1 PAGINA-----------*/
.page--reactie-1 .panda-mic-section{

  margin-bottom: 6rem;

} 


/*-------- UITLEG PAGINA ---------------*/
.page--uitleg h3{

  margin-top: 0;
  
  font-weight: bold;

}


.page--uitleg .button-begrijpen-section{

  margin: 1rem; 

}


.page--uitleg p {

  margin: 0;

}


/*------ ANEKDOTE PAGINA --------------*/
.page--anekdote h2{

  margin-top: 0;

  font-weight: bold;

}


.page--anekdote .button-verder-section{

  margin: 0 1rem; 

}


/*------------- DE VRAAG VAN DE DAG PAGINA ------------------------------*/

.page--de-vraag-van-de-dag .panda-mic-section{
  
  margin-bottom: 7rem;

}


.page--de-vraag-van-de-dag .input-field {

  margin: 1rem;        /* ruimte rondom textarea */

}


.page--de-vraag-van-de-dag textarea {

  width: 100%;

  min-height: 6rem;

  font-size: 1rem;

  padding: 0.75rem;

  border: 1px solid #ccc;

  border-radius: 0.5rem;

  resize: vertical;

}

 /* ===========================
   7. Media-queriesoverrides
 =========================== */
    /* RESPONSIEF CODE VOOR INDEX*/


@media screen and (min-width: 40em) {

  .date-time-cell {

    text-align: left;

    margin-left: 2rem;

  }

  
 
  /*grotere font sizes op tablet */

  .time-text {

    font-size: 5rem;

  }
 
  .date-text {

    font-size: 2.5rem;

  }
 
.activiteiten-section {

    max-width: 720px;  

    margin-left: auto; 

    margin-right: 0;

  }

  /*VOOR NU EVEN DEZE CODE NIET 
  .navigatieBar {
    display: none !important;
  }*/



/*Voor de fontsize in alle tekstwolken*/
  .vraag-tekst {

    font-size: 2rem;
  
  }

  .button {
  
    font-size: 1.5rem;
  
  }


 .page--herinnering .panda-bubble-section {
 
  margin-top: 9rem;
 
}


 .page--uitleg .panda-bubble-section {

  margin-top: 10rem;

}


.page--de-vraag-van-de-dag .panda-bubble-section{

  margin-top: 6rem;

}


 /*--------VOOR ANTWOORD VERWERKEN-----------*/
.page--nadenken .loading-section .loading,
.page--nadenken .nadenken img {
 
  max-width: 35%;       /* niet full-width op iPad */
 
  width: auto;
 
  height: auto;
 
  margin: 0 auto;        /* centreer */

}
}