/* Top menu styles (Website design → Top menu style). Body classes: q-navs-<style>, q-navd-<display>.
   Design\Nav_Style adds the icons (.q-nav__ico) and names (.q-tip) to the links. */

/* ── Icons and names ─────────────────────────────────────────────────────────────────────── */
.q-nav__ico { display: inline-grid; place-items: center; margin-right: .4em; vertical-align: -.3em; opacity: .92; }
.q-nav__ico svg { width: 1.2em; height: 1.2em; }
.q-tip { display: none; }

/* Icons only: square buttons; the name is still read out by screen readers. */
.q-navd-icons .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__label {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.q-navd-icons .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
	display: grid; place-items: center; width: 42px; height: 42px; padding: 0 !important; border-radius: 12px; transition: background .2s, transform .2s;
}
.q-navd-icons .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .q-nav__ico { margin: 0; }
.q-navd-icons .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .q-nav__ico svg { width: 22px; height: 22px; }
.q-navd-icons .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content::after { display: none; }
.q-navd-icons .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:is(:hover, :focus-visible) { background: rgb(255 255 255 / 10%); transform: translateY(-1px); }
.q-navd-icons .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > .wp-block-navigation-item__content { background: rgb(255 255 255 / 14%); color: var(--wp--preset--color--brass-light); }

/* The name: a small bubble under the button on hover and keyboard focus (account icon too). */
.q-navd-icons .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .q-tip,
.q-acct-link .q-tip {
	display: block; position: absolute; z-index: 70; top: calc(100% + 10px); left: 50%;
	padding: 6px 10px; border-radius: 8px; background: rgb(18 14 12 / 94%); color: #fff;
	font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap;
	box-shadow: 0 8px 20px -8px rgb(0 0 0 / 60%); opacity: 0; pointer-events: none; transform: translate(-50%, -4px); transition: opacity .16s, transform .16s;
}
.q-navd-icons .q-nav .q-tip::before, .q-acct-link .q-tip::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.q-navd-icons .q-nav .wp-block-navigation-item__content:is(:hover, :focus-visible) .q-tip,
.q-acct-link:is(:hover, :focus-visible) .q-tip { opacity: 1; transform: translate(-50%, 0); transition-delay: .12s; }
.q-acct-link { position: relative; }
/* Names show over the garland / lights that hang under the header. */
.q-header { position: relative; z-index: 3; }

/* The phone menu always shows icon and name. */
.q-nav .is-menu-open .q-nav__ico { margin-right: .6em; }

