/*
 * Teddy's Place custom header
 * Visual source: Teddy Header / Nav Figma file
 */

:root {
	--tp-red: #b53f2f;
	--tp-orange: #ef8f44;
	--tp-pink: #e6a4b6;
	--tp-blue: #4e8da6;
	--tp-seafoam: #b6d4bf;
	--tp-yellow: #f4d46c;
	--tp-white: #fbfaf6;
	--tp-soft-cream: #f7f2e7;
	--tp-light-cream: #f1e3d0;
	--tp-cream: #e4d4bf;
	--tp-tan: #cfbeaa;
	--tp-ink: #201714;
	--tp-mocha: #68544d;
	--tp-marquee-duration: 24s;
	--tp-marquee-height: 37px;
	--tp-header-desktop-gap: 8px;
	--tp-header-mobile-gap: 8px;
	--tp-header-logo-width-desktop: 166px;
	--tp-header-logo-width-mobile: 154px;
	--tp-header-pill-width-desktop: 650px;
	--tp-header-pill-width-mobile: 280px;
	--tp-header-pill-height-desktop: 56px;
	--tp-header-pill-height-mobile: 56px;

	--tp-header-pill-background: #f1e3d0;
	--tp-header-pill-border-color: #201714;
	--tp-header-pill-border-width: 1px;
	--tp-header-pill-radius: 999px;
	--tp-header-pill-shadow-color: #201714;
	--tp-header-pill-shadow-x: 2px;
	--tp-header-pill-shadow-y: 2px;

	--tp-header-nav-background: #f7f2e7;
	--tp-header-nav-hover-background: #f7f2e7;
	--tp-header-nav-text: #201714;
	--tp-header-nav-border-color: #201714;
	--tp-header-nav-border-width: 1px;
	--tp-header-nav-radius: 999px;
	--tp-header-nav-shadow-color: #201714;
	--tp-header-nav-shadow-x: 2px;
	--tp-header-nav-shadow-y: 2px;

	--tp-header-cta-background: #ef8f44;
	--tp-header-cta-hover-background: #ef8f44;
	--tp-header-cta-text: #201714;
	--tp-header-cta-border-color: #201714;
	--tp-header-cta-border-width: 1px;
	--tp-header-cta-radius: 999px;
	--tp-header-cta-shadow-color: #201714;
	--tp-header-cta-shadow-x: 2px;
	--tp-header-cta-shadow-y: 2px;

	--tp-header-menu-background: #f7f2e7;
	--tp-header-menu-hover-background: #f7f2e7;
	--tp-header-menu-icon: #201714;
	--tp-header-menu-border-color: #201714;
	--tp-header-menu-border-width: 1px;
	--tp-header-menu-radius: 999px;
	--tp-header-menu-shadow-color: #201714;
	--tp-header-menu-shadow-x: 2px;
	--tp-header-menu-shadow-y: 2px;
	--tp-header-menu-icon-size: 12px;
	--tp-header-menu-icon-stroke: 2px;

	--tp-header-button-font-size: 12px;
	--tp-header-button-font-weight: 900;
	--tp-header-button-letter-spacing: 0.17em;
	--tp-header-control-hover-distance: 2px;
	--tp-header-control-motion-speed: 140ms;
	--tp-header-focus-color: #4e8da6;
	--tp-hard-shadow: 2px 2px 0 var(--tp-ink);
}

/*
 * Suppress both generations of Avada header output.
 *
 * `.fusion-header-wrapper` covers the legacy Global Options header, while
 * `.fusion-tb-header` covers Header Layout Sections created in Avada Layouts.
 * The additional selectors are defensive fallbacks for sticky/side variants
 * and cached markup from older Avada releases.
 */
body.tp-custom-header-enabled .fusion-header-wrapper,
body.tp-custom-header-enabled .fusion-tb-header,
body.tp-custom-header-enabled #side-header,
body.tp-custom-header-enabled .fusion-secondary-header,
body.tp-custom-header-enabled .fusion-header,
body.tp-custom-header-enabled .fusion-sticky-header-wrapper,
body.tp-custom-header-enabled .fusion-header-sticky-height {
	display: none !important;
}

.tp-site-header,
.tp-site-header *,
.tp-site-header *::before,
.tp-site-header *::after {
	box-sizing: border-box;
}

.tp-site-header {
	position: absolute;
	z-index: 10050;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 0;
	font-family: "Source Sans 3", Arial, sans-serif;
	pointer-events: none;
}

.admin-bar .tp-site-header {
	top: 32px;
}

.tp-header-logo,
.tp-header-pill a,
.tp-header-pill button {
	pointer-events: auto;
}


