/**
 * Header and footer — built from the client's Figma design.
 *
 * Loaded on every page, outside the .sc-page scope, because the header and
 * footer are shared chrome rather than part of any one template.
 *
 * Specificity note: the header keeps #masthead and the footer keeps #colophon
 * so BuddyBoss hooks and scripts still find them. Parent theme rules target
 * those IDs, so container-level rules here are written as #masthead.sc-header
 * / #colophon.sc-footer to outrank them. Do not "simplify" those selectors.
 */

:root {
	--sc-hf-navy:        #1e3a8a;   /* sampled from the supplied logo asset */
	--sc-hf-navy-hover:  #172f6f;
	--sc-hf-ink:         #1f2937;
	--sc-hf-tint:        #dbeafe;
	--sc-hf-line:        #e5e7eb;
	--sc-hf-hover:       #f3f4f6;
	/* 1240 - 2x32 = 1176px of content, matching the design's 132px side margins
	   on a 1440 frame. The header and footer share it so they stay aligned. */
	--sc-hf-shell:       1240px;
	--sc-hf-gutter:      32px;
	--sc-hf-font:        "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Shared width constraint. Named .sc-shell, not .sc-container, because the
   interim homepage template already defines its own .sc-container. */
.sc-shell {
	width: 100%;
	max-width: var(--sc-hf-shell);
	margin-inline: auto;
	padding-inline: var(--sc-hf-gutter);
	box-sizing: border-box;
}

.sc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--sc-hf-navy);
	color: #fff;
	font: 500 15px/1 var(--sc-hf-font);
	text-decoration: none;
}

.sc-skip-link:focus {
	left: 0;
}

/* BuddyBoss's own mobile toolbar — kept only as a hook for parent scripts. */
#mobile-header {
	display: none !important;
}

/* The navy top bar was removed on 2026-10-07 at the client's request — see the
   note in header.php. Nothing else was positioned against its height. */

/* ============================================================ header ==== */
#masthead.sc-header {
	position: relative;
	z-index: 90;
	background: #fff;
	border-bottom: 1px solid var(--sc-hf-line);
	box-shadow: none;
	font-family: var(--sc-hf-font);
}

#masthead.sc-header .sc-header__inner {
	display: flex;
	align-items: center;
	/*
	 * Minimum breathing room between the logo and the first nav item — the nav
	 * is pushed right by margin-left:auto, so this is normally the floor, not
	 * the gap. With seven top-level items the header is full and the floor IS
	 * the gap, so it came down from 48px. See the note on .sc-nav__link.
	 */
	gap: 32px;
	min-height: 84px;
	padding-block: 16px;
}

#masthead.sc-header .sc-logo {
	flex: none;
	display: inline-flex;
	align-items: center;
	line-height: 0;
	border: 0;
}

#masthead.sc-header .sc-logo__img {
	display: block;
	width: auto;
	/* 40px, down from 44. Part of the room found for the seventh nav item. */
	height: 40px;
}

#masthead.sc-header .sc-logo__text {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--sc-hf-navy);
}

/* ----------------------------------------------------------- nav ------- */
#masthead.sc-header .sc-nav {
	margin-left: auto;
	/*
	 * Optical alignment. Nav links carry horizontal padding, so the last
	 * item's text stopped 12px short of the container edge while the logo —
	 * which has no transparent bleed — sat flush against it. That read as
	 * uneven white space. Pulling the nav out by exactly the link padding
	 * makes the visible text line up with the logo's left edge.
	 */
	margin-right: -6px;
}

#masthead.sc-header .sc-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#masthead.sc-header .sc-nav__item {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * ⚠️ These numbers are the result of a measurement, not taste.
 *
 * "Difficult Conversations" was added as a seventh top-level item (2026-09-01).
 * At the previous 15px / 12px padding the seven items needed 1042px inside a
 * band that offers 885px — 157px short, and short at EVERY width, because the
 * shell is capped at 1240px. Type could not stay at 15px and hold all seven
 * labels on one line.
 *
 * Room was found in three places rather than one, so no single value had to
 * take an ugly cut: link padding 12 -> 6, logo 44 -> 40, logo gap 48 -> 32.
 * 6px is not arbitrary: at 7px the last item's text finished 13px past the
 * logo's left margin, and 6px lands it flush at 132px on both sides.
 * Font went 15 -> 14, the smallest step that works; do not go below it — this
 * site's readers are older adults and the nav is already the smallest type on
 * the page.
 *
 * If an item is ever removed these can go back up. Re-measure with a sweep;
 * do not eyeball it.
 */
#masthead.sc-header .sc-nav__link {
	display: block;
	padding: 9px 6px;
	border-radius: 8px;
	color: var(--sc-hf-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 160ms ease, color 160ms ease;
}