/* ── Apple: slim graphite frosted bar ─────────────────────────────────────────────────────── */
.q-navs-apple { --q-header-h: 58px; }
.q-navs-apple .q-header {
	background: rgb(22 22 23 / 80%) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
	box-shadow: 0 1px 0 rgb(255 255 255 / 9%) !important; padding-top: 6px !important; padding-bottom: 6px !important;
}
.q-navs-apple .q-logo img { width: 62px; filter: none; }
.q-navs-apple .q-nav { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif; font-size: 13px; font-weight: 400; letter-spacing: -.01em; }
.q-navs-apple .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) a { color: rgb(245 245 247 / 80%); transition: color .25s; }
.q-navs-apple .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) a:is(:hover, :focus-visible), .q-navs-apple .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > a { color: #fff; }
.q-navs-apple .q-nav .wp-block-navigation-item__content::after { display: none; }
.q-navs-apple .q-header__cta .wp-block-button__link { padding: .5em 1.05em; border-radius: 980px; font-size: 12px; font-weight: 500; letter-spacing: 0; box-shadow: none; }
.q-navs-apple .q-acct-link { width: 34px; height: 34px; border-color: transparent; }
.q-navs-apple .q-acct-link:hover { background: rgb(255 255 255 / 10%); }

/* ── Liquid glass: a floating capsule you see the page through ───────────────────────────── */
.q-navs-glass .q-site-header, .q-navs-minimal .q-site-header { margin-bottom: calc(-1 * var(--q-header-h) - 20px); } /* The page slides under it. */
.q-navs-glass .wp-site-blocks > main, .q-navs-minimal .wp-site-blocks > main { padding-top: 0; }
/* …but the hero's words start below the capsule – and below the string of lights hanging from it (28 px) when
   that decoration is on. On phones the home hero's text is taller than the hero, so it starts at the top. */
:is(.q-navs-glass, .q-navs-minimal) .q-hero2__inner { padding-top: max(var(--wp--preset--spacing--70, 4rem), calc(var(--q-header-h) + 36px)); }
.mj-d-lights:is(.q-navs-glass, .q-navs-minimal) .q-hero2__inner { padding-top: max(var(--wp--preset--spacing--70, 4rem), calc(var(--q-header-h) + 64px)); }
.mj-d-lights:is(.q-navs-glass, .q-navs-minimal) .q-page-hero { padding-top: max(clamp(3.25rem, 8vw, 6.5rem), calc(var(--q-header-h) + 52px)) !important; }
.q-navs-glass .q-header {
	position: relative; isolation: isolate; width: min(1240px, calc(100% - 24px)); margin: 10px auto 0; padding-left: 20px; padding-right: 14px;
	border: 1px solid rgb(255 255 255 / 30%); border-radius: 28px;
	background: linear-gradient(180deg, rgb(255 255 255 / 22%), rgb(255 255 255 / 6%) 60%, rgb(255 255 255 / 10%)), rgb(30 18 44 / 38%) !important;
	-webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.04); backdrop-filter: blur(22px) saturate(1.9) brightness(1.04);
	box-shadow: inset 0 1px 1px rgb(255 255 255 / 60%), inset 0 -1px 1px rgb(255 255 255 / 12%), inset 0 0 24px rgb(255 255 255 / 8%), 0 22px 46px -22px rgb(0 0 0 / 60%) !important;
}
/* Specular highlight – light catching the top of the glass. */
.q-navs-glass .q-header::before {
	content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
	background: radial-gradient(120% 90% at 18% -40%, rgb(255 255 255 / 38%), transparent 55%), radial-gradient(80% 60% at 90% 140%, rgb(255 255 255 / 14%), transparent 60%);
}
.q-navs-glass .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { padding: .5em .95em; border-radius: 999px; transition: background .2s, box-shadow .2s; }
.q-navs-glass .q-nav .wp-block-navigation-item__content::after { display: none; }
.q-navs-glass .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:is(:hover, :focus-visible),
.q-navs-glass .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > .wp-block-navigation-item__content {
	background: linear-gradient(180deg, rgb(255 255 255 / 26%), rgb(255 255 255 / 10%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%), 0 4px 12px -6px rgb(0 0 0 / 40%);
}
.q-navs-glass.q-navd-icons .q-nav .wp-block-navigation-item__content { border-radius: 999px; }
.q-navs-glass .q-acct-link { border-color: rgb(255 255 255 / 35%); background: rgb(255 255 255 / 10%); }
.q-navs-glass .q-header__cta .wp-block-button__link { border-radius: 999px; }

/* ── Floating pill: a solid rounded bar ───────────────────────────────────────────────────── */
.q-navs-pill .q-header {
	width: min(1240px, calc(100% - 24px)); margin: 10px auto 0; padding-left: 20px; padding-right: 10px; border-radius: 999px;
	box-shadow: 0 16px 36px -16px rgb(0 0 0 / 60%), inset 0 1px 0 rgb(255 255 255 / 8%) !important;
}
.q-navs-pill .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { padding: .5em .95em; border-radius: 999px; transition: background .2s, color .2s; }
.q-navs-pill .q-nav .wp-block-navigation-item__content::after { display: none; }
.q-navs-pill .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:is(:hover, :focus-visible) { background: rgb(255 255 255 / 9%); }
.q-navs-pill .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > .wp-block-navigation-item__content { background: var(--wp--preset--color--brass); color: var(--wp--preset--color--espresso); }

/* ── Minimal: see-through over the header photo, solid once scrolled ─────────────────────── */
.q-navs-minimal .q-header { background: transparent !important; box-shadow: none !important; transition: background .35s, box-shadow .35s; }
.q-navs-minimal .q-site-header.is-scrolled .q-header {
	background: rgb(26 18 38 / 86%) !important; -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
	box-shadow: 0 10px 30px rgb(0 0 0 / 22%) !important;
}
.q-navs-minimal .q-nav .wp-block-navigation-item__content, .q-navs-minimal .q-logo img { text-shadow: 0 1px 8px rgb(0 0 0 / 45%); }

@media (max-width: 600px) {
	.q-navs-glass .q-header, .q-navs-pill .q-header { width: calc(100% - 16px); margin-top: 8px; padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.q-tip, .q-navs-minimal .q-header { transition: none !important; }
}

/* Rounded styles: the links carry their own padding, so less space between them – and never wrap. */
:is(.q-navs-glass, .q-navs-pill) .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { gap: 2px; }
.q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { flex-wrap: nowrap; }
.q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { white-space: nowrap; }
.q-header__cta .wp-block-button__link { white-space: nowrap; }
/* Icon + text on narrower desktops: slightly smaller so everything fits on one line. */
@media (max-width: 1280px) {
	.q-navd-both .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { font-size: .92em; }
	.q-navd-both:is(.q-navs-glass, .q-navs-pill) .q-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { padding: .5em .6em; }
}

/* A blurred (backdrop-filter) bar would trap the full-screen phone menu inside itself – so while
   the phone menu is open, the bar drops the blur. */
.q-header:has(.wp-block-navigation__responsive-container.is-menu-open) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* The phone menu's Order online / Call buttons have their own icons already. */
.q-nav__extra .q-nav__ico { display: none; }