/* Brug tussen de Bronkracht-opmaak en WordPress, WooCommerce en Tutor LMS.
   Deze regels zijn een eerste opzet: na installatie lopen we ze na op de echte pagina's. */

/* kop */
.hd .wp-block-navigation{font-size:14.5px;gap:22px}
.hd .wp-block-navigation a{text-decoration:none}
.hd .wp-block-navigation a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.hd .mainnav .wrap{display:flex;align-items:center;gap:22px;min-height:72px}
.hd .wp-block-navigation__responsive-container-open{border:1px solid var(--line);border-radius:var(--radius);padding:8px}
.wp-site-blocks > main{margin-block-start:0} /* geen witte strook tussen kop en opening */
/* WooCommerce zet zelf een winkelwagen- en account-icoon in de kop; die doen al de zwevende winkelwagen en de Academy-knop */
.hd .wp-block-woocommerce-mini-cart,.hd .wp-block-woocommerce-customer-account{display:none!important}
.kop-acties{display:flex;align-items:center;gap:18px;flex:none}
.kop-shop{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:14.5px}
.kop-shop:hover span{text-decoration:underline;text-decoration-color:var(--accent)}
.kop-acties .btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
@container site (max-width:760px){
  .hd .mainnav .wrap{min-height:62px;gap:12px}.hd .lk{--lk:14px}
  /* telefoon: rij 1 logo + Shop + knop, rij 2 de menu-koppen, altijd zichtbaar (geen hamburger) */
  .hd .mainnav .wrap{flex-wrap:wrap!important;padding-bottom:0}
  .hd .lk{margin-right:auto}
  .hd .wp-block-navigation{order:3;flex-basis:100%;justify-content:center!important;gap:6px 20px;font-size:14px;padding:2px 0 10px}
  .kop-acties{gap:12px}
  .kop-shop span{font-size:13.5px}
  .kop-acties .btn{padding:9px 12px;font-size:13.5px}
  .woocommerce-page main.wp-block-group,.single-courses main.wp-block-group,.post-type-archive-courses main.wp-block-group{padding-inline:16px} /* shop- en cursuspagina's niet tegen de rand */
}

/* opening (wolken): zoals de voorstelling - witte waas links, donkere tekst, "Veel meer." in rood-oranje */
.bk-hero .wp-block-cover__background{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.84) 40%,rgba(255,255,255,.15) 74%,rgba(255,255,255,0) 100%)!important;opacity:1!important}
.bk-hero .wp-block-cover__inner-container,.bk-hero .wp-block-cover__inner-container p{color:var(--text)!important}
.bk-hero h1{color:var(--ink)!important}
.bk-hero h1 em,.bk-hero .eyebrow{color:var(--accent)!important}
.bk-hero .lead{font-weight:400}
@container site (max-width:760px){
  .bk-hero .wp-block-cover__background{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.86) 60%,rgba(255,255,255,.66))!important}
}

