/*
Theme Name: Reclameradar
Author: Jolan Delecluyse
Description: Educatief WordPress-thema over mediaproductie en reclame voor leerlingen 2de graad secundair onderwijs. Drie lagen: productie, sluikreclame, targeting.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: reclameradar
Tags: education, classic-theme, custom-menu, custom-logo, featured-images
*/

/* ============================================================
   INHOUDSOPGAVE
   1. Design-tokens (CSS-variabelen)
   2. Reset + base
   3. Typografie
   4. Links
   5. Afbeeldingen
   6. Container + utilities
   7. Grid (.grid-3)
   8. Knoppen (.btn)
   9. Toegankelijkheid (skip-link, screen-reader)
   10. Site-header
   11. Hamburger-knop + menu
   12. Site-footer
   13. Templates (Fase 4) - page, single, archive, hero, lagen
   14. Shortcodes (Fase 5) - reclamevoorbeeld, tipkaart
   15. H5P-integratie (Fase 6)
   ============================================================ */


/* -- 1. Design-tokens --------------------------------------- */

:root {
    /* Kleuren */
    --c-primary:      #0B2545;
    --c-primary-ink:  #ffffff;   /* tekst bovenop primary */
    --c-accent:       #FFD60A;
    --c-accent-ink:   #1A1A1A;   /* tekst bovenop accent */
    --c-bg:           #F8F9FB;
    --c-surface:      #ffffff;   /* kaarten, secties */
    --c-text:         #1A1A1A;
    --c-muted:        #5b6573;
    --c-line:         #e4e7ec;

    /* Fonts */
    --f-title: 'Space Grotesk', system-ui, sans-serif;
    --f-body:  'Inter',         system-ui, sans-serif;

    /* Radius */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 16px;

    /* Spacing-schaal */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 1rem;
    --s-4: 1.5rem;
    --s-5: 2rem;
    --s-6: 3rem;
    --s-7: 4rem;

    /* Layout */
    --container-max: 1200px;
    --reading-max:   42rem;      /* ~700px leesbreedte voor pagina's */
}


/* -- 2. Reset + base ---------------------------------------- */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}


/* -- 3. Typografie ------------------------------------------ */

h1, h2, h3, h4 {
    font-family: var(--f-title);
    color: var(--c-primary);
    line-height: 1.2;
    margin: 0 0 var(--s-3);
    font-weight: 700;
}

/* Vloeiende schaal met clamp(min, ideaal, max). */
h1 { font-size: clamp(2rem,   4vw + 1rem,    3rem);    }
h2 { font-size: clamp(1.5rem, 2.5vw + 1rem,  2.25rem); }
h3 { font-size: clamp(1.25rem, 1.5vw + 1rem, 1.5rem);  }
h4 { font-size: 1.125rem; }

p {
    margin: 0 0 var(--s-3);
}

small {
    font-size: 0.875rem;
    color: var(--c-muted);
}


/* -- 4. Links ----------------------------------------------- */

a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Muishover: gele achtergrond, donkere tekst. */
a:hover {
    color: var(--c-accent-ink);
    background: var(--c-accent);
}
/* Keyboard-focus wordt verzorgd door :focus-visible in sectie 9
   zodat de focus-ring ZICHTBAAR blijft voor toetsenbord-gebruikers. */


/* -- 5. Afbeeldingen ---------------------------------------- */

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


/* -- 6. Container + utilities ------------------------------- */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--s-3);
}

@media (min-width: 768px) {
    .container { padding-inline: var(--s-4); }
}

/* Leesbreedte voor pagina's (Fase 4). */
.reading {
    max-width: var(--reading-max);
    margin-inline: auto;
}


/* -- 7. Grid -------------------------------------------------

   .grid-3 : 1 kolom op mobiel, 3 kolommen vanaf 768px.
   Wordt gebruikt op de homepage (3 lagen-sectie) en archive.
   ------------------------------------------------------------ */

