/**
 * GoSafe Ouderparticipatie per Les — Frontend CSS
 *
 * Het OVERZICHT gebruikt dezelfde generieke 'gosafe-' klassen en
 * '--gosafe-kleur-*' variabelen als de GoSafe Vacatures-plugin, zodat de
 * styling van beide overzichten identiek is en met dezelfde CSS (of Elementor
 * Global Styles) aangepast kan worden.
 *
 * De SINGLE lespagina (intro, video, quiz, koppeling) gebruikt de eigen
 * 'gosafe-ol-' klassen en '--gosafe-ol-*' variabelen.
 *
 * Kleurvariabelen worden overschreven via inline <style> vanuit de
 * plugin-instellingen (zie class-assets.php).
 */

/* ============================================================
   CSS VARIABELEN (fallback — worden vanuit PHP overschreven)
   ============================================================ */
:root {
    /* Gedeeld met de vacatures-styling — voor het OVERZICHT */
    --gosafe-kleur-primair:       #1d4ed8;
    --gosafe-kleur-primair-hover: #1739a8;
    --gosafe-kleur-tekst:         #ffffff;
    --gosafe-kleur-bg:            #f5f7fa;
    --gosafe-kleur-kaart-bg:      #ffffff;
    --gosafe-kleur-rand:          #e0e4eb;
    --gosafe-kleur-tekst-hoofd:   #1f2937;
    --gosafe-kleur-tekst-muted:   #6b7280;
    --gosafe-radius:              8px;
    --gosafe-radius-lg:           12px;
    --gosafe-shadow:              0 2px 8px rgba(0,0,0,.08);
    --gosafe-shadow-hover:        0 6px 20px rgba(0,0,0,.12);
    --gosafe-transition:          .2s ease;

    /* Ouderles-specifiek — voor de SINGLE lespagina + quiz */
    --gosafe-ol-kleur-primair:       #1d4ed8;
    --gosafe-ol-kleur-primair-hover: #1739a8;
    --gosafe-ol-kleur-tekst:         #ffffff;
    --gosafe-ol-kleur-bg:            #f5f7fa;
    --gosafe-ol-kleur-rand:          #e0e4eb;
    --gosafe-ol-kleur-tekst-hoofd:   #1f2937;
    --gosafe-ol-kleur-tekst-muted:   #6b7280;
    --gosafe-ol-radius:              8px;
    --gosafe-ol-radius-lg:           12px;
    --gosafe-ol-transition:          .2s ease;
}

/* ============================================================================
   OVERZICHT  (gedeelde 'gosafe-' styling — zelfde look als de vacatures-plugin)
   ============================================================================ */

/* ---- Knoppen ---- */
.gosafe-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         12px 24px;
    border-radius:   var(--gosafe-radius);
    font-size:       .95rem;
    font-weight:     600;
    text-decoration: none;
    cursor:          pointer;
    border:          none;
    transition:      background var(--gosafe-transition), transform var(--gosafe-transition), box-shadow var(--gosafe-transition);
    line-height:     1.4;
}

.gosafe-btn-primary {
    background: var(--gosafe-kleur-primair);
    color:      var(--gosafe-kleur-tekst) !important;
}

.gosafe-btn-primary:hover,
.gosafe-btn-primary:focus-visible {
    background:      var(--gosafe-kleur-primair-hover);
    color:           var(--gosafe-kleur-tekst) !important;
    box-shadow:      var(--gosafe-shadow-hover);
    transform:       translateY(-1px);
    text-decoration: none;
}

/* ---- Tags / badges ---- */
.gosafe-tag {
    display:        inline-block;
    padding:        3px 10px;
    border-radius:  20px;
    font-size:      .78rem;
    font-weight:    600;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.gosafe-tag-video {
    background: color-mix(in srgb, var(--gosafe-kleur-primair) 12%, transparent);
    color:      var(--gosafe-kleur-primair);
}

.gosafe-tag-quiz {
    background: #d1e7dd;
    color:      #0a5c36;
}

/* ---- Grid ---- */
.gosafe-ouderles-overzicht {
    display: grid;
    gap:     28px;
}

.gosafe-grid-1 { grid-template-columns: 1fr; }
.gosafe-grid-2 { grid-template-columns: repeat(2, 1fr); }
.gosafe-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
    .gosafe-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .gosafe-grid-2,
    .gosafe-grid-3 { grid-template-columns: 1fr; }
}

