/*
 * Overrides of WordPress core, global styles and plugin CSS (docs/DESIGN_SYSTEM.md section 11).
 *
 * This file is NOT inside a cascade layer and is loaded last. CSS outside a layer beats CSS inside
 * one, and WordPress core block styles, the global styles that theme.json prints and plugin CSS
 * (for example Fluent Forms) are all outside a layer. Because this file comes later at equal
 * specificity, it wins without !important. Keep it small: only what those sources get wrong.
 */

/*
 * The sticky header, and the toolbar WordPress shows to signed-in users, which the client's staff see all the
 * time on the site. From 601 px the toolbar is fixed above the page (below that it scrolls away with the page),
 * it sets its own height in --wp-admin--admin-bar--height, and it sits above everything (z-index 99999). So
 * whatever is pinned to the top of the window has to start below it. Its stylesheet is outside a layer too, and
 * it gives <html> a scroll-padding-top of its own height, so the space for the header cannot live in a component.
 *
 * scroll-padding-top keeps what the page scrolls to (an anchor, a link that takes focus) clear of the header
 * (WCAG 2.4.11).
 */
html {
	scroll-padding-top: var(--header-h);
}

/* The toolbar is fixed from 601 px of window width, whatever the font size. Core's query is in pixels, so this
   one is too; the theme's other breakpoints are in em. */
@media (min-width: 601px) {
	html {
		scroll-padding-top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0rem));
	}

	.admin-bar .site-header {
		inset-block-start: var(--wp-admin--admin-bar--height, 0);
	}
}

/* The header's own controls are inside the padded strip. While one has focus there is no padding: otherwise
   Chromium counts the control as hidden behind the header and scrolls the page to "reveal" it, and the header is
   sticky, so the page moves and the header does not. That happened whenever the menu closed and focus went back
   to the Menu button, and on every Tab or Shift+Tab step into the header. */
html:has(.site-header :focus) {
	scroll-padding-top: 0;
}

/* The skip link is placed against the top of the page, which the toolbar covers, so it comes into view below it.
   Only while it has focus: hidden, it stays where it is and out of sight above the window. */
.admin-bar .skip-link:focus-visible {
	inset-block-start: calc(var(--wp-admin--admin-bar--height, 0rem) + var(--space-2));
}

/*
 * The mobile menu is a modal panel over the whole window. The toolbar sits above everything (z-index 99999), even
 * above the header that holds the panel, and would cover its Close button, so it steps aside while the panel is open.
 */
.admin-bar:has(.mobile-nav.is-open) #wpadminbar {
	visibility: hidden;
}

/* Core's buttons: the same look as .btn--primary. The Button block, and also the buttons that other core blocks print
   outside it, with the same class (the File block's Download, the Search block's button), which would stay core's
   grey without this. */
.wp-block-button__link,
.wp-element-button {
	min-height: var(--size-control-md);
	padding: var(--space-2) var(--space-5);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--color-text-inverse);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: var(--lh-small);
	text-decoration: none;
	transition:
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
	.wp-block-button__link:hover,
	.wp-element-button:hover {
		background: var(--color-primary-hover);
		color: var(--color-text-inverse);
		text-decoration: none;
	}
}

.wp-block-button__link:active,
.wp-element-button:active {
	background: var(--color-primary-active);
}

/* The Outline style of the core Button block: the same look as .btn--secondary. */
.wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--color-primary);
	background: transparent;
	color: var(--color-primary);
}

@media (hover: hover) {
	.wp-block-button.is-style-outline .wp-block-button__link:hover {
		background: var(--color-surface-tint);
		color: var(--color-primary-hover);
	}
}

/* On a deep section the core button is the inverse one (white, ink label), like .btn--inverse: the primary would
   hardly stand apart from the deep band. */
.section--deep .wp-block-button__link {
	background: var(--color-surface);
	color: var(--color-text);
}

@media (hover: hover) {
	.section--deep .wp-block-button__link:hover {
		background: var(--color-surface-tint-2);
		color: var(--color-text);
	}
}

.section--deep .wp-block-button__link:active {
	background: var(--color-surface-tint);
}

/*
 * Core's layout styles, inside the theme's sections. WordPress gives every child of a Group block a top margin (the
 * block gap) and every Row its gap, outside any layer and with a :first-child rule of specificity 0-2-0, so they would
 * beat the spacing that the section components set (components/sections.css, pages/*.css). Inside a .section of the
 * page, revert-layer hands those properties back to the theme's layers. Outside the sections (a page's own text, where
 * editors use Groups freely) core's spacing stays.
 */
.is-layout-flow:is(.section, .section *) > * {
	margin-block: revert-layer;
}

.is-layout-flex:is(.section *) {
	gap: revert-layer;
}

/* The Buttons block inside a section: buttons a little apart, as in .actions. */
.wp-block-buttons:is(.section *) {
	gap: var(--space-3);
}