/*
 * Shared navbar + footer. Loaded on every page right after ultrawide.css, so any
 * change here lands on the whole site. The landing page is the reference design.
 * Page stylesheets must not restyle .pk-header, .pk-dhead, .pk-nav or .pk-footer.
 */

/* Pages set their own body type (e.g. 17px / 1.8 / maroon); keep it out of the
   navbar and footer. :where() keeps this at zero specificity, so every explicit
   navbar/footer rule still wins and only inherited values are reset. */
:where(.pk-site) :where(.pk-header, .pk-footer) {
	color: #000;
	font-family: var(--pk-font);
	font-weight: 400;
	font-size: 18px;
	line-height: normal;
}

@media (max-width: 1024px) {
	:where(.pk-site) :where(.pk-header, .pk-footer) { font-size: 16px; }
}

@media (max-width: 767px) {
	/* Landing gutter, scoped to the chrome so page content keeps its own gutter. */
	:where(.pk-site) :where(.pk-header, .pk-footer) { --pk-gutter: clamp(16px, 5.455vw, 24px); }
	.pk-site .pk-mhead__logo { top: calc(15 * 100vw / 440); }
	/* Menu and search buttons stay at least 4px inside the screen edge at any width. */
	.pk-site .pk-header .pk-menu-toggle { left: max(4px, calc(var(--pk-gutter) - 6px)); }
	.pk-site .pk-header .pk-mhead__search { right: max(4px, calc(var(--pk-gutter) - 6px)); }
	.pk-site .pk-header { height: calc(100vw * 135.5 / 440); margin-bottom: calc(-50vw / 440 * 100); }
	.pk-site .pk-mhead__bg { height: calc(100vw * 135.5 / 440); background: url('../img/mobile-preview/header-shape.svg') center / 100% 100%; }
}

@media (max-width: 299px) {
	:where(.pk-site) :where(.pk-header, .pk-footer) { --pk-gutter: 4px; }
}

/* Footer newsletter: under 320px the email field is too narrow for its hint beside the button,
   so the button drops below the field and both take the full width. */
@media (max-width: 319px) {
	.pk-site .pk-mfoot__news-row { flex-direction: column; }
	.pk-site .pk-mfoot__news-row button { width: 100%; min-width: 0; }
}