/*
 * Site chrome: fallback header (when the navbar plugin is off), page heading,
 * post cards. The footer is in footer.css. Components of the shop come from profigarden-site.
 */

/* ---------- Fallback header ---------- */

.pg-header {
	position: sticky;
	top: 0;
	z-index: var(--pg-z-header);
	min-height: var(--pg-header-h);
	background: var(--pg-white);
	border-bottom: 1px solid var(--pg-border);
}

.pg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pg-gap-block);
	min-height: var(--pg-header-h);
}

.pg-header__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pg-space-24);
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: var(--pg-fw-bold);
}

.pg-header__nav a { text-decoration: none; }

.pg-logo { display: inline-flex; text-decoration: none; }
.pg-logo img { width: auto; max-height: calc(var(--pg-header-h) - 2 * var(--pg-space-20)); }
.pg-logo__text { font-family: var(--pg-font-display); font-weight: var(--pg-fw-display); font-size: var(--pg-h4); }

/* ---------- Navbar of profigarden-navbar on the page grid ----------
 * The plugin keeps the frame of the live site (1440 px wide, 100 px sides, 20 px up to 1024 px, 16 px on
 * phones). On this theme the header and its search bar take the frame of the page (the mega menu already
 * reads these tokens), so the logo starts where the content starts at every width. Only this theme loads
 * site.css: the live site keeps the plugin's frame.
 */
.pgn-navbar__inner,
.pgn-search-overlay__inner {
	max-width: var(--pg-container);
	padding-inline: var(--pg-gutter);
}

@media (max-width: 768px) {
	/* navbar.css pins the phone padding with !important (against other themes' CSS): only the same weight
	   with a more specific selector keeps the theme's gutter there. */
	.pgn-navbar .pgn-navbar__inner { padding-inline: var(--pg-gutter) !important; }
}

/* The logo of the navbar is a square file (1011 x 1011) and its markup says 160 x 48: until the file loads the box was
   three times as wide as the logo (320 px at 96 px high) and the menu jumped left by 224 px when it came, a layout shift
   on a slow phone (test-pravne.mjs, CLS 0.0088 at 1024). The box has the shape of the file from the start. Only this
   theme: the live site keeps the navbar as it is. */
.pg-theme .pgn-logo__img { aspect-ratio: 1; }

/* Hovers of the header and the mega menu: the duration and curve of every hover of the site (base.css links,
   0 with reduced motion) instead of the navbar's own .25s ease (its --pgn-transition) and .15s of the links of
   the phone menu. Only this theme: the live site keeps the navbar as it is. */
.pgn-navbar { --pgn-transition: var(--pg-dur-fast) var(--pg-ease); }

.pgn-mobile-item__sub-link,
.pgn-mobile-extra__link { transition: color var(--pg-dur-fast) var(--pg-ease), background-color var(--pg-dur-fast) var(--pg-ease); }

/* ---------- Page heading ---------- */

.pg-page-head > .pg-lead { max-width: var(--pg-measure); }

/* ---------- Post card ---------- */

.pg-post-card__media { display: block; overflow: hidden; background: var(--pg-surface-card); aspect-ratio: 3 / 2; }
.pg-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--pg-dur-slow) var(--pg-ease); }
.pg-post-card:hover .pg-post-card__media img { transform: scale(1.03); }
.pg-post-card h2 a { text-decoration: none; }

.pg-single__media img { width: 100%; }

/* ---------- Band "Za rok sme nasadili" (Template::planted(), parts/planted.php) ----------
 * Counters in equal columns with a line between them, under each other on phones (live layout).
 */
.pg-planted__list {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-planted__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pg-gap-el);
	padding: var(--pg-gap-head) var(--pg-gap-block);
	text-align: center;
}

.pg-planted__item + .pg-planted__item { border-inline-start: 1px solid currentColor; }

.pg-planted__value {
	font-family: var(--pg-font-display);
	font-size: var(--pg-h1);
	font-weight: var(--pg-fw-display);
	font-variant-numeric: tabular-nums;
	line-height: var(--pg-lh-tight);
}

/* Counting up (planted.js): the final number keeps its place in a transparent colour (read by screen readers, its width
   holds), the counting one lies over it, centred, never wrapped. */
