/**
 * Site chrome: top bar, header, mega menus, mobile drawer, footer.
 *
 * Moved from the mockup's components.css (design-261005-final). Selectors and
 * values are unchanged; every deviation is listed in docs/komponenty.md.
 * Loads on every page.
 *
 * @package plantworld
 */

/* ── Chrome: top bar ── */
.pw-topbar {
	background: var(--pw-ink);
	min-height: 36px;
	display: flex;
	align-items: center;
}

.pw-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.pw-topbar__group {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-on-dark);
}

.pw-topbar__item {
	border-bottom: 0;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	color: var(--text-on-dark);
	text-decoration: none;
	transition: var(--transition-color);
}

.pw-topbar__item:hover {
	color: var(--action-on-dark);
}

/*
 * Right cluster of the top bar and the drawer footer: [FB | IG | YT] ‖ [PL | EN | UA].
 * Inside a group a 1×12px separator, between groups .pw-topbar__divider 1×16px. The last item has no padding.
 */
.pw-social-lang {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pw-topbar__divider {
	width: 1px;
	height: 16px;
	background: var(--hairline-on-dark);
}

.pw-sep-list {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pw-sep-list > li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pw-sep-list > li + li::before {
	content: "";
	width: 1px;
	height: 12px;
	background: var(--hairline-on-dark);
}

.pw-lang__link {
	border-bottom: 0;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	color: var(--text-on-dark);
	text-decoration: none;
	transition: var(--transition-color);
}

.pw-lang__link:hover {
	color: var(--action-on-dark);
}

/* Touch target at least 24×24px (WCAG 2.5.8): padding plus a negative margin of the same size, so the layout does not move. */
.pw-lang__link {
	display: inline-flex;
	padding: 6px;
	margin: -6px;
}

.pw-social {
	border-bottom: 0;
	display: inline-flex;
	color: var(--text-on-dark);
	text-decoration: none;
	transition: var(--transition-color);
}

.pw-social:hover {
	color: var(--action-on-dark);
}

.pw-social {
	padding: 4px;
	margin: -4px;
}

/* ── Chrome: header + nav ── */
.pw-header {
	background: var(--pw-paper);
	border-bottom: 1px solid var(--hairline);
	min-height: 96px;
	display: flex;
	align-items: center;
}

.pw-header--sticky {
	min-height: 64px;
}

.pw-header__inner {
	display: flex;
	gap: 32px;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.pw-header__logo {
	height: 48px;
	width: auto;
	display: block;
}

.pw-header--sticky .pw-header__logo {
	height: 36px;
}

.pw-header__burger {
	display: none;
	background: none;
	border: 0;
	padding: 8px;
	color: var(--pw-text);
	cursor: pointer;
	transition: var(--transition-color);
}

.pw-header__burger:hover {
	color: var(--action-on-light);
}

.pw-nav {
	display: flex;
	gap: 28px;
	align-items: center;
}

/* Navigation: no underlines. Current and open states are shown by color. */
.pw-nav__link {
	border: 0;
	background: none;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pw-text);
	text-decoration: none;
	padding: 8px 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	transition: var(--transition-color);
}

.pw-nav__link:hover,
.pw-nav__link[aria-current="page"],
.pw-nav__link[aria-expanded="true"] {
	color: var(--action-on-light);
}

.pw-nav__chevron {
	display: inline-flex;
	transition: transform var(--dur) var(--ease);
}

.pw-nav__link[aria-expanded="true"] .pw-nav__chevron {
	transform: rotate(180deg);
}

/* ── Chrome: mega menus ── */
/* Panels float over the content, so the header keeps its height while a menu is open. */
.pw-headerwrap {
	position: relative;
	z-index: 60;
}

.pw-megamenu {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 60;
	padding: 56px 0;
}

.pw-megamenu--dark {
	background: var(--pw-ink);
}

.pw-megamenu--light {
	background: var(--pw-paper-alt);
	border-top: 1px solid var(--hairline);
}

.pw-megamenu__grid {
	display: flex;
	align-items: stretch;
}

.pw-megamenu__col {
	flex: 1 1 0;
	min-width: 0;
	padding: 0 40px;
	border-left: 1px solid var(--hairline-on-dark);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pw-megamenu__col--wide {
	flex: 1.4 1 0;
}

.pw-megamenu__col:first-child {
	padding-left: 0;
	border-left: 0;
}

.pw-megamenu__col:last-child {
	padding-right: 0;
}

.pw-megamenu--light .pw-megamenu__col {
	border-left-color: var(--hairline);
}

.pw-megamenu__head {
	border-bottom: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-on-dark);
	text-decoration: none;
	padding-bottom: 16px;
	transition: var(--transition-color);
}

.pw-megamenu__head:hover {
	color: var(--action-on-dark);
}

.pw-megamenu--light .pw-megamenu__head {
	color: var(--pw-ink);
	border-bottom-color: var(--hairline);
}

.pw-megamenu--light .pw-megamenu__head:hover {
	color: var(--action-on-light);
}

.pw-megamenu__list {
	display: grid;
	gap: 16px;
	align-content: start;
	justify-items: start;
}

.pw-megamenu__list--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
}

/* List item: no bullets, no icons. Hover moves it 4px and grows a rule from the center. */
.pw-megamenu__item {
	position: relative;
	border-bottom: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-on-dark-muted);
	text-decoration: none;
	transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.pw-megamenu__item::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: -3px;
	height: 1px;
	background: var(--action-on-dark);
	transition: left var(--dur) var(--ease), right var(--dur) var(--ease);
}

