/*
 * HLC Zuigen (English site) — shared header, mobile menu and footer.
 * Loaded by every page. Classes are prefixed with "hlc-" so they never clash
 * with the page-level styles in voice-method.html / voice-method-school.html.
 * Colors follow the HLC Zuigen color plan (eucalyptus green / sand beige / clay greige).
 */
:root {
	--hlc-green: #7FA79E;
	--hlc-green-hover: #6B9489;
	--hlc-green-text: #4E7A70;
	--hlc-sand: #C2B299;
	--hlc-clay: #B6A28F;
	--hlc-ink: #3D3A35;
	--hlc-sub: #6A645B;
	--hlc-caption: #8A8378;
	--hlc-base: #FAF8F4;
	--hlc-rule: #E6DFD3;
	--hlc-rule-soft: #ECE6DC;
	--hlc-serif: "Cormorant Garamond", "Zen Old Mincho", Georgia, serif;
	--hlc-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
	--hlc-sans: "Zen Kaku Gothic New", "Helvetica Neue", Arial, sans-serif;
}

/* ---- Header ---- */
.hlc-header {
	position: sticky; top: 0; z-index: 20;
	background: rgba(250, 248, 244, .92);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--hlc-rule-soft);
	font-family: var(--hlc-sans); line-height: 1.5; color: var(--hlc-ink);
}
.hlc-header *, .hlc-footer * { box-sizing: border-box; }
.hlc-header a, .hlc-footer a { text-decoration: none; }
.hlc-header__inner {
	position: relative; max-width: 1160px; margin: 0 auto; padding: 0 24px; height: 72px;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.hlc-logo { display: flex; flex-direction: column; gap: 2px; color: var(--hlc-ink); }
.hlc-logo:hover { color: var(--hlc-ink); }
.hlc-logo__name { font-family: var(--hlc-mincho); font-size: 19px; letter-spacing: .08em; }
.hlc-logo__sub { font-family: "Cormorant Garamond", serif; font-size: 10.5px; letter-spacing: .3em; color: var(--hlc-caption); }

.hlc-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; letter-spacing: .04em; }
.hlc-nav a { color: var(--hlc-ink); }
.hlc-nav a:hover, .hlc-nav a[aria-current="page"] { color: var(--hlc-green-text); }
.hlc-nav .hlc-nav__lang { font-size: 13px; color: var(--hlc-caption); }
.hlc-nav .hlc-nav__cta { padding: 10px 22px; border-radius: 999px; background: var(--hlc-green); color: #fff; letter-spacing: .08em; }
.hlc-nav .hlc-nav__cta:hover, .hlc-nav .hlc-nav__cta[aria-current="page"] { background: var(--hlc-green-hover); color: #fff; }

/* Mobile menu (no JavaScript) */
.hlc-mnav { display: none; }
.hlc-mnav summary {
	list-style: none; cursor: pointer; width: 44px; height: 44px;
	display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.hlc-mnav summary::-webkit-details-marker { display: none; }
.hlc-mnav summary span { display: block; width: 22px; height: 1px; background: var(--hlc-ink); transition: transform .2s; }
.hlc-mnav[open] summary span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.hlc-mnav[open] summary span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.hlc-mnav__panel {
	position: absolute; left: 0; right: 0; top: 72px;
	display: flex; flex-direction: column; padding: 8px 24px 28px;
	background: var(--hlc-base); border-top: 1px solid var(--hlc-rule-soft); border-bottom: 1px solid var(--hlc-rule-soft);
	box-shadow: 0 12px 24px rgba(60, 50, 40, .06);
}
.hlc-mnav__panel a { padding: 16px 0; border-bottom: 1px solid var(--hlc-rule-soft); color: var(--hlc-ink); font-size: 15px; letter-spacing: .04em; }
.hlc-mnav__panel .hlc-mnav__cta { margin-top: 20px; padding: 14px; border: 0; border-radius: 999px; background: var(--hlc-green); color: #fff; text-align: center; letter-spacing: .08em; }

@media (max-width: 859px) {
	.hlc-nav { display: none; }
	.hlc-mnav { display: block; }
}

/* ---- Footer ---- */
.hlc-footer { background: var(--hlc-ink); color: #D9D2C6; padding: 56px 24px 32px; font-family: var(--hlc-sans); line-height: 1.6; }
.hlc-footer__inner { max-width: 1160px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.hlc-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.hlc-footer__brand { display: flex; flex-direction: column; gap: 6px; }
.hlc-footer__name { font-family: var(--hlc-mincho); font-size: 19px; letter-spacing: .08em; color: var(--hlc-base); }
.hlc-footer__sub { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: .3em; }
.hlc-footer__nav { display: flex; flex-wrap: wrap; gap: 16px 32px; font-size: 13px; letter-spacing: .04em; }
.hlc-footer__nav a { color: #D9D2C6; }
.hlc-footer__nav a:hover { color: #fff; }
.hlc-footer__note { margin: 0; font-size: 12px; line-height: 1.9; color: #ADA597; max-width: 44em; }
.hlc-footer__copy { font-size: 11px; letter-spacing: .1em; color: #8F877A; }

:focus-visible { outline: 2px solid var(--hlc-green-text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hlc-mnav summary span { transition: none; } }