/* ============================================================
   En Masse Bespoke — header & footer (from the 2026 design suite)
   Header: sticky, 88px, #454545, three-column flex nav
   Footer: dark, Work / Company / Connect
   ============================================================ */

:root {
	--emb-header-bg: #686868;
	--emb-header-h: 88px;
	--emb-dark: #686868;
	--emb-text-light: #f5f3ef;
	--emb-text-muted: rgba(245, 243, 239, 0.65);
	--emb-container-padding: 8vw;
	--emb-font: 'proxima-light', 'Proxima Nova', -apple-system, 'Helvetica Neue', sans-serif;
}

/* ---------- Header ---------- */
.emb-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--emb-header-bg);
	color: var(--emb-text-light); /* anchor for inherited link colours */
}

/* Kill list styling on all header/nav lists (WP + page CSS interference) */
.emb-header ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Nav links keep the same light colour in every state — page stylesheets
   define a:visited{color:inherit} which otherwise turns visited links dark */
.emb-header .emb-nav a,
.emb-header .emb-nav a:link,
.emb-header .emb-nav a:visited,
.emb-header .emb-nav a:focus,
.emb-header .emb-nav a:active,
.emb-header .emb-mobile-nav a,
.emb-header .emb-mobile-nav a:link,
.emb-header .emb-mobile-nav a:visited,
.emb-header .emb-mobile-nav a:focus,
.emb-header .emb-mobile-nav a:active {
	color: var(--emb-text-light) !important;
}
.emb-header .emb-nav a:hover {
	color: var(--emb-text-muted) !important;
}

/* Keep the header above the mobile overlay so burger/close stays visible */
.emb-header-inner {
	position: relative;
	z-index: 2;
}

/* Sticky offset + overlay offset when the WP admin bar is present */
body.admin-bar .emb-header { top: 46px; }
body.admin-bar .emb-mobile-nav { top: calc(var(--emb-header-h) + 46px); }
@media (min-width: 783px) {
	body.admin-bar .emb-header { top: 32px; }
	body.admin-bar .emb-mobile-nav { top: calc(var(--emb-header-h) + 32px); }
}

.emb-header-inner {
	display: flex;
	align-items: center;
	height: var(--emb-header-h);
	padding: 0 var(--emb-container-padding);
}

.emb-nav { flex: 1; }
.emb-nav a,
.emb-mobile-nav a {
	text-decoration: none; /* global link reset — no underlines */
	color: var(--emb-text-light);
	font-family: var(--emb-font);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	transition: color 0.25s ease;
}
.emb-nav a:hover { color: var(--emb-text-muted); }

.emb-nav-group {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.8rem;
	align-items: center;
}
.emb-nav-group.align-left { justify-content: flex-start; }
.emb-nav-group.align-right { justify-content: flex-end; }

.emb-logo {
	flex: 0 0 auto;
	display: block;
	padding: 0 2.5rem;
	line-height: 0;
}
.emb-logo img { height: 44px; width: auto; display: block; }

/* No tap-highlight flash on mobile */
a, button {
	-webkit-tap-highlight-color: transparent;
}

/* Dropdowns — base reset applies everywhere; positioning is desktop-only */
.emb-dropdown {
	list-style: none;
	margin: 0;
	padding: 0;
}
.emb-has-dropdown { position: relative; }
.emb-nav .emb-dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 220px;
	background: var(--emb-header-bg);
	list-style: none;
	margin: 0;
	padding: 0.75rem 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.emb-nav .emb-has-dropdown:hover .emb-dropdown,
.emb-nav .emb-has-dropdown:focus-within .emb-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.emb-nav .emb-dropdown li a {
	display: block;
	padding: 0.6rem 1.5rem;
	white-space: nowrap;
}

/* Burger (mobile) — all states forced transparent (Astra's global
   button:hover/:focus/:active paints a white block otherwise) */
