/*
Theme Name: Kennisbouwers
Theme URI: https://www.jaraco.be
Author: Jenne Claessens
Author URI: https://www.jaraco.be
Description: Custom WordPress Block Theme (Full Site Editing) voor het kennisblog van JARACO. Huisstijl 1-op-1 overgenomen van www.jaraco.be: navy #003784, Work Sans typografie, afgeronde beelden (20px) en knoppen (14px), navy footer met witte tekst.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kennisbouwers
Tags: blog, full-site-editing, block-patterns, one-column, custom-colors, custom-logo
*/

/* ==========================================================================
   Kennisbouwers – gemeten op www.jaraco.be (07/2026):
   - Primair navy:        #003784  (topbar, nav, koppen, knoppen, footer)
   - Logo-accent geel:    #EDCD1F  (alleen in logo gebruikt)
   - Broodtekst:          #000000, Work Sans Light 18px / lh 1.2–1.4
   - Koppen:              Work Sans SemiBold — h1 60px, h2 45px, h6 20px
   - Navigatie:           Work Sans SemiBold 16px, letter-spacing 0.8px, caps
   - Knoppen:             navy bg, wit label, radius 14px (witte 2px border op navy)
   - Beelden/kaarten:     border-radius 20px
   ========================================================================== */

/* ---- Navigatie ---- */
.kb-nav .wp-block-navigation-item__content {
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--nav);
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    padding: 0.55rem 1rem;
    border-radius: 14px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
/* Hover + actief item: navy pill met witte tekst (zoals jaraco.be) */
.kb-nav .wp-block-navigation-item__content:hover,
.kb-nav .current-menu-item > .wp-block-navigation-item__content,
.kb-nav .wp-block-navigation-item__content[aria-current="page"] {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    text-decoration: none;
}

/* ---- Utility-topbar (navy, witte contactgegevens rechts) ---- */
.kb-topbar,
.kb-topbar a {
    color: var(--wp--preset--color--base);
    text-decoration: none;
}
.kb-topbar a:hover {
    text-decoration: underline;
}

/* ---- Sticky header ---- */
.kb-header {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* ---- Knoppen: uppercase, radius 14px (uit theme.json), soepele hover ---- */
.wp-block-button__link {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Variant voor knoppen op navy achtergrond (zoals 'Solliciteer hier'): */
.kb-on-dark .wp-block-button__link {
    border: 2px solid var(--wp--preset--color--base);
}

/* ---- Post-kaarten in het blogoverzicht (radius 20px zoals jaraco-kaarten) ---- */
.kb-post-card {
    background: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 20px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.kb-post-card:hover {
    box-shadow: 0 8px 24px rgba(0, 55, 132, 0.12);
    transform: translateY(-2px);
}
.kb-post-card .wp-block-post-featured-image,
.kb-post-card .wp-block-post-featured-image img {
    border-radius: 0;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}
.kb-post-card .wp-block-post-title {
    font-size: var(--wp--preset--font-size--large);
    line-height: 1.25;
}
.kb-post-card .wp-block-post-title a {
    text-decoration: none;
    color: var(--wp--preset--color--primary);
}
.kb-post-card .wp-block-post-title a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Hero-band (navy, witte kop — zoals paginakoppen op jaraco.be) ---- */
.kb-hero h1,
.kb-hero .wp-block-post-title {
    color: var(--wp--preset--color--base);
    line-height: 1.05;
}

/* ---- Footer (navy #003784, witte tekst — 1-op-1 jaraco.be) ---- */
.kb-footer,
.kb-footer p,
.kb-footer li {
    color: var(--wp--preset--color--base);
}
.kb-footer a {
    color: var(--wp--preset--color--base);
    text-decoration: none;
}
.kb-footer a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.kb-footer .kb-footer-heading {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 600;
    color: var(--wp--preset--color--base);
}
.kb-footer ul {
    list-style: none;
    padding-left: 0;
}
.kb-footer-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* ---- Content-leesbaarheid single post ---- */
.kb-single-content h2,
.kb-single-content h3 {
    margin-top: 2em;
}

/* ---- Responsive ---- */
@media (max-width: 781px) {
    .kb-topbar {
        font-size: 13px;
    }
    .kb-hero h1,
    .kb-hero .wp-block-post-title {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }
}

/* ---- Topbar-items met iconen (zoals jaraco.be) ---- */
.kb-topbar-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 1.75rem;
}
.kb-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--wp--preset--font-size--small);
    line-height: 1;
}
.kb-topbar-item svg {
    flex: 0 0 auto;
    display: block;
}

/* ---- Groepslogo-strip: logokaarten gecentreerd op navy ---- */
.kb-group-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
}
.kb-group-strip a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wp--preset--color--base);
    border-radius: 14px;
    padding: 0.75rem 1.5rem;
    min-height: 56px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kb-group-strip a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.kb-group-strip img {
    display: block;
    max-height: 40px;
    width: auto;
    height: auto;
}

/* ---- Navigatie: 10px tussen de menu-items ---- */
.kb-nav.wp-block-navigation .wp-block-navigation__container {
    gap: 10px;
}