/* ==========================================================================
   1. GLOBAL STYLES & ACHTERGROND
   ========================================================================== */
body iframe, 
body {
    box-sizing: border-box;
}

body {
    font-family: Georgia, serif; 
    /* Je originele achtergrondafbeelding loopt naadloos door */
    background: #ccc url(../images/back.jpg);
    margin: 0;
    padding: 0;
}

h1 {  
    font-family: "Trebuchet MS", sans-serif;
    font-weight: bold;
    margin: 1ex 1em;
    font-size: 3em;
}

h2 {
    margin: 1ex 1em;
    font-size: 2em;
}

/* XHTML vereist lowercase voor HTML-elementen in CSS */
a {
    text-decoration: none;
}

/* ===== Voorkomt dubbele achtergronden in het iframe ===== */
div.logo-container,
div.text-container,
body:has(div.logo-container),
body:has(div.text-container) {
    background: transparent !important;
}

/* ==========================================================================
   2. FOTO-TABLE & IFRAME STYLING
   ========================================================================== */
table#foto-tabel {
    width: 100%;
    padding: 0 10%; 
    margin: 0;    
    vertical-align: bottom; 
}

iframe {
    background: transparent; 
    border: none;            
    margin-top: 20px;
    width: 85%;              
    height: auto;            
    min-height: 350px;       /* Zorgt dat er altijd genoeg ruimte is voor de logo's */
}

/* ==========================================================================
   3. TOETSENBORD CONTAINER STYLING
   ========================================================================== */
div.keyboard-container {
    width: 95%;                   /* Schaalt flexibel mee op kleinere schermen/laptops */
    max-width: 1250px;            /* Garandeert de mooie brede look op grote schermen */
    margin: 20px auto;            /* Centreert de behuizing exact in het midden van de pagina */
    padding: 12px 70px 12px 18px; /* Extra rechterpadding voor de uitstekende letter P */
    box-sizing: border-box;
    
    /* ===== NIEUW: Voorkomt dat knoppen door de rand heen breken ===== */
    overflow-x: auto;             /* Voegt een slimme interne scrollbalk toe als het scherm écht te smal is */
    white-space: nowrap;          /* Garandeert dat de toetsenrijen strak op hun regel blijven staan */
    
    /* Strakke, doorzichtige omlijsting met een lichte diepteschaduw */
    border: 2px solid rgba(255, 255, 255, 0.3); 
    border-radius: 12px;          
    background: transparent !important; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
}

/* ==========================================================================
   4. ECHT TOETSENBORD EFFECT (TOETSEN)
   ========================================================================== */
div.keyboard-container table td h2,
div.keyboard-container table td a h2 {
    display: block;               
    margin: 3px 4px;              /* Ruimte rondom de toetsen */
    padding: 6px 0;               /* Fijne padding boven/onder voor de perfecte hoogte */
    width: auto;                  /* Laat de toets de brede cel opvullen */
    min-width: 56px;              /* Basis minimale breedte voor de reguliere toetsen */
    text-align: center;
    box-sizing: border-box;
    font-family: "Trebuchet MS", sans-serif; 
    font-weight: bold;
    color: #4a148c;               /* Je Paarse tekstkleur */
    
    /* Het geliefde fysieke 3D Toetsenbord-uiterlijk */
    background-color: rgba(255, 255, 255, 0.1); 
    border-top: 1px solid rgba(255, 255, 255, 0.45);
    border-left: 1px solid rgba(255, 255, 255, 0.45);
    border-right: 1px solid rgba(0, 0, 0, 0.15);
    border-bottom: 3px solid rgba(34, 0, 94, 0.4); /* De plastic 'schaduwrand' aan de onderkant */
    border-radius: 6px;           
    
    transition: all 0.1s ease-in-out; 
}

/* Hover-effect: Toets licht op bij aanwijzen (alleen voor klikbare links) */
div.keyboard-container table td a:hover h2 {
    background-color: rgba(255, 255, 255, 0.25); 
    border-top-color: rgba(255, 255, 255, 0.7);
    border-left-color: rgba(255, 255, 255, 0.7);
    border-bottom-width: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);   
    cursor: pointer;
}