.grid-3 {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* -- 8. Knoppen --------------------------------------------- */

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-family: var(--f-title);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    border: 2px solid var(--c-primary);
    border-radius: var(--r-md);
    background: var(--c-primary);
    color: var(--c-primary-ink);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn:hover,
.btn:focus {
    transform: translateY(-2px);
    background: var(--c-accent);
    color: var(--c-accent-ink);
    border-color: var(--c-accent);
}

.btn--secondary {
    background: transparent;
    color: var(--c-primary);
}

.btn--accent {
    background: var(--c-accent);
    color: var(--c-accent-ink);
    border-color: var(--c-accent);
}

.btn--accent:hover,
.btn--accent:focus {
    background: var(--c-primary);
    color: var(--c-primary-ink);
    border-color: var(--c-primary);
}


/* -- 9. Toegankelijkheid ------------------------------------ */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: absolute;
    top: var(--s-2);
    left: var(--s-2);
    width: auto;
    height: auto;
    padding: var(--s-2) var(--s-3);
    margin: 0;
    clip: auto;
    background: var(--c-primary);
    color: var(--c-primary-ink);
    text-decoration: none;
    z-index: 1000;
    border-radius: var(--r-sm);
}

/* Duidelijke focus-ring voor toetsenbord-navigatie. */
:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}


/* -- 10. Site-header ---------------------------------------- */

.site-header {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    padding-block: var(--s-3);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.site-branding .site-title {
    font-family: var(--f-title);
    font-weight: 700;
    font-size: 1.375rem;
    text-decoration: none;
    color: var(--c-primary);
}

.site-branding .site-title:hover,
.site-branding .site-title:focus {
    background: transparent;
    color: var(--c-primary);
}

/* Custom logo netjes binnen de header schalen. */
.custom-logo-link img {
    max-height: 2.5rem;
    width: auto;
}


/* -- 11. Hamburger-knop + menu ------------------------------ */

.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 2.25rem;
    height: 1.75rem;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.menu-toggle__bar {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--c-primary);
    border-radius: var(--r-sm);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hamburger verandert in een X als het menu open is. */
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
    transform: translateY(0.625rem) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
    opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
    transform: translateY(-0.625rem) rotate(-45deg);
}

/* Mobile-first: menu verborgen, tenzij .is-open via JS. */
.site-nav {
    flex-basis: 100%;
    display: none;
}

.site-nav.is-open {
    display: block;
}

.site-nav .menu {
    list-style: none;
    padding: 0;
    margin: var(--s-3) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.site-nav .menu a {
    display: block;
    padding: var(--s-2) 0;
    text-decoration: none;
    color: var(--c-primary);
    border-bottom: 1px solid var(--c-line);
    font-family: var(--f-title);
    font-weight: 500;
}

.site-nav .menu a:hover,
.site-nav .menu a:focus {
    color: var(--c-accent-ink);
    background: var(--c-accent);
}

/* Huidige pagina visueel markeren. */
.site-nav .current-menu-item > a {
    border-bottom-color: var(--c-accent);
}

/* Desktop: hamburger weg, menu horizontaal. */
@media (min-width: 768px) {

    .menu-toggle {
        display: none;
    }

    .site-nav {
        flex-basis: auto;
        display: block;
    }

    .site-nav .menu {
        flex-direction: row;
        gap: var(--s-5);
        margin: 0;
    }

    .site-nav .menu a {
        border-bottom: 2px solid transparent;
        padding: var(--s-1) 0;
    }

    .site-nav .menu a:hover,
    .site-nav .menu a:focus {
        background: transparent;
        color: var(--c-primary);
        border-bottom-color: var(--c-accent);
    }

    .site-nav .current-menu-item > a {
        border-bottom-color: var(--c-accent);
    }
}


/* -- 12. Site-footer ---------------------------------------- */

.site-footer {
    margin-top: var(--s-7);
    padding-block: var(--s-5);
    background: var(--c-primary);
    color: var(--c-primary-ink);
}

.site-footer a {
    color: var(--c-primary-ink);
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--c-accent-ink);
    background: var(--c-accent);
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    align-items: flex-start;
}

.site-footer__nav .menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
}

.site-footer__copy {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 768px) {
    .site-footer__inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}


/* -- 13. Templates (Fase 4) ---------------------------------

   Pagina, blogpost, archive en homepage-secties. Hergebruikt
   bestaande tokens en grid-utilities uit secties 1 en 7.
   ----------------------------------------------------------- */

/* ---- Page / single gedeelde onderdelen ---- */

.page-header {
    margin-top: var(--s-5);
    margin-bottom: var(--s-4);
}

.page-title {
    margin: 0 0 var(--s-2);
}

.page-thumbnail {
    margin: 0 0 var(--s-5);
    overflow: hidden;
    border-radius: var(--r-lg);
}

.page-thumbnail img {
    width: 100%;
    object-fit: cover;
    max-height: 28rem;
}

.page-content {
    margin-bottom: var(--s-6);
}

.page-content h2 {
    margin-top: var(--s-5);
}

