/* Header/menu/footer restyling. Dit overschrijft alleen kleur/spacing van
   de bestaande Divi-thema-markup (wp-content/themes/hwa/, niet in deze repo)
   via de al site-breed geladen plugin-CSS -- er wordt niets aan het thema
   zelf aangepast. Zelfde kleur-tokens als hwa-overview.css/hwa-live-data.css
   zodat oud en nieuw straks 1 geheel vormen. !important alleen op de regels
   die een bestaande Divi-achtergrond (foto/inline) moeten vervangen. */

:root {
	--chrome-ink: #182430;
	--chrome-ink-2: #101923;
	--chrome-accent: #2569c9;
	--chrome-accent-soft: #e5edf9;
	--chrome-warm: #d9820f;
	--chrome-muted: #b7c2cc;
	--chrome-border: rgba(255,255,255,.12);
}

/* ---------- Top-balkje (Registreren/Inloggen) ---------- */
#top-header {
	background: var(--chrome-ink) !important;
}
#et-secondary-nav a {
	color: #fff !important;
	font-size: .78rem;
	padding: 4px 12px !important;
	border-radius: 999px;
	background: rgba(255,255,255,.12);
	transition: background .15s ease;
}
#et-secondary-nav a:hover {
	background: var(--chrome-accent) !important;
	color: #fff !important;
}

/* ---------- Hoofdheader / menu ---------- */
#main-header {
	background: linear-gradient(135deg, #eaf2fb 0%, #d7e6f7 60%, #cfe0f5 100%) !important;
	box-shadow: 0 2px 10px rgba(20,40,60,.12);
	border-bottom: 1px solid #c4d7ec;
}

#top-menu-nav #top-menu > li > a {
	color: var(--chrome-ink) !important;
	position: relative;
	transition: color .15s ease;
}
#top-menu-nav #top-menu > li > a:hover {
	color: var(--chrome-accent) !important;
}
/* dun accentlijntje onder een hoofdmenu-item bij hover, i.p.v. alleen kleurverschil */
#top-menu-nav #top-menu > li::after {
	content: "";
	display: block;
	height: 2px;
	background: var(--chrome-accent);
	transform: scaleX(0);
	transition: transform .15s ease;
	margin-top: 2px;
}
#top-menu-nav #top-menu > li:hover::after { transform: scaleX(1); }

/* submenu's (mega-menu dropdowns) */
#top-menu-nav .sub-menu {
	background: #ffffff !important;
	border: 1px solid #e1e8f0;
	box-shadow: 0 10px 28px -10px rgba(20,40,60,.28);
}
#top-menu-nav .sub-menu a {
	color: var(--chrome-ink) !important;
}
#top-menu-nav .sub-menu a:hover {
	background: var(--chrome-accent-soft) !important;
	color: var(--chrome-accent) !important;
}

/* ---------- Footer ---------- */
#main-footer {
	background: var(--chrome-ink) !important;
	background-image: none !important;
}

#footer-widgets .footer-widget .title {
	color: var(--chrome-warm) !important;
	font-size: 1.05rem;
	letter-spacing: .01em;
	margin-bottom: 10px;
}
#footer-widgets .footer-widget a,
#footer-widgets .footer-widget p {
	color: #d7dee5 !important;
}
#footer-widgets .footer-widget a:hover {
	color: var(--chrome-warm) !important;
	text-decoration: underline;
}
#footer-widgets .footer-widget .ddrow {
	border-bottom: 1px solid var(--chrome-border);
	padding: 4px 0;
}

/* bottom-balk: had een contrastprobleem (grijze tekst op effen oranje) --
   nu donker en consistent met de rest van de footer, oranje als accent. */
#footer-bottom {
	background: var(--chrome-ink-2) !important;
	border-top: 1px solid var(--chrome-border);
}
#footer-info {
	color: var(--chrome-muted) !important;
}
#footer-info a {
	color: var(--chrome-warm) !important;
}
#footer-info a:hover { text-decoration: underline; }