/*
Theme Name: Grialto Magazine
Theme URI: https://magazine.grialto.com
Author: Rocket Surgery Labs GmbH
Author URI: https://grialto.com
Description: Grialto child theme of Twenty Twenty-Five — apricot ground, Oswald, neumorphic surfaces.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grialto-magazine
*/

/* ─── What theme.json cannot say ─────────────────────────────────────────
   Tokens (colours, type, spacing, shadow strings) live in theme.json and reach
   this file as --wp--preset--* / --wp--custom--*. This file only adds the
   surface rule from docs/design/grialto/surfaces.md:
   raised = object · inset = input/pressed · everything else bare.
   Keep it that way — no new hex values here. */

/* Links in running text: ink + accent underline. The accent alone is 2.7:1 on
   the apricot ground (fails WCAG AA for text); the underline carries the cue. */
:where(.wp-block-post-content, .entry-content) a:where(:not(.wp-element-button)) {
	text-decoration-color: var(--wp--preset--color--accent-1);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

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

::selection {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--custom--color--on-accent);
}

/* ─── Buttons — interactive rung (sm → md + lift, press = full inset) ──── */
.wp-element-button,
.wp-block-button__link {
	transition:
		background-color 150ms var(--wp--custom--ease),
		box-shadow 250ms var(--wp--custom--ease),
		transform 250ms var(--wp--custom--ease);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(0);
}

/* Outline variation → the DS ghost button: ground-light fill, accent-strong text, still raised. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--accent-2);
	border: 0;
	padding: 0.875rem 1.5rem;
	box-shadow: var(--wp--custom--neu--sm);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--accent-2);
	box-shadow: var(--wp--custom--neu--md);
}

/* ─── Inputs — inset-sm is reserved for editable fields ───────────────── */
.wp-block-search__input,
input:where([type="text"], [type="email"], [type="search"], [type="url"]),
textarea {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--neu--inset-sm);
	padding: 0.75rem 1rem;
	font: inherit;
}

.wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
}

.wp-block-search__input:focus-visible {
	outline: 0;
	box-shadow: var(--wp--custom--neu--inset-sm), 0 0 0 2px var(--wp--preset--color--accent-1);
}

/* ─── Raised panel — the `group` rung, opt-in per block ───────────────── */
.wp-block-group.is-style-grialto-raised {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--neu--md);
	padding: var(--wp--preset--spacing--40);
}

/* No raised-inside-raised: a panel inside a panel goes bare. */
.is-style-grialto-raised .is-style-grialto-raised,
.is-style-grialto-cards .is-style-grialto-raised {
	box-shadow: none;
	padding: 0;
}

/* ─── Post cards — clickable as a whole → interactive rung ───────────── */
.wp-block-post-template.is-style-grialto-cards > li {
	position: relative;
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--neu--sm);
	padding: var(--wp--preset--spacing--40);
	transition:
		box-shadow 250ms var(--wp--custom--ease),
		transform 250ms var(--wp--custom--ease);
}

.wp-block-post-template.is-style-grialto-cards > li:hover {
	box-shadow: var(--wp--custom--neu--md);
	transform: translateY(-4px);
}

/* The title link stretches over the card, so the whole card is one target.
   Other links in the card (terms, author) sit above it. */
.wp-block-post-template.is-style-grialto-cards .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.wp-block-post-template.is-style-grialto-cards .wp-block-post-terms a {
	position: relative;
	z-index: 1;
}

.wp-block-post-template.is-style-grialto-cards .wp-block-post-featured-image {
	margin-top: 0;
}

/* ─── Overlays — lg rung: nav submenus + the mobile menu ──────────────── */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base) !important;
	border: 0 !important;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--neu--lg);
	padding: 0.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* Current page in the nav = accent text (active cue), no depth change. */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation a[aria-current="page"] {
	color: var(--wp--preset--color--accent-2);
}

/* ─── Chips — categories/tags: flat tint, pill, never shadowed ───────── */
.wp-block-post-terms a {
	display: inline-block;
	background-color: var(--wp--custom--color--chip-bg);
	color: var(--wp--custom--color--chip-fg);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.25rem 0.75rem;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.wp-block-post-terms a:hover {
	color: var(--wp--preset--color--accent-2);
}

.wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}

.wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* ─── Eyebrow — paragraph block style ─────────────────────────────────── */
p.is-style-grialto-eyebrow {
	font-size: 0.8125rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	color: var(--wp--preset--color--accent-2);
}

/* ─── Bare content: hairlines only ────────────────────────────────────── */
.wp-block-table :where(th, td) {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.wp-block-table thead {
	border-bottom: 0;
}

.wp-block-table th {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 500;
}

footer.wp-block-template-part {
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link,
	.wp-block-post-template.is-style-grialto-cards > li {
		transition: none;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.wp-block-post-template.is-style-grialto-cards > li:hover {
		transform: none;
	}
}