/* Venue 92 chrome: what the header, menu panel and footer still need from CSS. Their colours, type, spacing and
   borders are block attributes and style variations in the parts (tools/build-site.py), so the Site Editor shows and
   edits them. Kept here: the sticky part wrapper, the two logo versions, the phone button icon, the inline menu and
   its dropdown, the menu panel rows, the header over the hero video, footer link rows. Token variables only (raw
   values: 0, 1px hairlines, media-query breakpoints). */

/* ---------- page frame ---------- */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks > main, .wp-site-blocks > main > .wp-block-post-content { margin-block: 0; }
.wp-block-post-content > * + * { margin-block-start: 0; }

/* ---------- header ---------- */
.wp-block-template-part:has(> .vn-header-wrap) { display: contents; }
.vn-header-wrap { z-index: var(--wp--custom--z--sticky); background-color: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); transition: background-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base); }
.vn-header { gap: var(--wp--preset--spacing--40); }

/* the logo: two images in one home link; the site is dark (owner, 29 Oct 2026), so only the white one shows */
.vn-brand { flex: none; position: relative; }
.vn-brand .wp-block-image { margin: 0; }
.vn-brand img { height: 56px; width: auto; display: block; }
.vn-brand .vn-logo--dark { display: none; }
.vn-brand a { display: block; }
@media (min-width: 1024px) { .vn-brand img { height: 72px; } }

/* inline menu from 1180px (six labels in uppercase need the room), the menu panel below */
.vn-nav { margin-inline: auto; white-space: nowrap; }
.vn-nav .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: var(--wp--custom--control--min); padding: 0; opacity: 0.85; transition: opacity var(--wp--custom--transition--fast); }
.vn-nav .wp-block-navigation-item__content:hover, .vn-nav .current-menu-item > .wp-block-navigation-item__content { opacity: 1; }
.vn-nav .wp-block-navigation__submenu-icon { width: 12px; height: 12px; margin-left: 4px; }
.vn-nav .wp-block-navigation__submenu-icon svg { width: 12px; height: 12px; }
.vn-nav .wp-block-navigation__submenu-container { min-width: 220px !important; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) !important; background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important; border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6) !important; }
.vn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0; opacity: 1; }
.vn-nav .wp-block-navigation__responsive-container-open { display: none; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); align-items: center; justify-content: center; border: var(--wp--custom--border--hairline) solid currentColor; border-radius: var(--wp--custom--radius--icon-button); color: currentColor; background: transparent; padding: 0; cursor: pointer; opacity: 0.85; }
.vn-nav .wp-block-navigation__responsive-container-open svg { width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); }
@media (max-width: 1179px) {
	.vn-nav { order: 3; margin: 0 0 0 var(--wp--preset--spacing--30); }
	.vn-header-cta { margin-left: auto; }
	.vn-nav .wp-block-navigation__responsive-container-open { display: flex !important; }
	.vn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}
@media (min-width: 1024px) { .vn-header { min-height: var(--wp--custom--layout--header-height) !important; } }

/* the header button is the phone number, with a phone icon; on phones the action bar at the bottom has Call instead */
.vn-header-cta { flex: none; margin: 0; }
@media (max-width: 899px) { .vn-header-cta { display: none !important; } .vn-nav { margin-left: auto !important; } }
.vn-header-cta .wp-block-button__link { gap: var(--wp--preset--spacing--20); letter-spacing: 0.06em; }
.vn-header-cta .wp-block-button__link::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--wp--custom--icon-url--phone) center / contain no-repeat; mask: var(--wp--custom--icon-url--phone) center / contain no-repeat; }

/* over the hero video: transparent while the page sits at the top of a hero that runs under the header, solid once it
   scrolls (assets/js/header-scroll.js sets body.vn-is-scrolled). Only with JavaScript (html.vn-js), so without it the
   header stays solid. */
html.vn-js body:not(.vn-is-scrolled):has(.vn-hero--under-header) .vn-header-wrap--over-hero { background-color: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; color: var(--wp--preset--color--on-accent) !important; }
html.vn-js body:not(.vn-is-scrolled):has(.vn-hero--under-header) .vn-header-wrap--over-hero :focus-visible { outline-color: var(--wp--preset--color--focus-inverse); }
/* the open menu panel must not inherit the transparent header's colours */
.vn-header-wrap:has(.wp-block-navigation__responsive-container.is-menu-open) { background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important; }

