/*!
Theme Name: Skkills
Theme URI: https://underscores.me/
Author: Me
Author URI: https://automattic.com/
Description: A custom WordPress theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: Skkills
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

*/
@media only screen and (min-width: 1300px) {
    .intresseCard {
        width: 340px;
        /* box-sizing is content-box here, so the card renders at
           190 + 2rem padding = 222px. Was 160px, which clipped the
           longest card ("Klimaatbestendig") by 14px. */
        height: 190px;
    }
}
.otherProducts{
white-space: normal;
}
.product.endSliderItem .endSlideMedia img{
filter: unset !important
}

.footerLogo{
    object-fit: contain;
}
.slice2CardImage img, .slice3IntroImage img{
object-fit: cover;
}
 
@media screen and (max-width:1299px) {
    .language{
        margin-right: 0;
    }
    .language > a{
        display: none;
    }
    .product_category{
        z-index: 9 !important;
    }
       
}

 
/* --- Header/menu alignment fix (language switcher removed) ---
   Desktop breakpoint matches the theme (.menuBox goes horizontal at 1300px).
   - #menuToggle: the mobile hamburger checkbox stayed in the flow on desktop
     (only its .menuBtn label was hidden) and pushed the menu down 25px.
   - align-items: baseline -> center, so the Referenties pill and the text links
     share a centre line instead of a text baseline.
   - The nth-child widths / space-between were sized for the old 5-item menu. */
@media only screen and (min-width: 1300px) {
    #menuToggle { display: none; }
    /* Everything is top-aligned on purpose: the .submenu dropdown is position:static,
       so opening it grows its <li>. With align-items:center the siblings re-centred and
       the whole menu dropped ~51px on hover. flex-start keeps them still. */
    .headerDiv     { align-items: flex-start; padding-top: 21px; padding-bottom: 21px; }
    .logoDiv       { margin-top: 0; }
    .logoDiv a     { display: flex; line-height: 0; }
    img.logo       { display: block; }
    /* .logoDiv is 80px tall vs the 57px menu row; 11.5px re-centres the menu
       against the logo without using centring that hover would disturb. */
    .headerContent { padding-top: 11.5px; }
    .menuBox       { align-items: flex-start; justify-content: flex-end; padding: 0; gap: 1.25rem; }
    .menuBox > li  { width: auto; }
}