/* ==========================================================================
   Site header — light (interior pages) + dark (homepage hero overlay).
   .cc-site-header--dark relies on its parent (the hero) being position:relative;
   front-page.php sets that up. On mobile, the dark header drops out of the
   overlay and becomes a solid bar (README → 1k: "solid-colour top bar").
   ========================================================================== */

.cc-site-header {
	--cc-focus-color: #fff;
}

.cc-site-header--light {
	position: relative;
	background: var(--cc-cream);
	border-bottom: 1px solid var(--cc-border-2);
	--cc-focus-color: var(--cc-teal);
}

.cc-site-header--dark {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
}

.cc-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: var(--cc-max-page);
	margin-inline: auto;
}

.cc-site-header--light .cc-site-header__inner {
	/* Horizontal padding matches --cc-space-section-h (46px), same as
	   .cc-container, so the logo lines up with page headings below it. */
	padding: 20px var(--cc-space-section-h);
}

.cc-site-header--dark .cc-site-header__inner {
	padding: 26px var(--cc-space-section-h);
}

.cc-logo {
	display: block;
	width: auto;
}

.cc-logo--light-header { height: 26px; }
.cc-logo--dark-header { height: 30px; }
.cc-logo--footer { height: 21px; }

.cc-logo-link,
.cc-footer-logo-link {
	flex: none;
	line-height: 0;
}

/* Hamburger toggle — hidden on desktop, shown ≤767px */
.cc-nav-toggle {
	display: none;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
}

.cc-nav-toggle__bar {
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform var(--cc-transition-fast), opacity var(--cc-transition-fast);
}