.page-content h3 {
    margin-top: var(--s-4);
}

/* Blockquote voor geciteerd materiaal. */
.page-content blockquote {
    margin: var(--s-4) 0;
    padding: var(--s-3) var(--s-4);
    border-left: 4px solid var(--c-accent);
    background: var(--c-surface);
    font-style: italic;
    border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* Blogpost meta */
.entry-meta {
    margin: 0 0 var(--s-3);
    color: var(--c-muted);
    font-size: 0.9375rem;
}

.entry-meta__sep {
    margin-inline: var(--s-1);
}

.entry-footer {
    margin-top: var(--s-6);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-line);
}


/* ---- Referentielijst volgens APA-normen ----

   Gebruik in een pagina (Gutenberg: voeg een "HTML"-blok toe):

     <ol class="referenties">
       <li>De Jaegher, J. (2019). <em>Multimedia</em>. Averbode.</li>
       <li>Vives. (2025). <em>Leerlijn mediawijsheid</em>. ...</li>
     </ol>

   APA-regel: hangende inspringing - eerste regel aan de marge,
   volgende regels 2em ingesprongen. We verbergen de nummering
   want APA toont alfabetisch zonder nummers of bullets.
*/
.referenties,
.bronnen {
    list-style: none;
    padding-left: 0;
    margin: var(--s-4) 0 var(--s-6);
}

.referenties li,
.bronnen li {
    padding-left: 2em;
    text-indent: -2em;
    margin-bottom: var(--s-3);
    line-height: 1.5;
}

.referenties li a,
.bronnen li a {
    word-break: break-word;  /* lange URLs breken netjes af */
}


/* ---- Archive (blogoverzicht) ---- */

.archive-header {
    margin-top: var(--s-5);
    margin-bottom: var(--s-5);
    text-align: center;
}

.archive-description {
    color: var(--c-muted);
}

.post-grid {
    margin-bottom: var(--s-6);
}

.post-card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(11, 37, 69, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-card:hover,
.post-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(11, 37, 69, 0.12);
}

.post-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.post-card__link:hover,
.post-card__link:focus {
    background: transparent;
    color: inherit;
}

.post-card__thumb {
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--c-bg);
}

.post-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card__body {
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.post-card__title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--c-primary);
}

.post-card__meta {
    margin: 0;
    font-size: 0.875rem;
    color: var(--c-muted);
}

.post-card__excerpt {
    margin: 0;
    color: var(--c-text);
}

.post-card__more {
    font-family: var(--f-title);
    font-weight: 700;
    color: var(--c-primary);
}


/* ---- Paginering ---- */

.pagination,
.nav-links {
    margin: var(--s-5) 0;
}

.page-numbers {
    display: inline-block;
    padding: 0.5rem 0.875rem;
    margin-right: var(--s-1);
    text-decoration: none;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-line);
    color: var(--c-primary);
}

.page-numbers.current {
    background: var(--c-primary);
    color: var(--c-primary-ink);
    border-color: var(--c-primary);
}


/* ---- Homepage: hero ---- */

.hero {
    background: var(--c-primary);
    color: var(--c-primary-ink);
    padding-block: var(--s-7);
    position: relative;
    overflow: hidden;
}

/* Subtiele accent-cirkel rechtsboven voor visuele tension. */
.hero::after {
    content: "";
    position: absolute;
    top: -6rem;
    right: -6rem;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: var(--c-accent);
    opacity: 0.25;
    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: 1;
    max-width: 48rem;
}

.hero__eyebrow {
    margin: 0 0 var(--s-2);
    font-family: var(--f-title);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--c-accent);
    font-size: 0.875rem;
}

.hero__title {
    color: var(--c-primary-ink);
    font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
    margin: 0 0 var(--s-3);
}

.hero__lead {
    font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem);
    margin: 0 0 var(--s-4);
    opacity: 0.92;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: 0;
}

/* Secondary knop binnen hero: witte variant voor contrast. */
.hero .btn--secondary {
    background: transparent;
    color: var(--c-primary-ink);
    border-color: var(--c-primary-ink);
}

.hero .btn--secondary:hover,
.hero .btn--secondary:focus {
    background: var(--c-primary-ink);
    color: var(--c-primary);
    border-color: var(--c-primary-ink);
}


/* ---- Homepage: 3 lagen-sectie ---- */

.lagen {
    padding-block: var(--s-7);
}

.section-header {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto var(--s-5);
}

