/* =========================================================
SURF HOSSEGOR
VOLLEDIG ASTRA-MENU
DESKTOP + TABLET + MOBIEL
Hoofdkleur van het logo:
#00B8E9
========================================================= */
/* =========================================================
1. DESKTOPVERSIE
========================================================= */
@media (min-width: 922px) {
/* —————————————————–
HOOFDMENU
—————————————————– */
.ast-desktop .main-header-menu {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 18px !important;
}
.ast-desktop .main-header-menu > .menu-item {
position: relative !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Hoofdlinks */
.ast-desktop
.main-header-menu
> .menu-item
> .menu-link {
display: flex !important;
align-items: center !important;
position: relative !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 12px 0 !important;
white-space: nowrap !important;
line-height: 1.3 !important;
z-index: 2 !important;
}
/* —————————————————–
SUBMENU’S
—————————————————– */
.ast-desktop
.main-header-menu
> .menu-item
> .sub-menu {
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
width: max-content !important;
min-width: 250px !important;
max-width: calc(100vw – 40px) !important;
margin: 0 !important;
padding: 8px !important;
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 12px !important;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.10),
0 2px 8px rgba(0, 0, 0, 0.05) !important;
box-sizing: border-box !important;
z-index: 99999 !important;
}
/* —————————————————–
ELEMENTEN VAN SUBMENU’S
—————————————————– */
.ast-desktop
.main-header-menu
.sub-menu
> .menu-item {
display: block !important;
position: relative !important;
float: none !important;
clear: both !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-sizing: border-box !important;
}
/* —————————————————–
LINKS VAN SUBMENU’S
—————————————————– */
.ast-desktop
.main-header-menu
.sub-menu
.menu-link {
display: flex !important;
align-items: center !important;
position: relative !important;
float: none !important;
clear: both !important;
width: 100% !important;
height: auto !important;
min-height: 42px !important;
margin: 0 !important;
padding: 10px 14px !important;
box-sizing: border-box !important;
white-space: nowrap !important;
line-height: 1.35 !important;
color: #222222 !important;
background: transparent !important;
text-decoration: none !important;
border: 0 !important;
border-radius: 8px !important;
transition:
background-color 0.18s ease,
color 0.18s ease,
transform 0.18s ease !important;
}
/* —————————————————–
HOVEREN OVER SUBMENU’S
—————————————————– */
.ast-desktop
.main-header-menu
.sub-menu
.menu-link:hover,
.ast-desktop
.main-header-menu
.sub-menu
.menu-link:focus {
background: #eaf9fd !important;
color: #007fa3 !important;
transform: translateX(2px) !important;
text-decoration: none !important;
}
/* Kleine turquoise balk bij hover */
.ast-desktop
.main-header-menu
.sub-menu
.menu-link::before {
content: « » !important;
display: block !important;
width: 0 !important;
height: 18px !important;
margin-right: 0 !important;
background: #00b8e9 !important;
border-radius: 10px !important;
opacity: 0 !important;
transition:
width 0.18s ease,
margin-right 0.18s ease,
opacity 0.18s ease !important;
}
.ast-desktop
.main-header-menu
.sub-menu
.menu-link:hover::before,
.ast-desktop
.main-header-menu
.sub-menu
.menu-link:focus::before {
width: 3px !important;
margin-right: 8px !important;
opacity: 1 !important;
}
/* —————————————————–
ASTRA-RANDEN VERWIJDEREN
—————————————————– */
.ast-desktop
.main-header-menu
.sub-menu
.menu-item {
border-top: 0 !important;
border-bottom: 0 !important;
}
/* —————————————————–
SUBSUBMENU’S
—————————————————– */
.ast-desktop
.main-header-menu
.sub-menu
.sub-menu {
position: absolute !important;
top: -8px !important;
left: calc(100% + 8px) !important;
width: max-content !important;
min-width: 250px !important;
margin: 0 !important;
padding: 8px !important;
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 12px !important;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.10),
0 2px 8px rgba(0, 0, 0, 0.05) !important;
z-index: 100000 !important;
}
/* —————————————————–
MENU’S DICHT BIJ DE RECHTERRAND
—————————————————– */
.ast-desktop
.main-header-menu
> .menu-item:nth-last-child(-n+2)
> .sub-menu {
left: auto !important;
right: 0 !important;
}
/* —————————————————–
PIJLEN VAN DESKTOPMENU’S
—————————————————– */
.ast-desktop
.main-header-menu
.menu-item-has-children
> .menu-link {
gap: 7px !important;
}
.ast-desktop
.main-header-menu
.menu-item-has-children
> .menu-link
.dropdown-menu-toggle {
margin: 0 !important;
padding: 0 !important;
}
}
/* =========================================================
2. MOBIELE / TABLETVERSIE
========================================================= */
@media (max-width: 921px) {
/* =====================================================
ALGEMENE RESET VAN HET MOBIELE MENU
===================================================== */
.ast-mobile-popup-drawer *,
.ast-mobile-popup-drawer *::before,
.ast-mobile-popup-drawer *::after {
box-sizing: border-box !important;
}
/* =====================================================
MOBIEL PANEEL
===================================================== */
.ast-mobile-popup-drawer {
overflow: hidden !important;
}
.ast-mobile-popup-drawer
.ast-mobile-popup-inner {
width: min(90vw, 380px) !important;
max-width: 380px !important;
overflow: hidden !important;
background: #ffffff !important;
box-sizing: border-box !important;
}
/* =====================================================
INHOUD VAN HET PANEEL
===================================================== */
.ast-mobile-popup-drawer
.ast-mobile-popup-content {
padding: 14px 16px 28px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
background: #ffffff !important;
box-sizing: border-box !important;
scrollbar-width: none !important;
}
.ast-mobile-popup-drawer
.ast-mobile-popup-content::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* =====================================================
X-KNOP OM HET PANEEL TE SLUITEN
===================================================== */
.ast-mobile-popup-drawer
.menu-toggle-close {
min-height: 62px !important;
margin: 0 !important;
padding: 14px 18px !important;
background: #ffffff !important;
border: 0 !important;
border-bottom: 1px solid #edf2f4 !important;
box-shadow: none !important;
}
.ast-mobile-popup-drawer
.menu-toggle-close
.ast-mobile-svg {
width: 18px !important;
height: 18px !important;
fill: #2b3035 !important;
}
/* =====================================================
MENUSTRACTUUR
===================================================== */
.ast-mobile-popup-drawer
.main-navigation,
.ast-mobile-popup-drawer
.ast-builder-menu-mobile,
.ast-mobile-popup-drawer
.main-header-menu {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
.ast-mobile-popup-drawer
.main-header-menu,
.ast-mobile-popup-drawer
.main-navigation
ul {
list-style: none !important;
}
/* =====================================================
MENU-ITEMS
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item {
position: relative !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-sizing: border-box !important;
}
.ast-mobile-popup-drawer
.main-header-menu
> .menu-item {
margin-bottom: 10px !important;
}
/* =====================================================
HOOFDLINKS
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
> .menu-item
> .menu-link {
display: flex !important;
align-items: center !important;
position: relative !important;
width: 100% !important;
min-height: 54px !important;
margin: 0 !important;
padding: 13px 16px !important;
color: #20262b !important;
background: #ffffff !important;
font-size: 16.5px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
white-space: normal !important;
text-decoration: none !important;
border: 1px solid #e1e9ed !important;
border-radius: 14px !important;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.035) !important;
box-sizing: border-box !important;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
color 0.18s ease,
box-shadow 0.18s ease !important;
}
/* Laat ruimte voor de ronde knop */
.ast-mobile-popup-drawer
.main-header-menu
> .menu-item-has-children
> .menu-link {
padding-right: 62px !important;
}
/* =====================================================
ASTRA’S STANDAARDPIJLEN VERWIJDEREN
===================================================== */
.ast-mobile-popup-drawer
.menu-item-has-children
> .menu-link
.dropdown-menu-toggle {
display: none !important;
}
.ast-mobile-popup-drawer
.menu-item-has-children
> .menu-link::after {
display: none !important;
content: none !important;
}
/* =====================================================
ENKELE KNOP VOOR OPENEN / SLUITEN
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: absolute !important;
top: 8px !important;
right: 10px !important;
width: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
font-size: 0 !important;
line-height: 1 !important;
appearance: none !important;
-webkit-appearance: none !important;
background: #eefbfe !important;
color: #008fb5 !important;
border: 1px solid #b8eaf5 !important;
border-radius: 50% !important;
box-shadow: none !important;
outline: none !important;
scrollbar-width: none !important;
cursor: pointer !important;
z-index: 10 !important;
box-sizing: border-box !important;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
transform 0.18s ease,
box-shadow 0.18s ease !important;
}
/* Verwijdert elke scrollbar van de knop */
.ast-mobile-popup-drawer
.ast-menu-toggle::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* =====================================================
VERBERGT HET ASTRA-ICOON VOLLEDIG
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle
svg,
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle
.ast-mobile-svg,
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle
.ast-icon,
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle
span:not(.screen-reader-text) {
display: none !important;
}
/* =====================================================
ONZE CSS-CHEVRON
GESLOTEN STATUS = PIJL OMLAAG
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle::after {
content: « » !important;
display: block !important;
width: 8px !important;
height: 8px !important;
margin-top: -4px !important;
border: solid #00a9d6 !important;
border-width: 0 2px 2px 0 !important;
transform: rotate(45deg) !important;
transform-origin: center !important;
transition:
transform 0.20s ease,
border-color 0.18s ease !important;
}
/* =====================================================
MENU GEOPEND
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle[aria-expanded= »true »] {
background: #00b8e9 !important;
border-color: #00b8e9 !important;
box-shadow:
0 3px 10px rgba(0, 184, 233, 0.20) !important;
}
/* Chevron omhoog */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle[aria-expanded= »true »]::after {
margin-top: 4px !important;
border-color: #ffffff !important;
transform: rotate(-135deg) !important;
}
/* Compatibiliteit met Astra dat .focus gebruikt */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children.focus
> .ast-menu-toggle {
background: #00b8e9 !important;
border-color: #00b8e9 !important;
box-shadow:
0 3px 10px rgba(0, 184, 233, 0.20) !important;
}
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children.focus
> .ast-menu-toggle::after {
margin-top: 4px !important;
border-color: #ffffff !important;
transform: rotate(-135deg) !important;
}
/* Effect bij klikken */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle:active {
transform: scale(0.94) !important;
}
/* Toetsenbordfocus */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle:focus {
outline: none !important;
}
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle:focus-visible {
outline: 2px solid rgba(0, 184, 233, 0.30) !important;
outline-offset: 2px !important;
}
/* =====================================================
HOVEREN OVER HOOFDITEMS
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
> .menu-item
> .menu-link:hover,
.ast-mobile-popup-drawer
.main-header-menu
> .menu-item
> .menu-link:focus {
background: #f5fcfe !important;
border-color: #b9eaf5 !important;
color: #007fa3 !important;
box-shadow:
0 4px 12px rgba(0, 184, 233, 0.07) !important;
}
/* =====================================================
ACTIEF ITEM / MENU GEOPEND
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
> .current-menu-item
> .menu-link,
.ast-mobile-popup-drawer
.main-header-menu
> .current-menu-ancestor
> .menu-link,
.ast-mobile-popup-drawer
.main-header-menu
> .menu-item.focus
> .menu-link {
background: #eefbfe !important;
border-color: #9ee2f2 !important;
color: #007f9f !important;
box-shadow:
0 4px 14px rgba(0, 184, 233, 0.08) !important;
}
/* =====================================================
SUBMENU
BELANGRIJK:
BLIJFT IN DE PAGINASTROOM
DUS GEEN OVERLAPPING
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
float: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
margin: 8px 0 2px !important;
padding: 7px !important;
overflow: visible !important;
background: #f5fbfd !important;
border: 1px solid #dceff4 !important;
border-radius: 12px !important;
box-shadow: none !important;
box-sizing: border-box !important;
z-index: auto !important;
}
/* =====================================================
ELEMENTEN VAN SUBMENU’S
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.menu-item {
position: relative !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* =====================================================
LINKS VAN SUBMENU’S
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.menu-link {
display: flex !important;
align-items: center !important;
position: relative !important;
width: 100% !important;
height: auto !important;
min-height: 44px !important;
margin: 0 !important;
padding: 11px 13px 11px 22px !important;
background: transparent !important;
color: #26343b !important;
font-size: 15.5px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
white-space: normal !important;
text-decoration: none !important;
border: 0 !important;
border-radius: 9px !important;
box-shadow: none !important;
box-sizing: border-box !important;
transition:
background-color 0.18s ease,
color 0.18s ease !important;
}
/* Kleine turquoise balk voor de sublinks */
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.menu-link::before {
content: « » !important;
position: absolute !important;
top: 50% !important;
left: 7px !important;
width: 3px !important;
height: 16px !important;
transform: translateY(-50%) !important;
background: #00b8e9 !important;
border-radius: 99px !important;
opacity: 0.35 !important;
}
/* Hover submenu */
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.menu-link:hover,
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.menu-link:focus {
background: #e7f8fc !important;
color: #007f9f !important;
}
/* Actieve pagina in een submenu */
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.current-menu-item
> .menu-link {
background: #e7f8fc !important;
color: #007f9f !important;
font-weight: 500 !important;
}
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.current-menu-item
> .menu-link::before {
opacity: 1 !important;
}
/* =====================================================
SUBSUBMENU’S
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.sub-menu {
position: static !important;
width: 100% !important;
margin: 5px 0 4px !important;
padding: 5px !important;
background: #ffffff !important;
border: 1px solid #e7f1f4 !important;
border-radius: 10px !important;
box-shadow: none !important;
}
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.sub-menu
.menu-link {
padding-left: 27px !important;
font-size: 15px !important;
}
}