/*
Theme Name: Kydella
Theme URI: https://kydella.com
Description: Kydella 2.0 block theme. Brand colours and typography live in theme.json.
Version: 0.3.0
Requires at least: 6.6
Requires PHP: 8.1
Author: Kydella
License: Proprietary
Text Domain: kydella-theme
*/

/*
 * Most styling is in theme.json: colours, fonts, sizes, spacing, buttons.
 * This file holds only what theme.json can't express:
 *   1. Basics: focus rings, link underlines, dark sections
 *   2. Block styles registered in functions.php (Card, Eyebrow, Pill, Checklist, Arch)
 *   3. Pieces used by the templates and patterns (header, footer, cards…)
 * Colours and sizes always come from theme.json presets: var(--wp--preset--…).
 */

/* ---------- 1. Basics ---------- */

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* A clear keyboard focus ring: forest on light backgrounds… */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--forest);
	outline-offset: 3px;
}

/* …and cream on the dark (forest) sections. */
:where(.has-forest-background-color, .has-forest-dark-background-color) :focus-visible {
	outline-color: var(--wp--preset--color--cream);
}

/* Dark sections: headings and plain links follow the section's text colour. */
.has-forest-background-color :is(h1, h2, h3, h4, h5, h6),
.has-forest-dark-background-color :is(h1, h2, h3, h4, h5, h6),
.has-forest-background-color a:where(:not(.wp-element-button)),
.has-forest-dark-background-color a:where(:not(.wp-element-button)) {
	color: inherit;
}

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* Outline buttons fill in on hover (theme.json can't style a variation's hover). */
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--forest);
	background-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
}

/* Buttons given their own colours (e.g. cream on forest): no forest border,
   and they dim a little on hover. */
.wp-block-button__link.has-background {
	border-color: transparent;
}

.wp-block-button__link.has-background:hover {
	opacity: 0.88;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
}

/* ---------- 2. Block styles (registered in functions.php) ---------- */

/* Eyebrow: a small uppercase label above a heading. */
.is-style-kydella-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Pill: a small rounded badge. */
.is-style-kydella-pill {
	width: fit-content;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--wp--preset--color--sage);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Card: a white, rounded, gently lifted panel. Padding set on the block wins. */
.is-style-kydella-card {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--large);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--soft);
}

/* Checklist: a list with ticks instead of bullets. */
.is-style-kydella-checklist {
	padding-left: 0;
	list-style: none;
}

.is-style-kydella-checklist > li {
	position: relative;
	padding-left: 2.25rem;
}

.is-style-kydella-checklist > li + li {
	margin-top: 0.75rem;
}

.is-style-kydella-checklist > li::before {
	content: "";
	position: absolute;
	top: 0.1em;
	left: 0;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--sage) url("assets/icons/check.svg") center / 0.95rem no-repeat;
}

/* Arch: an image with a round, arch-shaped top. */
.is-style-kydella-arch img {
	border-radius: 999px 999px var(--wp--custom--radius--large) var(--wp--custom--radius--large);
}

/* ---------- 3. Templates and patterns ---------- */

/* Header (parts/header.html, parts/header-minimal.html). */
.kydella-announcement p {
	margin: 0;
}

.kydella-header {
	border-bottom: 1px solid rgb(38 83 62 / 12%);
}

/* The wordmark (patterns/logo.php, logo-light.php): an image, never squashed. */
.kydella-logo {
	flex-shrink: 0;
	margin: 0;
	line-height: 0;
}

.kydella-logo img {
	display: block;
	height: auto;
}

.kydella-header__actions .wp-block-button__link {
	padding: 0.55rem 1.15rem;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

@media (max-width: 599px) {
	.kydella-hide-on-mobile {
		display: none;
	}

	.kydella-header .kydella-logo img {
		width: 104px !important;
	}

	.kydella-header__actions {
		gap: 0.75rem !important;
	}

	.kydella-header__actions .wp-block-button__link {
		padding: 0.45rem 0.9rem;
	}

	/* The menu button sits at the far right on phones. */
	.kydella-header__actions > .wp-block-navigation {
		order: 3;
	}
}

/* Very small phones: keep the header on one row (logo, button and menu)
   without overflowing the viewport. The flex row can't wrap, so trim the
   logo, gaps and button padding just enough to fit at 320px. */
@media (max-width: 400px) {
	.kydella-header .kydella-logo img {
		width: 92px !important;
	}

	.kydella-header__actions {
		gap: 0.5rem !important;
	}

	.kydella-header__actions .wp-block-button__link {
		padding: 0.4rem 0.6rem;
	}
}

/* Footer (parts/footer.html, parts/footer-minimal.html). */
.kydella-footer a:where(:not(.wp-element-button)) {
	text-decoration-color: rgb(249 244 222 / 40%);
}

.kydella-footer a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}

