/* ==========================================================================
   16 Handles — Header & Footer (2026 redesign)
   Loaded only when SIXTEENH_NEW_HEADER is true (see functions.php).
   Prefix: sxh-  (sixteen handles). See docs/SPEC.md for the token sources.
   ========================================================================== */

/* --- Sofia Pro: one family, four faces, pointing at the theme's existing files --- */
@font-face {
	font-family: "Sofia Pro";
	src: url("../../fonts/Sofia/SofiaProRegular.woff2") format("woff2"),
	     url("../../fonts/Sofia/SofiaProRegular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Sofia Pro";
	src: url("../../fonts/Sofia/SofiaProRegularitalic.woff2") format("woff2"),
	     url("../../fonts/Sofia/SofiaProRegularitalic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Sofia Pro";
	src: url("../../fonts/Sofia/SofiaProMedium.woff2") format("woff2"),
	     url("../../fonts/Sofia/SofiaProMedium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Sofia Pro";
	src: url("../../fonts/Sofia/SofiaProBold.woff2") format("woff2"),
	     url("../../fonts/Sofia/SofiaProBold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--sxh-pink: #F04E98;
	--sxh-pink-dark: #D93B84;
	--sxh-blue: #0067B9;
	--sxh-band: #F2F8FF;
	--sxh-white: #FFFFFF;
	--sxh-text: #1E1E1E;
	--sxh-grey: #6B7075;
	--sxh-header-h: 84px;
	--sxh-logo: 96px;
	--sxh-logo-hang: 18px;
	--sxh-display: "FatFrank-Regular", "Sofia Pro", Arial, Helvetica, sans-serif;
	--sxh-body: "Sofia Pro", Arial, Helvetica, sans-serif;
	--sxh-max: 1360px;
	--sxh-pad: 32px;
	--sxh-z: 999995;
}

/* Legacy fixed-header offsets are not needed with a sticky header in flow. */
body.sxh-on .main { margin-top: 0 !important; }
body.sxh-on { padding-top: 0 !important; }

/* Shared reset for everything inside the two components — the legacy
   style.css and the inline <style> in header.php set aggressive globals
   (li, ul, h3, a, .white …), so key layout props carry !important. */
.sxh-header, .sxh-footer, .sxh-drawer {
	font-family: var(--sxh-body);
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	color: var(--sxh-text);
	line-height: 1.3;
}
.sxh-header *, .sxh-footer *, .sxh-drawer * { box-sizing: border-box; }
.sxh-header ul, .sxh-footer ul, .sxh-drawer ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.sxh-header li, .sxh-footer li, .sxh-drawer li {
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	float: none !important;
	height: auto !important;
	overflow: visible !important;
	background: transparent !important;
	border: 0 !important;
}
.sxh-header a, .sxh-footer a, .sxh-drawer a { text-decoration: none; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.sxh-header a:focus-visible, .sxh-footer a:focus-visible, .sxh-drawer a:focus-visible,
.sxh-header button:focus-visible { outline: 2px solid var(--sxh-pink); outline-offset: 3px; border-radius: 4px; }
.sxh-header img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.sxh-btn {
	display: inline-block !important;
	font-family: var(--sxh-display) !important;
	font-weight: 400 !important;
	font-size: 17px !important;
	line-height: 1 !important;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--sxh-white) !important;
	background: var(--sxh-pink) !important;
	border: 0 !important;
	border-radius: 6px !important;
	padding: 14px 26px !important;
	white-space: nowrap;
	cursor: pointer;
	text-align: center;
}
.sxh-btn:hover, .sxh-btn:focus-visible { background: var(--sxh-pink-dark) !important; color: var(--sxh-white) !important; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.sxh-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: var(--sxh-z);
	background: var(--sxh-white);
	width: 100%;
	transition: box-shadow .2s ease;
}
.sxh-header.is-stuck { box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
/* logged-in editors: sit below the WP admin bar instead of covering it */
body.admin-bar .sxh-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .sxh-header { top: 46px; } }

.sxh-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 28px;
	height: var(--sxh-header-h);
	max-width: var(--sxh-max);
	margin: 0 auto;
	padding: 0 var(--sxh-pad);
}

/* Logo: circle sits in the bar and hangs slightly below it (mockups). */
.sxh-logo {
	position: relative;
	flex: 0 0 var(--sxh-logo);
	width: var(--sxh-logo);
	height: var(--sxh-logo);
	margin-top: var(--sxh-logo-hang);   /* pushes the circle down so it overlaps the band */
	z-index: 2;
	line-height: 0;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .12));
}
.sxh-logo__img { display: block; width: 100% !important; height: 100% !important; }

/* Desktop nav */
.sxh-nav { flex: 1 1 auto; min-width: 0; }
.sxh-nav__list {
	display: flex !important;
	align-items: center;
	flex-wrap: nowrap;
	gap: 6px 30px;
}
.sxh-nav__link {
	position: relative;
	display: inline-block;
	padding: 8px 0 !important;
	font-family: var(--sxh-display);
	font-size: 17px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--sxh-blue) !important;
	white-space: nowrap;
}
.sxh-nav__link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--sxh-pink);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .18s ease;
}
.sxh-nav__link:hover, .sxh-nav__link:focus-visible,
.sxh-nav__item.is-active .sxh-nav__link { color: var(--sxh-pink) !important; }
.sxh-nav__link:hover::after, .sxh-nav__link:focus-visible::after,
.sxh-nav__item.is-active .sxh-nav__link::after { transform: scaleX(1); }