.emb-burger,
.emb-burger:hover,
.emb-burger:focus,
.emb-burger:active,
.emb-burger[aria-expanded="true"],
.emb-burger[aria-expanded="true"]:hover,
.emb-burger[aria-expanded="true"]:focus {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	outline: none;
}
.emb-burger {
	display: none;
	padding: 8px;
	cursor: pointer;
}
.emb-burger span {
	display: block;
	width: 22px;
	height: 1px;
	background: var(--emb-text-light);
	margin: 5px 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.emb-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.emb-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.emb-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Full-screen overlay menu */
.emb-mobile-nav {
	position: fixed;
	z-index: 1; /* below .emb-header-inner so the burger/close stays visible */
	inset: var(--emb-header-h) 0 0 0;
	background: var(--emb-header-bg);
	padding: 1.5rem 7vw 3rem;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	pointer-events: none; /* nothing inside is tappable while closed */
	transform: translateY(-8px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.emb-mobile-nav.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
.emb-mobile-nav .emb-nav-group {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.emb-mobile-nav .emb-nav-group > li {
	border-bottom: 1px solid rgba(245, 243, 239, 0.1);
}
.emb-mobile-nav .emb-nav-group.mobile:last-child > li:last-child {
	border-bottom: 0;
}
.emb-mobile-nav a {
	display: block;
	padding: 1rem 0;
	font-size: 13px;
	letter-spacing: 2px;
}
/* Parent items of dropdowns become plain labels on mobile */
.emb-header .emb-mobile-nav .emb-has-dropdown > a {
	color: var(--emb-text-muted) !important;
	font-size: 10px;
	letter-spacing: 2.5px;
	padding-bottom: 0.25rem;
	pointer-events: none;
}
.emb-mobile-nav .emb-dropdown {
	position: static;
	transform: none;
	opacity: 1;
	visibility: visible;
	padding: 0 0 0.5rem;
	min-width: 0;
	background: none;
}
.emb-mobile-nav .emb-dropdown li a {
	padding: 0.85rem 0;
	font-size: 13px;
}

/* Lock page scroll while menu is open */
body.emb-menu-open {
	overflow: hidden;
}

@media (max-width: 980px) {
	:root { --emb-header-h: 64px; }
	.emb-nav { display: none; }
	.emb-burger { display: block; margin-left: -8px; }
	.emb-header-inner {
		justify-content: space-between;
		padding: 0 6vw;
	}
	.emb-logo { padding: 0; position: absolute; left: 50%; transform: translateX(-50%); }
	.emb-logo img { height: 30px; }
	.emb-header-inner { position: relative; }
}
@media (min-width: 981px) {
	.emb-mobile-nav { display: none; }
}

/* ---------- EMB page templates: full-bleed inside Astra wrappers ---------- */
/* Astra's customizer paints body #454545 (old dark design) — EMB pages are white */
body.emb-page,
.emb-page #page,
.emb-page .site,
.emb-page #content {
	background-color: #ffffff !important;
}
.emb-page #content .ast-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin: 0;
	display: block;
}
.emb-page #primary,
.emb-page #main {
	margin: 0;
	padding: 0;
	border: 0;
}
.emb-page .site-content {
	padding: 0;
}
.emb-page article,
.emb-page .entry-content {
	margin: 0;
}

/* ---------- Lightbox: neutralise Astra's global button styling ---------- */
/* Old commission pages' CSS snippets define their own .lightbox (hidden via
   opacity/visibility, toggled by .active + 0.3s transition). Ours toggles
   .open — force our states so the collision can't hide the gallery. */
body.emb-page .lightbox {
	transition: none !important;
}
body.emb-page .lightbox.open {
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
	background: rgba(10, 10, 10, 0.96) !important;
}
body.emb-page .lightbox:not(.open) {
	display: none !important;
}

/* Astra's customizer heading colour (white, from the old dark design) leaks
   into headings the page CSS doesn't explicitly colour — inherit instead.
   Page stylesheets load after this, so their explicit heading colours win. */
.emb-page h1,
.emb-page h2,
.emb-page h3,
.emb-page h4,
.emb-page h5,
.emb-page h6 {
	color: inherit;
}

/* Sitewide heading typography: Playfair Display 400, never italic */
.emb-page h1,
.emb-page h2,
.emb-page h3,
.emb-page h4,
.emb-page h5,
.emb-page h6 {
	font-family: "Playfair Display", serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
}
.emb-page h1 em,
.emb-page h2 em,
.emb-page h3 em,
.emb-page h4 em {
	font-style: normal !important;
}

.emb-page .lightbox-nav {
	width: 48px !important;
	height: 48px !important;
	padding: 0 !important;          /* Astra's 15px 30px padding was making it an ellipse */
	min-width: 0;
	border-radius: 50%;
	background: transparent !important;
	box-shadow: none !important;
	line-height: 1;
}
.emb-page .lightbox-nav svg {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0;                  /* was being flex-shrunk to 0 by the padding squeeze */
	stroke: currentColor;
	fill: none !important;
}
.emb-page .lightbox-nav:hover,
.emb-page .lightbox-nav:focus {
	background: rgba(255, 255, 255, 0.1) !important;
	color: #fff;
	box-shadow: none !important;
}
.emb-page .lightbox-close,
.emb-page .lightbox-close:hover,
.emb-page .lightbox-close:focus {
	background: transparent !important;  /* Astra button:hover painted the whole block white */
	box-shadow: none !important;
	border: none !important;
	padding: 8px !important;
}
.emb-page .lightbox-close:hover,
.emb-page .lightbox-close:focus {
	color: #ffffff;
}

/* ---------- Footer ---------- */
.emb-footer {
	background: var(--emb-dark);
	color: var(--emb-text-light);
	font-family: var(--emb-font);
}
.emb-footer-inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 3rem;
	padding: 5rem var(--emb-container-padding) 3rem;
}
.emb-footer-brand img { height: 40px; width: auto; margin-bottom: 1.25rem; }
.emb-footer-brand p {
	color: var(--emb-text-muted);
	font-size: 14px;
	line-height: 1.7;
	max-width: 34ch;
	margin: 0;
}
.emb-footer-col h3 {
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--emb-text-light);
	margin: 0 0 1.25rem;
	font-weight: 400;
}
.emb-footer-col ul { list-style: none; margin: 0; padding: 0; }
.emb-footer-col li { margin-bottom: 0.65rem; }
.emb-footer-col a {
	text-decoration: none;
	color: var(--emb-text-muted);
	font-size: 14px;
	letter-spacing: 0.5px;
	transition: color 0.25s ease;
}
.emb-footer-col a:hover { color: var(--emb-text-light); }

.emb-footer-bottom {
	border-top: 1px solid rgba(245, 243, 239, 0.12);
	padding: 1.5rem var(--emb-container-padding);
}
.emb-footer-bottom p {
	margin: 0;
	font-size: 12px;
	letter-spacing: 1px;
	color: var(--emb-text-muted);
	text-transform: uppercase;
}

@media (max-width: 980px) {
	.emb-footer-inner { grid-template-columns: 1fr 1fr; padding-top: 3.5rem; }
	.emb-footer-brand { grid-column: 1 / -1; }
}
/* Mobile footer: centred content, no logo */
@media (max-width: 768px) {
	.emb-footer-inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 2.5rem;
	}
	.emb-footer-brand img { display: none; }
	.emb-footer-brand p { max-width: none; margin: 0 auto; }
	.emb-footer-bottom { text-align: center; }
}