/* ==========================================================================
   Top bar, header, navigation, mobile menu, footer, sticky call bar.
   Breakpoint: the prototype switches at window.innerWidth < 1180px.
   ========================================================================== */

/* ---------- Top bar (links to the sister businesses) ---------- */

.topbar {
	background: var(--c-bg-2);
	border-bottom: 1px solid var(--c-line);
}

.topbar__inner {
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--f-display);
	font-size: 0.625rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.topbar__family {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	min-width: 0;
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
}

.topbar__family li { display: contents; }

.topbar__family a {
	color: var(--c-muted);
	text-decoration: none;
}
.topbar__family a:hover,
.topbar__family a[aria-current] { color: var(--c-text); }

.topbar__promo {
	color: var(--c-accent-light);
	text-decoration: none;
	white-space: nowrap;
}
.topbar__promo:hover { color: var(--c-text); }

/* ---------- Header ---------- */

.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 40;
	background: rgba(13, 14, 16, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--c-line);
}

.site-header__inner {
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* Logo lockup */
.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--c-text);
	flex: none;
}
.brand:hover { color: var(--c-text); }

.brand__mark {
	font-family: var(--f-display);
	font-style: italic;
	font-size: clamp(1.1875rem, calc(1.0714rem + 0.4762cqw), 1.5rem);
	line-height: 1;
	color: var(--c-accent-light);
	letter-spacing: -.04em;
}

.brand__stack {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.brand__name {
	font-family: var(--f-display);
	font-size: 0.6875rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .08em;
	white-space: nowrap;
	color: var(--c-text);
}

.brand__rule {
	height: 1px;
	background: var(--c-accent);
	width: 100%;
}

.brand__tag {
	font-family: var(--f-body);
	font-size: 0.625rem;
	font-weight: 600;
	color: var(--c-muted);
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Desktop navigation */
.main-nav__list {
	display: flex;
	gap: 18px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-nav__list a {
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--c-text-2);
	text-decoration: none;
}
.main-nav__list a:hover { color: var(--c-accent-light); }
.main-nav__list .current-menu-item > a,
.main-nav__list .current_page_item > a { color: var(--c-accent-light); } /* prototype #D0161D: 2.5:1 on the dark header */
.main-nav__list .current-menu-item > a:hover { color: var(--c-accent-light); }

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.header-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--c-text);
	font-family: var(--f-body);
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: 0;
	white-space: nowrap;
}
.header-phone:hover { color: var(--c-accent-light); }

.header-cta {
	display: inline-flex;
	align-items: center;
	font-family: var(--f-body);
	font-weight: 800;
	font-size: 0.8125rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--c-accent);
	border-radius: 8px;
	padding: 0 16px;
	height: 42px;
	white-space: nowrap;
	text-decoration: none;
}
.header-cta:hover { color: #fff; background: var(--c-accent-hover); }

.burger {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	border: 1px solid var(--c-line-2);
	background: var(--c-surface);
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0;
}

.burger__lines {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.burger__lines span {
	width: 20px;
	height: 2px;
	background: var(--c-text);
}

/* Mobile menu panel */
.mobile-menu {
	border-top: 1px solid var(--c-line);
	background: var(--c-bg);
	padding: 8px 20px 16px;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 100px);
	overflow-y: auto;
}

.mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.mobile-menu__list a {
	display: block;
	border-bottom: 1px solid var(--c-line);
	padding: 14px 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--c-text-2);
	text-decoration: none;
}
.mobile-menu__list .current-menu-item > a,
.mobile-menu__list .current_page_item > a { color: var(--c-accent-light); }

.mobile-menu__call {
	margin-top: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--f-body);
	font-weight: 800;
	font-size: 0.9375rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--c-accent);
	border-radius: 10px;
	min-height: 52px;
	text-decoration: none;
}
.mobile-menu__call:hover { color: #fff; }

.mobile-menu__label {
	margin-top: 16px;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.mobile-menu__family {
	border-bottom: 1px solid var(--c-line);
	padding: 12px 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--c-muted);
	text-decoration: none;
}
.mobile-menu__family:hover { color: var(--c-text); }

/* Desktop / mobile switches (prototype: isMobile = innerWidth < 1180) */
.burger,
.mobile-menu,
.sticky-bar,
.sticky-spacer { display: none; }

@media (max-width: 1179.98px) {
	.desktop-only { display: none !important; }
	.burger { display: grid; }
	.mobile-menu.is-open { display: flex; }
	.sticky-bar { display: flex; }
	.sticky-spacer { display: block; }
}

/* ---------- Mobile sticky call bar ---------- */

.sticky-spacer { height: 84px; }

.sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	gap: 10px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: rgba(13, 14, 16, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--c-line);
}

.sticky-bar__call,
.sticky-bar__form {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--f-body);
	font-weight: 800;
	font-size: 0.9375rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: 10px;
	min-height: 52px;
	text-decoration: none;
}

