/**
 * Hello Elementor parent — reset.css (handle: `hello-elementor`)
 *
 * Relevante parent-regels (niet onze classes):
 * - `a`, `a:hover`, `a:active` → color #c36 / #336
 * - `button`, `[type=button]`, `[type=submit]` → border & color #c36
 * - `button:hover`, `button:focus`, `[type=button]:hover`, … → background #c36, color #fff
 *
 * Onze header: `.site-header-shell` > `.site-header` (geen Elementor `.site-navigation-toggle`).
 * Hamburger: `button.nav-toggle` · telefoon: `a.site-header__icon-act.btn-outline`
 *
 * @see hello-elementor/assets/css/reset.css
 */

/* ─── Hamburger (button.nav-toggle) ───────────────────────────────────────── */
.site-header-shell .site-header button.nav-toggle,
.site-header-shell .site-header .nav-toggle[type="button"] {
	-webkit-appearance: none;
	appearance: none;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-align: center;
	white-space: nowrap;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-background);
	color: var(--color-primary);
}

.site-header-shell .site-header button.nav-toggle:hover,
.site-header-shell .site-header button.nav-toggle:focus,
.site-header-shell .site-header button.nav-toggle:active,
.site-header-shell .site-header .nav-toggle[type="button"]:hover,
.site-header-shell .site-header .nav-toggle[type="button"]:focus,
.site-header-shell .site-header .nav-toggle[type="button"]:active {
	background-color: var(--color-background-alt);
	border-color: rgba(22, 59, 109, 0.25);
	color: var(--color-primary);
	text-decoration: none;
}

.site-header-shell .site-header button.nav-toggle[aria-expanded="true"],
.site-header-shell .site-header button.nav-toggle[aria-expanded="true"]:hover,
.site-header-shell .site-header button.nav-toggle[aria-expanded="true"]:focus,
.site-header-shell .site-header button.nav-toggle[aria-expanded="true"]:active {
	background-color: var(--color-background);
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.site-header-shell .site-header button.nav-toggle:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* ─── Telefoon / WhatsApp in header (a.btn-outline) ───────────────────────── */
.site-header-shell .site-header .site-header__actions a.site-header__icon-act,
.site-header-shell .site-header .site-header__actions a.site-header__icon-act:hover,
.site-header-shell .site-header .site-header__actions a.site-header__icon-act:focus,
.site-header-shell .site-header .site-header__actions a.site-header__icon-act:active {
	color: var(--color-primary);
	text-decoration: none;
}

.site-header-shell .site-header .site-header__actions a.site-header__icon-act.btn-outline {
	background-color: transparent;
	border-color: rgba(22, 59, 109, 0.35);
}

.site-header-shell .site-header .site-header__actions a.site-header__icon-act.btn-outline:hover,
.site-header-shell .site-header .site-header__actions a.site-header__icon-act.btn-outline:focus {
	background-color: var(--color-background-alt);
	border-color: rgba(22, 59, 109, 0.55);
	color: var(--color-primary-dark);
}

.site-header-shell .site-header .site-header__actions a.site-header__icon-act.btn-outline:active {
	background-color: var(--color-background-alt);
	border-color: rgba(22, 59, 109, 0.55);
	color: var(--color-primary-dark);
}

.site-header-shell .site-header .site-header__actions a.site-header__icon-act--wa.btn-outline:hover,
.site-header-shell .site-header .site-header__actions a.site-header__icon-act--wa.btn-outline:focus {
	color: #128c7e;
	border-color: rgba(18, 140, 126, 0.45);
	background-color: rgba(37, 211, 102, 0.08);
}

/* Spoed-knop: accent, geen Hello-linkkleur #c36 */
.site-header-shell .site-header .site-header__actions a.site-header__spoed.btn-outline,
.site-header-shell .site-header .site-header__actions a.site-header__spoed.btn-outline:hover,
.site-header-shell .site-header .site-header__actions a.site-header__spoed.btn-outline:focus,
.site-header-shell .site-header .site-header__actions a.site-header__spoed.btn-outline:active {
	color: var(--color-accent-hover);
}

.site-header-shell .site-header .site-header__actions a.site-header__spoed.btn-outline:hover,
.site-header-shell .site-header .site-header__actions a.site-header__spoed.btn-outline:focus {
	background-color: rgba(214, 40, 40, 0.06);
	border-color: rgba(214, 40, 40, 0.65);
}