/* What theme.json can't express. Keep this small.
   Measurements: design/figma-measurements.md (1200 px frames). */

:root {
	--provaide-frame: 1200px; /* width of the Figma frames */
	/* Header insets: 40 px left / 60 px right at 1200 px, in a centred 1200 px frame beyond. */
	--provaide-bar-left: max(clamp(20px, 3.33vw, 40px), calc((100% - var(--provaide-frame)) / 2 + 40px));
	--provaide-bar-right: max(clamp(20px, 5vw, 60px), calc((100% - var(--provaide-frame)) / 2 + 60px));
}

/* Status bar, 40 px: the dot before "Research in progress" blinks
   (developer note: ~1.2 s interval, opacity 100 % <-> 20 %). */
.provaide-statusbar { min-height: 40px; align-items: center; row-gap: 4px; }
.provaide-statusbar p { margin: 0; font-size: var(--wp--preset--font-size--mono-xs); line-height: 1; }
.provaide-statusbar__live::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 9px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: 1px;
	animation: provaide-blink 1.2s steps(1, end) infinite;
}
@keyframes provaide-blink { 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) {
	.provaide-statusbar__live::before { animation: none; }
}

/* Navigation bar, 90 px. Icon 60 px wide (styleguide: at least 40 px), #0A0A0A on light. */
.provaide-nav { min-height: 90px; box-sizing: border-box; align-items: center; }
.provaide-logo { display: block; width: 60px; color: var(--wp--preset--color--dark); line-height: 0; }
.provaide-logo svg { width: 100%; height: auto; }

/* Items: mono 14, active item blue with a 2 px bar 10 px below the text. */
.provaide-nav .wp-block-navigation__container { gap: 32px; }
.provaide-nav .wp-block-navigation-item__content { text-decoration: none; color: var(--wp--preset--color--ink); line-height: 1; padding: 0 0 8px; border-bottom: 2px solid transparent; margin-bottom: -10px; }
.provaide-nav .current-menu-item > .wp-block-navigation-item__content,
.provaide-nav .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--preset--color--accent); border-bottom-color: var(--wp--preset--color--accent); }

/* Flex bars don't get the root padding that constrained layouts get. */
.provaide-statusbar, .provaide-nav { padding-left: var(--provaide-bar-left) !important; padding-right: var(--provaide-bar-right) !important; }
.provaide-footer {
	padding-left: max(var(--wp--style--root--padding-left), calc((100% - var(--wp--style--global--content-size)) / 2));
	padding-right: max(var(--wp--style--root--padding-right), calc((100% - var(--wp--style--global--content-size)) / 2));
}

/* Header and footer sit flush; sections bring their own spacing. */
.provaide-header > * + *, .provaide-main { margin-block-start: 0; }
.wp-site-blocks > footer { margin-block-start: 0; }
.provaide-footer p { margin: 0; }
.provaide-footer__legal a + a { margin-left: 1.5em; }