.pw-megamenu__item:hover {
	color: var(--action-on-dark);
	transform: translateX(4px);
}

.pw-megamenu__item:hover::after {
	left: 0;
	right: 0;
}

.pw-megamenu--light .pw-megamenu__item {
	color: var(--pw-text);
}

.pw-megamenu--light .pw-megamenu__item:hover {
	color: var(--action-on-light);
}

.pw-megamenu__quote {
	border-bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-decoration: none;
}

.pw-megamenu__quote-title {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--action-on-dark);
}

.pw-megamenu__arrow {
	display: inline-flex;
	color: var(--action-on-dark);
	transition: transform var(--dur) var(--ease);
}

.pw-megamenu__quote:hover .pw-megamenu__arrow {
	transform: translateX(8px);
}

.pw-megamenu__desc {
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-on-dark-muted);
	margin: 0;
}

.pw-megamenu__all {
	margin-top: auto;
	padding-top: 8px;
}

.pw-megamenu__thumb {
	aspect-ratio: 16 / 9;
	width: 100%;
	background: none;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0;
	overflow: hidden;
}

.pw-megamenu__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Chrome: mobile drawer ── */
.pw-drawer-shell {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	justify-content: flex-end;
	background: rgba(28, 26, 22, 0.72);
}

.pw-drawer-shell > .pw-drawer {
	height: 100%;
	min-height: 0;
	overflow-y: auto;
}

.pw-drawer {
	background: var(--pw-ink);
	width: 100%;
	max-width: 480px;
	min-height: 720px;
	display: flex;
	flex-direction: column;
	padding: 24px 24px 40px;
	gap: 32px;
}

.pw-drawer__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.pw-drawer__close {
	background: none;
	border: 0;
	padding: 8px;
	color: var(--text-on-dark);
	cursor: pointer;
	display: inline-flex;
	transition: var(--transition-color);
}

.pw-drawer__close:hover {
	color: var(--action-on-dark);
}