.section-header__lead {
    color: var(--c-muted);
    font-size: 1.125rem;
}

.laag-card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    box-shadow: 0 1px 3px rgba(11, 37, 69, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.laag-card:hover,
.laag-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(11, 37, 69, 0.12);
}

.laag-card__icon {
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    background: var(--c-accent);
    color: var(--c-primary);
    border-radius: var(--r-md);
    margin-bottom: var(--s-1);
}

.laag-card__title {
    margin: 0;
    font-size: 1.25rem;
}

.laag-card__body {
    margin: 0;
    color: var(--c-text);
    flex-grow: 1;
}

.laag-card__link {
    align-self: flex-start;
    font-family: var(--f-title);
    font-weight: 700;
    text-decoration: none;
    color: var(--c-primary);
    padding-bottom: 2px;
    border-bottom: 2px solid var(--c-accent);
}

.laag-card__link:hover,
.laag-card__link:focus {
    background: transparent;
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
}


/* ---- Homepage: secundaire CTA-strip ---- */

.cta-strip {
    background: var(--c-accent);
    color: var(--c-accent-ink);
    padding-block: var(--s-6);
    text-align: center;
}

.cta-strip__title {
    color: var(--c-accent-ink);
    margin: 0 0 var(--s-2);
}

.cta-strip__body {
    max-width: 36rem;
    margin: 0 auto var(--s-4);
}

/* Binnen CTA-strip: primary-knop omgedraaid voor contrast. */
.cta-strip .btn--accent {
    background: var(--c-primary);
    color: var(--c-primary-ink);
    border-color: var(--c-primary);
}

.cta-strip .btn--accent:hover,
.cta-strip .btn--accent:focus {
    background: var(--c-primary-ink);
    color: var(--c-primary);
    border-color: var(--c-primary-ink);
}


/* -- 14. Shortcodes (Fase 5) --------------------------------

   CSS voor [reclamevoorbeeld] en [tipkaart].
   De PHP-kant staat in functions.php, sectie 3.
   ----------------------------------------------------------- */


/* ---- [reclamevoorbeeld] ---- */

.reclamevoorbeeld {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin: var(--s-5) 0;
    padding: var(--s-4);
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 3px rgba(11, 37, 69, 0.06);
}

.reclamevoorbeeld__afbeelding {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-md);
    background: var(--c-bg);
}

.reclamevoorbeeld__body {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin: 0;
}

.reclamevoorbeeld__titel {
    margin: 0;
    font-size: 1.25rem;
    color: var(--c-primary);
}

.reclamevoorbeeld__analyse p:last-child {
    margin-bottom: 0;
}

/* Vanaf 640px: afbeelding links, tekst rechts. */
@media (min-width: 640px) {
    .reclamevoorbeeld {
        flex-direction: row;
        align-items: flex-start;
    }

    .reclamevoorbeeld__afbeelding {
        flex: 0 0 40%;
        max-width: 18rem;
    }

    .reclamevoorbeeld__body {
        flex: 1;
    }
}


/* ---- [tipkaart] ---- */

.tipkaart {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    align-items: stretch;
    margin: var(--s-4) 0;
    background: var(--c-surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(11, 37, 69, 0.06);
}

.tipkaart__nummer {
    display: grid;
    place-items: center;
    min-width: 4rem;
    padding: var(--s-3);
    background: var(--c-accent);
    color: var(--c-accent-ink);
    font-family: var(--f-title);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
}

.tipkaart__body {
    padding: var(--s-3) var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.tipkaart__titel {
    margin: 0;
    font-size: 1.125rem;
    color: var(--c-primary);
}

.tipkaart__tekst p:last-child {
    margin-bottom: 0;
}


/* -- 15. H5P-integratie (Fase 6) ----------------------------

   H5P render een interactieve oefening in een iframe. Wij passen
   enkel de wrapper aan zodat het in het design past:
   - volle breedte op mobiel
   - gecentreerd met max-breedte en zachte schaduw op desktop
   - afgeronde hoeken overeen met de rest van het thema
   ----------------------------------------------------------- */

.h5p-iframe-wrapper {
    max-width: 100%;
    margin: var(--s-5) auto;
    background: var(--c-surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(11, 37, 69, 0.06);
}

.h5p-iframe {
    width: 100%;
    border: 0;
    display: block;
}

@media (min-width: 768px) {
    .h5p-iframe-wrapper {
        max-width: 44rem;
        box-shadow: 0 8px 20px rgba(11, 37, 69, 0.08);
    }
}