/* Header, menu en footer van het thema Adult Nederland.
   Maten en kleuren nagemeten op de Elementor-header (sjabloon 88) van 21 okt 2026. */

body { background: #000; }

.an-header {
	background: #000;
	border-bottom: 1px solid #1a1a1a;
	position: relative;
	z-index: 100;
}
.an-header__binnen {
	max-width: 1117px; /* logo en menu op dezelfde plek als in de Elementor-header (94px bij 1265px breed) */
	margin: 0 auto;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.an-header__logo a { display: block; line-height: 0; color: #fff; font-weight: 700; text-decoration: none; }
.an-header__logo .custom-logo { width: 100px; max-width: 100px; height: auto; }

.an-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0 2px; }
.an-menu li { list-style: none; margin: 0; position: relative; }
.an-menu a.menu-item-link,
.an-menu > li > a {
	display: block;
	padding: 8px 15px;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	transition: color .15s;
}
.an-menu a.menu-item-link:hover,
.an-menu .current-menu-item > a.menu-item-link,
.an-menu .current_page_item > a.menu-item-link { color: #e91e63; }
/* Inloggen / Registreren / Word model (de plugin geeft deze een eigen knopstijl) */
.an-menu .nav-item-standalone { margin-left: 8px; }
.an-menu .nav-item-standalone > a { padding: 7px 16px; }

/* Submenu (nu niet in gebruik, voor de zekerheid) */
.an-menu .sub-menu { display: none; position: absolute; top: 100%; right: 0; min-width: 200px; list-style: none; margin: 0; padding: 6px 0; background: #111; border: 1px solid #222; border-radius: 8px; }
.an-menu li:hover > .sub-menu, .an-menu li:focus-within > .sub-menu { display: block; }
.an-menu .sub-menu a { padding: 8px 16px; color: #ccc; }

/* #site-header erbij: de plugin geeft elke <button> een roze achtergrond met !important */
#site-header .an-menuknop {
	display: none;
	background: transparent !important;
	border: 0 !important;
	color: #fff !important;
	padding: 6px;
	line-height: 0;
	cursor: pointer;
}
#site-header .an-menuknop:hover { background: transparent !important; color: #e91e63 !important; }

@media (max-width: 1024px) {
	.an-header__binnen { padding: 16px 16px; flex-wrap: wrap; }
	.an-header__logo .custom-logo { width: 90px; max-width: 90px; }
	#site-header .an-menuknop { display: inline-flex; }
	.an-nav { display: none; width: 100%; }
	.an-header.is-open .an-nav { display: block; }
	.an-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 4px; border-top: 1px solid #1a1a1a; }
	.an-menu a.menu-item-link, .an-menu > li > a { padding: 12px 4px; border-bottom: 1px solid #111; }
	.an-menu .nav-item-standalone { margin: 10px 0 0; }
	.an-menu .nav-item-standalone > a { display: flex !important; justify-content: center; padding: 10px 16px !important; }
	.an-menu .sub-menu { position: static; display: block; border: 0; background: transparent; padding-left: 12px; }
}

/* Paginakop zoals in Hello, maar leesbaar op zwart */
.site-main .page-header .entry-title { color: #fff; }

/* Skip-link (toegankelijkheid) */
.skip-link.screen-reader-text:focus { clip: auto; clip-path: none; height: auto; width: auto; position: fixed; top: 8px; left: 8px; z-index: 100000; padding: 10px 16px; background: #fff; color: #000; border-radius: 6px; }

/* Pagina's die met Elementor waren opgebouwd en nu gewone inhoud zijn (login, register): dezelfde opbouw als
   de Elementor-containers (1140px breed, alles gecentreerd, 20px tussenruimte) en de tekstwidget (Poppins, #aaa) */
.an-el-pagina { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 1160px; margin: 0 auto; padding: 10px; }
.an-el-tekst { text-align: center; font-family: 'Poppins', sans-serif; color: #aaa; max-width: 100%; }
.an-el-tekst h2, .an-el-tekst h3 { color: #fff; }
.an-el-blok { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 10px; } /* geen gap: shortcodes zetten ook <style>/<script> neer */
.an-el-blok > * { max-width: 100%; }
/* Wat Elementor op zijn pagina's deed (.elementor a) */
.an-ex-elementor .page-content a { text-decoration: none; }