/*
 * Hero content clearance.
 * Add `tp-header-hero` to the CSS Class field of the first Avada Container.
 * Mobile JavaScript measures the rendered header/nav footprint and stores it
 * in `--tp-mobile-hero-clearance`, including an additional 100px breathing
 * space. Applying padding to the Container keeps its background full-bleed
 * while moving all of its content safely below the floating header.
 */
:root {
	--tp-mobile-hero-clearance: 249px;
}

/* Announcement marquee. */
.tp-marquee {
	position: relative;
	z-index: 1;
	display: flex;
	width: 100%;
	height: 37px;
	overflow: hidden;
	background: var(--tp-red);
	color: var(--tp-soft-cream);
}

.tp-marquee__track {
	display: flex;
	flex: none;
	width: max-content;
	min-width: max-content;
	animation: tp-marquee-scroll var(--tp-marquee-duration) linear infinite;
	will-change: transform;
}

.tp-marquee__group {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
	padding: 10px 0 10px 10px;
}

.tp-marquee__message {
	flex: none;
	font-family: "Source Sans 3", Arial, sans-serif;
	font-size: 12px;
	font-weight: 900;
	line-height: 17px;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tp-marquee__separator {
	display: grid;
	flex: 0 0 4px;
	width: 4px;
	height: 4px;
	place-items: center;
	overflow: hidden;
	border-radius: 50%;
	font-size: 0;
	background: currentColor;
}

@keyframes tp-marquee-scroll {
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* Shared logo treatment. */
.tp-header-logo {
	position: absolute;
	z-index: 3;
	display: block;
	width: var(--tp-header-logo-width-desktop);
	height: auto;
	aspect-ratio: 166.327 / 96.001;
	text-decoration: none;
}

.tp-header-logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tp-header-logo__fallback {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	transform: rotate(-6deg);
	color: var(--tp-red);
	font-family: Anton, Impact, sans-serif;
	font-size: 39px;
	font-weight: 400;
	line-height: 0.85;
	text-align: center;
	text-shadow: 3px 3px 0 var(--tp-orange);
}

/*
 * Desktop composition from the Figma mockup.
 * The wrapper width represents the complete visible unit: the logo overhang
 * plus the editable cream pill width. Centring this wrapper keeps the whole
 * composition mathematically centred rather than centring only the pill.
 */
.tp-header-desktop {
	--tp-header-desktop-logo-overhang: 70px;
	position: absolute;
	top: calc(var(--tp-marquee-height) + var(--tp-header-desktop-gap));
	left: 50%;
	display: block;
	transform: translateX(-50%);
	width: calc(var(--tp-header-pill-width-desktop) + var(--tp-header-desktop-logo-overhang));
	height: 96px;
}

.tp-header-logo--desktop {
	top: 0;
	left: 0;
	width: var(--tp-header-logo-width-desktop);
}

.tp-header-pill {
	background: var(--tp-header-pill-background);
	border: var(--tp-header-pill-border-width) solid var(--tp-header-pill-border-color);
	border-radius: var(--tp-header-pill-radius);
	box-shadow: var(--tp-header-pill-shadow-x) var(--tp-header-pill-shadow-y) 0 var(--tp-header-pill-shadow-color);
}

.tp-header-pill--desktop {
	position: relative;
	z-index: 2;
	display: flex;
	width: var(--tp-header-pill-width-desktop);
	height: var(--tp-header-pill-height-desktop);
	margin-top: max(0px, calc((96px - var(--tp-header-pill-height-desktop)) / 2));
	margin-left: var(--tp-header-desktop-logo-overhang);
	align-items: center;
	justify-content: flex-end;
	padding: max(3px, calc((var(--tp-header-pill-height-desktop) - 40px) / 2)) 18px;
	overflow: hidden;
}

.tp-primary-nav,
.tp-primary-nav__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.tp-primary-nav__list {
	gap: 19px;
	list-style: none;
}

.tp-primary-nav__item {
	margin: 0;
	padding: 0;
}

.tp-nav-link {
	text-decoration: none;
}

.tp-nav-link--desktop,
.tp-nav-link--compact {
	display: inline-flex;
	height: 40px;
	align-items: center;
	justify-content: center;
	padding: 10px 24px;
	border: var(--tp-header-nav-border-width) solid var(--tp-header-nav-border-color);
	border-radius: var(--tp-header-nav-radius);
	background: var(--tp-header-nav-background);
	box-shadow: var(--tp-header-nav-shadow-x) var(--tp-header-nav-shadow-y) 0 var(--tp-header-nav-shadow-color);
	color: var(--tp-header-nav-text);
	font-family: "Source Sans 3", Arial, sans-serif;
	font-size: var(--tp-header-button-font-size);
	font-weight: var(--tp-header-button-font-weight);
	line-height: 17px;
	letter-spacing: var(--tp-header-button-letter-spacing);
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform var(--tp-header-control-motion-speed) ease, box-shadow var(--tp-header-control-motion-speed) ease, background-color var(--tp-header-control-motion-speed) ease, color var(--tp-header-control-motion-speed) ease, border-color var(--tp-header-control-motion-speed) ease;
}

.tp-nav-link--desktop.tp-header-cta,
.tp-nav-link--compact.tp-header-cta {
	border-color: var(--tp-header-cta-border-color);
	border-width: var(--tp-header-cta-border-width);
	border-radius: var(--tp-header-cta-radius);
	background: var(--tp-header-cta-background);
	box-shadow: var(--tp-header-cta-shadow-x) var(--tp-header-cta-shadow-y) 0 var(--tp-header-cta-shadow-color);
	color: var(--tp-header-cta-text);
}

.tp-nav-link--desktop:hover,
.tp-nav-link--compact:hover,
.tp-nav-link--desktop:active,
.tp-nav-link--compact:active {
	transform: translate(var(--tp-header-control-hover-distance), var(--tp-header-control-hover-distance));
	background: var(--tp-header-nav-hover-background);
	box-shadow: none;
	color: var(--tp-header-nav-text);
}

.tp-nav-link--desktop.tp-header-cta:hover,
.tp-nav-link--compact.tp-header-cta:hover,
.tp-nav-link--desktop.tp-header-cta:active,
.tp-nav-link--compact.tp-header-cta:active {
	background: var(--tp-header-cta-hover-background);
	color: var(--tp-header-cta-text);
}

.tp-nav-link--desktop:focus-visible,
.tp-nav-link--compact:focus-visible,
.tp-menu-toggle:focus-visible,
.tp-mobile-menu__close:focus-visible,
.tp-nav-link--mobile:focus-visible {
	outline: 3px solid var(--tp-header-focus-color);
	outline-offset: 3px;
}

/*
 * Mobile uses the same composition-centred approach as desktop. The logo and
 * pill remain locked together, while the complete visible unit is centred.
 */
.tp-header-mobile {
	--tp-header-mobile-pill-used-width: min(var(--tp-header-pill-width-mobile), calc(100vw - 105px));
	--tp-header-mobile-logo-overhang: 58px;
	position: absolute;
	top: calc(var(--tp-marquee-height) + var(--tp-header-mobile-gap));
	left: 50%;
	display: none;
	transform: translateX(-50%);
	width: calc(var(--tp-header-mobile-pill-used-width) + var(--tp-header-mobile-logo-overhang));
	height: 96px;
}

.tp-header-logo--mobile {
	top: 0;
	left: 0;
	width: var(--tp-header-logo-width-mobile);
}

.tp-header-pill--mobile {
	position: absolute;
	z-index: 2;
	top: max(0px, calc((96px - var(--tp-header-pill-height-mobile)) / 2));
	right: 0;
	display: flex;
	width: var(--tp-header-mobile-pill-used-width);
	height: var(--tp-header-pill-height-mobile);
	align-items: center;
	justify-content: flex-end;
	padding: max(3px, calc((var(--tp-header-pill-height-mobile) - 40px) / 2)) 18px;
	overflow: hidden;
}

.tp-header-mobile-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 19px;
	margin-left: auto;
}

/*
 * Floating sticky state. The script applies this when the marquee has left
 * the viewport. Reusing the editable marquee-to-navigation gap makes the
 * hand-off seamless without resizing or changing the internal composition.
 */
.tp-site-header.tp-header-is-stuck .tp-header-desktop {
	position: fixed;
	top: var(--tp-header-desktop-gap);
}

.tp-site-header.tp-header-is-stuck .tp-header-mobile {
	position: fixed;
	top: var(--tp-header-mobile-gap);
}

.admin-bar .tp-site-header.tp-header-is-stuck .tp-header-desktop {
	top: calc(32px + var(--tp-header-desktop-gap));
}

.admin-bar .tp-site-header.tp-header-is-stuck .tp-header-mobile {
	top: calc(32px + var(--tp-header-mobile-gap));
}

.tp-nav-link--compact {
	width: 100px;
	padding-right: 10px;
	padding-left: 10px;
}

.tp-menu-toggle {
	display: inline-flex;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: var(--tp-header-menu-border-width) solid var(--tp-header-menu-border-color);
	border-radius: var(--tp-header-menu-radius);
	background: var(--tp-header-menu-background);
	box-shadow: var(--tp-header-menu-shadow-x) var(--tp-header-menu-shadow-y) 0 var(--tp-header-menu-shadow-color);
	color: var(--tp-header-menu-icon);
	cursor: pointer;
	transition: transform var(--tp-header-control-motion-speed) ease, box-shadow var(--tp-header-control-motion-speed) ease, background-color var(--tp-header-control-motion-speed) ease, color var(--tp-header-control-motion-speed) ease, border-color var(--tp-header-control-motion-speed) ease;
}

.tp-menu-toggle:hover,
.tp-menu-toggle:active {
	transform: translate(var(--tp-header-control-hover-distance), var(--tp-header-control-hover-distance));
	background: var(--tp-header-menu-hover-background);
	box-shadow: none;
}

.tp-menu-toggle__icon {
	display: flex;
	width: var(--tp-header-menu-icon-size);
	height: calc(var(--tp-header-menu-icon-size) - 2px);
	flex-direction: column;
	justify-content: space-between;
}

.tp-menu-toggle__icon span {
	display: block;
	width: var(--tp-header-menu-icon-size);
	height: var(--tp-header-menu-icon-stroke);
	border-radius: var(--tp-header-menu-icon-stroke);
	background: currentColor;
}

/* Mobile bottom sheet. */
.tp-mobile-menu-backdrop {
	position: fixed;
	z-index: 10060;
	inset: 0;
	visibility: hidden;
	background: rgba(32, 23, 20, 0.28);
	opacity: 0;
	pointer-events: none;
	transition: opacity 240ms ease, visibility 240ms step-end;
}

.tp-mobile-menu {
	position: fixed;
	z-index: 10070;
	left: 50%;
	bottom: max(10px, env(safe-area-inset-bottom));
	display: flex;
	visibility: hidden;
	width: min(360px, calc(100vw - 42px));
	min-height: 433px;
	max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
	overflow-x: hidden;
	overflow-y: auto;
	transform: translate(-50%, calc(100% + 48px));
	border: 2px solid var(--tp-ink);
	border-radius: 32px;
	background: var(--tp-soft-cream);
	opacity: 0;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	isolation: isolate;
	pointer-events: none;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, visibility 320ms step-end;
}

html.tp-mobile-menu-open,
body.tp-mobile-menu-open {
	overflow: hidden;
	overscroll-behavior: none;
}

body.tp-mobile-menu-open .tp-mobile-menu-backdrop {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 240ms ease, visibility 0s step-start;
}

body.tp-mobile-menu-open .tp-mobile-menu {
	visibility: visible;
	transform: translate(-50%, 0);
	opacity: 1;
	pointer-events: auto;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, visibility 0s step-start;
}

/*
 * Keep the underlying compact/desktop header completely out of the hit-testing
 * tree while the modal sheet is open. This avoids stale or offset tap targets
 * on mobile browsers.
 */
body.tp-mobile-menu-open .tp-header-mobile,
body.tp-mobile-menu-open .tp-header-desktop {
	pointer-events: none !important;
}

/*
 * True modal isolation: while the bottom sheet is open, no Avada element,
 * third-party modal trigger, floating widget or transformed page layer may
 * receive a tap above the sheet. The custom header remains in the tree only
 * so its backdrop and dialog can stay interactive.
 */
body.tp-mobile-menu-open > *:not(#tp-site-header):not(#wpadminbar) {
	pointer-events: none !important;
}

body.tp-mobile-menu-open #tp-site-header {
	pointer-events: none !important;
}

