/*
 * Base: reset, typography, links, buttons, form controls, tags, rich text.
 * Everything reads tokens.css; no colour or size is typed here twice.
 */

/* ---------- Reset ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: var(--pg-sticky-top);
	/* The page pulled past its edges (the rubber band of Safari and Chrome on a Mac and of an iPhone; Jaroslav 10. 11.):
	   the colour of the bar above, of the footer below, never white. Two halves of the window fixed to it, behind the
	   white body, so only the band past an edge shows them; the colour alone where a browser does not fix it (iOS). */
	background: var(--pg-overscroll-top) linear-gradient(var(--pg-overscroll-top) 50%, var(--pg-overscroll-bottom) 50%) no-repeat fixed;
}

/* Safari and Chrome fill the band past an edge with the background colour alone, not the fixed gradient (zadanie 10, bod 2):
   while the footer is in view and the top of the page is not (site.js), the colour is the one of the bottom. One repaint
   when the footer comes into view, none while scrolling. */
html.pg-at-bottom { background-color: var(--pg-overscroll-bottom); }

.pg-edge-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--pg-white);
	color: var(--pg-text);
	font-family: var(--pg-font-body);
	font-size: var(--pg-text-m);
	line-height: var(--pg-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

body > .pg-main { flex: 1 0 auto; }

/* The page under an open layer (side cart, phone menu, mega menu, search, filter panel; site.js, pgLock): it does not
   scroll. Only the body is locked: its overflow goes to the window, which stays the scroller, so the sticky header stays
   in place and the page keeps its position (with html locked as well the body became the scroller and the header left
   with the page). The body is padded by the width of the scrollbar that went, so nothing moves sideways. */
body.pg-locked {
	overflow: hidden;
	padding-right: var(--pg-lock-sb);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

img, picture, svg, video, canvas { display: block; max-width: 100%; }

/* Icons of the site (Icons::svg()): one line width for all of them. */
.pg-svg { stroke-width: var(--pg-icon-stroke); }
img, video { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
	html:focus-within { scroll-behavior: smooth; }
}

/* ---------- Typography ---------- */

h1, h2, h3, h4,
.pg-h1, .pg-h2, .pg-h3, .pg-h4 {
	font-family: var(--pg-font-display);
	font-weight: var(--pg-fw-display);
	line-height: var(--pg-lh-tight);
	letter-spacing: var(--pg-tracking-display);
	text-wrap: balance;
	overflow-wrap: break-word;
}

h1, .pg-h1 { font-size: var(--pg-h1); }
h2, .pg-h2 { font-size: var(--pg-h2); }
h3, .pg-h3 { font-size: var(--pg-h3); }
h4, .pg-h4 { font-size: var(--pg-h4); line-height: var(--pg-lh-snug); }

h5, h6, .pg-h5, .pg-h6 {
	font-family: var(--pg-font-body);
	font-weight: var(--pg-fw-bold);
	line-height: var(--pg-lh-snug);
}

h5, .pg-h5 { font-size: var(--pg-text-m); }
h6, .pg-h6 { font-size: var(--pg-text-s); }

/* Small line above a heading ("Novinky", "Z blogu"). */
.pg-eyebrow {
	font-family: var(--pg-font-body);
	font-size: var(--pg-text-s);
	font-weight: var(--pg-fw-bold);
	line-height: var(--pg-lh-snug);
	letter-spacing: var(--pg-tracking-caps);
	text-transform: uppercase;
	color: var(--pg-accent-text);
}

.pg-lead { font-size: var(--pg-lead); line-height: var(--pg-lh-lead); color: var(--pg-text-2); }
.pg-small { font-size: var(--pg-text-s); }
.pg-xsmall { font-size: var(--pg-text-xs); }
.pg-muted { color: var(--pg-muted); }

p { text-wrap: pretty; }

/* ---------- Links ----------
 * Every hover of a link is smooth: its colour and its underline change with the duration and curve tokens of the
 * hovers of the site (--pg-dur-fast, --pg-ease; 0 with reduced motion). A link without an underline at rest keeps
 * the line in a transparent colour and shows it on hover (text-decoration-line itself cannot fade).
 */
a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	transition: color var(--pg-dur-fast) var(--pg-ease), text-decoration-color var(--pg-dur-fast) var(--pg-ease);
}

a:hover { color: var(--pg-accent-text-hover); }

.pg-link {
	color: var(--pg-accent-text);
	font-weight: var(--pg-fw-bold);
	text-decoration: underline;
	text-decoration-color: transparent;
}

.pg-link:hover { color: var(--pg-accent-text-hover); text-decoration-color: currentColor; }

:focus-visible {
	outline: 2px solid var(--pg-focus-color);
	outline-offset: 2px;
}

/* Target of the skip link: focus moves there, no frame around the whole page. */
.pg-main:focus { outline: none; }

/* ---------- Buttons ----------
 * One component for every button on the site (live site had 6 variants with
 * heights 44 to 52 and radius 0 to 3). Two types on a white or grey surface (decided 6. 11.):
 *   .pg-btn--primary   green, main action (Do košíka, K pokladni); --pg-primary (#659901, zadanie 11) with the
 *                      --pg-on-primary label (white, 3.44:1: the accepted exception of tokens.css), --pg-primary-hover on hover
 *   .pg-btn--secondary every other action: white with the --pg-ink line, filled with --pg-ink on hover.
 *                      It is the look of .pg-btn itself, the modifier names it in the markup.
 * In a dark section the same secondary button is its inverse (transparent, white line, white on hover):
 * colours come from the colour roles (tokens.css), the section switches them all at once.
 * Sizes and shapes, for either type:
 *   .pg-btn--s         small (40px)
 *   .pg-btn--block     full width
 *   .pg-btn--icon      square icon button
 *   .pg-btn--ghost     only with --icon: a quiet icon control without a line (close, zoom, remove), never a text button
 * WooCommerce's own buttons (.button in a notice such as "Zobraziť košík", the account and order pages) are
 * this component too, .alt is the primary type: one more selector on each rule, one class heavier than
 * woocommerce.css so its grey and purple never show. The checkout form of profigarden-site (.pg-co) styles
 * its own. So is the button block of the editor in the text of a page or an article (.pg-prose): filled is the
 * primary type, the style Obrys the secondary one, instead of the grey pill of WordPress (T19).
 */
.pg-btn,
.woocommerce :is(a, button, input).button:not(.pg-co *),
.pg-prose .wp-block-button__link {
	--pg-btn-bg: var(--pg-ink-paper);
	--pg-btn-fg: var(--pg-ink);
	--pg-btn-line: var(--pg-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pg-space-8);
	min-height: var(--pg-control-h);
	padding: 0 var(--pg-control-px);
	border: 1px solid var(--pg-btn-line);
	border-radius: var(--pg-radius);
	background: var(--pg-btn-bg);
	color: var(--pg-btn-fg);
	font-family: var(--pg-font-body);
	font-size: var(--pg-text-m);
	font-weight: var(--pg-fw-bold);
	line-height: var(--pg-lh-control);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	/* The fill and the line fade (linear: half way is half the colour), the label switches in one step half
	   way. Fading the label too would cross the fill: black on white turning white on black is mid grey on
	   mid grey half way, and the label blinked out when the pointer left the button. */
	transition: background-color var(--pg-dur-fast) linear, border-color var(--pg-dur-fast) linear, color 0s linear calc(var(--pg-dur-fast) / 2), transform var(--pg-dur-fast) var(--pg-ease);
}

.pg-btn:hover,
.woocommerce :is(a, button, input).button:not(.pg-co *):hover,
.pg-prose .wp-block-button__link:hover { --pg-btn-bg: var(--pg-ink); --pg-btn-fg: var(--pg-ink-inverse); color: var(--pg-btn-fg); }
.pg-btn:active,
.pg-prose .wp-block-button__link:active { transform: scale(.98); }
.pg-btn:focus-visible,
.pg-prose .wp-block-button__link:focus-visible { outline: 2px solid var(--pg-focus-color); outline-offset: 2px; }

.pg-btn--primary,
.woocommerce :is(a, button, input).button:not(.pg-co *).alt,
.pg-prose .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	--pg-btn-bg: var(--pg-primary);
	--pg-btn-fg: var(--pg-on-primary);
	--pg-btn-line: var(--pg-primary);
}

