/* Abe's Uitvindingen Website - stijl voor alle pagina's */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #0a1628;
    color: #ffffff;
    font-family: 'Segoe UI', Arial, sans-serif;
    min-height: 100vh;
}

/* Bovenbalk */
header {
    background: linear-gradient(135deg, #0d2347, #1a3a6b);
    border-bottom: 3px solid #4a9eff;
    padding: 24px 32px;
    text-align: center;
}

header h1 {
    font-size: 2.8rem;
    color: #7ec8ff;
    letter-spacing: 2px;
    text-shadow: 0 0 20px #4a9eff88;
}

header p.ondertitel {
    color: #a0c4e8;
    font-size: 1.1rem;
    margin-top: 8px;
}

/* Navigatie terug-knop */
.terug-knop {
    display: inline-block;
    margin: 28px 32px;
    background-color: #1a3a6b;
    color: #7ec8ff;
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 8px;
    border: 2px solid #4a9eff;
    font-size: 1rem;
    transition: background-color 0.2s;
}

.terug-knop:hover {
    background-color: #4a9eff;
    color: #ffffff;
}

/* Startpagina: grid van uitvindingenkaartjes */
.uitvindingen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    padding: 40px 48px;
    max-width: 1100px;
    margin: 0 auto;
}

.uitvinding-kaartje {
    background: linear-gradient(160deg, #1c3455, #243d5e);
    border: 2px solid #4a9eff44;
    border-radius: 18px;
    padding: 36px 28px;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.uitvinding-kaartje:hover {
    transform: translateY(-6px);
    border-color: #4a9eff;
    box-shadow: 0 8px 32px #4a9eff44;
}

.uitvinding-kaartje .emoji {
    font-size: 4rem;
    line-height: 1;
}

.uitvinding-kaartje h2 {
    font-size: 1.4rem;
    color: #7ec8ff;
}

.uitvinding-kaartje p {
    font-size: 0.95rem;
    color: #a0c4e8;
    line-height: 1.5;
}

/* Detail-pagina inhoud */
.pagina-inhoud {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 32px 60px;
}

.pagina-inhoud .uitvinding-emoji {
    font-size: 5rem;
    text-align: center;
    margin: 32px 0 16px;
    display: block;
}

.pagina-inhoud h2 {
    font-size: 1.8rem;
    color: #7ec8ff;
    margin-top: 36px;
    margin-bottom: 12px;
    border-left: 4px solid #4a9eff;
    padding-left: 14px;
}

.pagina-inhoud p {
    font-size: 1.05rem;
    color: #d0e8ff;
    line-height: 1.75;
    margin-bottom: 12px;
}

/* Stap-voor-stap blokjes */
.stappen {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.stap {
    background: #1a3a6b;
    border: 1px solid #4a9eff55;
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.stap .stap-emoji {
    font-size: 2.2rem;
    flex-shrink: 0;
}

.stap .stap-tekst h3 {
    font-size: 1.05rem;
    color: #7ec8ff;
    margin-bottom: 4px;
}

.stap .stap-tekst p {
    font-size: 0.95rem;
    color: #a0c4e8;
    margin-bottom: 0;
}

/* Speciale uitleg-box */
.info-box {
    background: #0d2347;
    border: 2px solid #4a9eff;
    border-radius: 14px;
    padding: 22px 26px;
    margin-top: 20px;
}

.info-box p {
    color: #b8d8f8;
    margin-bottom: 0;
}

/* Fotogalerij — voor de LEGO-foto's van de fabriek */
.foto-galerij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 18px 0 8px;
}

.foto-kaart {
    background: #1a3a6b;
    border: 1px solid #4a9eff55;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: #d0e8ff;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.foto-kaart:hover {
    transform: translateY(-4px);
    border-color: #4a9eff;
    box-shadow: 0 6px 24px #4a9eff55;
}

.foto-kaart img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
    background: #0a1628;
}

.foto-kaart .foto-bijschrift {
    padding: 10px 14px;
    font-size: 0.9rem;
    color: #a0c4e8;
    text-align: center;
}

/* Plattegrond / tekening van de fabriek */
.fabriek-tekening-wrap {
    background: #0d2347;
    border: 2px solid #4a9eff55;
    border-radius: 14px;
    padding: 14px;
    margin: 16px 0 8px;
    overflow-x: auto;
}

.fabriek-tekening {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* LEGO-uitvindingen — kaart met foto en uitleg naast elkaar */
.lego-uitvinding {
    background: #1a3a6b;
    border: 1px solid #4a9eff55;
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 18px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.lego-uitvinding:hover {
    border-color: #4a9eff;
    box-shadow: 0 4px 18px #4a9eff33;
}

.lego-uitvinding-foto {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #0a1628;
    border: 1px solid #4a9eff33;
}

.lego-uitvinding-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lego-uitvinding-tekst {
    flex: 1;
    min-width: 0;
}

.lego-uitvinding-tekst h3 {
    font-size: 1.3rem;
    color: #7ec8ff;
    margin-bottom: 8px;
}

.lego-uitvinding-tekst p {
    font-size: 1rem;
    color: #d0e8ff;
    line-height: 1.6;
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .lego-uitvinding {
        flex-direction: column;
    }
    .lego-uitvinding-foto {
        width: 100%;
        height: 240px;
    }
}

/* Opruimrobot van Abe */
.robot-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0 8px;
}

.opruimrobot {
    width: 340px;
    height: 260px;
    filter: drop-shadow(0 0 18px #1e90ff88);
}

.robot-naam {
    font-size: 1.1rem;
    color: #7ec8ff;
    margin-top: 10px;
    font-weight: bold;
    text-align: center;
}

/* Arm links: zwaait op en neer */
.arm-links {
    transform-origin: 48px 107px;
    animation: arm-zwaai-links 1.4s ease-in-out infinite alternate;
}

/* Arm rechts: zwaait de andere kant op */
.arm-rechts {
    transform-origin: 152px 107px;
    animation: arm-zwaai-rechts 1.4s ease-in-out infinite alternate;
}

/* Onderste armen: bewegen tegengesteld aan bovenste */
.arm-links-onder {
    transform-origin: 50px 155px;
    animation: arm-zwaai-rechts 1.4s ease-in-out infinite alternate;
}

.arm-rechts-onder {
    transform-origin: 150px 155px;
    animation: arm-zwaai-links 1.4s ease-in-out infinite alternate;
}

/* Benen lopen: linkerbeen en rechterbeen wisselen */
.been-links {
    transform-origin: 82px 180px;
    animation: been-stap-links 0.7s ease-in-out infinite alternate;
}

.been-rechts {
    transform-origin: 118px 180px;
    animation: been-stap-rechts 0.7s ease-in-out infinite alternate;
}

/* Wielen draaien — vastgemaakt aan romp, gezien van voren */
.wiel-links {
    transform-origin: 22px 150px;
    animation: wiel-draaien 0.7s linear infinite;
}

.wiel-rechts {
    transform-origin: 178px 150px;
    animation: wiel-draaien 0.7s linear infinite;
}

/* Robot rijdt een beetje heen en weer */
.opruimrobot {
    animation: robot-rijden 2.5s ease-in-out infinite alternate;
}

@keyframes arm-zwaai-links {
    from { transform: rotate(-20deg); }
    to   { transform: rotate(20deg); }
}

@keyframes arm-zwaai-rechts {
    from { transform: rotate(20deg); }
    to   { transform: rotate(-20deg); }
}

@keyframes been-stap-links {
    from { transform: rotate(-18deg) translateY(0px); }
    to   { transform: rotate(18deg) translateY(-4px); }
}

@keyframes been-stap-rechts {
    from { transform: rotate(18deg) translateY(-4px); }
    to   { transform: rotate(-18deg) translateY(0px); }
}

@keyframes wiel-draaien {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes robot-rijden {
    from { transform: translateX(-18px); }
    to   { transform: translateX(18px); }
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    color: #4a6a8a;
    font-size: 0.85rem;
    border-top: 1px solid #1a3a6b;
    margin-top: 40px;
}