.kydella-footer__heading {
	color: var(--wp--preset--color--caramel) !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Phones: the three link lists sit two to a row instead of one long column. */
@media (max-width: 781px) {
	.kydella-footer__columns > .wp-block-column:not(:first-child) {
		flex-basis: calc(50% - var(--wp--preset--spacing--50)) !important;
		flex-grow: 1;
	}
}

.kydella-footer__legal {
	border-top: 1px solid rgb(249 244 222 / 20%);
}

/* Page header band (templates): soft circles behind the title. */
.kydella-page-header {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.kydella-page-header::before,
.kydella-page-header::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.kydella-page-header::before {
	top: -9rem;
	right: -6rem;
	width: 22rem;
	height: 22rem;
	background-color: var(--wp--preset--color--blush);
	opacity: 0.45;
}

.kydella-page-header::after {
	bottom: -6rem;
	left: -4rem;
	width: 13rem;
	height: 13rem;
	background-color: var(--wp--preset--color--sage);
	opacity: 0.35;
}

/* Home hero (patterns/home-hero.php). */
.kydella-hero h1 {
	text-wrap: balance;
}

.kydella-hero__art img {
	display: block;
	width: 100%;
	max-width: 34rem;
	height: auto;
	margin-inline: auto;
}

@media (max-width: 781px) {
	.kydella-hero__art img {
		max-width: 80%;
	}
}

/* "Your answers stay in your browser" with a lock in front. */
.kydella-reassure::before {
	content: "";
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	margin-right: 0.45em;
	vertical-align: -0.22em;
	background: url("assets/icons/lock.svg") center / contain no-repeat;
}

/* Policy pages: hide "Last updated:" until the page has been edited since publishing. */
.kydella-updated:not(:has(.wp-block-post-date)) {
	display: none;
}

/* Feature icons: a line icon on a tinted circle (home, About). */
.kydella-icon img {
	box-sizing: content-box;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0.75rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--sage-light);
}

/* Team photos (patterns/about.php): the core "Rounded" image style makes the
   circle; a white ring stops a light photo background fading into the card. */
.kydella-team-photo img {
	border: 4px solid var(--wp--preset--color--white);
}

/* Trust strip (patterns/home-trust.php): 2 × 2 on tablets instead of 4 thin columns. */
@media (min-width: 782px) and (max-width: 1079px) {
	.kydella-trust > .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.kydella-trust > .wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--40)) !important;
	}
}

/* Numbered steps (patterns/home-how-it-works.php). */
.kydella-step-number {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1;
}

/* Prices (patterns/home-pricing.php, patterns/pricing.php): the amount stands out. */
.kydella-price {
	margin-block: 0.25rem 0.75rem;
	font-size: var(--wp--preset--font-size--large);
}

.kydella-price strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
}

/* Price tables (patterns/pricing.php): the price column lines up on the right. */
.kydella-price-table td:last-child,
.kydella-price-table th:last-child {
	text-align: right;
	white-space: nowrap;
}

/* How it works (patterns/how-it-works.php): each step's number beside its text on wider screens. */
@media (min-width: 600px) {
	.kydella-step {
		display: grid;
		grid-template-columns: 3rem 1fr;
		column-gap: var(--wp--preset--spacing--40);
		align-items: start;
	}

	.kydella-step > :not(.kydella-step-number) {
		grid-column: 2;
	}

	.kydella-step > .kydella-step-number {
		grid-row: 1 / span 4;
	}

	.kydella-step > .wp-block-heading {
		margin-block-start: 0;
	}
}

/* Equal-height cards in rows of columns. */
.kydella-equal-cards > .wp-block-column > .is-style-kydella-card {
	height: 100%;
}

/* Learn article cards (query loops). Only items holding a card stretch, so
   other query loops keep WordPress's normal layout. */
.wp-block-post-template.is-layout-grid > li:has(> .kydella-post-card) {
	display: flex;
}

.kydella-post-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
}

.kydella-post-card .wp-block-post-featured-image {
	margin: 0;
}