#masthead.sc-header .sc-nav__link:hover,
#masthead.sc-header .sc-nav__link:focus-visible {
	background: var(--sc-hf-hover);
	color: var(--sc-hf-navy);
	text-decoration: none;
}

#masthead.sc-header .sc-nav__item.is-current > .sc-nav__link {
	background: var(--sc-hf-tint);
	color: var(--sc-hf-navy);
	font-weight: 600;
}

/* Submenu control. Hidden on desktop, where hover opens the panel. */
#masthead.sc-header .sc-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

#masthead.sc-header .sc-nav__submenu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 100;
	min-width: 250px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--sc-hf-line);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

#masthead.sc-header .sc-nav__item--parent:hover > .sc-nav__submenu,
#masthead.sc-header .sc-nav__item--parent:focus-within > .sc-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#masthead.sc-header .sc-nav__submenu .sc-nav__link {
	padding: 9px 12px;
	font-size: 14.5px;
	font-weight: 400;
	white-space: normal;
}

/* ------------------------------------------------- mobile nav trigger -- */
.sc-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	border: 1px solid var(--sc-hf-line);
	border-radius: 10px;
	background: #fff;
	color: var(--sc-hf-navy);
	cursor: pointer;
}

.sc-nav-toggle__close {
	display: none;
}

.sc-nav-toggle[aria-expanded="true"] .sc-nav-toggle__open {
	display: none;
}

.sc-nav-toggle[aria-expanded="true"] .sc-nav-toggle__close {
	display: inline-flex;
}

/* ============================================================ footer ==== */
#colophon.sc-footer {
	background: var(--sc-hf-navy);
	color: #fff;
	font-family: var(--sc-hf-font);
	padding: 0;
	border: 0;
}

#colophon.sc-footer > .sc-shell {
	padding-top: 56px;
	padding-bottom: 32px;
}

#colophon.sc-footer .sc-footer__brand {
	margin-bottom: 24px;
}

#colophon.sc-footer .sc-logo {
	display: inline-flex;
	line-height: 0;
}

#colophon.sc-footer .sc-logo__img {
	display: block;
	width: auto;
	height: 44px;
}

#colophon.sc-footer .sc-logo__text {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
}

#colophon.sc-footer .sc-footer__legal {
	max-width: none;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
	line-height: 1.75;
}

#colophon.sc-footer .sc-footer__legal a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

#colophon.sc-footer .sc-footer__legal a:hover,
#colophon.sc-footer .sc-footer__legal a:focus-visible {
	color: #fff;
	text-decoration-thickness: 2px;
}

#colophon.sc-footer .sc-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

#colophon.sc-footer .sc-footer__social li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#colophon.sc-footer .sc-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	text-decoration: none;
	transition: background-color 160ms ease;
}

#colophon.sc-footer .sc-footer__social a:hover,
#colophon.sc-footer .sc-footer__social a:focus-visible {
	background: rgba(255, 255, 255, 0.24);
	color: #fff;
}

/* ------------------------------------------------------ bottom strip --- */
#colophon.sc-footer .sc-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

#colophon.sc-footer .sc-footer__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 18px;
}

#colophon.sc-footer .sc-footer__bar-inner p {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	line-height: 1.5;
}

/* ======================================================= breakpoints ==== */

/*
 * Drop the nav's optical pull once the viewport is too narrow to afford it.
 *
 * The pull is margin-right: -12px, so the nav box hangs 12px past the shell.
 * Above 1264 there is white space either side to absorb that. Below it the
 * shell is flush with the viewport and those 12px became a real horizontal
 * scrollbar on every page. Cosmetic alignment is not worth that.
 */
@media (max-width: 1254px) {
	#masthead.sc-header .sc-nav {
		margin-right: 0;
	}
}

/* Laptop: tighten the shell and logo. The inline nav is already gone by this
   width — see the note on the toggled panel below. */
@media (max-width: 1240px) {
	:root {
		--sc-hf-gutter: 24px;
	}

	#masthead.sc-header .sc-header__inner {
		gap: 20px;
	}

	#masthead.sc-header .sc-logo__img {
		height: 38px;
	}

	#masthead.sc-header .sc-nav__link {
		padding: 8px 6px;
		font-size: 14px;
	}

	/* Link padding drops to 6px here, so the optical pull follows it. */
	#masthead.sc-header .sc-nav {
		margin-right: -6px;
	}
}

/*
 * Switch to the toggled panel.
 *
 * 1240, not 1024. Six top-level items plus the logo need about 1290px of
 * header; below that the last item ("Reviews & Recommendations", the widest at
 * 217px) had nowhere to go and spilled ~40px past the right edge, which made
 * EVERY page on the site scroll sideways between 1025 and 1240. Measured, not
 * guessed: the inline nav fits at 1280 and does not at 1240.
 *
 * If the menu is ever shortened, this can come back down — check with a
 * responsive sweep rather than by eye.
 */
