/* 
Theme Name: Hendrikscare
Theme URI: https://hendrikscare.eu
Description: Thema voor Hendrikscare.eu
Author: Studio Code Rood
Author URI: https://studiocoderood.nl
Template: hello-elementor
Version: 1.2.2
Text Domain: hendrikscare
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

body {
  margin: 0;
}
strong, b {
  font-weight: 700;
}
ul, ol li {
  margin-bottom: 20px;
} 
p {
    margin-block-start:0;
    margin-block-end:.9rem;
}
h1, h2, h3, h4, h5, h6 {
    margin-block-start: .5rem;
    margin-block-end: 1rem;
    line-height: 1.2;
}

/* Strong tags in headings - kleur accent, zelfde dikte als kop */
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
    color: var(--e-global-color-primary);
    font-weight: inherit;
}
body a:focus, input[type=text]:focus, [type=button]:focus, [type=submit]:focus, input[type=email]:focus, textarea:focus {
    outline-style: dotted !important;
    outline-width: 3px !important;
    outline-color: var(--e-global-color-primary) !important;
}

.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #333;
    display: block;
    font-size: 1rem;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}


/* Header */
header .header-logo img {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

/* Contact menu item alleen zichtbaar op mobiel */
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item.contact {
    display: none !important;
}

@media (max-width: 1024px) {
    .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item.contact {
        display: flex !important;
    }
}

/* Mobile menu dropdown styling */
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    padding: 0 40px !important;
    background: transparent !important;
}

.elementor-nav-menu--dropdown .elementor-nav-menu {
    background: white !important;
    border-radius: 20px;
}

header .header-bar .elementor-nav-menu--dropdown .menu-item .elementor-item,
header .header-bar.elementor-sticky--active .elementor-nav-menu--dropdown .menu-item .elementor-item {
    color: inherit !important;
}

header .header-bar .elementor-nav-menu--dropdown .menu-item .elementor-item:hover,
header .header-bar.elementor-sticky--active .elementor-nav-menu--dropdown .menu-item .elementor-item:hover {
    color: var(--e-global-color-primary) !important;
}

header .elementor-sticky--active .header-logo img,
.single-product header .header-logo img {
    filter: none;
}

/* Header bar transitions */
header .header-bar {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

header .header-bar.elementor-sticky--active {
    background-color: white !important;
    box-shadow: 4px 4px 35px 0 rgba(0, 0, 0, 0.15);
}

header .header-bar.elementor-sticky--active .menu-item .elementor-item {
    color: black !important;
}

header .header-bar.elementor-sticky--active .menu-item .elementor-item.elementor-item-active:after {
    background-color: black !important;
}

header .header-bar.elementor-sticky--active .elementor-menu-toggle .e-font-icon-svg {
    fill: black !important;
}

/* Single product header styling */
.single-product header .header-bar {
    background-color: white !important;
}

.single-product header .header-bar .menu-item .elementor-item {
    color: black !important;
}

.single-product header .header-bar .menu-item .elementor-item.elementor-item-active:after,
.single-product header .elementor-nav-menu--main .elementor-item:after {
    background-color: black !important;
}

.single-product header .elementor-menu-toggle .e-font-icon-svg {
    fill: black !important;
}

/* Herbruikbare image shadow class */
.image-shadow-blue {
    position: relative;
    display: inline-block;
}

.image-shadow-blue img {
    border-radius: 20px;
    display: block;
}

.image-shadow-blue::before {
    content: '';
    position: absolute;
    width: 65%;
    height: 65%;
    background: var(--e-global-color-primary);
    border-radius: 20px;
    top: -15px;
    left: -15px;
    z-index: -1;
}

/* Variaties voor verschillende kleuren en posities */
.image-shadow-blue.shadow-right::before {
    left: auto;
    right: -15px;
    top: -15px;
}

.image-shadow-blue.shadow-bottom::before {
    top: auto;
    bottom: -15px;
    left: -15px;
}

.image-shadow-blue.shadow-bottom-right::before {
    top: auto;
    left: auto;
    bottom: -15px;
    right: -15px;
}