.kydella-post-card .wp-block-post-featured-image img {
	border-radius: 0;
}

/* No featured image yet: show a soft placeholder so cards line up. */
.kydella-post-card:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	aspect-ratio: 3 / 2;
	background: url("assets/images/card-placeholder.svg") center / cover no-repeat;
}

.kydella-post-card__body {
	flex: 1;
}

.kydella-post-card .wp-block-post-title {
	margin-top: 0.25rem;
}

/* Category links above article titles read as labels, not underlined links. */
.wp-block-post-terms a {
	text-decoration: none;
}

.wp-block-post-terms a:hover {
	text-decoration: underline;
}

/* Article meta (templates/single.html): date · reading time. Bylines are in
   the article text (e.g. "By Dr. Tina"), since articles are posted from
   Terron's admin account. */
.kydella-meta > * + *::before {
	content: "·";
	margin-right: 0.5rem;
}

/* Single-post content (Learn articles): long reference URLs and other long
   strings wrap instead of scrolling the whole page sideways on phones. */
.single-post .wp-block-post-content {
	overflow-wrap: anywhere;
}

/* Table cells stay readable on narrow screens: long medical terms hyphenate
   (e.g. "metron-idazole") instead of breaking mid-word, and nothing scrolls
   sideways — a scroll box would need its own keyboard handling to stay
   accessible. Older Safari versions only know the -webkit- name. Where the
   browser can't hyphenate, a word breaks only if it can't fit at all. */
.single-post .wp-block-post-content .wp-block-table :where(th, td) {
	word-break: normal;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}

@media (max-width: 600px) {
	.single-post .wp-block-post-content .wp-block-table :where(th, td) {
		padding: 0.5rem 0.6rem;
		font-size: var(--wp--preset--font-size--x-small);
	}
}

/* Phones: each column gets the width its longest word needs ("auto" layout)
   rather than an equal share, so text wraps between words, not inside them.
   Tighter side padding and, for tables of four or more columns, smaller text
   make room; checked on every Learn table from 320 to 480px. */
@media (max-width: 479px) {
	.single-post .wp-block-post-content .wp-block-table table {
		table-layout: auto;
	}

	.single-post .wp-block-post-content .wp-block-table :where(th, td) {
		padding-right: 0.35rem;
		padding-left: 0.35rem;
	}

	.single-post .wp-block-post-content .wp-block-table table:has(tr > :nth-child(4)) :where(th, td) {
		font-size: 0.75rem;
	}
}

/* The smallest phones (and pages zoomed to 400%): tighter again, so a
   four-column table still fits 320px without breaking words. */
@media (max-width: 359px) {
	.single-post .wp-block-post-content .wp-block-table :where(th, td) {
		padding-right: 0.25rem;
		padding-left: 0.25rem;
	}

	.single-post .wp-block-post-content .wp-block-table table:has(tr > :nth-child(4)) :where(th, td) {
		font-size: 0.6875rem;
	}
}

/* FAQ and other details blocks: a card with a turning chevron. */
.wp-block-details {
	box-shadow: var(--wp--preset--shadow--soft);
}

.wp-block-details + .wp-block-details {
	margin-top: var(--wp--preset--spacing--30);
}

.wp-block-details > summary {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::after {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	background: url("assets/icons/chevron-down.svg") center / contain no-repeat;
	transition: transform 0.2s ease;
}

.wp-block-details[open] > summary {
	margin-bottom: var(--wp--preset--spacing--20);
}

.wp-block-details[open] > summary::after {
	transform: rotate(180deg);
}

/* Search box. */
.wp-block-search__input {
	padding: 0.7rem 1.1rem;
	border: 2px solid var(--wp--preset--color--sage);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--forest);
	font: inherit;
}

.wp-block-search__button {
	margin-left: 0.5rem;
}

/* Pagination: round page numbers. */
.wp-block-query-pagination-numbers .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
}

/* Learn: category links as pill-shaped chips (templates/home.html). */
ul.kydella-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kydella-chips li a {
	display: inline-block;
	padding: 0.45rem 1rem;
	border: 1px solid var(--wp--preset--color--sage);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--forest);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.kydella-chips li a:hover,
.kydella-chips li a:focus-visible {
	border-color: var(--wp--preset--color--forest);
}

.kydella-chips li.current-cat a {
	border-color: var(--wp--preset--color--forest);
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
}