/*
Theme Name: Paperkite
Theme URI: https://paperkite.io
Author: Paperkite
Description: A warm, editorial block theme built for product studios and growth: big serif headlines, a pastel tile per product, and an Aurora dark style. Pairs with the Paperkite plugin.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.2
Version: 0.4.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paperkite
Tags: block-patterns, full-site-editing, editor-style, wide-blocks, style-variations
*/

/* Only what theme.json can't express. */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* 44px minimum touch targets for small text links. */
.wp-block-navigation-item__content,
.wp-block-post-terms a,
.wp-block-query-pagination a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Headline emphasis: <em> inside a heading picks up the primary colour. */
:where(h1, h2, h3) em {
	color: var(--wp--preset--color--primary);
}

/* A second emphasised word takes the accent colour ("executed … actually"). */
:where(h1, h2) em ~ em {
	color: var(--wp--preset--color--accent);
}

/* On a primary-coloured band, emphasis switches to the highlight colour. */
.has-primary-background-color :where(h1, h2, h3) em {
	color: var(--wp--preset--color--highlight);
}

/* Pagination: round page buttons, the current page filled, Newer/Older as outlined pills. */
.wp-block-query-pagination {
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}
.wp-block-query-pagination :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: border-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease), color var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}
.wp-block-query-pagination .page-numbers {
	padding: 0;
}
.wp-block-query-pagination a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.wp-block-query-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.wp-block-query-pagination .page-numbers.dots {
	min-width: auto;
	border: 0;
	background: none;
}

/* Long URLs and email addresses in content wrap instead of widening the page on phones. */
.wp-block-post-content {
	overflow-wrap: break-word;
}

/* Embeds and videos fill their column inside flex groups (otherwise a responsive embed collapses to 0 × 0). */
.is-layout-flex > :is(.wp-block-embed, .wp-block-video) {
	align-self: stretch;
	width: 100%;
}

/* Block styles: Tile, Chip, Sticker, Rule above. */
.is-style-pk-tile {
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.is-style-pk-chip,
.is-style-pk-sticker {
	display: inline-block;
	width: fit-content;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}
.is-style-pk-chip:not(.has-background) {
	background: var(--wp--preset--color--tint-2);
}
.is-style-pk-sticker {
	background: var(--wp--preset--color--highlight);
	color: var(--wp--preset--color--contrast);
	transform: rotate(-3deg);
}

.is-style-pk-rule {
	border-top: 2px solid color-mix(in srgb, currentColor 35%, transparent);
	padding-top: var(--wp--preset--spacing--40);
}

/* Cards that lift on hover. Add the "is-style-pk-lift" class or the block style. */
.is-style-pk-lift {
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}
.is-style-pk-lift:hover {
	transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.is-style-pk-lift:hover {
		transform: none;
	}
}

/* Journal section pills ("All" + categories). */
.pk-pills ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pk-pills a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1.1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}
.pk-pills a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.pk-pills a[aria-current="page"] {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Company details (home page footer): folded until opened. */
.pk-company {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-3);
}
.pk-company summary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.pk-company dl {
	display: grid;
	gap: 0.35rem;
	margin: 0.25rem 0 0;
}
.pk-company dl > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5rem;
}
.pk-company dt {
	font-weight: 600;
	color: var(--wp--preset--color--contrast-2);
}
.pk-company dt::after {
	content: ":";
}
.pk-company dd {
	margin: 0;
}