/* ---------- menu panel (navigation overlay; the panel's look is in the part) ---------- */
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--overlay); padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--40)) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > * { display: block; height: auto; }
.vn-drawer { width: 100%; max-width: var(--wp--custom--layout--drawer); margin-left: auto; box-sizing: border-box; }
.vn-drawer__head { display: flex !important; }
.vn-drawer .vn-brand img { height: 48px; }
.vn-drawer .wp-block-navigation-overlay-close { display: inline-grid; place-items: center; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong); border-radius: var(--wp--custom--radius--icon-button); background: transparent; color: var(--wp--preset--color--contrast); cursor: pointer; padding: 0; position: static; }
.vn-drawer .wp-block-navigation-overlay-close svg { width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); fill: currentColor; }
.vn-drawer__nav .wp-block-navigation__container { display: grid; width: 100%; gap: 0; }
.vn-drawer__nav .wp-block-navigation-item { display: block; border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); }
.vn-drawer__nav .wp-block-navigation-item__content { display: flex; align-items: center; justify-content: space-between; min-height: var(--wp--custom--control--min); padding: var(--wp--preset--spacing--20) 0; }
.vn-drawer__nav .wp-block-navigation__submenu-container { position: static !important; opacity: 1 !important; visibility: visible !important; width: auto !important; height: auto !important; border: 0 !important; padding: 0 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) !important; background: transparent !important; }
.vn-drawer__nav .wp-block-navigation__submenu-container .wp-block-navigation-item { border: 0; }
.vn-drawer__nav .wp-block-navigation__submenu-icon { display: none; }
.vn-drawer__contact a { display: inline-flex; align-items: center; min-height: var(--wp--custom--control--min); }

/* ---------- footer (colours, spacing and type are in the part) ---------- */
.vn-footer a { text-decoration: none; }
.vn-footer a:hover { color: var(--wp--preset--color--on-accent); }
.vn-footer .wp-block-column { min-width: 0; }
.vn-footer .vn-brand img { height: 84px; }
.vn-footer .wp-block-navigation { color: var(--wp--preset--color--on-dark-muted); }
.vn-footer .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: var(--wp--custom--control--min); text-transform: none; letter-spacing: 0; }
.vn-footer__links a { display: inline-flex; align-items: center; min-height: var(--wp--custom--control--min); }
.vn-footer__bottom > * { margin: 0; }
.vn-footer__bottom .wp-block-navigation-item__content { min-height: 0; }
.vn-footer .wp-block-social-links { gap: var(--wp--preset--spacing--20); }
.vn-footer .wp-block-social-links .wp-social-link { background: transparent !important; color: var(--wp--preset--color--on-accent) !important; border-radius: var(--wp--custom--radius--icon-button); }
.vn-footer .wp-block-social-links .wp-social-link a { display: grid; place-items: center; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); padding: 0; color: inherit; border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--on-dark-muted); border-radius: var(--wp--custom--radius--icon-button); }
.vn-footer .wp-block-social-links .wp-social-link a:hover,
.vn-footer .wp-block-social-links .wp-social-link a:focus-visible { background: var(--wp--preset--color--on-accent); color: var(--wp--preset--color--accent-3) !important; }
.vn-footer .wp-block-social-links svg { width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); }

/* ---------- phone action bar (part of the footer; phones only) ---------- */
.vn-mcta { display: none !important; }
@media (max-width: 899px) {
	.vn-mcta { display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--wp--custom--z--sticky); margin: 0 !important; padding: var(--wp--preset--spacing--30) var(--wp--custom--layout--gutter-mobile) calc(var(--wp--preset--spacing--30) + env(safe-area-inset-bottom, 0px)) !important; background: color-mix(in srgb, var(--wp--preset--color--accent-3) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); gap: var(--wp--preset--spacing--30); }
	.vn-mcta .wp-block-button { flex: 1; }
	.vn-mcta .wp-block-button__link { width: 100%; }
	body { padding-bottom: 76px; }
}

/* 30 Oct: 10px boxes */
.vn-nav .wp-block-navigation__submenu-container { border-radius: var(--wp--custom--radius--card); }