/* GeneratePress resets so the mockup CSS renders unchanged. Loaded last. */

/* Pages: no GP boxes, padding or backgrounds; sections bring their own .wrap. */
.wp-root .site,
.wp-root .site-content,
.wp-root .inside-article { background: transparent; }
.wp-root.full-width-content .site-content,
.wp-root.full-width-content .inside-article { padding: 0; }
.wp-root .entry-content:not(:first-child) { margin-top: 0; }
.wp-root .site-main > article { margin-bottom: 0; }

/* ───────── GP Elements: Site Header + Site Footer ─────────
   Blocks carry the mockup classes; these rules map GenerateBlocks' menu markup
   (.gb-menu, .gb-menu-toggle, .gb-menu-container--mobile) onto Nav.dc.html / Footer.dc.html. */
.wpm-header { background: var(--canvas); }
.wp-nav__logo { height: 40px; width: auto; display: block; }
.wp-nav__pill { list-style: none; margin: 0; }
.wp-nav__pill li { display: contents; }
.wpm-header__end { display: flex; gap: 16px; align-items: center; }

.gb-menu-toggle.wpm-burger { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); place-items: center; padding: 0; cursor: pointer; }
.gb-menu-toggle.wpm-burger:is(:hover, :focus) { background: var(--surface-mist); color: var(--ink); } /* beats GP's global button:focus */
.wpm-burger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wpm-burger svg { width: 18px; height: 18px; }

/* Mobile menu: GB full overlay. */
.wpm-menu.gb-menu-container--mobile { position: fixed; background: var(--canvas); padding: 76px 16px 32px; flex-direction: column; gap: 32px; }
.wpm-menu.gb-menu-container--toggled { display: flex; }
.wpm-menu .gb-menu-toggle--clone { top: 16px; right: 16px; }
.wpm-menu.gb-menu-container--mobile .wp-nav__pill { display: flex; flex-direction: column; gap: 4px; padding: 0; background: none; border-radius: 0; }
.wpm-menu.gb-menu-container--mobile .wp-nav__pill a { display: block; padding: 14px 16px; border-radius: var(--radius-md); font-size: 20px; line-height: 1.2; color: var(--ink); background: var(--surface); }
.wpm-menu.gb-menu-container--mobile .wp-nav__pill a:hover { background: var(--surface-mist); }
.wpm-menu.gb-menu-container--mobile .wp-nav__pill a[aria-current="page"] { background: var(--mint); color: var(--mint-ink); }
.wpm-menu__cta { justify-content: center; margin-top: auto; }

@media (max-width: 900px) {
	.wpm-header .wrap { padding: 0 16px; }
	.wpm-header .wp-nav { height: 76px; gap: 8px; }
	.wp-nav__logo { height: 32px; }
	.wpm-header__end { order: 2; margin-left: auto; }
	.wpm-nav { order: 3; }
	.gb-menu-toggle.wpm-burger { display: grid; } /* GB hides the toggle above its 900px breakpoint */
}
/* Sticky header (GB Pro Site Header: past-threshold, slide in after 160px).
   Stuck state = floating glass capsule (iOS-style): heavy blur + saturation, translucent surface,
   thin light rim. Brand rules: no shadow, no gradient. The glass lives on ::before because
   backdrop-filter on the header itself would trap the fixed full-screen mobile menu. */
.wpm-header.gb-is-sticky { background: transparent; padding-block: 8px; }
.wpm-header.gb-is-sticky::before {
	content: ""; position: absolute; z-index: -1;
	inset: 8px max(12px, calc((100% - var(--page-max)) / 2));
	border-radius: var(--radius-pill);
	background: var(--surface);
	border: 1px solid var(--hairline);
}
@supports (backdrop-filter: blur(1px)) {
	.wpm-header.gb-is-sticky::before {
		background: color-mix(in srgb, var(--surface) 58%, transparent);
		border-color: color-mix(in srgb, var(--surface) 75%, transparent);
		backdrop-filter: blur(22px) saturate(1.8) brightness(1.04);
	}
	.wpm-header.gb-is-sticky .wp-nav__pill { background: color-mix(in srgb, var(--surface) 55%, transparent); }
}
.wpm-header.gb-is-sticky .wp-nav { height: 64px; padding-inline: 12px; }
.wpm-header.gb-is-sticky .wp-nav__logo { height: 30px; }

