/*
Theme Name: Expliciet Starter Theme
Theme URI: https://expliciet.be
Description: Starter theme for wordpress website
Version: 2.0.0
Author: Expliciet
Author URI: https://expliciet.be
Text Domain: xpl

License:            MIT License
License URI:        http://opensource.org/licenses/MIT
*/
.grecaptcha-badge {
    display: none !important;
}

.call-to-action a {
    position: fixed;
    z-index: 9999;
    right: 12px;
    bottom: 12px;
    background: #141414 !important;
    margin: 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}

.call-to-action a::before {
    --arrow-size: .55rem;
    content: "";
    display: inline-block;
    width: var(--arrow-size);
    aspect-ratio: 2 / 3;
    mask: url("/wp-content/themes/expl-theme/dist/images/arrow-tuyn.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    background-color: currentColor;
}
.intro .sub-title {font-size: 18px;}
.intro .social {
    margin-top: 24px;
    display: flex;
    gap: 10px;
    margin-bottom: 1em;
}
.intro .social a img {
    display: block;
    width: 30px;
}

/* =====================
   DROPDOWN SUB-MENUS
   ===================== */

/* Position context for dropdown */
.site-header .main-menu > .menu-item {
    position: relative;
}

/* Sub-menu base — hidden by default */
.site-header .main-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    padding: 0.75rem 0;
    margin: 0;
    background-color: var(--clr-main-dark);
    min-width: 220px;
    z-index: 102;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Sub-menu links */
.site-header .main-menu .sub-menu .menu-item > a {
    padding: 0.5rem 1.5rem;
    display: block;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 400;
    font-family: var(--font-main);
    color: #fff;
    text-decoration: none;
    border-bottom: none;
    transition: background-color 0.2s ease;
}

.site-header .main-menu .sub-menu .menu-item > a:hover,
.site-header .main-menu .sub-menu .menu-item > a:focus {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Active/current item in sub-menu */
.site-header .main-menu .sub-menu .current-menu-item > a {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Hover bridge — prevents dropdown from closing when
   moving cursor from parent link to sub-menu */
.site-header .main-menu > .menu-item-has-children {
    padding-bottom: 0.5rem;
    margin-bottom: -0.5rem;
}

/* Show dropdown on hover (desktop) and via JS toggle */
@media (min-width: 768px) {
    .site-header .main-menu .menu-item-has-children:hover > .sub-menu,
    .site-header .main-menu .menu-item-has-children.is-open > .sub-menu {
        display: block;
    }
}

/* Optional caret indicator on parent items */
.site-header .main-menu > .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 0.35em;
    height: 0.35em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 0.4em;
    vertical-align: 0.15em;
    transition: transform 0.2s ease;
}

.site-header .main-menu > .menu-item-has-children:hover > a::after,
.site-header .main-menu > .menu-item-has-children.is-open > a::after {
    transform: rotate(-135deg);
    vertical-align: -0.05em;
}

/* =====================
   MOBILE NAV DROPDOWNS
   ===================== */
.mobile-nav .main-menu .sub-menu,
.mobile-nav .mobile-menu .sub-menu {
    display: none;
    list-style: none;
    padding: 0.25rem 0 0.5rem 1.25rem;
    margin: 0;
}

.mobile-nav .main-menu .sub-menu .menu-item > a,
.mobile-nav .mobile-menu .sub-menu .menu-item > a {
    font-size: var(--t-lvl-4);
    font-family: var(--font-alt);
    color: var(--clr-white);
    opacity: 0.7;
    text-decoration: none;
    display: block;
    padding: 0.25rem 0;
}

.mobile-nav .main-menu .sub-menu .menu-item > a:hover,
.mobile-nav .mobile-menu .sub-menu .menu-item > a:hover {
    opacity: 1;
}

/* Show mobile sub-menu when toggled */
.mobile-nav .menu-item-has-children.is-open > .sub-menu {
    display: block;
}