.cc-site-header--dark .cc-nav-toggle { color: #fff; }
.cc-site-header--light .cc-nav-toggle { color: var(--cc-ink); }

.cc-nav-collapse {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
	gap: 24px;
}

.cc-nav__list {
	display: flex;
	align-items: center;
	gap: 24px;
}

.cc-site-header--dark .cc-nav__list { gap: 26px; }

.cc-nav__link {
	display: inline-block;
	font: 500 14px var(--cc-font-sans);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	color: var(--cc-body-text);
	transition: color var(--cc-transition-fast), border-color var(--cc-transition-fast);
}

.cc-nav__link:hover { color: var(--cc-ink); }

.cc-site-header--light .cc-nav__link.is-current { font-weight: 600; }
.cc-site-header--light[data-accent="teal"] .cc-nav__link.is-current { color: var(--cc-teal); border-color: var(--cc-teal); }
.cc-site-header--light[data-accent="slate"] .cc-nav__link.is-current { color: var(--cc-slate); border-color: var(--cc-slate); }

.cc-site-header--dark .cc-nav__link { color: rgba(255, 255, 255, .85); }
.cc-site-header--dark .cc-nav__link:hover { color: #fff; }
.cc-site-header--dark .cc-nav__link.is-current { color: #fff; border-color: #fff; }

.cc-nav__actions {
	display: flex;
	align-items: center;
	gap: 11px;
}

.cc-nav__login {
	font: 500 14px var(--cc-font-sans);
	color: #fff;
	text-decoration: none;
}

.cc-nav__login:hover { text-decoration: underline; }

.cc-btn--nav {
	padding: 11px 18px;
	font-size: 13px;
}

.cc-site-header--dark .cc-btn--nav { padding: 10px 18px; }

/* True centering at desktop — logo | nav (centred) | actions, via a 3-column
   grid so the nav sits in the middle of the whole header rather than just
   the space left over after the logo. .cc-nav-collapse becomes
   display:contents so its two children (the nav list and the actions div)
   act as independent grid items; mobile/tablet keep the existing flex +
   hamburger-dropdown behaviour untouched (this only applies ≥1024px). */
@media (min-width: 1024px) {
	.cc-site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: 24px;
	}

	.cc-logo-link { grid-column: 1; justify-self: start; }
	.cc-nav-collapse { display: contents; }
	.cc-nav { grid-column: 2; justify-self: center; }
	.cc-nav__actions { grid-column: 3; justify-self: end; }
}

/* The nav switches to the hamburger pattern a bit earlier than the general
   tablet breakpoint (1023px, used elsewhere for grid collapses) — six nav
   items plus a CTA button start crowding/wrapping around 768–1023px, well
   before the general mobile breakpoint. */
@media (max-width: 1023px) {
	.cc-site-header--light .cc-site-header__inner,
	.cc-site-header--dark .cc-site-header__inner {
		padding: 16px 20px;
	}

	/* The homepage hero header becomes an opaque bar on mobile instead of a
	   transparent overlay, per the 1k mobile reference. Stays position:absolute
	   (rather than dropping into flow) so it never affects the hero's height. */
	.cc-site-header--dark {
		background: var(--cc-ink);
	}

	.cc-nav-toggle { display: flex; }

	.cc-nav-collapse {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		background: var(--cc-cream);
		padding: 24px 20px 28px;
		border-bottom: 1px solid var(--cc-border-2);
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--cc-transition-base);
	}

	.cc-site-header--dark .cc-nav-collapse {
		background: var(--cc-ink);
		border-bottom-color: rgba(255, 255, 255, .12);
	}

	.cc-site-header.cc-nav-is-open .cc-nav-collapse {
		max-height: none;
		opacity: 1;
		visibility: visible;
	}

	.cc-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.cc-nav__link {
		display: block;
		width: 100%;
		padding: 10px 2px;
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.cc-nav__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.cc-nav__actions .cc-btn { justify-content: center; }
}

/* ==========================================================================
   Site footer
   ========================================================================== */

.cc-site-footer {
	background: var(--cc-ink);
}

.cc-site-footer__inner {
	max-width: var(--cc-max-page);
	margin-inline: auto;
	padding-inline: var(--cc-space-section-h);
}

.cc-site-footer__inner--simple {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-block: 32px;
}

.cc-footer-links {
	font: 400 13px var(--cc-font-sans);
	color: #C9C4B9;
}

.cc-footer-links a {
	color: inherit;
	text-decoration: none;
}

.cc-footer-links a:hover { color: #fff; text-decoration: underline; }

.cc-footer-copyright--simple {
	font: 400 12px var(--cc-font-sans);
	color: #7c8a86;
}

.cc-site-footer--full {
	padding-top: 56px;
}

.cc-footer-cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 44px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.cc-footer-heading {
	font: 300 26px var(--cc-font-serif);
	color: #fff;
	margin-bottom: 14px;
}

.cc-footer-address {
	font: 400 14px / 1.7 var(--cc-font-sans);
	color: #B8B3A6;
}

.cc-footer-social {
	display: flex;
	gap: 12px;
	margin-top: 18px;
}

.cc-footer-social__icon {
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 600 12px var(--cc-font-sans);
	color: #B8B3A6;
	text-decoration: none;
}

.cc-footer-social__icon:hover { border-color: rgba(255, 255, 255, .5); color: #fff; }

.cc-footer-col__label {
	font: 600 12px var(--cc-font-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #7c8a86;
	margin-bottom: 14px;
}

.cc-footer-col__list {
	display: flex;
	flex-direction: column;
	font: 400 14px var(--cc-font-sans);
	line-height: 2.1;
	color: #C9C4B9;
}

.cc-footer-col__list a,
.cc-footer-contact a {
	color: inherit;
	text-decoration: none;
}

.cc-footer-col__list a:hover,
.cc-footer-contact a:hover {
	color: #fff;
	text-decoration: underline;
}

.cc-footer-contact {
	font: 400 14px / 1.7 var(--cc-font-sans);
	color: #C9C4B9;
}

.cc-footer-copyright {
	padding: 20px 0;
	font: 400 12px var(--cc-font-sans);
	color: #7c8a86;
}

@media (max-width: 1023px) {
	.cc-footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
	.cc-footer-col--brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
	.cc-footer-cols { grid-template-columns: 1fr; }
	.cc-site-footer__inner { padding-inline: 20px; }
	.cc-site-footer__inner--simple { flex-direction: column; align-items: flex-start; gap: 16px; }
	.cc-footer-links { display: flex; flex-direction: column; gap: 8px; }
	.cc-footer-links span { display: none; }
}

/* ==========================================================================
   Confidentiality bar — every page, below the footer.
   ========================================================================== */

.cc-confidentiality-bar {
	background: var(--cc-bar);
}

.cc-confidentiality-bar__inner {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	max-width: var(--cc-max-page);
	margin-inline: auto;
	padding: 15px var(--cc-space-section-h);
}

.cc-confidentiality-bar__icon {
	flex: none;
	margin-top: 2px;
}

.cc-confidentiality-bar__text {
	font: 400 12.5px / 1.55 var(--cc-font-sans);
	color: #8f8a7d;
}

.cc-confidentiality-bar__text strong {
	color: #C9C4B9;
	font-weight: 600;
}

.cc-confidentiality-bar__link {
	color: #9DBDB6;
	text-decoration: underline;
}

.cc-confidentiality-bar__link:hover { color: #B8CFCA; }

@media (max-width: 767px) {
	.cc-confidentiality-bar__inner { padding: 14px 20px; }
}