/* ============================================================
   FaWoWa - base.css
   Reset, typografie en globale elementen
   ============================================================ */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--light);
    color: var(--text);
    line-height: 1.6;
    padding-top: var(--header-height);
    min-height: 100vh;
}

/* Typografie */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 1rem;
    line-height: 1.3;
}

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover { color: var(--primary-dark); }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol { padding-left: 1.5rem; }

/* Vlaggen iconen */
.fi {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 2px;
}

/* Hulpklassen */
.fww-hide-mobile { display: block; }
.fww-show-mobile { display: none; }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.mt-auto { margin-top: auto; }

.rich-content { line-height: 1.4 !important; color: #334155; }
.rich-content p { margin: 0 0 0.5rem 0 !important; }
.rich-content img, .rich-content iframe.inline-video {
    max-width: 100%;
    border-radius: var(--radius-sm);
    margin: 10px !important;
}
/* Ensure floated media have exactly 10px margins per user request */
.rich-content img[style*="float: left"], .rich-content iframe.inline-video[style*="float: left"] { margin: 10px 10px 10px 0 !important; }
.rich-content img[style*="float: right"], .rich-content iframe.inline-video[style*="float: right"] { margin: 10px 0 10px 10px !important; }
.rich-content img[style*="display: block"], .rich-content iframe.inline-video[style*="display: block"] { margin: 10px auto !important; }

.rich-content iframe:not(.inline-video) {
    max-width: 100%;
    margin: 10px 0 !important;
}
.rich-content::after { content: ""; clear: both; display: table; }
.news-content-home { line-height: 1.5; }
.news-content-home p { margin-bottom: 0.5rem; }
.news-content-home img {
    border-radius: 0 !important;
    box-shadow: var(--shadow);
    margin: 15px 0;
    max-width: 100%;
}
.news-content-home iframe {
    border-radius: 0 !important;
    box-shadow: var(--shadow);
    margin: 15px 0;
    width: 100%;
    min-height: 400px;
    border: none;
}

/* Video wrapper (16:9 — geen zwarte balken) */
.video-responsive {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-width: 960px;
    margin: 1rem auto;
    overflow: hidden;
}
.video-responsive iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
}

/* Verwijder hardcoded wrapper divs uit DB-content */
div[style*="height: 700px"],
div[style*="height: 750px"],
div[style*="height: 850px"],
div[style*="height: 900px"],
div[style*="padding-bottom: 56.25%"] {
    display: contents !important;
}

@media (max-width: 768px) {
    body { padding-top: var(--header-height-mobile); }
    .fww-hide-mobile { display: none !important; }
    .fww-show-mobile { display: block !important; }
    h1 { font-size: 1.8rem !important; }
    .video-responsive { margin: 1rem auto; }
}