.pg-btn--primary:hover,
.woocommerce :is(a, button, input).button:not(.pg-co *).alt:hover,
.pg-prose .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	--pg-btn-bg: var(--pg-primary-hover);
	--pg-btn-fg: var(--pg-on-primary);
	--pg-btn-line: var(--pg-primary-hover);
}

.pg-btn--ghost.pg-btn--icon { --pg-btn-bg: transparent; --pg-btn-line: transparent; }
.pg-btn--ghost.pg-btn--icon:hover { --pg-btn-bg: var(--pg-ghost-hover-bg); --pg-btn-fg: var(--pg-ghost-hover-fg); }

.pg-btn--s,
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button:not(.pg-co *) { min-height: var(--pg-control-h-s); padding-inline: var(--pg-space-16); font-size: var(--pg-text-s); }
.pg-btn--block { display: flex; width: 100%; }
.pg-btn--icon { width: var(--pg-control-h); padding: 0; }
.pg-btn--icon.pg-btn--s { width: var(--pg-control-h-s); }

.pg-btn[disabled],
.pg-btn[aria-disabled="true"],
.woocommerce :is(a, button, input).button:not(.pg-co *):is(:disabled, .disabled) {
	opacity: var(--pg-opacity-off);
	pointer-events: none;
}

.pg-btn svg { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Form controls ---------- */

.pg-input,
.pg-select,
.pg-textarea {
	width: 100%;
	min-height: var(--pg-control-h);
	padding: 0 var(--pg-space-16);
	border: 1px solid var(--pg-line-control); /* the edge of a control: 3:1 (WCAG 1.4.11) */
	border-radius: var(--pg-radius);
	background: var(--pg-white);
	color: var(--pg-text); /* own colour, the inherited white of a dark section would vanish on the white field */
	font-size: var(--pg-text-m);
	transition: border-color var(--pg-dur-fast) var(--pg-ease), box-shadow var(--pg-dur-fast) var(--pg-ease);
}

.pg-textarea { padding-block: var(--pg-textarea-pad-y); min-height: var(--pg-textarea-min-h); line-height: var(--pg-lh-snug); resize: vertical; }

/* Select (.pg-select): the native control, so the list stays the browser's (screen readers, the picker of a
   phone), with the arrow of the site instead of the system one: the chevron of Icons::svg() in the text colour
   (--pg-select-arrow, tokens.css). Height, edge, padding and focus of the fields above; the edge darkens on
   hover, a disabled one fades. --s: the small height of the toolbar (sort). A rule of WooCommerce that draws its
   own arrow takes --pg-select-bg and --pg-select-pad (product.css, variants). */
.pg-select {
	--pg-select-pad: calc(var(--pg-space-16) + var(--pg-space-20) + var(--pg-space-8));
	--pg-select-bg: var(--pg-white) var(--pg-select-arrow) no-repeat right var(--pg-space-16) center / var(--pg-space-20) var(--pg-space-20);
	padding-inline-end: var(--pg-select-pad);
	background: var(--pg-select-bg);
	text-overflow: ellipsis;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.pg-select:hover:not(:disabled, :focus) { border-color: var(--pg-text-2); }
.pg-select:disabled { opacity: var(--pg-opacity-off); cursor: not-allowed; }

.pg-select--s {
	--pg-select-pad: calc(var(--pg-space-12) + var(--pg-space-16) + var(--pg-space-8));
	--pg-select-bg: var(--pg-white) var(--pg-select-arrow) no-repeat right var(--pg-space-12) center / var(--pg-space-16) var(--pg-space-16);
	min-height: var(--pg-control-h-s);
	padding-inline-start: var(--pg-space-12);
}

.pg-input:focus,
.pg-select:focus,
.pg-textarea:focus {
	outline: none;
	border-color: var(--pg-accent-text);
	box-shadow: var(--pg-focus);
	outline: 2px solid transparent; /* box-shadow disappears in forced colors (Windows contrast mode), the outline does not */
	outline-offset: 2px;
}

.pg-label {
	display: block;
	margin-block-end: var(--pg-space-4);
	font-size: var(--pg-text-s);
	font-weight: var(--pg-fw-bold);
}

/* Quantity (.pg-qty): our minus and plus around WooCommerce's field (its min, max and step stay), one
   control for the product page (product.js, data-pg-qty) and the cart (.pg-qty--s, cart-page.js,
   data-pg-cart-step). The frame and the lines around the field are the edge of a control (3:1). A white
   surface: the product page adds .pg-on-light, so it keeps its light colour roles inside a dark section. */
.pg-qty {
	display: inline-flex;
	flex: none;
	align-self: flex-start;
	align-items: stretch;
	height: var(--pg-control-h);
	border: 1px solid var(--pg-line-control);
	background: var(--pg-white);
	color: var(--pg-text);
}

.pg-qty .quantity { display: contents; } /* WooCommerce's wrapper of the field; its float and margin do not apply */

.pg-qty__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pg-control-h-s);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--pg-text-2);
	cursor: pointer;
	transition: background-color var(--pg-dur-fast) var(--pg-ease);
}