/* Logo settles in once the bar arrives: ease-out, 12px travel, no bounce (wp-site.css motion rules). */
@keyframes wpm-logo-in { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.wpm-header.gb-is-sticky .wp-nav__logo { animation: wpm-logo-in .45s var(--ease-out) .12s both; }
}

@media (max-width: 900px) {
	.wpm-header.gb-is-sticky::before { inset: 8px; border-radius: 24px; }
	.wpm-header.gb-is-sticky .wp-nav { height: 56px; padding-inline: 8px; }
	.wpm-header.gb-is-sticky .wp-nav__logo { height: 26px; }
}

.wpm-header__end .wp-btn { white-space: nowrap; }
@media (max-width: 370px) { .wp-nav__logo { height: 30px; } } /* logo + CTA + burger fit 360px */

.foot__logo { height: 40px; width: auto; align-self: flex-start; }
.foot__lead { color: var(--ink-inverse-muted); max-width: 360px; font-size: 15px; }
.foot .stack-24 > .wp-btn { align-self: flex-start; }
.foot__base a { font-size: 13px; color: var(--ink-inverse-muted); }
.foot ul a { overflow-wrap: anywhere; } /* long domains in narrow footer columns */

/* ───────── Mobile pass ─────────
   The static pages set two-column layouts and 64px card padding inline (desktop only).
   Patterns carry them as --cols / --gap / --pad so they can collapse under 900px. */
.wpm-grid { display: grid; grid-template-columns: var(--cols); gap: var(--gap, 40px); }
.wpm-pad { padding: var(--pad); }
@media (max-width: 900px) {
	.wpm-grid { grid-template-columns: minmax(0, 1fr); gap: min(var(--gap, 40px), 32px); }
	.wpm-pad { padding: 40px 24px; }
	/* Hero art is drawn on a ~540×520 canvas of absolute pieces: keep that canvas, scale it to fit. */
	.hero__art { width: 540px; height: 520px; }
}
/* Two-column hero between 901px and the 1248px max: the art column is narrower than the 540px canvas.
   Service heroes (.hero--page) split 1.3fr/1fr and their canvases run to ~556px, so they step lower. */
@media (min-width: 901px) and (max-width: 1016px) { .hero__art { zoom: .7; } .hero--page .hero__art { zoom: .65; } }
@media (min-width: 1017px) and (max-width: 1132px) { .hero__art { zoom: .8; } .hero--page .hero__art { zoom: .75; } }
@media (min-width: 1133px) and (max-width: 1248px) { .hero__art { zoom: .9; } .hero--page .hero__art { zoom: .85; } }
@media (max-width: 720px) {
	.hero__art { zoom: .75; }
	.wp-cta { grid-template-columns: minmax(0, 1fr); } /* 1fr alone grows to the 421px paragraph */
}
@media (max-width: 480px) { .hero__art { zoom: .6; } }
@media (max-width: 370px) { .hero__art { zoom: .55; } }

/* ───────── Block equivalents of mockup markup ─────────
   GB 2 only allows certain tags, so some mockup elements map to other blocks. */

/* .check icons: mockup <i><svg> → GB Shape (span.gb-shape). Mirrors `.check i` in wp-site.css. */
.check > .gb-shape { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--mint); display: grid; place-items: center; margin-top: 1px; }
.check > .gb-shape svg { width: 12px; height: 12px; }

/* .tbl: mockup <table class="tbl"> → core Table (figure.wp-block-table.tbl > table). Reset core's cell borders. */
.wp-block-table.tbl { margin: 0; font-size: 15px; }
.wp-block-table.tbl table { width: 100%; border-collapse: collapse; table-layout: auto; margin: 0; } /* core defaults to fixed; GP adds a 1.5em margin */
.wp-block-table.tbl thead { border-bottom: 0; }
.wp-block-table.tbl :is(th, td) { border: 0; border-bottom: 1px solid var(--hairline); }
.wp-block-table.tbl th:first-child { width: 40%; }
.wp-block-table.tbl tbody tr:last-child td { border-bottom: 0; }

/* Footer column titles are <h2> (heading order after page h2s); same look as `.foot h4` in wp-site.css. */
.foot h2 { margin: 0 0 16px; font: 400 12px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-inverse-muted); }