/* ==============================
   HEADER STRUCTUUR
   ============================== */

.site-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 24px 0;
}

/* Logo */
.logo {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 10px;
	max-width: 960px;   /* desktop */
    width: 100%;
}

.logo a {
    color: rgba(108,108,108,1);
}

.site-header .logo img {
	width: 100%;
    height: auto;
    display: block;
}

.site-header hr {
	width: 100%;
	border: none;
	border-top: 1px solid rgba(180,180,180,0.35);
	margin-top: 12px;
	margin-bottom: 21px;
}


/* ==============================
   HOOFDNAVIGATIE
   ============================== */

.main-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 16px;    /*margin-left: 38px;*/ /* linker afstand tot rand*/
	margin-bottom: 11px;
}

/* Links + labels */
.main-nav a,
.main-nav span {
    position: relative;
    display: flex;
	align-items: center;
	height: 22px;
	line-height: 1;

    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1rem;

    color: #000;
    text-decoration: none;
    cursor: pointer;

    transition:
        transform 0.15s ease,
        color 0.15s ease;
}


/* Hover = lichte schaal */
.main-nav a:hover,
.main-nav span:hover {
	/*transform: scale(1.05);*/
	color: hsla(336,100%,45%,1.00);
}

/* Visited links */
.main-nav a:visited {
	/*color: #65346A;*/
}

/* Actieve pagina */
.main-nav a.active,
.main-nav .active > span {
	font-weight: 600;
	color: hsla(336,100%,38%,1.00);
}


/* ==============================
   SUBNAVIGATIE (DROPDOWN)
   ============================== */

.nav-item {
    position: relative;
}

/* pijltje bij Werk */
.nav-item.has-sub > .nav-toggle::after {
    content: "▾";
    font-size: 0.7em;
    margin-left: 6px;
}

/* container */
.sub-nav {
    position: absolute;
    top: 100%;
    left: 0;

    display: none;
    flex-direction: column;

    min-width: 260px;
    padding: 8px 0;

    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    z-index: 100;
	
	text-transform: capitalize;
}

/* items */
.sub-nav a {
    padding: 8px 16px;
    white-space: nowrap;

    transform: none; /* voorkomt scale-stack */
	text-transform: capitalize;
}

/* hover in dropdown */
.sub-nav a:hover {
    background: #f2f2f2;
    transform: none;
}

/* active item in submenu */
.sub-nav a.active {
    font-weight: 600;
}


/* ==============================
   OPENEN DROPDOWN
   ============================== */

.has-sub:hover .sub-nav {
    display: flex;
}

.has-sub.open .sub-nav {
    display: flex;
}

/* ==============================
   ACCESSIBILITY (OPTIONEEL MAAR NETJES)
   ============================== */

.main-nav a:focus-visible,
.main-nav span:focus-visible {
    outline: 2px solid #000;
    outline-offset: 4px;
}


/* ==============================
   RESPONSIVE BASIS
   ============================== */

@media (max-width: 768px) {

    .site-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .main-nav {
        flex-wrap: wrap;
        gap: 16px;
    }

    .sub-nav {
        position: static;
        box-shadow: none;
        padding-left: 12px;
    }
}