/* Global Styles */
html {
    scroll-behavior: smooth;
}

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

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f5f6f5;
    overflow-x: hidden;
    overflow-y: auto;
}

.container {
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Header */
.header {
    background: linear-gradient(90deg, #1a2a44 0%, #2c3e50 100%);
    color: #fff;
    padding: 1.5rem 0;
    position: sticky;
    top: 0;
    box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.2);
    isolation: isolate;
    z-index: 1000;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    font-size: 1.8rem;
    font-weight: 700;
}

.nav ul {
    display: flex;
    list-style: none;
}

.nav-link {
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active,
.nav-link:active,
.nav-link.hover {
    color: #f1c40f;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero Section */
.hero {
    background: url('./images/background2.jpeg') no-repeat center/cover;
    color: #fff;
    text-align: center;
    padding: 6.25rem 0;
    position: relative;
    min-height: 40vh;
    isolation: isolate;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.hero-content {
    position: relative;
}

.hero h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #f1c40f;
    color: #1a2a44;
    text-decoration: none;
    border-radius: 0.3125rem;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.2s ease;
    touch-action: manipulation;
}

.btn:hover,
.btn:active,
.btn.hover {
    background: #d4ac0d;
    transform: translateY(-0.125rem);
}

/* Services Section */
.services {
    padding: 5rem 0;
    background: #fff;
}

.services h2,
.about h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #1a2a44;
}

.downloads h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
    gap: 2rem;
}

.service-card {
    background: #ecf0f1;
    padding: 2rem;
    border-radius: 0.625rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, opacity 0.3s ease;
    touch-action: manipulation;
    position: relative;
}

.service-card:hover {
    transform: translateY(-0.625rem);
    box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.2);
    background: #e0e4e5;
}

.service-card.disappear {
    opacity: 0;
}

/* Mobile-specific disappear effect */
@media (hover: none) {
    .service-card:active,
    .service-card.hover {
        transform: none;
        box-shadow: none;
        background: #ecf0f1; /* Reset to original background */
    }
}

.service-card i {
    font-size: 2.5rem;
    color: #f1c40f;
    margin-bottom: 1rem;
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #1a2a44;
}

.service-card p {
    color: #1a2a44;
}

/* Books Section */
.books {
    padding: 5rem 0;
    background: url('./images/background.jpeg') no-repeat center/cover;
    position: relative;
    isolation: isolate;
    min-height: 80vh;
}

.books::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
}

/* About Section */
.about {
    background: #fff;
    padding: 5rem 0;
}

.about-content {
    max-width: 50rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
    flex-wrap: wrap;
}

.about-text {
    flex: 1;
    min-width: 10rem;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}

.about-content p {
    font-size: 1.1rem;
    color: #1a2a44;
    margin: 0;
}

.about-image {
    flex: 2;
    max-width: 40%;
    height: auto;
    border-radius: 0.5rem;
    object-fit: cover;
}

/* Spacer for thin whitespace */
.about-content div.spacer#spacer-nl,
.about-content div.spacer#spacer-en {
    height: 8px !important;
    min-height: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    overflow: hidden !important;
    display: block !important;
    background: transparent !important;
}

/* Language-specific visibility */
.about-content p.lang-nl,
.about-content p.lang-en,
.about-content div.lang-nl,
.about-content div.lang-en {
    display: none;
}

html[lang="nl"] .about-content p.lang-nl,
html[lang="nl"] .about-content div.lang-nl,
html[lang="en"] .about-content p.lang-en,
html[lang="en"] .about-content div.lang-en {
    display: block;
}

/* Fallback: Add margin-top to second paragraph if spacer fails */
.about-content p.lang-nl:nth-of-type(2),
.about-content p.lang-en:nth-of-type(2) {
    margin-top: 1px !important;
}

.about-link {
    color: #1a2a44;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.about-link:hover,
.about-link:active,
.about-link.hover {
    color: #f1c40f;
    text-decoration: underline;
}

/* Downloads Section */
.downloads {
    padding: 4rem 0;
    background: url('./images/background3.jpeg') no-repeat center/cover;
    color: #fff;
    position: relative;
    isolation: isolate;
    min-height: 50vh;
}

.downloads::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.downloads-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 44rem;
    margin: 0 auto;
    justify-content: center;
    position: relative;
}

.downloads h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.flyers {
    max-width: 30rem;
    margin: 0 auto;
}