/* ---- Kaart ---- */
.gosafe-card {
    background:    var(--gosafe-kleur-kaart-bg);
    border:        1px solid var(--gosafe-kleur-rand);
    border-radius: var(--gosafe-radius-lg);
    overflow:      hidden;
    display:       flex;
    flex-direction:column;
    box-shadow:    var(--gosafe-shadow);
    transition:    box-shadow var(--gosafe-transition), transform var(--gosafe-transition);
    color:         var(--gosafe-kleur-tekst-hoofd);
}

.gosafe-card:hover {
    box-shadow: var(--gosafe-shadow-hover);
    transform:  translateY(-3px);
}

.gosafe-card-thumbnail img {
    width:      100%;
    height:     180px;
    object-fit: cover;
    display:    block;
}

.gosafe-card-body {
    padding:        24px;
    display:        flex;
    flex-direction: column;
    flex:           1;
    gap:            10px;
}

.gosafe-card-taxonomy {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
}

.gosafe-card-title {
    margin:      0;
    font-size:   1.15rem;
    line-height: 1.35;
}

.gosafe-card-title a {
    color:           var(--gosafe-kleur-tekst-hoofd) !important;
    text-decoration: none;
}

.gosafe-card-title a:hover,
.gosafe-card-title a:focus {
    color:           var(--gosafe-kleur-primair) !important;
    text-decoration: underline;
}

.gosafe-card-intro {
    margin:      0;
    font-size:   .9rem;
    color:       var(--gosafe-kleur-tekst-muted);
    flex:        1;
    line-height: 1.6;
}

.gosafe-card-body .gosafe-btn {
    align-self: flex-start;
    margin-top: auto;
}

.gosafe-geen-resultaten {
    color:       var(--gosafe-kleur-tekst-muted);
    font-style:  italic;
    grid-column: 1 / -1;
}

/* ---- Archief header ---- */
.gosafe-archive-header { margin-bottom: 36px; }
.gosafe-archive-title  { margin: 0; }

/* ---- Wrap ---- */
.gosafe-ouderles-wrap {
    max-width: 1200px;
    margin:    0 auto;
    padding:   0 20px;
}

/* ============================================================================
   SINGLE LESPAGINA  (ouderles-specifieke 'gosafe-ol-' styling)
   ============================================================================ */

/* ---- Layout ---- */
.gosafe-ol-single {
    max-width:   1280px;
    margin:      0 auto;
    padding:     0 24px;
    box-sizing:  border-box;
}

.gosafe-ol-breadcrumb {
    margin-bottom: 12px;
}

.gosafe-ol-breadcrumb a {
    color:           var(--gosafe-ol-kleur-primair) !important;
    text-decoration: none;
    font-size:       .9rem;
}

.gosafe-ol-breadcrumb a:hover { text-decoration: underline; }

.gosafe-ol-header {
    padding:       36px 0 28px;
    margin-bottom: 36px;
}

.gosafe-ol-title {
    margin:        8px 0 0;
    text-align:    center;
    font-family:   "Raleway", Sans-serif;
    font-size:     45px;
    font-weight:   400;
    color:         #202148;
    line-height:   1.2;
}

/* ---- Knop (o.a. de auto-koppelingslink op de gekoppelde bestaande les) ----
   Namespaced met '--gosafe-ol-*' zodat de admin-gekozen kleur overal correct
   werkt, ook op pagina's buiten het [gosafe_ouderles_overzicht]-grid. */
.gosafe-ol-btn {
    display:         inline-flex;
    align-items:     center;
    align-self:      flex-start;
    gap:             6px;
    padding:         12px 24px;
    border-radius:   var(--gosafe-ol-radius);
    font-size:       .95rem;
    font-weight:     600;
    text-decoration: none;
    cursor:          pointer;
    border:          none;
    transition:      background var(--gosafe-ol-transition), transform var(--gosafe-ol-transition), box-shadow var(--gosafe-ol-transition);
    line-height:     1.4;
}

.gosafe-ol-btn-primary {
    background: var(--gosafe-ol-kleur-primair);
    color:      var(--gosafe-ol-kleur-tekst) !important;
}

.gosafe-ol-btn-primary:hover,
.gosafe-ol-btn-primary:focus-visible {
    background:      var(--gosafe-ol-kleur-primair-hover);
    color:           var(--gosafe-ol-kleur-tekst) !important;
    transform:       translateY(-1px);
    text-decoration: none;
}

.gosafe-ol-section {
    margin-bottom: 36px;
}