/* knoppen van WordPress zelf in de huisstijl */
.wp-element-button,.wp-block-button__link{background:var(--btn);color:var(--ink);border-radius:var(--radius);font-weight:500;min-height:44px}
.is-style-outline .wp-block-button__link{background:#fff;color:var(--accent);border:1px solid var(--accent)}

/* WooCommerce */
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.wc-block-components-button{background:var(--btn)!important;color:var(--ink)!important;border-radius:var(--radius)!important;font-weight:500!important;min-height:44px}
.woocommerce .price,.wc-block-components-product-price{font-weight:600;color:var(--text)}
.woocommerce-store-notice,.woocommerce-message,.woocommerce-info{border-top-color:var(--amber)}
.wc-block-components-text-input input,.wc-block-components-combobox input,.woocommerce form .input-text{font-size:16px!important;border-radius:8px!important}
.wc-block-checkout__payment-method .wc-block-components-radio-control__option-checked{box-shadow:0 0 0 1px var(--accent)}
.bk-twee-vragen{margin:16px 0;display:grid;gap:8px}

/* Tutor LMS */
.tutor-wrap,.tutor-course-details-page{font-family:var(--sans)}
.tutor-btn-primary{background:var(--btn)!important;color:var(--ink)!important;border:0!important;border-radius:var(--radius)!important}
.tutor-course-topic-item.is-active a,.tutor-course-topic-item a:hover{border-left:3px solid var(--amber)}
.tutor-color-primary,.tutor-iconic-btn-primary{color:var(--accent)!important}
.tutor-ratings-stars .tutor-icon-star-bold{color:#E59626}

/* Bunny-video */
.vid.bk-bunny{aspect-ratio:16/9;background:#000}

/* rustige lijst zonder bolletjes (bijv. Opleidingen op Over Bronkracht) */
.bk-lijst{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:16px}
.bk-lijst li{padding-left:14px;border-left:3px solid var(--amber);color:var(--muted)}
.bk-lijst li strong{display:block;font-weight:500;color:var(--text)}
.bk-lijst li br{display:none}
/* Spreker en trainer: strook met opdrachtgevers (later logo's) en kaarten met opdrachten */
.bk-lijst li strong + br{display:none}
.bk-logos{gap:10px!important;margin:12px 0 8px}
.bk-logos > *{margin:0!important;border:1px solid var(--line);border-radius:10px;padding:12px 16px;font-weight:500;font-size:14px;color:var(--muted);background:#fff;display:flex;align-items:center;min-height:56px}
.bk-logos img{width:auto}
.bk-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:12px}
.bk-kaart{border:1px solid var(--line);border-top:3px solid var(--amber);border-radius:0 0 12px 12px;padding:18px;background:#fff;display:grid;gap:8px;align-content:start}
.bk-kaart h3{font-size:19px}
.bk-kaart p:not(.eyebrow){margin:0;color:var(--muted)}
.bk-logos figure{justify-content:center;min-width:120px}

.bk-logos .bk-logo-wit img{filter:brightness(0);opacity:.6} /* wit logo (voor donkere achtergrond) donker maken */
.bk-logos > p{text-transform:uppercase;letter-spacing:.04em;font-size:13px;color:var(--text)}
/* logo-strook: gelijke tegels, logo's op optisch gelijke grootte (maten staan per logo in de pagina) */
.bk-logos{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px!important}
.bk-logos > figure{margin:0!important;height:88px;padding:10px 12px;justify-content:center;align-items:center;display:flex}
.bk-logos figure img{max-width:100%!important;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .2s,opacity .2s}
.bk-logos figure:hover img{filter:none;opacity:1}
@container site (max-width:760px){.bk-logos{grid-template-columns:repeat(2,minmax(0,1fr))}.bk-logos > figure{height:76px}}

/* Tijdelijk verborgen blok: in de editor bij het blok > Geavanceerd > Extra CSS-klasse "bk-verborgen" weghalen om het terug te zetten */
.wp-site-blocks .bk-verborgen{display:none!important}
/* Vier stappen (Erkennen, Verbinden, De stap, Vieren): 2 x 2 naast de kop */
.steps:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
@container site (max-width:760px){.steps:has(> :nth-child(4)){grid-template-columns:1fr}}
/* Cursussen die binnenkort komen */
.bk-cursussen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:24px 0}
.bk-cursus{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;gap:10px;padding:0 0 20px}
.bk-cursus > :not(.bk-cursus-beeld){margin-left:20px!important;margin-right:20px!important}
.bk-cursus-beeld{margin:0!important;position:relative}
.bk-cursus-beeld img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.bk-cursus-beeld::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--horizon)}
.bk-binnenkort{align-self:flex-start;margin-top:4px!important;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 12px;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.bk-cursus h3{font-size:22px}
.bk-vraag{font-family:var(--serif);font-style:italic;color:var(--accent);margin:0!important}
.bk-cursus p:not(.bk-binnenkort):not(.bk-vraag){color:var(--muted);margin:0}
.bk-inhoud{font-size:13px;border-top:1px solid var(--line);padding-top:10px}
.bk-wl{display:grid;gap:8px;margin-top:auto!important}
.bk-wl input[type=email]{width:100%}
@container site (max-width:420px){.hd .wp-block-navigation{font-size:12.5px;gap:4px 9px!important}.hd .wp-block-navigation .wp-block-navigation__container{gap:4px 9px!important}.hd .wp-block-navigation a{padding-inline:0}}
/* Stappen met iconen (4 op home, 5 = de weg van Bronkracht) */
.step .bk-icoon{line-height:0;margin:2px 0 4px}
.step .bk-icoon svg{width:96px;height:auto;display:block}
.step .bk-element{font:500 10.5px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0}
.step:nth-child(4){border-top-color:var(--accent)}
.step.step-vieren{border-top:3px solid transparent;border-image:var(--horizon) 1}
.vms.weg{grid-template-columns:1fr;gap:24px}
.weg .steps{grid-template-columns:repeat(5,minmax(0,1fr))!important}
@container site (max-width:1000px){.weg .steps{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@container site (max-width:760px){.weg .steps{grid-template-columns:1fr!important}}
/* WordPress zet marges tussen blokken; in rasters (stappen, cursussen) geeft dat scheve rijen */
.steps > *,.bk-cursussen > *{margin-block-start:0!important}
.step > *{margin-block:0!important}