.pg-qty__btn svg { width: var(--pg-space-20); height: var(--pg-space-20); }
.pg-qty__btn:hover:not(:disabled) { background: var(--pg-surface-hover); }
.pg-qty__btn:disabled { opacity: var(--pg-opacity-off); cursor: not-allowed; }

.pg-qty__btn:focus-visible,
.pg-qty .quantity .qty:focus-visible {
	outline: 2px solid var(--pg-focus-color);
	outline-offset: -2px;
}

/* Same selector weight as WooCommerce's ".woocommerce .quantity .qty", this file comes later. */
.pg-qty .quantity .qty {
	width: calc(var(--pg-control-h-s) + var(--pg-space-8));
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-inline: 1px solid var(--pg-line-control);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: var(--pg-text-m);
	font-weight: var(--pg-fw-bold);
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.pg-qty .quantity .qty::-webkit-inner-spin-button,
.pg-qty .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Small (cart rows): the height of the small controls. */
.pg-qty--s { height: var(--pg-control-h-s); }
.pg-qty--s .pg-qty__btn svg { width: var(--pg-space-16); height: var(--pg-space-16); }
.pg-qty--s .quantity .qty { width: var(--pg-space-48); }

/* No buttons (the quantity cannot change): the field alone, or "1 ks" (.pg-qty__value) of a product sold
   one at a time, whose field WooCommerce hides. */
.pg-qty--fixed { align-items: center; }
.pg-qty--fixed .quantity .qty { border-inline: 0; }
.pg-qty__value { padding-inline: var(--pg-space-12); font-weight: var(--pg-fw-bold); }

/* ---------- Tags ----------
 * One chip for every tag of the site (Tag::html() of profigarden-site): product card and product page,
 * article topics and project types, the filter of the catalogue. A pill without an edge (Jaroslav 6. 11.):
 * the line keeps the colour of the chip, so it shows only in forced colours.
 *   .pg-tag--{sale,new,bestseller,out,backorder,low}  system tags, colours from the tokens by key
 *   style="--pg-tag-bg; --pg-tag-fg"                  own colours: a tag's, or a system tag's set in
 *                                                     Profigarden, Katalóg a štítky (text by WCAG contrast, Data)
 *   .pg-tag--plain     a tag without a colour: a soft solid chip (--pg-surface-tag)
 *   .pg-tag--l         a filter link (32 px target)
 *   .pg-tag--link      a link to the tag's page; aria-current="page" marks the chosen filter
 *   .pg-tag--control   a chip that is a form control (filter options, active filters): the one with an edge, 3:1
 *   .pg-tag--split     a sale tag with the shop's text (up to 24 characters): on a narrow card only the text
 *                      (.pg-tag__text) is cut, the number (.pg-tag__num, "až -24 %") always shows whole
 * Every pair of text and background has at least 4.5:1.
 */
.pg-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pg-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Flex, so an item is as tall as its chip: as a block it would hold a line of body text and the
   inline-block chip would sit on it. */
.pg-tags > li {
	display: flex;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.pg-tag {
	--pg-tag-bg: var(--pg-white);
	--pg-tag-fg: var(--pg-text);
	--pg-tag-line: var(--pg-tag-bg);
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	padding: var(--pg-space-4) var(--pg-space-8);
	border: 1px solid var(--pg-tag-line);
	border-radius: var(--pg-radius-pill);
	background: var(--pg-tag-bg);
	color: var(--pg-tag-fg);
	font-family: var(--pg-font-display);
	font-size: var(--pg-text-xs);
	font-weight: var(--pg-fw-medium);
	line-height: var(--pg-lh-snug);
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Only the text shrinks: a flex item with hidden overflow may get narrower than its text, the number keeps
   the width of its text (a flex item never gets narrower than that, min-width auto). */
.pg-tag--split {
	display: inline-flex;
	gap: var(--pg-space-4);
}

.pg-tag__text {
	overflow: hidden;
	text-overflow: ellipsis;
}

.pg-tag--plain      { --pg-tag-bg: var(--pg-surface-tag); }
.pg-tag--sale       { --pg-tag-bg: var(--pg-sale); --pg-tag-fg: var(--pg-white); }
.pg-tag--new        { --pg-tag-bg: var(--pg-accent-hover); --pg-tag-fg: var(--pg-white); }
.pg-tag--bestseller { --pg-tag-bg: var(--pg-green-dark); --pg-tag-fg: var(--pg-beige); }
.pg-tag--low        { --pg-tag-bg: var(--pg-warning-text); --pg-tag-fg: var(--pg-white); }
.pg-tag--backorder  { --pg-tag-bg: var(--pg-beige); --pg-tag-fg: var(--pg-green-dark); --pg-tag-line: var(--pg-badge-border); } /* light: a thin line on white and on a photo */
.pg-tag--out        { --pg-tag-bg: var(--pg-muted-light); --pg-tag-fg: var(--pg-white); }
.pg-tag--wait       { --pg-tag-bg: var(--pg-warning-bg); --pg-tag-fg: var(--pg-warning-text); } /* an order waiting for the customer (Môj účet), not a tag of a product */

.pg-tag--l {
	padding: var(--pg-space-4) var(--pg-space-16);
	font-size: var(--pg-text-s);
}

/* Keeps the tag's text colour (links turn green on hover), the underline shows the hover. */
.pg-tag--link { text-decoration: underline; text-decoration-color: transparent; }
.pg-tag--link:hover { color: var(--pg-tag-fg); text-decoration-color: currentColor; }
.pg-tag--link[aria-current="page"] { box-shadow: 0 0 0 var(--pg-space-2) var(--pg-white), 0 0 0 var(--pg-space-4) var(--pg-ink); }

.pg-tag--control {
	--pg-tag-line: var(--pg-line-control);
	display: inline-flex;
	align-items: center;
	gap: var(--pg-space-8);
	min-height: var(--pg-icon-btn);
	padding: 0 var(--pg-space-12);
	font-family: var(--pg-font-body);
	font-size: var(--pg-text-s);
	font-weight: var(--pg-fw-regular);
	line-height: var(--pg-lh-control);
	white-space: normal; /* a long option wraps inside the filter panel */
}

/* ---------- Rich text (blog, legal pages, product description) ----------
 * Flow spacing: every child gets the same top margin, headings get more.
 */
.pg-prose { max-width: var(--pg-measure); }
.pg-prose > * + * { margin-block-start: 1em; }
.pg-prose > :is(h2, h3, h4) { margin-block-start: 1.6em; }
.pg-prose > :is(h2, h3, h4) + * { margin-block-start: .6em; }
.pg-prose h2 { font-size: var(--pg-h3); }
.pg-prose h3 { font-size: var(--pg-h4); }
.pg-prose ul, .pg-prose ol { padding-inline-start: 1.25em; }
.pg-prose li + li { margin-block-start: .35em; }
.pg-prose a { color: var(--pg-accent-text); font-weight: var(--pg-fw-display); }
.pg-prose img, .pg-prose figure { margin-block: 1.6em; }
.pg-prose blockquote { padding-inline-start: var(--pg-space-20); border-inline-start: 3px solid var(--pg-accent); font-size: var(--pg-lead); }
.pg-prose table { width: 100%; border-collapse: collapse; font-size: var(--pg-text-s); }
.pg-prose th, .pg-prose td { padding: var(--pg-space-8) var(--pg-space-12); border-bottom: 1px solid var(--pg-line); text-align: left; }

/* ---------- Utilities ---------- */

.pg-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pg-skip {
	position: absolute;
	top: var(--pg-space-8);
	left: var(--pg-space-8);
	z-index: var(--pg-z-dialog);
	padding: var(--pg-space-12) var(--pg-space-16);
	background: var(--pg-text);
	color: var(--pg-white);
	transform: translateY(-200%);
}

.pg-skip:focus { transform: none; color: var(--pg-white); }