/**
 * Static pages: About (/meist), Delivery (/saatmine), Contact (/kontakt),
 * FAQ (/kkk).
 *
 * Enqueued by the per-page map in inc/assets.php for any is_page() request
 * that no earlier map entry claimed — /laadad has its own sheet and never
 * reaches this one. Every value is a token; page-specific rules only, the
 * shared vocabulary stays in components.css.
 *
 * @package CreativeCanvas
 */

/* Title sits alone above the prose; the prose measure starts beneath it. */
.cc-page__head {
	margin-block-end: var(--cc-space-8);
}

/* Kicker under the h1 if a page ever grows one; muted, lead size. */
.cc-page__head p {
	margin-block-start: var(--cc-space-3);
	font-size: var(--cc-text-lg);
	color: var(--cc-color-muted);
	max-width: var(--cc-prose-max);
}

/* About (/meist, owner 2026-09-26): the agency's compact story column — a
 * lead line, short headed sections, and the owner's photographs placed in
 * the order of the story. The aspect ratios hold the space before load. */
.cc-prose .cc-lead {
	font-size: var(--cc-text-lg);
	line-height: var(--cc-leading-ui);
	color: var(--cc-color-ink);
}

.cc-prose .cc-story-photo {
	margin-block: var(--cc-space-6);
}

.cc-prose .cc-story-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--cc-radius);
	background-color: var(--cc-color-sand);
}

.cc-prose .cc-story-photo--portrait img {
	max-width: 26rem;
	aspect-ratio: 3 / 4;
}

/* Split-page navigation for paginated content — plain, small, muted. */
.cc-page__pagination {
	margin-block-start: var(--cc-space-8);
	font-size: var(--cc-text-small);
	color: var(--cc-color-muted);
}

/* ---------------------------------------------------------------------------
 * WhatsApp button — the SINGLE permitted use of --cc-color-whatsapp.
 *
 * Markup: <a class="cc-btn cc-btn--primary cc-wa-btn" href="https://wa.me/…">
 * It inherits the full .cc-btn--primary spec (geometry, ::after ring); these
 * rules only swap the fill to the fixed brand green and pin the text white.
 * The hover is the global pattern unchanged: the inset ring thickens in
 * currentColor — white here — while fill and text stay put.
 * ------------------------------------------------------------------------ */

.cc-wa-btn {
	background-color: var(--cc-color-whatsapp);
	color: var(--cc-color-surface);
}

.cc-wa-btn:hover,
.cc-wa-btn:focus-visible {
	color: var(--cc-color-surface);
}

.cc-wa-btn:hover::after,
.cc-wa-btn:focus-visible::after {
	box-shadow: inset 0 0 0 var(--cc-btn-ring-hover) currentColor;
}

/* ---------------------------------------------------------------------------
 * FAQ (/kkk, page-kkk.php) — moved off the home page by the owner
 * (2026-09-29, bead 8dt.15): a hairline-divided list of disclosures at
 * prose width, the question in the display face, a + / − marker.
 * ------------------------------------------------------------------------ */

.cc-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--cc-block-gap);
	max-width: var(--cc-prose-max);
}

/* Each question an open frame on the page ground, as the home trust strip:
 * no fill, a hairline on all four sides, square corners (owner 2026-10-15,
 * bead spo; was a Surface Cool card at 8px). The list gap keeps the frames
 * apart, so no two hairlines meet. */
.cc-faq__item {
	padding: var(--cc-space-4) var(--cc-space-5);
	background-color: transparent;
	border: var(--cc-border);
	border-radius: 0;
}

.cc-faq__q {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space-4);
	font-family: var(--cc-font-display);
	font-size: var(--cc-text-lg);
	font-weight: var(--cc-weight-medium);
	line-height: var(--cc-leading-normal);
	color: var(--cc-color-ink);
}

.cc-faq__q::-webkit-details-marker {
	display: none;
}

.cc-faq__q::after {
	content: "+";
	color: var(--cc-color-action);
}

.cc-faq__item[open] > .cc-faq__q::after {
	content: "\2212";
}

.cc-faq__q:focus-visible {
	outline: var(--cc-focus-width) solid var(--cc-focus-color);
	outline-offset: var(--cc-focus-offset);
}

.cc-faq__a {
	padding-block-start: var(--cc-space-3);
	font-size: var(--cc-text-body);
	line-height: var(--cc-leading-body);
	color: var(--cc-color-muted);
	max-width: 60ch;
}