/**
 * Base layer: element defaults, Neve typography, container width, Neve
 * buttons and the places where Neve's element styles meet .pw-* components.
 *
 * Loads after Neve's stylesheet and its inline CSS (neve-style-inline-css),
 * so plain :root and element selectors are enough to win; no important flags.
 * Also loaded in the block editor, where WordPress rewrites `body` and `:root`
 * to .editor-styles-wrapper.
 *
 * @package plantworld
 */

/*
 * 1. Element defaults, taken from the mockup's tokens/base.css.
 * Left out on purpose: p / h1-h4 { margin: 0 } (would break post content;
 * components set their own margins), a { border-bottom } (links use
 * text-decoration, see below), hr { margin: 0 } (same reason as p) and
 * img { display: block } (breaks images inside a line of text, such as emoji
 * or icons in a paragraph; every .pw-* component with a photo sets it).
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * No rounded corners anywhere (HANDOFF section 1). Zero specificity, as in the
 * mockup: it only removes browser defaults (Safari fields, for example), and
 * the two allowed exceptions (radio dot, round portraits) set their own radius
 * with a class. Neve's buttons and fields get 0 through their variables below.
 */
* {
	border-radius: 0;
}

body {
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

img {
	max-width: 100%;
	height: auto;
}

hr {
	border: 0;
	border-top: var(--border-hairline);
}

:focus-visible {
	outline: 2px solid var(--focus-ring-on-light);
	outline-offset: 2px;
}

/*
 * Links in a sentence are underlined, 1px, 3px below the text (HANDOFF
 * section 10). Neve turns the underline off for every link
 * (a { text-decoration: var(--linkdeco) } with --linkdeco: none), so we
 * switch it back on inside text. "Text" is a class every template has:
 * WordPress adds wp-block-paragraph and wp-block-list to each text block
 * when it renders it, whatever the template (city, realization, privacy
 * policy, service pages), and the editor does the same. Before the audit
 * (A-03) the rule hung on .entry-content, which only Neve's own templates
 * print. :where() keeps the specificity of a bare `a`: enough to win over
 * Neve, which loads earlier, and low enough for any .pw-* class
 * (.pw-textlink, buttons) to turn it off again for standalone links.
 * .is-root-container is the content area in the editor.
 */
:where(.entry-content, .is-root-container, .wp-block-paragraph, .wp-block-list, .wp-block-table, .wp-block-quote) a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/*
 * 2. Neve typography.
 * Neve prints these variables in neve-style-inline-css from its Customizer
 * settings. We set them here instead of in the Customizer, because a Google
 * font picked there makes Neve load it from fonts.googleapis.com.
 * Sizes step down at 959px and 575px (HANDOFF section 1), not fluid.
 * h4-h6 keep Neve's sizes and line heights: HANDOFF has no values for them.
 */

:root {
	--bodyfontfamily: var(--font-body);
	--bodyfontweight: var(--fw-regular);
	--bodyfontsize: var(--type-body-size);
	--bodylineheight: var(--type-body-lh);
	--bodyletterspacing: 0;

	--headingsfontfamily: var(--font-display);

	--h1fontsize: var(--type-h1-size);
	--h1fontweight: var(--fw-regular);
	--h1lineheight: var(--type-h1-lh);
	--h1letterspacing: var(--type-h1-ls);

	--h2fontsize: var(--type-h2-size);
	--h2fontweight: var(--fw-regular);
	--h2lineheight: var(--type-h2-lh);
	--h2letterspacing: var(--type-h2-ls);

	--h3fontsize: var(--type-h3-size);
	--h3fontweight: var(--fw-regular);
	--h3lineheight: var(--type-h3-lh);
	--h3letterspacing: var(--type-h3-ls);

	--h4fontweight: var(--fw-regular);
	--h5fontweight: var(--fw-regular);
	--h6fontweight: var(--fw-regular);
}

@media (max-width: 959px) {
	:root {
		--h1fontsize: 40px;
		--h2fontsize: 32px;
		--h3fontsize: 24px;
	}
}

@media (max-width: 575px) {
	:root {
		--h1fontsize: 32px;
		--h2fontsize: 26px;
		--h3fontsize: 20px;
	}
}

/*
 * h4-h6 in the editor canvas. Neve prints their variables only on the front
 * end (neve-style-inline-css, from the Customizer), so in the canvas its rule
 * h4 { font-size: var(--h4fontsize) } fell back to 16px. The values are
 * Neve's defaults as printed on the page (Customizer untouched), with its
 * breakpoints 576px and 960px; the front end keeps Neve's own (step 12:
 * imported posts are the first content with h4).
 */

:where(.editor-styles-wrapper) {
	--h4fontsize: 20px;
	--h4lineheight: 1.6;
	--h5fontsize: 16px;
	--h5lineheight: 1.6;
	--h6fontsize: 14px;
	--h6lineheight: 1.6;
}

@media (min-width: 576px) {
	:where(.editor-styles-wrapper) {
		--h4fontsize: 22px;
		--h4lineheight: 1.5;
		--h5fontsize: 18px;
	}
}

@media (min-width: 960px) {
	:where(.editor-styles-wrapper) {
		--h4fontsize: 24px;
		--h5fontsize: 20px;
		--h6fontsize: 16px;
	}
}

/*
 * 3. Width and side padding.
 * theme.json sets the root padding to 40px, but it cannot change it per
 * breakpoint (HANDOFF section 2: 40 / 32 / 20 px). WordPress declares the
 * --wp--style--root--padding-* variables on `body` (not on :root), so the
 * override has to target `body` too. In a classic theme WordPress only
 * declares these variables on `body` and never applies them as body padding,
 * so the margin is not doubled.
 */

@media (max-width: 1439px) {
	body {
		--wp--style--root--padding-left: 32px;
		--wp--style--root--padding-right: 32px;
	}
}

@media (max-width: 575px) {
	body {
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}
}

/*
 * Neve's .container has a fixed 15px side padding. With the same padding as
 * the root, a 1440px container leaves 1360px for content, as in the mockup.
 */
.container {
	padding-right: var(--wp--style--root--padding-right);
	padding-left: var(--wp--style--root--padding-left);
}

/*
 * 4. Neve buttons.
 * Neve paints its own buttons (comment form, search, password form, submit
 * inputs, .wp-block-button__link) from the variables below, which it prints in
 * neve-style-inline-css from the Customizer. We set them here instead, as with
 * the typography, so they look like .pw-btn md: primary and secondary.
 * Primary has no border in Neve's rule (border-color is the label color, so a
 * 1px border would be white); the padding grows by 1px instead, which keeps
 * the size of .pw-btn (14px 28px + 1px border).
 * Known gap: on hover Neve gives the secondary button's border the label
 * color, so it turns white on the green fill instead of staying green.
 * Form fields only get the zero radius here; the rest of Neve's field styling
 * is step 10 (WPForms).
 */

:root {
	--btnfs: 13px;
	--btnfontweight: var(--fw-semibold);
	--btnlineheight: 1;
	--btnletterspacing: 0.08em;
	--btntexttransform: uppercase;
	--btnpadding: 15px 29px;

	--primarybtnbg: var(--action-fill-on-light);
	--primarybtncolor: var(--action-fill-text-on-light);
	--primarybtnhoverbg: var(--action-fill-on-light-hover);
	--primarybtnhovercolor: var(--action-fill-text-on-light);
	--primarybtnborderwidth: 0;
	--primarybtnborderradius: 0;
	--primarybtnpadding: 15px 29px;
	--primarybtnshadow: none;
	--primarybtnhovershadow: none;

	--secondarybtnbg: transparent;
	--secondarybtncolor: var(--action-on-light);
	--secondarybtnhoverbg: var(--action-on-light);
	--secondarybtnhovercolor: var(--action-fill-text-on-light);
	--secondarybtnborderwidth: 1px;
	--secondarybtnborderradius: 0;
	--secondarybtnpadding: 14px 28px;
	--secondarybtnshadow: none;
	--secondarybtnhovershadow: none;

	--formfieldborderradius: 0;
}

/*
 * 5. Neve's element styles around .pw-* components.
 * In the mockup the components start from browser defaults. Neve styles some
 * elements with selectors that beat a single class, so here it is switched
 * off for our components only. The fields (.pw-input) handle Neve's form
 * rules themselves, in ds.css.
 */

/*
 * Neve styles every <button> as its primary button: `button { … }` and
 * `button:hover { background; color; border-color }` (0-1-1, more than one
 * class). The values come from the variables in section 4, so on .pw-*
 * buttons the variables are reset to a neutral paint: no background, no
 * border, no padding, normal type. currentColor on hover means "keep the
 * inherited color"; components with their own :hover color still win.
 */
:where(button[class*="pw-"]) {
	--primarybtnbg: transparent;
	--primarybtncolor: currentColor;
	--primarybtnhoverbg: transparent;
	--primarybtnhovercolor: currentColor;
	--primarybtnborderwidth: 0;
	--primarybtnpadding: 0;
	--btnfontweight: var(--fw-regular);
	--btnlineheight: normal;
	--btnletterspacing: normal;
	--btntexttransform: none;
}

/* Two buttons from components.css change only the background on hover, so
   Neve's hover would also recolor their white icon. */
.pw-search__btn:hover,
.pw-quick__toggle:hover {
	color: var(--pw-white);
}

/*
 * No reset for Neve's prose list spacing (`.nv-content-wrap ul, ol` and
 * `li`) any more: since step 9 the pages, entries and posts built from
 * .pw-* sections render outside .nv-content-wrap (inc/templates.php and
 * the theme's templates), so .pw-* lists keep their own margins
 * (.pw-hero__facts, .pw-toc__list, .pw-gallery--after-lead).
 */

/* Neve fades every caption: `figcaption { opacity: .75 }`. On the muted
   caption color of the mockup that drops the contrast to about 3.6:1
   (WCAG 1.4.3 needs 4.5:1); the mockup's captions are fully opaque. The
   size comes from the components (.pw-figure, .pw-prose). */
figcaption {
	opacity: 1;
}

/* Neve indents every definition: `dl dd { padding-left: 30px }`. The .pw-*
   lists (.pw-spec, .pw-cost, .pw-season__dl) set their own layout. */
dl[class*="pw-"] dd {
	padding-left: 0;
}

/* A term or a description built from blocks (stage B) holds its text in a
   paragraph: no paragraph margin, so it looks as the text written straight
   into <dt> and <dd> did. */
:is(dt, dd) > p:only-child {
	margin: 0;
}

/*
 * Neve colors a focused link with its secondary accent
 * (`a:where(:not([class*=button])):focus`, 0-1-1): dark green, nearly
 * invisible on ink and off-palette on paper. These rules keep each link's
 * own color while it has focus; the focus ring shows the focus.
 * `a.class:where(:focus)` is 0-1-1 too: it beats Neve by order (this file
 * loads after Neve) and beats the components' own single-class color, but
 * stays below :hover and [aria-current] (0-2-0), so those still recolor the
 * link. Design system components (.pw-btn, .pw-textlink …) handle it in
 * ds.css. Within this block, later rules win for links with two classes
 * (.pw-link.pw-link--on-dark), so the generic one comes first.
 */
a.pw-link:where(:focus) {
	color: var(--action-on-light);
}

a.pw-link--on-dark:where(:focus),
a.pw-megamenu__all:where(:focus) {
	color: var(--action-on-dark);
}

a.pw-link--plain:where(:focus),
a.pw-skip:where(:focus),
a.pw-topbar__item:where(:focus),
a.pw-social:where(:focus),
a.pw-lang__link:where(:focus),
a.pw-megamenu__head:where(:focus),
a.pw-drawer__link:where(:focus),
a.pw-drawer__group-head:where(:focus),
a.pw-quick__item:where(:focus) {
	color: var(--text-on-dark);
}

a.pw-nav__link:where(:focus) {
	color: var(--pw-text);
}

a.pw-megamenu__item:where(:focus),
a.pw-drawer__sub-link:where(:focus) {
	color: var(--text-on-dark-muted);
}

/*
 * Stage G [106]: Neve's body>.wrapper:not(…) { overflow: hidden } makes the
 * wrapper a scroll container, so nothing inside can be sticky (the table of
 * contents of the privacy policy scrolled away). clip cuts the same
 * overflow without being a scroll container. :root gives the selector
 * Neve's specificity (0,2,1); this file loads after Neve's, so it wins.
 */
:root body > .wrapper {
	overflow: clip;
}