.flyers ul {
    list-style: none;
}

.flyers li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.flyers li i {
    margin-right: 0.5rem;
    color: #f1c40f;
    width: 1.5rem;
    text-align: center;
}

.flyers li a {
    color: #fff;
    text-decoration: none;
    font-weight: normal;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.flyers li a:hover,
.flyers li a:active,
.flyers li a.hover {
    color: #f1c40f;
    text-decoration: underline;
}

/* Footer Section */
.footer {
    background: #1a2a44;
    color: #fff;
    text-align: center;
    padding: 2rem 0;
}

.footer-contact {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1.5rem;
    max-width: 44rem;
    margin: 0 auto;
    gap: 2rem;
}

.footer-contact.show {
    display: flex;
}

.footer-contact-left,
.footer-contact-right {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-width: 12rem;
}

.footer-contact-left {
    width: 50%;
    max-width: 20rem;
}

.footer-contact-right {
    width: 35%;
    max-width: 15rem;
    text-align: left;
}

.footer-contact p {
    margin: 0.25rem 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

.footer-contact i {
    color: #f1c40f;
    margin-right: 0.5rem;
    width: 1.5rem;
    text-align: center;
}

.footer-contact a,
.footer-contact span {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.footer-contact a:hover,
.footer-contact a:active,
.footer-contact a.hover {
    color: #f1c40f;
    text-decoration: underline;
}

.footer p.lang-nl,
.footer p.lang-en {
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

/* Language Toggle */
.lang-toggle {
    margin-top: 1rem;
    text-align: center;
}

.lang-toggle select {
    padding: 0.1875rem 1rem 0.1875rem 0.375rem;
    font-size: 0.75rem;
    cursor: pointer;
    background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6"><path d="M0 1.5 L3 4.5 L6 1.5" stroke="%23333" stroke-width="1.5" fill="none"/></svg>') no-repeat right 0.25rem center;
    background-size: 0.375rem;
    border: 0.0625rem solid #ccc;
    border-radius: 0.1875rem;
    appearance: none;
    min-width: 3rem;
}

.lang-toggle select:focus {
    outline: 2px solid #f1c40f;
    outline-offset: 1px;
}

.lang-en {
    display: none;
}

html[lang="en"] .lang-nl {
    display: none;
}

html[lang="en"] .lang-en {
    display: block;
}

/* Responsive Design */
@media (max-width: 30rem) {
    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 40%;
        background: #1a2a44;
        padding: 1rem 0;
    }

    .nav.active {
        display: block;
    }

    .nav ul {
        flex-direction: column;
        text-align: center;
    }

    .nav-link {
        display: block;
        padding: 1rem;
    }

    .menu-toggle {
        display: block;
    }

    .hero {
        padding: 3.75rem 0;
        min-height: 50vh;
    }

    .hero h2 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .downloads {
        min-height: 50vh;
    }

    .downloads-content {
        flex-direction: column;
        align-items: center;
    }

    .flyers {
        max-width: 30rem;
    }

    .footer-contact {
        flex-direction: column;
        align-items: center;
        max-width: 30rem;
        padding: 0 1rem;
        gap: 1rem;
    }

    .footer-contact-left,
    .footer-contact-right {
        width: 100%;
        max-width: none;
        text-align: center;
    }

    .footer-contact p {
        justify-content: center;
    }

    .lang-toggle {
        margin-top: 0.75rem;
    }

    /* Adjust about section for mobile */
    .about-content {
        flex-direction: column; /* Stack text and image vertically */
        align-items: center; /* Center content */
        max-width: 100%; /* Allow full width of container */
        padding: 0 1rem; /* Ensure padding for readability */
    }

    .about-text {
        max-width: 100%; /* Text takes full width */
        min-width: 0; /* Remove min-width constraint */
        text-align: left; /* Align text to the left */
    }

    .about-image {
        max-width: 100%; /* Reduce width to make image smaller */
        max-height: 20rem; /* Cap height to reduce overall size */
        height: auto; /* Maintain aspect ratio */
    }
}

/* Disable hover effects on devices that don't support hover, except for service-card */
@media (hover: none) {
    .nav-link:hover,
    .btn:hover,
    .about-link:hover,
    .flyers li a:hover,
    .footer-contact a:hover {
        transform: none;
        box-shadow: none;
        background: none;
        color: inherit;
        text-decoration: none;
    }
}