/* 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 .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 .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; }
.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 .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 .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; }