.pg-planted__value { position: relative; white-space: nowrap; }
.pg-planted__value.is-counting > .pg-planted__final { color: transparent; }
.pg-planted__count {
	position: absolute;
	inset: 0;
	text-align: center;
}
.pg-planted__count::before { content: attr(data-pg-shown); }

.pg-planted__label { font-size: var(--pg-lead); line-height: var(--pg-lh-snug); }

@media (max-width: 767px) {
	.pg-planted__list { grid-auto-flow: row; }
	.pg-planted__item + .pg-planted__item { border-inline-start: 0; border-block-start: 1px solid currentColor; }
}

/* ---------- E-Shop of the navbar (profigarden-navbar) on the theme ----------
 * The primary button of the site (Jaroslav 10. 11.; zadanie 11): --pg-primary (#659901) with the white label of
 * --pg-on-primary (3.44:1, the exception of tokens.css; 4.51:1 on the hover fill), darker on hover and while the menu is open, its
 * font as the buttons. Only on the theme (.pg-theme): the live site keeps the navbar as it is. */
.pg-theme .pgn-mega-trigger {
	background: var(--pg-primary);
	color: var(--pg-on-primary);
	font-family: var(--pg-font-body);
}

.pg-theme .pgn-mega-trigger:hover,
.pg-theme .pgn-mega-trigger[aria-expanded="true"],
.pg-theme .pgn-mega-trigger:focus { background: var(--pg-primary-hover) !important; } /* the navbar's own :focus has !important */

/* E-Shop of the menu on a phone: the same button. */
.pg-theme .pgn-mobile-cats-toggle {
	border-bottom-color: var(--pg-primary-hover);
	background: var(--pg-primary);
	color: var(--pg-on-primary);
}

.pg-theme .pgn-mobile-cats-toggle:hover { background: var(--pg-primary-hover); }

/* ---------- The announcement bar above the dimmed page (zadanie 10, bod 1) ----------
 * With the mega menu or the search open the navbar dims the page (.pgn-backdrop, z-index 999, appended to body); the bar
 * (profigarden-site, announcement.css) stands above it, not dimmed, its link usable (.pg-theme only, announcement.css).
 * On a phone the search covers the window: it starts under the part of the bar in view (--pg-ann-shown, site.js). */
@media (max-width: 768px) {
	.pg-theme .pgn-search-overlay {
		top: var(--pg-ann-shown, 0px);
		height: auto;
	}
}

/* ---------- Layers of the header against the locked page (zadanie 11, pripomienky 3, 7, 12; site.js, pgLock) ----------
 * The phone menu starts where the header ends, wherever the header is (the navbar puts it 64 px under the top of the
 * window: with the announcement bar or the admin bar above the header its first rows were behind the header), and stands
 * above the header in its stacking order.
 * The scrollbar that goes with the lock: the body is padded by its width (base.css). The navbar pads the body and itself
 * once more for the side cart (the width measured when the page loaded): on this theme the header is inside the body, so
 * its actions moved by the width of the scrollbar. Here the body alone is padded, by the width measured when the cart
 * opens. */
.pg-theme .pgn-mobile-menu {
	top: var(--pg-lock-header);
	z-index: var(--pg-z-header-layer);
}

body.pg-theme.pg-locked.wqe-sc-lock { padding-right: var(--pg-lock-sb) !important; } /* the navbar's own has !important */
body.pg-theme.pg-locked.wqe-sc-lock #pgn-navbar { padding-right: 0 !important; }

/* ---------- Výhody (USP, profigarden-site modules/usp) on a phone (zadanie 11, pripomienky 2 a 13) ----------
 * One list everywhere on a phone: the home page, O nás, the product page, Odporúčaný produkt and the cart. The items one
 * under another at the size of the product page (the icon 24 px, the title 14 px, the text 12 px), divided by the 1 px
 * line of the component, no gaps between them: the look the cart had, without its gaps. The larger row of the home page
 * and of O nás starts at 768 px (content.css). Only on the theme (.pg-theme): the live site keeps its two columns. */
@media (max-width: 767px) {
	.pg-theme .pg-usp { grid-template-columns: minmax(0, 1fr); }
	.pg-theme .pg-usp__item:last-child:nth-child(odd) { grid-column: auto; }

	.pg-theme .pg-cart-summary .pg-usp {
		gap: 1px;
		border: 1px solid var(--pg-border);
		background: var(--pg-border);
	}
}