.pw-drawer__nav {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.pw-drawer__row {
	display: flex;
	flex-direction: column;
	gap: 16px;
	border-bottom: 1px solid var(--hairline-on-dark);
	padding-bottom: 24px;
}

.pw-drawer__link {
	border-bottom: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.1;
	color: var(--text-on-dark);
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	cursor: pointer;
	transition: var(--transition-color);
}

.pw-drawer__link:hover {
	color: var(--action-on-dark);
}

.pw-drawer__sub {
	display: grid;
	gap: 20px;
	padding-left: 0;
}

/* Drawer group: a parent Offer item with its own list. */
.pw-drawer__group {
	display: grid;
	gap: 10px;
}

.pw-drawer__group-head {
	border-bottom: 0;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-on-dark);
	text-decoration: none;
	transition: var(--transition-color);
}

.pw-drawer__group-head:hover {
	color: var(--action-on-dark);
}

.pw-drawer__group-list {
	display: grid;
	gap: 10px;
	padding-left: 16px;
	border-left: 1px solid var(--hairline-on-dark);
}

.pw-drawer__sub-link {
	font-family: var(--font-body);
	border-bottom: 0;
	font-size: 15px;
	color: var(--text-on-dark-muted);
	text-decoration: none;
	transition: var(--transition-color);
}

.pw-drawer__sub-link:hover {
	color: var(--action-on-dark);
}

.pw-drawer__foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ── Footer ── */
.pw-footer {
	background: var(--pw-ink);
	padding: 96px 0 0;
}

.pw-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px;
}

.pw-footer__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pw-footer__logo {
	height: 48px;
	width: auto;
	align-self: flex-start;
	object-fit: contain;
	display: block;
}

.pw-footer__social {
	display: flex;
	gap: 20px;
	align-items: center;
}

/*
 * Social icons in the footer: green border already at rest. The mockup needed an important flag against
 * IconButton's inline style; .pw-iconbtn is a plain class in ds.css, which loads earlier, so this
 * rule wins by order at the same specificity.
 */
.pw-footer__social :where(a, button) {
	border-color: var(--action-on-dark);
}

