/*
 * Theme additions on top of components.css (= design/components/bundle.css, never edited).
 * Only what the design system does not cover. Values come from tokens.css.
 */

/* Icon paint for pz_icon()'s sprite references (<svg class="pz-icon"><use href="#pz-i-…"/></svg>). The star symbol
   sets its own fill. More specific component rules (e.g. .pz-map__pin .pz-icon) still override. */
.pz-icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* pz_stars(): one five-star icon per row, the same box as five 16 px (lg: 20 px) stars with a 2 px gap. */
.pz-stars .pz-icon.pz-icon--stars { width: 88px; height: 16px; }
.pz-stars .pz-icon.pz-icon--stars-lg { width: 108px; height: 20px; }

/* Skip link: hidden until focused. */
.pz-skip {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 200;
	padding: var(--space-2) var(--space-4);
	background: var(--surface);
	color: var(--pomodoro-deep);
	border-radius: var(--radius-md);
	font: 600 15px/20px var(--font-sans);
	transform: translateY(-200%);
}
.pz-skip:focus { transform: none; box-shadow: var(--focus-ring); outline: none; }

/* Scroll lock while the mobile menu is open (assets/js/menu.js). */
html.pz-menu-open,
html.pz-menu-open body { overflow: hidden; }

/* Style guide (/tyylit/, page-tyylit.php). */
.pz-styleguide__swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.pz-styleguide__swatch {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	overflow: hidden;
	font-size: 14px;
	line-height: 22px;
}
.pz-styleguide__chip { display: block; height: var(--space-16); border-bottom: 1px solid var(--line); }
.pz-styleguide__swatch span:not(.pz-styleguide__chip) { display: block; padding: var(--space-2) var(--space-3) 0; }
.pz-styleguide__swatch span:last-child { padding-bottom: var(--space-3); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pz-styleguide__stack { display: grid; gap: var(--space-6); }
.pz-styleguide__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.pz-styleguide__icons { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--ink-muted); }
.pz-styleguide__icons li { display: grid; justify-items: center; gap: var(--space-1); width: 88px; font-size: 12px; line-height: 16px; text-align: center; }
.pz-styleguide__grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-6); align-items: start; }

/* Listing archives (template-parts/archive.php, listing-card.php). */
.pz-pagehead__text { display: grid; gap: var(--space-3); max-width: var(--container-narrow); }

/* Filter chips are labels around visually hidden checkboxes (plugin directory.js reads .checked). */
.pz-chip { position: relative; cursor: pointer; user-select: none; }
.pz-chip:has(input:checked) { background: var(--pomodoro-soft); border-color: var(--pomodoro); color: var(--pomodoro-deep); }
.pz-chip:has(input:checked) .pz-chip__count { color: var(--pomodoro-deep); }
.pz-chip:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.pz-chip .pz-icon { flex: none; }

.pz-toolbar__end { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-left: auto; }
.pz-toolbar__end .pz-result-count { margin: 0; }
.pz-archive__criterion { margin: calc(-1 * var(--space-6)) 0 var(--space-6); font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.pz-archive__empty { padding-block: var(--space-8); }

/* directory.js hides filtered cards with the hidden attribute; .pz-card sets display: flex. */
.pz-card[hidden],
[data-wbdir-directory] [hidden] { display: none; }

/* A real listing image replaces the monogram plate (never the plugin placeholder). */
.pz-card__plate--img { overflow: hidden; padding: 0; }
.pz-card__plate--img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-full); }

.pz-archive__nearby { display: grid; gap: var(--space-4); padding-block: var(--space-12) 0; }
.pz-archive__seo { margin-top: var(--space-12); }

@media (max-width: 720px) {
	.pz-toolbar__end { margin-left: 0; justify-content: space-between; gap: var(--space-2); }
	.pz-archive__criterion { margin-top: calc(-1 * var(--space-4)); }
}

/* Listing profile (single-business_listing.php, template-parts/listing-profile.php, contact-card.php). */
.pz-profile__hours { max-width: 520px; }
.pz-profile__unknown { margin: 0; font: 400 15px/24px var(--font-sans); color: var(--ink-muted); font-style: italic; }
.pz-profile__location-link { margin: var(--space-4) 0 0; font: 500 15px/22px var(--font-sans); }
.pz-profile__location-link a { color: var(--pomodoro-deep); text-decoration: underline; text-underline-offset: 3px; }
.pz-profile__location-link a:hover { color: var(--pomodoro); }
/* OpenStreetMap embed fills the design's map frame. */
.pz-map--embed { background: var(--farina); }
.pz-map--embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Front page (front-page.php). Mobile: three cards and a full-width "Katso koko lista" (HomePageMobile). */
.pz-home__more { margin: var(--space-5) 0 0; }
.pz-home__cards + .pz-home__more { margin-top: var(--space-6); }
.pz-hero .pz-eyebrow { margin: 0; }
.pz-hero h1 { margin: 0; }
@media (max-width: 720px) {
	.pz-home__cards > .pz-card:nth-child(n+4) { display: none; }
}

