/* Header and footer. */

/* ---------- Header ---------- */
.hh-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: var(--hh-paper);
	border-bottom: 1px solid var(--hh-line);
	transition: background-color 0.3s var(--hh-ease), border-color 0.3s var(--hh-ease);
}
.hh-header__inner {
	display: flex;
	align-items: center;
	gap: var(--hh-space-4);
	max-width: var(--hh-container);
	min-height: var(--hh-header-h);
	margin: 0 auto;
	padding: 0 var(--hh-gutter);
}
.hh-header__brand { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }
.hh-header__logo { display: block; height: 52px; width: auto; }
.hh-header__name { font-family: var(--hh-font-display); font-size: 1.35rem; color: var(--hh-forest); }

.hh-header__nav { display: flex; align-items: center; gap: var(--hh-space-4); }
.hh-menu { display: flex; gap: var(--hh-space-4); margin: 0; padding: 0; list-style: none; }
.hh-menu a {
	display: inline-block;
	padding: 0.4em 0;
	color: var(--hh-ink);
	font-size: var(--hh-text-sm);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.hh-menu a:hover,
.hh-menu .current_page_item > a { border-bottom-color: var(--hh-gold); color: var(--hh-forest); }
.hh-header__cta { padding: 0.75em 1.25em; }

/* Over the home page hero: transparent until scrolled. */
.hh-has-hero .hh-header:not(.is-scrolled):not(.is-open) {
	background: transparent;
	border-bottom-color: transparent;
}
.hh-has-hero .hh-header:not(.is-scrolled):not(.is-open) .hh-menu a,
.hh-has-hero .hh-header:not(.is-scrolled):not(.is-open) .hh-header__name { color: var(--hh-paper); }
.hh-has-hero .hh-header:not(.is-scrolled):not(.is-open) .hh-header__toggle-bars,
.hh-has-hero .hh-header:not(.is-scrolled):not(.is-open) .hh-header__toggle-bars::before,
.hh-has-hero .hh-header:not(.is-scrolled):not(.is-open) .hh-header__toggle-bars::after { background: var(--hh-paper); }
.hh-has-hero .hh-header {
	position: fixed;
	left: 0;
	right: 0;
}

/* Mobile toggle */
.hh-header__toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.hh-header__toggle-bars,
.hh-header__toggle-bars::before,
.hh-header__toggle-bars::after {
	display: block;
	position: relative;
	width: 22px;
	height: 2px;
	margin: 0 auto;
	background: var(--hh-forest);
	transition: transform 0.25s var(--hh-ease), background-color 0.25s;
}
.hh-header__toggle-bars::before,
.hh-header__toggle-bars::after { content: ""; position: absolute; left: 0; }
.hh-header__toggle-bars::before { top: -7px; }
.hh-header__toggle-bars::after { top: 7px; }
.is-open .hh-header__toggle-bars { background: transparent; }
.is-open .hh-header__toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.is-open .hh-header__toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 600px) {
	/* The admin bar scrolls away on small screens, so the header sits at the very top. */
	.hh-header,
	.hh-has-hero .hh-header { top: 0; }
}

@media (max-width: 960px) {
	:root { --hh-header-h: 64px; }
	.hh-header__logo { height: 42px; }
	.hh-header__toggle { display: block; order: 3; }
	.hh-header__nav {
		position: fixed;
		inset: calc(var(--hh-header-h) + var(--wp-admin--admin-bar--height, 0px)) 0 0 0;
		flex-direction: column;
		align-items: stretch;
		gap: var(--hh-space-4);
		padding: var(--hh-space-5) var(--hh-gutter);
		background: var(--hh-paper);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 0.25s var(--hh-ease), transform 0.25s var(--hh-ease), visibility 0s 0.25s;
	}
	.is-open .hh-header__nav {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.25s var(--hh-ease), transform 0.25s var(--hh-ease);
	}
	.hh-menu { flex-direction: column; gap: 0; }
	.hh-menu a {
		display: block;
		padding: 0.85em 0;
		font-family: var(--hh-font-display);
		font-size: 1.5rem;
		color: var(--hh-forest);
		border-bottom: 1px solid var(--hh-line);
	}
	.hh-header__cta { justify-content: center; padding: 1em; }
	.hh-nav-open { overflow: hidden; }
}

/* Astra's back-to-top button, on brand. */
#ast-scroll-top {
	background-color: var(--hh-forest);
	color: var(--hh-paper);
	border-radius: var(--hh-radius-sm);
}
#ast-scroll-top:hover { background-color: var(--hh-forest-deep); }

/* ---------- Footer ---------- */
.hh-footer {
	background: var(--hh-forest-deep);
	color: rgba(250, 247, 240, 0.78);
	font-size: var(--hh-text-sm);
}
.hh-footer a { color: var(--hh-paper); text-decoration: none; }
.hh-footer a:hover { color: var(--hh-gold-light); text-decoration: underline; }
.hh-footer a.hh-btn,
.hh-footer a.hh-btn:hover { color: var(--hh-forest-deep); text-decoration: none; }
.hh-footer__inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: var(--hh-space-5);
	max-width: var(--hh-container);
	margin: 0 auto;
	padding: var(--hh-space-6) var(--hh-gutter) var(--hh-space-5);
}
.hh-footer__name { font-family: var(--hh-font-display); font-size: 1.75rem; color: var(--hh-paper); margin: 0 0 var(--hh-space-3); }
.hh-footer__tagline { margin: 0 0 var(--hh-space-4); max-width: 38ch; }
.hh-footer__heading {
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-sm);
	font-weight: 600;
	color: var(--hh-gold-light);
	margin: 0 0 var(--hh-space-3);
}
.hh-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55em; }
.hh-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--hh-space-3);
	max-width: var(--hh-container);
	margin: 0 auto;
	padding: var(--hh-space-4) var(--hh-gutter);
	border-top: 1px solid rgba(250, 247, 240, 0.14);
	font-size: var(--hh-text-xs);
}
.hh-footer__base p { margin: 0; }
.hh-footer__legal { display: flex; gap: var(--hh-space-4); }

@media (max-width: 960px) {
	.hh-footer__inner { grid-template-columns: 1fr 1fr; }
	.hh-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.hh-footer__inner { grid-template-columns: 1fr; }
}