@media (max-width: 1240px) {
	.sc-nav-toggle {
		display: inline-flex;
	}

	#masthead.sc-header .sc-header__inner {
		flex-wrap: wrap;
		min-height: 72px;
	}

	#masthead.sc-header .sc-nav {
		display: none;
		order: 3;
		width: 100%;
		margin-left: 0;
		margin-right: 0;   /* the desktop optical pull does not apply stacked */
		padding-bottom: 12px;
	}

	#masthead.sc-header .sc-nav.is-open {
		display: block;
	}

	#masthead.sc-header .sc-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		border-top: 1px solid var(--sc-hf-line);
	}

	#masthead.sc-header .sc-nav__item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid var(--sc-hf-line);
	}

	#masthead.sc-header .sc-nav__link {
		flex: 1;
		padding: 14px 4px;
		border-radius: 0;
		font-size: 16px;
	}

	#masthead.sc-header .sc-nav__toggle {
		display: inline-flex;
	}

	#masthead.sc-header .sc-nav__toggle svg {
		transition: transform 160ms ease;
	}

	#masthead.sc-header .sc-nav__toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	/* Accordion instead of a floating panel. */
	#masthead.sc-header .sc-nav__submenu {
		position: static;
		display: none;
		width: 100%;
		min-width: 0;
		margin: 0 0 8px;
		padding: 0 0 0 12px;
		border: 0;
		border-left: 2px solid var(--sc-hf-tint);
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	#masthead.sc-header .sc-nav__submenu.is-open {
		display: block;
	}

	#masthead.sc-header .sc-nav__item--parent:hover > .sc-nav__submenu,
	#masthead.sc-header .sc-nav__item--parent:focus-within > .sc-nav__submenu {
		opacity: 1;
		visibility: visible;
	}

	#masthead.sc-header .sc-nav__submenu .sc-nav__item {
		border-bottom: 0;
	}

	#masthead.sc-header .sc-nav__submenu .sc-nav__link {
		padding: 10px 4px;
		font-size: 15px;
	}
}

/*
 * Undo BuddyBoss's off-canvas panel below 720px.
 *
 * The parent's adminbar-mobile.css repurposes #masthead as a slide-in right
 * panel at that width: fixed 240px, charcoal background, opacity .3, and
 * `body header#masthead { display: none }` — so our header vanished entirely
 * on phones, and its links were forced white on white. It also floats every
 * <li> inside the header right at a fixed 240px.
 *
 * !important is warranted here: `body.open-right header#masthead` outranks
 * anything we can write without it, and that class can be toggled by the
 * parent's script.
 */
@media only screen and (max-width: 720px) {
	/*
	 * wordpress.css paints the body charcoal at this width so the off-canvas
	 * panel has a dark backdrop, and reserves 55px at the top of #inner-wrap
	 * for BuddyBoss's fixed #mobile-header. With that toolbar hidden, the
	 * reserved strip just showed as a dark band under our header.
	 */
	body {
		background-color: #fff;
	}

	#inner-wrap {
		margin-top: 0;
	}

	#masthead.sc-header {
		display: block !important;
		position: relative !important;
		top: auto !important;
		right: auto !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		overflow: visible !important;
		opacity: 1 !important;
		background-color: #fff !important;
		transform: none !important;
		animation: none !important;
	}

	#masthead.sc-header .sc-nav__item,
	#masthead.sc-header .sc-nav__list li {
		float: none !important;
		clear: none !important;
		width: auto !important;
	}

	#masthead.sc-header .sc-nav__link {
		color: var(--sc-hf-ink) !important;
		padding: 14px 4px;
		line-height: 1.3;
	}

	#masthead.sc-header .sc-nav__item.is-current > .sc-nav__link,
	#masthead.sc-header .sc-nav__link:hover,
	#masthead.sc-header .sc-nav__link:focus-visible {
		color: var(--sc-hf-navy) !important;
	}

	#masthead.sc-header .sc-nav__submenu .sc-nav__link {
		padding: 10px 4px;
	}
}

@media (max-width: 768px) {
	:root {
		--sc-hf-gutter: 20px;
	}

	#colophon.sc-footer > .sc-shell {
		padding-top: 44px;
		padding-bottom: 28px;
	}

	#colophon.sc-footer .sc-footer__legal {
		font-size: 14.5px;
	}

	#colophon.sc-footer .sc-footer__bar-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

@media (max-width: 575px) {
	:root {
		--sc-hf-gutter: 16px;
	}

	#masthead.sc-header .sc-logo__img {
		height: 34px;
	}

	#colophon.sc-footer .sc-logo__img {
		height: 38px;
	}
}