/* Search panel (template-parts/search-form.php): the select's chevron points down. */
.pz-search__chevron { flex: none; transform: rotate(90deg); pointer-events: none; }
.pz-search__input:is(select) { cursor: pointer; }

/* Search results (search.php). */
.pz-searchpage__form { margin-top: var(--space-6); }
.pz-searchpage__term { margin: 0 0 var(--space-6); }
.pz-searchpage__empty { display: grid; gap: var(--space-8); padding-block: var(--space-4) var(--space-12); }
.pz-searchpage__empty .pz-lead { margin: 0; max-width: var(--container-narrow); }

/* 404 (404.php). */
.pz-notfound { display: grid; gap: var(--space-8); padding-block: var(--space-12) var(--space-20); }
.pz-notfound .pz-pagehead { padding: 0; display: grid; gap: var(--space-3); max-width: var(--container-narrow); }
.pz-notfound .pz-pagehead > * { margin: 0; }
.pz-notfound__search { max-width: 880px; }
.pz-notfound__cities { display: grid; gap: var(--space-4); }
.pz-notfound__home { margin: 0; }

/* Content pages (page.php). */
.pz-page { padding-bottom: var(--space-20); }
.pz-page .pz-pagehead h1 { margin: 0; }
@media (max-width: 720px) { .pz-page { padding-bottom: var(--space-12); } }

/*
 * Add-listing form: the plugin's [business_listing_form] markup (wbdir-*) in design system form styles.
 * Fields like the search panel and .pz-select: surface, line-control border, radius-md, focus ring.
 */
.wbdir-form-wrapper { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
.wbdir-form {
	display: grid;
	gap: var(--space-5);
	padding: var(--space-8);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}
.wbdir-form-field { display: grid; gap: var(--space-2); margin: 0; }
.wbdir-label { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.wbdir-required { color: var(--pomodoro-deep); margin-left: 2px; }
.wbdir-input,
.wbdir-textarea,
.wbdir-select {
	width: 100%;
	min-height: 44px;
	padding: 10px var(--space-3);
	font: 400 16px/24px var(--font-sans);
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-control);
	border-radius: var(--radius-md);
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wbdir-textarea { resize: vertical; min-height: 96px; }
.wbdir-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23675f55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
	cursor: pointer;
}
.wbdir-input:hover,
.wbdir-textarea:hover,
.wbdir-select:hover { border-color: var(--ink); }
.wbdir-input:focus-visible,
.wbdir-textarea:focus-visible,
.wbdir-select:focus-visible,
.wbdir-file-input:focus-visible,
.wbdir-checkbox-label input:focus-visible { outline: none; border-color: var(--pomodoro-deep); box-shadow: var(--focus-ring); }
.wbdir-file-input { font: 400 15px/22px var(--font-sans); color: var(--ink); }
.wbdir-field-help { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.wbdir-checkbox-label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font: 400 15px/22px var(--font-sans); color: var(--ink); cursor: pointer; }
.wbdir-checkbox-label input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--pomodoro); }
.wbdir-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: start;
	min-height: 48px;
	padding: 14px var(--space-6);
	font: 600 16px/20px var(--font-sans);
	color: var(--on-pomodoro);
	background: var(--pomodoro);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background-color .15s ease;
}
.wbdir-submit-btn:hover { background: var(--pomodoro-deep); }
.wbdir-submit-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wbdir-message {
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-md);
	border: 1px solid var(--line-control);
	background: var(--surface);
	font: 500 15px/22px var(--font-sans);
	color: var(--ink);
}
.wbdir-message--success { background: var(--basilico-soft); border-color: var(--basilico); }
.wbdir-message--error { background: var(--pomodoro-soft); border-color: var(--pomodoro); color: var(--pomodoro-deep); }
@media (max-width: 720px) {
	.wbdir-form { padding: var(--space-5); }
	.wbdir-submit-btn { justify-self: stretch; }
}

/* P5: 320 px reflow (WCAG 1.4.10). components.css stays identical to the design bundle, so the fixes live here. */
.pz-card__foot { flex-wrap: wrap; }
@media (max-width: 960px) {
	.pz-listing { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
	.pz-features { grid-template-columns: minmax(0, 1fr); }
}
/* Long unbroken listing names (e.g. "PizzapalveluKauniainen(entinen.pizza") must wrap instead of widening the page. */
.pz-card__title,
.pz-card__meta,
.pz-listing-head h1 { overflow-wrap: anywhere; }

/* P6: unknown opening hours get a neutral badge (outline, hollow dot), not the closed style. */
.pz-badge--unknown { background: var(--surface); color: var(--ink-muted); border: 1px solid var(--line); border-radius: var(--radius-full); padding-inline: 10px; }
.pz-badge--unknown .pz-badge__dot { background: transparent; border: 1.5px solid currentColor; }

/* P6: the fixed action bar (below 720 px, components.css) must not cover a focused or scrolled-to element. */
@media (max-width: 720px) {
	html:has(body.has-actionbar) { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* P6: click-to-load map. The design's map frame and pin until "Näytä kartta" is pressed (assets/js/map.js). */
.pz-map__load { position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%); white-space: nowrap; }