/* Sectiekop ("Introductie", "Informatie", "Oefeningen") — als eigen klasse op
   het element zelf, zodat de stijl ook klopt wanneer een sectie los via de
   shortcode in Elementor wordt geplaatst (zonder .gosafe-ol-section-ouder). */
.gosafe-ol-kop {
    font-size:      1.2rem;
    margin:         0 0 16px;
    padding-bottom: 8px;
    border-bottom:  2px solid var(--gosafe-ol-kleur-rand);
}

.gosafe-wysiwyg ul,
.gosafe-wysiwyg ol {
    padding-left: 20px;
}

.gosafe-wysiwyg li {
    margin-bottom: 4px;
    line-height:   1.65;
}

/* ---- Introductietekst + foto ----
   Zelfde beeldbehandeling als de introductiesectie op gosafe.nl/wie-zijn-wij/
   (gelijk verdeelde 2 kolommen, ronde hoeken, vaste hoogte + object-fit cover),
   maar gespiegeld: tekst links, foto rechts. */
.gosafe-ol-intro-layout {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   48px;
    align-items:           start;
}

.gosafe-ol-intro-layout-geen-foto {
    grid-template-columns: 1fr;
}

.gosafe-ol-intro-tekst-kolom {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
}

.gosafe-ol-intro-foto img,
.gosafe-ol-foto img {
    width:         100%;
    height:        420px;
    object-fit:    cover;
    object-position: center center;
    display:       block;
    border-radius: 30px;
}

@media (max-width: 900px) {
    .gosafe-ol-intro-layout {
        grid-template-columns: 1fr;
    }

    .gosafe-ol-intro-foto {
        order: -1;
    }

    .gosafe-ol-intro-foto img,
    .gosafe-ol-foto img {
        height: 260px;
    }
}

/* ---- Koppeling met bestaande les (button onder de introductietekst) ----
   Zelfde donkerblauwe pil-knop-stijl als elders op gosafe.nl (bijv. de
   "Bekijk programma"/"Alle programma's" knoppen: #202148, ronde hoeken,
   vetgedrukte witte tekst). */
.gosafe-ol-koppeling-knop-wrap {
    margin: 20px 0 0;
}

.gosafe-ol-btn-koppeling {
    background:    #202148;
    color:         #ffffff !important;
    font-weight:   700;
    border-radius: 25px;
    padding:       15px 32px;
}

.gosafe-ol-btn-koppeling:hover,
.gosafe-ol-btn-koppeling:focus-visible {
    background: #329a67;
    color:      #ffffff !important;
}

/* ---- Automatische "voor ouders"-link op de gekoppelde bestaande les ----
   Verschijnt onderaan de content van de gekoppelde pagina (bijv. een
   vacature- of lespagina) en wijst terug naar de ouderpagina, als button
   i.p.v. inline tekst. */
.gosafe-ol-koppeling-cta {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            14px;
    background:     var(--gosafe-ol-kleur-bg);
    border:         1px solid var(--gosafe-ol-kleur-rand);
    border-left:    4px solid var(--gosafe-ol-kleur-primair);
    border-radius:  var(--gosafe-ol-radius-lg);
    padding:        22px 24px;
    margin:          32px 0 0;
}

.gosafe-ol-koppeling-cta p {
    margin: 0;
}

/* ---- Video embed (responsive 16:9) ---- */
.gosafe-ol-videos {
    display:        flex;
    flex-direction: column;
    gap:            24px;
}

.gosafe-ol-video-titel {
    margin:    0 0 10px;
    font-size: 1.05rem;
}

.gosafe-ol-video-wrap {
    position:      relative;
    width:         100%;
    padding-top:   56.25%;
    border-radius: var(--gosafe-ol-radius-lg);
    overflow:      hidden;
    background:    #000;
}