body.tp-mobile-menu-open .tp-mobile-menu-backdrop,
body.tp-mobile-menu-open .tp-mobile-menu,
body.tp-mobile-menu-open .tp-mobile-menu__close,
body.tp-mobile-menu-open .tp-mobile-menu a {
	pointer-events: auto !important;
}

/* Prevent theme/plugin pseudo-elements from becoming oversized hit layers. */
.tp-mobile-menu a::before,
.tp-mobile-menu a::after,
.tp-mobile-menu button::before,
.tp-mobile-menu button::after {
	pointer-events: none;
}

.tp-mobile-menu > * {
	position: relative;
	z-index: 1;
}


.tp-mobile-menu__handle {
	display: flex;
	pointer-events: none;
	flex: 0 0 20px;
	width: 100%;
	height: 20px;
	align-items: center;
	justify-content: center;
}

.tp-mobile-menu__handle span {
	display: block;
	width: 112px;
	height: 6px;
	border-radius: 999px;
	background: var(--tp-light-cream);
}

.tp-mobile-menu__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--tp-light-cream);
	z-index: 50;
	display: block;
	min-width: 30px;
	max-width: 30px;
	min-height: 30px;
	max-height: 30px;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	touch-action: manipulation;
	pointer-events: auto;
	cursor: pointer;
}