/* Right side: Order Now + hamburger */
.sxh-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}
.sxh-btn--order {
	padding: 12px 26px !important;
	border: 2px solid var(--sxh-pink) !important;   /* border always present so hover doesn't shift layout */
}
/* Client note (Frank, 2026-09-09): ORDER NOW hover = white fill, pink border, pink text */
.sxh-btn--order:hover, .sxh-btn--order:focus-visible {
	background: var(--sxh-white) !important;
	color: var(--sxh-pink) !important;
	border-color: var(--sxh-pink) !important;
}

.sxh-burger {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	background: transparent !important;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.sxh-burger__bar {
	position: absolute;
	left: 9px;
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background: var(--sxh-blue);
	transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.sxh-burger__bar:nth-child(1) { top: 12px; }
.sxh-burger__bar:nth-child(2) { top: 20.5px; }
.sxh-burger__bar:nth-child(3) { top: 29px; }
.sxh-burger[aria-expanded="true"] .sxh-burger__bar:nth-child(1) { top: 20.5px; transform: rotate(45deg); }
.sxh-burger[aria-expanded="true"] .sxh-burger__bar:nth-child(2) { opacity: 0; }
.sxh-burger[aria-expanded="true"] .sxh-burger__bar:nth-child(3) { top: 20.5px; transform: rotate(-45deg); }

/* Mobile drawer */
.sxh-drawer {
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	background: var(--sxh-white);
	border-top: 1px solid var(--sxh-band);
	box-shadow: 0 12px 24px rgba(0, 0, 0, .10);
	max-height: calc(100vh - var(--sxh-header-h));
	max-height: calc(100dvh - var(--sxh-header-h));
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform-origin: top center;
	animation: sxh-drop .18s ease-out;
}
.sxh-drawer[hidden] { display: none !important; }
@keyframes sxh-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sxh-drawer__list { padding: 8px 0 12px !important; }
.sxh-drawer__list .sxh-nav__item { border-bottom: 1px solid #EEF3F8 !important; }
.sxh-drawer__list .sxh-nav__item:last-child { border-bottom: 0 !important; }
.sxh-drawer__list .sxh-nav__link {
	display: block;
	padding: 16px var(--sxh-pad) !important;
	font-size: 22px;
	white-space: normal;
}
.sxh-drawer__list .sxh-nav__link::after { display: none; }
.sxh-drawer__list .sxh-nav__item.is-active .sxh-nav__link,
.sxh-drawer__list .sxh-nav__link:hover { color: var(--sxh-pink) !important; background: var(--sxh-band); }

.sxh-scrim {
	position: fixed;
	inset: 0;
	background: rgba(0, 40, 80, .28);
	z-index: calc(var(--sxh-z) - 1);
}
.sxh-scrim[hidden] { display: none !important; }
body.sxh-drawer-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.sxh-footer {
	position: relative;
	z-index: 99;
	clear: both;
	background: var(--sxh-white);
}
.sxh-footer__inner {
	max-width: var(--sxh-max);
	margin: 0 auto;
	padding: 0 var(--sxh-pad);
}

/* Signup row */
.sxh-footer__signup { padding: 64px 0 40px; }
.sxh-footer__cols {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 48px 64px;
}
.sxh-footer__col { flex: 1 1 0; min-width: 0; text-align: center; }

.sxh-footer__title {
	margin: 0 0 6px !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: var(--sxh-display) !important;
	font-weight: 400 !important;
	font-size: 44px !important;
	line-height: 1.05 !important;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--sxh-blue);
}
.sxh-footer__title .sxh-blue { color: var(--sxh-blue); }
.sxh-footer__title .sxh-pink, .sxh-footer__title.sxh-pink { color: var(--sxh-pink); }
.sxh-footer__sub {
	margin: 0 0 20px !important;
	font-family: var(--sxh-body) !important;
	font-weight: 500;
	font-size: 18px !important;
	line-height: 1.3 !important;
	color: var(--sxh-blue);
}
.sxh-footer__cta { margin: 0 !important; }
.sxh-btn--pink { min-width: 244px; padding: 13px 34px !important; }

/* Mailchimp for WP form → pink pill with an arrow submit (mockup) */
.sxh-footer__form { display: flex; justify-content: center; }
.sxh-footer__form .mc4wp-form { position: relative; width: 100%; max-width: 244px; margin: 0 auto; float: none !important; display: block !important; }
.sxh-footer__form .mc4wp-form-fields { position: relative; }
/* the plugin form's own inline-styled heading & subtitle are replaced by the
   markup in sixteenh-footer.php */
.sxh-footer__form .mc4wp-form-fields > h3,
.sxh-footer__form .mc4wp-form-fields > center > span,
.sxh-footer__form .mc4wp-form-fields > p:empty { display: none !important; }
/* production's saved form uses a plain <p> for the subtitle (staging's used <center><span>);
   hide any top-level <p> that holds no field */
.sxh-footer__form .mc4wp-form-fields > p:not(:has(input, button, select, textarea)) { display: none !important; }
/* the browser splits the plugin's <p><center> markup into sibling <center>s */
.sxh-footer__form .mc4wp-form-fields > center { display: contents; }
.sxh-footer__form .mc4wp-form-fields p { margin: 0 !important; }
.sxh-footer__form input[type="email"] {
	display: block !important;
	width: 100% !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 48px 0 20px !important;
	border: 2px solid var(--sxh-pink) !important;
	border-radius: 999px !important;
	background: var(--sxh-white) !important;
	color: var(--sxh-pink) !important;
	font-family: var(--sxh-display) !important;
	font-size: 15px !important;
	line-height: 36px !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	outline: none;
	box-shadow: none !important;
}
.sxh-footer__form input[type="email"]::placeholder { color: var(--sxh-pink); opacity: 1; }
.sxh-footer__form input[type="email"]:focus { border-color: var(--sxh-pink-dark) !important; box-shadow: 0 0 0 3px rgba(240, 78, 152, .18) !important; }
.sxh-footer__form input[type="submit"] {
	position: absolute !important;
	right: 8px !important;
	top: 8px !important;
	bottom: auto !important;
	width: 24px !important;
	height: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background-color: var(--sxh-pink) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 16px 16px !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: -9999px;
	cursor: pointer;
	float: none !important;
	z-index: 2;
}
.sxh-footer__form input[type="submit"]:hover { background-color: var(--sxh-pink-dark) !important; }
.sxh-footer__form .mc4wp-response { margin-top: 10px; font-size: 14px; color: var(--sxh-blue); }
.sxh-footer__form .mc4wp-alert { padding: 0 !important; background: transparent !important; border: 0 !important; }

/* Social row */
.sxh-footer__social { padding: 8px 0 40px; }
.sxh-social {
	display: flex !important;
	justify-content: center;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.sxh-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sxh-blue);
	color: var(--sxh-white);
}
.sxh-social__link svg { width: 20px; height: 20px; display: block; }
.sxh-social__link:hover, .sxh-social__link:focus-visible { background: var(--sxh-pink); color: var(--sxh-white); }

/* Bottom bar */
.sxh-footer__bar { background: var(--sxh-band); padding: 22px 0 20px; }
.sxh-footer__links {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 0;
}
.sxh-footer__links li { position: relative; padding: 0 16px !important; }
.sxh-footer__links li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 12px;
	margin-top: -6px;
	background: rgba(0, 103, 185, .35);
}
.sxh-footer__links a {
	font-family: var(--sxh-body) !important;
	font-weight: 500;
	font-size: 13px !important;
	line-height: 1.2 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sxh-blue) !important;
	white-space: nowrap;
}
.sxh-footer__links a:hover, .sxh-footer__links a:focus-visible,
.sxh-footer__links .current-menu-item > a { color: var(--sxh-pink) !important; }
.sxh-footer__copy {
	margin: 14px 0 0 !important;
	text-align: center;
	font-family: var(--sxh-body) !important;
	font-weight: 400;
	font-size: 12px !important;
	line-height: 1.3 !important;
	letter-spacing: .02em;
	color: var(--sxh-grey);
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

/* Tablet & below: hamburger + drawer, Order Now stays visible */
@media (max-width: 1024px) {
	:root { --sxh-header-h: 72px; --sxh-logo: 72px; --sxh-logo-hang: 14px; }
	.sxh-nav { display: none; }
	.sxh-burger { display: block; }
	.sxh-header__inner { gap: 18px; }
	.sxh-footer__title { font-size: 38px !important; }
}

/* Mobile */
@media (max-width: 767px) {
	.sxh-footer__signup { padding: 48px 0 32px; }
	.sxh-footer__cols { flex-direction: column; align-items: stretch; gap: 40px; }
	.sxh-footer__col { text-align: center; }
	.sxh-footer__links li { padding: 0 12px !important; }
	.sxh-footer__links li + li::before { display: none; }
}

/* Small phones */
@media (max-width: 600px) {
	:root { --sxh-header-h: 64px; --sxh-logo: 56px; --sxh-logo-hang: 12px; --sxh-pad: 16px; }
	.sxh-header__inner { gap: 12px; }
	.sxh-btn--order { font-size: 14px !important; padding: 10px 14px !important; }
	.sxh-header__actions { gap: 6px; }
	.sxh-footer__title { font-size: 30px !important; }
	.sxh-footer__sub { font-size: 16px !important; }
	.sxh-btn--pink { min-width: 0; width: 100%; max-width: 244px; }
	.sxh-drawer__list .sxh-nav__link { font-size: 20px; padding: 14px var(--sxh-pad) !important; }
}

@media (prefers-reduced-motion: reduce) {
	.sxh-header, .sxh-nav__link::after, .sxh-burger__bar, .sxh-drawer { transition: none; animation: none; }
}

@media print {
	.sxh-header { position: static; box-shadow: none; }
	.sxh-burger, .sxh-drawer, .sxh-scrim, .sxh-btn--order { display: none !important; }
}