.gosafe-ol-video-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---- Oefeningen (accordion) ---- */
.gosafe-ol-accordion {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.gosafe-ol-accordion-item {
    border:        1.5px solid var(--gosafe-ol-kleur-rand);
    border-radius: var(--gosafe-ol-radius);
    overflow:      hidden;
    background:    #fff;
    transition:    border-color var(--gosafe-ol-transition), box-shadow var(--gosafe-ol-transition);
}

.gosafe-ol-accordion-item.is-open {
    border-color: var(--gosafe-ol-kleur-primair);
    box-shadow:   0 4px 14px rgba(0, 0, 0, .07);
}

.gosafe-ol-accordion-kop {
    margin:    0;
    font-size: 1rem;
}

/* !important op de kernstyling: dwingt deze knop te winnen van elke andere
   regel (thema, page builder-widget of browser-eigen knopstijl) die op
   generieke 'button'-elementen inhaakt. */
.gosafe-ol-accordion-knop {
    all:                 unset;
    -webkit-appearance:  none !important;
       -moz-appearance:  none !important;
            appearance:  none !important;
    box-sizing:          border-box !important;
    display:             flex !important;
    align-items:         center !important;
    justify-content:     space-between !important;
    gap:                 16px !important;
    width:               100% !important;
    max-width:           100% !important;
    margin:              0 !important;
    padding:             16px 20px !important;
    border:              none !important;
    border-radius:       0 !important;
    background:          transparent !important;
    cursor:              pointer !important;
    text-align:          left !important;
    font-family:         inherit !important;
    font-size:           1.02rem !important;
    font-weight:         600 !important;
    color:               var(--gosafe-ol-kleur-tekst-hoofd) !important;
    line-height:         1.4 !important;
    transition:          background var(--gosafe-ol-transition);
}

.gosafe-ol-accordion-knop:hover {
    background: var(--gosafe-ol-kleur-bg) !important;
}

.gosafe-ol-accordion-knop:focus-visible {
    outline:        2px solid var(--gosafe-ol-kleur-primair) !important;
    outline-offset: -2px;
    background:     var(--gosafe-ol-kleur-bg) !important;
}

.gosafe-ol-accordion-item.is-open .gosafe-ol-accordion-knop {
    background: var(--gosafe-ol-kleur-bg);
}

.gosafe-ol-accordion-icoon {
    position:    relative !important;
    flex-shrink: 0 !important;
    width:       16px !important;
    height:      16px !important;
}

.gosafe-ol-accordion-icoon::before,
.gosafe-ol-accordion-icoon::after {
    content:          '' !important;
    position:         absolute !important;
    background:       var(--gosafe-ol-kleur-primair) !important;
    border-radius:    2px !important;
    transition:       transform var(--gosafe-ol-transition), opacity var(--gosafe-ol-transition);
}

/* horizontale streep */
.gosafe-ol-accordion-icoon::before {
    top:       50% !important;
    left:      0 !important;
    width:     16px !important;
    height:    2px !important;
    transform: translateY(-50%) !important;
}

/* verticale streep (verdwijnt bij openen, wordt dan een "−") */
.gosafe-ol-accordion-icoon::after {
    top:       0 !important;
    left:      50% !important;
    width:     2px !important;
    height:    16px !important;
    transform: translateX(-50%) !important;
}

.gosafe-ol-accordion-item.is-open .gosafe-ol-accordion-icoon::after {
    opacity:   0 !important;
    transform: translateX(-50%) scaleY(0) !important;
}

.gosafe-ol-accordion-panel {
    padding: 4px 20px 20px;
}

/* ---- Foto en bijlagen bij een oefening ---- */
.gosafe-ol-oefening-foto {
    margin-bottom: 16px;
}

.gosafe-ol-oefening-foto img {
    width:         100%;
    max-width:     420px;
    height:        auto;
    display:       block;
    border-radius: var(--gosafe-ol-radius-lg);
}

.gosafe-ol-oefening-bijlagen {
    list-style:     none;
    margin:         16px 0 0;
    padding:        0;
    display:        flex;
    flex-wrap:      wrap;
    gap:            10px;
}

.gosafe-ol-oefening-bijlagen a {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         8px 14px;
    border:          1.5px solid var(--gosafe-ol-kleur-rand);
    border-radius:   var(--gosafe-ol-radius);
    color:           var(--gosafe-ol-kleur-tekst-hoofd) !important;
    font-weight:     600;
    font-size:       .9rem;
    text-decoration: none !important;
    transition:      border-color var(--gosafe-ol-transition), background var(--gosafe-ol-transition);
}

.gosafe-ol-oefening-bijlagen a:hover,
.gosafe-ol-oefening-bijlagen a:focus-visible {
    border-color: var(--gosafe-ol-kleur-primair);
    background:   var(--gosafe-ol-kleur-bg);
}

.gosafe-ol-bijlage-type {
    font-size:      .68rem;
    font-weight:    700;
    letter-spacing: .3px;
    color:          var(--gosafe-ol-kleur-tekst-muted);
    background:     var(--gosafe-ol-kleur-bg);
    padding:        2px 8px;
    border-radius:  20px;
}