/* ==========================================================================
   Layout: header, navigation, mobile menu, footer + footer reveal.
   ========================================================================== */

/* Page wrapper sits above the footer so it can scroll away and reveal it. */
.page-wrap { position: relative; z-index: 1; background: var(--c-bg); }
.site-main { display: block; outline: none; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; }
/* Soft progressive blur so content passing underneath stays legible. */
.site-header::before {
	content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none;
	background: linear-gradient(to bottom, rgba(242, 239, 233, 0.92) 0%, rgba(242, 239, 233, 0.75) 60%, rgba(242, 239, 233, 0) 100%);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
	mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }

.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo__mark {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--c-accent); color: var(--c-white); flex: none;
}
.logo__mark .icon { width: 30px; height: 30px; transform: rotate(-8deg); }
.logo__name { font-family: var(--f-display); font-weight: 700; font-size: 28px; letter-spacing: -0.04em; line-height: 1; }
.logo__img { display: block; height: var(--logo-h, 44px); width: auto; }
.logo__img--mobile { display: none; }

.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav__list { display: flex; align-items: center; gap: 20px; }
/* Main nav: body font in sentence case, a touch bolder than body text. */
.site-nav__link { display: inline-flex; padding: 6px 0; font-size: 16px; font-weight: 600; line-height: 1.5; }
.site-nav__cta { padding: 9px 16px; font-weight: 600; }
.site-nav__item { position: relative; display: flex; align-items: center; }
.site-nav__item.is-current > .site-nav__link { color: var(--c-accent); }
.site-nav__toggle { display: grid; place-items: center; width: 24px; height: 32px; margin-left: 2px; color: inherit; }
.site-nav__toggle .icon { width: 14px; height: 14px; transform: rotate(90deg); transition: transform 200ms var(--ease-out); }
.site-nav__item.is-open > .site-nav__toggle .icon { transform: rotate(-90deg); }
.site-nav__sub {
	position: absolute; top: calc(100% + 6px); left: -14px; min-width: 240px; padding: 8px; z-index: 5;
	background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: var(--radius);
	box-shadow: 0 18px 40px -18px rgba(30, 30, 30, 0.3);
	opacity: 0; visibility: hidden; transform: translateY(-4px);
	transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
}
.site-nav__item:hover > .site-nav__sub,
.site-nav__item:focus-within > .site-nav__sub,
.site-nav__item.is-open > .site-nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.site-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* hover bridge */
.site-nav__sublink { display: block; padding: 9px 12px; border-radius: 8px; font-size: 15px; line-height: 1.4; }
.site-nav__sublink:hover, .site-nav__sublink:focus-visible { background: var(--c-surface); }

.menu-toggle { display: none; width: 44px; height: 44px; margin-right: -10px; align-items: center; justify-content: center; }
.menu-toggle__bars { position: relative; display: block; width: 22px; height: 12px; }
.menu-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--c-text); transition: transform 250ms var(--ease-out), top 250ms var(--ease-out); }
.menu-toggle__bars span:first-child { top: 0; }
.menu-toggle__bars span:last-child { top: 10px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { top: 5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child { top: 5px; transform: rotate(-45deg); }

.mobile-menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-bg); border-bottom: 1px solid var(--c-border-strong); box-shadow: 0 24px 40px -24px rgba(30, 30, 30, 0.25); }
.mobile-menu__list { padding: 8px 0 20px; }
.mobile-menu__link { display: flex; align-items: center; min-height: 52px; font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: -0.04em; border-bottom: 1px solid var(--c-border); }
.mobile-menu { max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.mobile-menu__sub { padding: 4px 0 10px 14px; border-bottom: 1px solid var(--c-border); }
.mobile-menu__sublink { display: flex; align-items: center; min-height: 44px; font-size: 17px; }
.mobile-menu__cta { width: 100%; margin: 4px 0 24px; }

@media (max-width: 767px) {
	.site-nav { display: none; }
	.menu-toggle { display: inline-flex; }
	.logo__mark { width: 40px; height: 40px; }
	.logo__name { font-size: 26px; }
	.logo__img { height: var(--logo-h-mobile, 40px); }
	.logo__img--brand { height: min(var(--logo-h-mobile, 40px), 34px); } /* Wide wordmark: keeps room for the menu button. */
	.logo__img--desktop { display: none; }
	.logo__img--mobile { display: block; }
}
@media (min-width: 768px) {
	.mobile-menu { display: none !important; }
}

/* ---------- Footer ---------- */
.site-footer { position: relative; z-index: 0; background: var(--c-accent); color: var(--c-white); padding-top: 56px; padding-bottom: 24px; }
/* Reveal effect: enabled by ui.js only on desktop when the footer fits the viewport. */
.footer-reveal .site-footer { position: sticky; bottom: 0; }

.logo--footer .logo__mark { background: var(--c-white); color: var(--c-accent); }

/* Widget columns: only populated areas render; they share the width evenly. */
.site-footer__widgets { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 40px; }
.site-footer .widget__title { font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: -0.04em; line-height: 1.05; margin-bottom: 16px; }
.site-footer .widget ul { display: grid; gap: 10px; }
.site-footer .widget li { line-height: 1.4; }
.site-footer .widget a { font-weight: 600; font-size: 15px; }
.site-footer .widget a:hover, .site-footer .widget a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.site-footer .widget p { font-size: 15px; line-height: 1.6; }
.site-footer .widget p + p { margin-top: 10px; }
.site-footer .widget .sub-menu { margin-top: 8px; padding-left: 12px; }
.site-footer .widget input[type="search"], .site-footer .widget input[type="email"] { width: 100%; height: 40px; padding: 0 10px; border: 0; border-radius: 8px; }

.site-footer__nudge { margin-left: 0.05em; } /* Z–U gap, giant footer wordmark only */
.site-footer__wordmark {
	margin-top: 56px;
	font-family: var(--f-display); font-weight: 700; line-height: 0.8; letter-spacing: -0.02em;
	/* Fills the content width; ui.js measures the actual text and sets --wm-ratio. */
	font-size: min(calc((100vw - var(--gutter) * 2) / var(--wm-ratio, 5.6)), calc(var(--container) / var(--wm-ratio, 5.6)));
	text-align: center; white-space: nowrap; user-select: none;
	padding-top: 0.06em;
}

.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(250, 250, 250, 0.7); }
.social-links { display: flex; gap: 22px; }
.social-links a { display: grid; place-items: center; width: 24px; height: 24px; }
.social-links .icon { width: 17px; height: 17px; }
.site-footer__copy { font-size: 13px; }
.site-footer__sitemap { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__sitemap:hover { text-decoration: none; }
.site-footer__sep { margin: 0 8px; opacity: 0.7; }

@media (max-width: 1023px) {
	.site-footer__widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 767px) {
	.site-footer { padding-top: 48px; }
	.site-footer__widgets { grid-template-columns: 1fr; gap: 28px; }
	.site-footer .widget a { display: inline-flex; min-height: 32px; align-items: center; }
	.site-footer__wordmark { margin-top: 48px; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Device visibility (section "Display On") ---------- */
@media (max-width: 767px) { .zs-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .zs-hide-desktop { display: none !important; } }

/* Phones: body copy one step smaller than desktop (17px → 16px; loads after the Theme Settings stylesheet, which sets --fs-body for all sizes). */
@media (max-width: 767px) {
	:root { --fs-body: 16px; }
}

/* The giant footer wordmark links home without looking like a text link. */
.site-footer__wordmark-link { display: block; color: inherit; text-decoration: none; }
.site-footer__wordmark-link:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 8px; }