.tp-mobile-menu__close::before,
.tp-mobile-menu__close::after {
	position: absolute;
	top: 14px;
	left: 6px;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	content: "";
}

.tp-mobile-menu__close::before {
	transform: rotate(45deg);
}

.tp-mobile-menu__close::after {
	transform: rotate(-45deg);
}

.tp-mobile-menu__close span {
	position: absolute;
	inset: 2px;
	border: 2px solid currentColor;
	border-radius: 50%;
}

.tp-mobile-nav {
	width: 100%;
}

.tp-mobile-nav__list {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tp-mobile-nav__item {
	margin: 0;
	padding: 0;
}

.tp-nav-link--mobile {
	display: inline-flex;
	min-height: 60px;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	color: #000;
	font-family: Anton, Impact, sans-serif;
	font-size: 40px;
	font-weight: 400;
	line-height: 60px;
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.tp-nav-link--mobile.tp-nav-emphasis {
	color: var(--tp-red);
}

.tp-nav-link--mobile:hover,
.tp-nav-link--mobile:active {
	color: var(--tp-red);
}

.tp-mobile-menu__cta {
	width: 100%;
	margin-top: auto;
}

.tp-mobile-menu__cta .tp-nav-link--mobile {
	display: flex;
	width: 100%;
	height: 55px;
	min-height: 55px;
	padding: 16px 24px;
	border: var(--tp-header-cta-border-width) solid var(--tp-header-cta-border-color);
	border-radius: var(--tp-header-cta-radius);
	background: var(--tp-header-cta-background);
	box-shadow: var(--tp-header-cta-shadow-x) var(--tp-header-cta-shadow-y) 0 var(--tp-header-cta-shadow-color);
	color: var(--tp-header-cta-text);
	font-family: "Source Sans 3", Arial, sans-serif;
	font-size: 16px;
	font-weight: var(--tp-header-button-font-weight);
	line-height: 22px;
	letter-spacing: var(--tp-header-button-letter-spacing);
	transition: transform var(--tp-header-control-motion-speed) ease, box-shadow var(--tp-header-control-motion-speed) ease, background-color var(--tp-header-control-motion-speed) ease, color var(--tp-header-control-motion-speed) ease;
}

.tp-mobile-menu__cta .tp-nav-link--mobile:hover,
.tp-mobile-menu__cta .tp-nav-link--mobile:active {
	transform: translate(var(--tp-header-control-hover-distance), var(--tp-header-control-hover-distance));
	background: var(--tp-header-cta-hover-background);
	box-shadow: none;
	color: var(--tp-header-cta-text);
}


@media (max-width: 900px) {
	body.tp-custom-header-enabled .tp-header-hero {
		padding-top: var(--tp-mobile-hero-clearance) !important;
	}
}

@media (max-width: 480px) {
	.tp-header-mobile {
		--tp-header-mobile-pill-used-width: min(var(--tp-header-pill-width-mobile), calc(100vw - 84px));
		--tp-header-mobile-logo-overhang: 60px;
	}

	.tp-header-mobile-controls {
		gap: 12px;
	}
}

@media (max-width: 360px) {
	.tp-header-mobile {
		--tp-header-mobile-pill-used-width: min(var(--tp-header-pill-width-mobile), calc(100vw - 72px));
		--tp-header-mobile-logo-overhang: 48px;
	}

	.tp-nav-link--compact {
		width: 92px;
	}

	.tp-mobile-menu {
		width: calc(100vw - 24px);
	}
}

@media (max-height: 560px) {
	.tp-mobile-menu {
		min-height: 0;
		gap: 12px;
	}

	.tp-nav-link--mobile {
		min-height: 48px;
		font-size: 34px;
		line-height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tp-marquee__track {
		animation-play-state: paused;
	}

	.tp-nav-link,
	.tp-menu-toggle,
	.tp-mobile-menu,
	.tp-mobile-menu-backdrop {
		transition-duration: 0.01ms !important;
	}
}

@media screen and (max-width: 782px) {
	.admin-bar .tp-site-header {
		top: 46px;
	}

	.admin-bar .tp-site-header.tp-header-is-stuck .tp-header-desktop {
		top: calc(46px + var(--tp-header-desktop-gap));
	}

	.admin-bar .tp-site-header.tp-header-is-stuck .tp-header-mobile {
		top: calc(46px + var(--tp-header-mobile-gap));
	}
}