.sticky-bar__call {
	flex: 1.3;
	color: #fff;
	background: var(--c-accent);
}
.sticky-bar__call:hover { color: #fff; }

.sticky-bar__form {
	flex: 1;
	color: var(--c-text);
	background: var(--c-surface);
	border: 1.5px solid var(--c-text);
}
.sticky-bar__form:hover { color: var(--c-text); }



/* Deliberate fix: in the prototype the full header is 18px wider than the viewport
   between 1180 and 1197px (horizontal scroll). Tighten the menu gap only there. */
@media (min-width: 1180px) and (max-width: 1239.98px) {
	.main-nav__list { gap: 12px; }
}


/* List items must not add a line box around the links (prototype used bare buttons). */
.main-nav__list a { display: block; }

/* ---------- Footer (design B: brand · links · hours card) ---------- */

.site-footer {
	margin-top: var(--space-section);
	background: var(--c-bg-2);
	color: var(--c-muted-2);
	border-top: 1px solid var(--c-line);
}

.site-footer a { color: var(--c-muted-2); text-decoration: none; }
.site-footer a:hover { color: #fff; }

.site-footer__grid {
	padding-top: 44px;
	padding-bottom: 40px;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(300px, 1fr);
	gap: 40px;
	align-items: start;
}

.footer-label {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-muted-3);
	margin: 0 0 12px;
}

.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
	font-size: 0.875rem;
}

.footer-links a { display: block; }

/* Brand + contact */
.footer-brand {
	display: grid;
	gap: 14px;
	font-size: 0.875rem;
	line-height: 1.55;
	justify-items: start;
}

.footer-brand__text { max-width: 330px; }

.site-footer .footer-brand__phone {
	color: #fff;
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1.2;
}

.footer-brand__contact { font-style: normal; }

/* Link columns */
.footer-links-grid {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 0 56px;
}

.footer-links-col nav + .footer-label { margin-top: 24px; }

/* Opening hours card */
.footer-hours {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 14px;
	padding: 22px;
}

.hours--footer { display: grid; gap: 8px; font-size: 0.875rem; }
.hours--footer .hours__row { display: flex; justify-content: space-between; gap: 18px; white-space: nowrap; }
.site-footer .hours--footer dt { font-weight: 400; }
.hours--footer dd { color: #fff; }

.footer-note {
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--c-muted-3);
	margin-top: 10px;
}

.site-footer .footer-hours__btn {
	width: 100%;
	margin-top: 18px;
	min-height: 46px;
	font-size: 0.8125rem;
	color: #fff;
}

/* Bottom bar */
.site-footer__bottom { border-top: 1px solid var(--c-line); }

.site-footer__bottom-inner {
	padding-top: 16px;
	padding-bottom: 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	font-size: 0.75rem;
	color: var(--c-muted-3);
}

.site-footer__bottom-inner a { color: var(--c-muted-3); }

.footer-family {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
}

.footer-family strong { color: var(--c-muted-2); font-weight: 700; }

@media (max-width: 1023.98px) {
	.site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.footer-hours { grid-column: 1 / -1; }
}

@media (max-width: 599.98px) {
	.site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.footer-links-grid { gap: 0 32px; }
}

/* Small phones (< 380px): the logo and menu button do not fit on one line
   (also in the prototype), so the company name wraps to two lines there. */
@media (max-width: 379.98px) {
	.site-header .brand__name { white-space: normal; max-width: 150px; line-height: 1.3; }
}


/* Image logo (Novax, 3 Nov 2026) */
.brand--image { line-height: 0; }
.brand__logo { display: block; height: 46px; width: auto; max-width: 160px; object-fit: contain; }
.site-footer .brand__logo { height: 64px; max-width: 220px; }
@media (max-width: 600px) { .brand__logo { height: 40px; max-width: 140px; } }

/* Footer legal links + designer credit (4 Nov 2026) */
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 14px; padding-bottom: 18px; border-top: 1px solid var(--c-line); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.75rem; }
.footer-legal a,
.footer-legal__btn { color: var(--c-muted-3); text-decoration: none; }
.footer-legal__btn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.footer-legal a:hover,
.footer-legal__btn:hover { color: #fff; }
.footer-legal__btn:focus-visible { outline: 2px solid var(--c-accent-light); outline-offset: 2px; }
.novax-credit { display: inline-flex; align-items: baseline; gap: 7px; font-size: 0.8125rem; color: var(--c-muted-2); text-decoration: none; white-space: nowrap; }
.novax-credit:hover { color: #fff; }
.novax-credit__mark { font-family: var(--f-body); font-weight: 800; font-size: 1.0625rem; letter-spacing: -.02em; color: #fff; }
.novax-credit__dot { color: #F2453D; }
@media (max-width: 767px) { .site-footer__legal { justify-content: center; text-align: center; padding-bottom: 96px; } .footer-legal { justify-content: center; } }