/* Active-effect: Toets veert fysiek in bij het klikken */
div.keyboard-container table td a:active h2 {
    border-bottom-width: 1px;     
    margin-top: 5px;              
    margin-bottom: 1px;
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); 
}

/* ==========================================================================
   5. EXCLUSIEVE BREEDTE EN UITSTEEK VOOR DE LETTER P
   ========================================================================== */
#toets-p {
    min-width: 95px !important;    /* Breder gemaakt voor een échte langwerpige knop */
    margin-right: -42px !important; /* Schuift de rechterzijde over de onzichtbare kolomwand heen */
    position: relative;            
    z-index: 10;                   
}

/* ==========================================================================
   5b. UNIEKE RECHTE KOLOMCENTRERING VOOR TEKSTLINKS (FOTOGRAFIE / STARTPAGINA)
   ========================================================================== */
div.text-container {
    display: flex !important;
    flex-direction: column !important; /* Zet de knoppen onder elkaar */
    align-items: center !important;    /* Centreert alle middens perfect in het centrum */
    gap: 12px 0 !important;            /* Vaste, rustige ruimte tussen de knoppen */
}

/* De styling voor de losse tekstknopjes zelf (bijv. Fotografie-links) */
div.logo-container a:not(:has(img)),
div.text-container a {
    display: flex !important;                
    justify-content: center !important;  /* Centreert de tekst binnen de knop */
    align-items: center !important;          
    width: max-content !important;     /* Laat de knop strak omsluiten rondom de tekstlengte */
    height: auto !important;           /* Heft het grote vierkante logo-vak op */
    padding: 8px 22px !important;      /* Fijne, rustige ruimte aan de binnenzijde */
    font-family: "Trebuchet MS", sans-serif;
    font-weight: bold;
    color: #4a148c !important;         /* Je vertrouwde paarse kleur */
    box-sizing: border-box;
    
    /* Zelfde 3D-uiterlijk als de toetsenbordknoppen */
    background-color: rgba(255, 255, 255, 0.1); 
    border-top: 1px solid rgba(255, 255, 255, 0.45);
    border-left: 1px solid rgba(255, 255, 255, 0.45);
    border-right: 1px solid rgba(0, 0, 0, 0.15);
    border-bottom: 3px solid rgba(34, 0, 94, 0.4);
    border-radius: 6px;
    transition: all 0.1s ease-in-out;
}

/* Hover-effect voor de tekstknoppen */
div.logo-container a:not(:has(img)):hover,
div.text-container a:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-top-color: rgba(255, 255, 255, 0.7) !important;
    border-left-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer;
}

/* ==========================================================================
   6. LOGO CONTAINER STYLING (SUBPAGINA'S)
   ========================================================================== */
div.logo-container {
    display: flex;
    flex-wrap: wrap;           
    justify-content: center;   
    align-items: center;       
    gap: 20px 30px;            
    box-sizing: border-box;

    /* Exact dezelfde flexibele breedte-instellingen als de keyboard-container */
    width: 95%;                
    max-width: 1250px;            
    margin: 20px auto;            
    padding: 12px 70px 12px 18px; 
    
    /* ===== NIEUW: Zorgt dat logo's op mobiel ook netjes binnen de randen blijven ===== */
    overflow-x: hidden;           

    /* Exact dezelfde omlijning als de keyboard-container */
    border: 2px solid rgba(255, 255, 255, 0.3); 
    border-radius: 12px;          
    background: transparent !important; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
}

/* Elk logo krijgt een vast, onzichtbaar 'vakje' om in te ademen */
div.logo-container a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;              
    height: 110px;             
    box-sizing: border-box;
}

/* De afbeeldingen schalen zichzelf nu perfect binnen dit vakje zonder te vervormen */
div.logo-container a img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border: none;
    display: block;
}