.pw-footer__contact {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.pw-footer__contact svg {
	flex: 0 0 auto;
	margin-top: 4px;
}

/* Vertical padding only: side spacing comes from .pw-container, so it matches at every breakpoint. */
.pw-footer__bottom {
	margin-top: 64px;
	padding-top: 32px;
	padding-bottom: 32px;
	border-top: 1px solid var(--hairline-on-dark);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	font-size: 14px;
	color: var(--text-on-dark-muted);
}

/* ── Tablet ≤959: the header switches to mobile ── */
@media (max-width: 959px) {

	.pw-topbar {
		display: none;
	}

	.pw-header {
		min-height: 72px;
	}

	.pw-header__inner {
		gap: 16px;
	}

	.pw-nav,
	.pw-header__inner > .pw-header__cta {
		display: none;
	}

	.pw-header__burger {
		display: inline-flex;
	}

	.pw-megamenu {
		display: none;
	}

	.pw-footer__grid,
	.pw-megamenu__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pw-megamenu__col {
		padding: 24px 0;
		border-left: 0;
		border-top: 1px solid var(--hairline-on-dark);
	}

	.pw-footer__bottom {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.pw-footer__col:nth-child(1) {
		order: 1;
	}

	.pw-footer__col:nth-child(2) {
		order: 3;
	}

	.pw-footer__col:nth-child(3) {
		order: 4;
	}

	.pw-footer__col:nth-child(4) {
		order: 2;
	}
}

/* ── Mobile ≤575 ── */
@media (max-width: 575px) {

	.pw-footer__grid,
	.pw-megamenu__grid,
	.pw-megamenu__list--two {
		grid-template-columns: minmax(0, 1fr);
	}

	.pw-drawer__link {
		font-size: 26px;
	}

	.pw-footer__bottom {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Footer column order on mobile: logo → Office → Menu → Information. */
	.pw-footer__col:nth-child(1) {
		order: 1;
	}

	.pw-footer__col:nth-child(2) {
		order: 3;
	}

	.pw-footer__col:nth-child(3) {
		order: 4;
	}

	.pw-footer__col:nth-child(4) {
		order: 2;
	}
}

.pw-footer__search {
	padding: 24px 0 0;
	margin-top: 32px;
	border-top: 1px solid var(--hairline-on-dark);
}

.pw-footer__cookies {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 14px;
	color: var(--text-on-dark-muted);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
	min-height: 24px;
}

/* Long labels (EN / UA): buttons, menu links and card titles wrap between words and never leave their container. */
.pw-nav--test {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
}

/* Footer bottom bar: "Cookie settings" always at the right edge. */
.pw-footer__bottom .pw-footer__cookies {
	margin-left: auto;
}

/*
 * ── Theme additions: header states ──
 * Not in the mockup's components.css: the mockup draws these states
 * statically or with React. Markup: template-parts/header.php, drawer.php;
 * behaviour: assets/js/header.js. Listed in docs/komponenty.md.
 */

/* `hidden` loses to a class that sets display, so it is restated for the two that do. */
.pw-drawer-shell[hidden],
.pw-drawer__sub[hidden] {
	display: none;
}

/* Open drawer: the page underneath does not scroll. */
:root:has(.pw-drawer-shell:not([hidden])) {
	overflow: hidden;
}

/*
 * Item with a mega menu: the link goes to the section page, the chevron is a
 * separate button that opens the panel. Together they look like the mockup's
 * single link (text, 6px gap, 16px chevron); hover on either colors both.
 */
.pw-nav__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Touch target at least 24×24px (WCAG 2.5.8), as .pw-social: padding plus the same negative margin. */
.pw-nav__toggle {
	display: inline-flex;
	padding: 4px;
	margin: -4px;
	border: 0;
	background: none;
	color: var(--pw-text);
	cursor: pointer;
	transition: var(--transition-color);
}

.pw-nav__item:hover > .pw-nav__link,
.pw-nav__item:hover > .pw-nav__toggle,
.pw-nav__toggle[aria-expanded="true"],
.pw-nav__item:has(> .pw-nav__toggle[aria-expanded="true"]) > .pw-nav__link,
.pw-nav__item:has(> .pw-nav__link[aria-current="page"]) > .pw-nav__toggle {
	color: var(--action-on-light);
}

.pw-nav__toggle[aria-expanded="true"] .pw-nav__chevron {
	transform: rotate(180deg);
}

/* Drawer accordion: chevron down when closed, up when open (the same glyph turned, no animation). */
.pw-drawer__link[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/*
 * Sticky header (HANDOFF section 5, point 5). header.js adds
 * .pw-header--sticky once the top bar has scrolled out of view; the header
 * is then fixed, the only fixed element on the page. The banner keeps the
 * header's resting height as padding, so the content does not jump.
 * The WordPress admin bar, when shown, stays above it.
 */
.pw-headerwrap:has(> .pw-header--sticky) {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
}

.pw-banner:has(.pw-header--sticky) {
	padding-bottom: var(--header-h);
}

@media (max-width: 959px) {

	.pw-banner:has(.pw-header--sticky) {
		padding-bottom: 72px;
	}
}

/* At 600px and below the admin bar scrolls away with the page (WordPress core). */
@media (max-width: 600px) {

	.pw-headerwrap:has(> .pw-header--sticky) {
		top: 0;
	}
}

/*
 * ── Theme addition: footer in 2 columns from 1199px (step 4B review) ──
 * The mockup switches at 959px; at 960-1199px (iPad landscape: 1024px) the
 * four columns are about 200px wide and the quote button breaks onto two
 * lines. Same two-column layout and column order as at 959px, from a higher
 * width. Deviation from the mockup, listed in docs/komponenty.md.
 */
@media (max-width: 1199px) {

	.pw-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pw-footer__col:nth-child(1) {
		order: 1;
	}

	.pw-footer__col:nth-child(2) {
		order: 3;
	}

	.pw-footer__col:nth-child(3) {
		order: 4;
	}

	.pw-footer__col:nth-child(4) {
		order: 2;
	}
}