/*
Theme Name: PeruPress
Theme URI: https://perupress.pe
Author: Peru Press
Description: Block theme for Peru Press — gastronomy and tourism news agency in Lima, Peru. Editorial, press-first design.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: perupress
*/

/* ---------- Motion system ---------- */

/* Motion tokens: one calm decelerate curve, three speeds. Editorial, never bouncy. */
:root {
	--pp-ease: cubic-bezier(0.2, 0, 0, 1);
	--pp-dur-fast: 150ms;
	--pp-dur-base: 250ms;
	--pp-dur-slow: 450ms;
}

/* Shared entrance keyframes (hero on load, cards on scroll).
   Keyframes own `transform`; hover states use `translate`/`scale`, so both compose. */
@keyframes pp-rise-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Reduced motion: global kill switch. Zeroes every animation and transition,
   including WordPress core block styles this theme does not own. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Editorial details the block editor can't express ---------- */

/* Press dateline: uppercase label with wide tracking, inherited from the logo tagline */
.pp-dateline {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--leaf);
}

/* ---------- Hero cover ---------- */

/* Fluid height: px fallback first, then small-viewport units
   (svh avoids the mobile URL-bar jump; older browsers keep 480px) */
.pp-hero-cover {
	min-height: 480px;
	min-height: 70svh;
	/* Solid forest fallback while the photo loads or if it is missing */
	background-color: var(--wp--preset--color--forest);
}

/* Hero content: one quiet rise on page load (single node, time-based) */
@media (prefers-reduced-motion: no-preference) {
	.pp-hero-cover .wp-block-cover__inner-container {
		animation: pp-rise-in 0.6s var(--pp-ease) both;
	}
}

/* ---------- WCAG AA on dark surfaces ---------- */

/* Dateline on dark surfaces (cover hero, forest footer): AA contrast */
.wp-block-cover .pp-dateline,
.has-forest-background-color .pp-dateline {
	color: rgba(255, 255, 255, 0.82);
}

/* Focus ring on dark surfaces: terracotta fails the 3:1 non-text minimum on forest */
.wp-block-cover :where(a, button):focus-visible,
.has-forest-background-color :where(a, button):focus-visible {
	outline-color: #ffffff;
}

/* Footer coda: hairline above the copyright line */
.pp-footer-copyright {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* Spiral as list bullet — the single recurring brand gesture */
ul.pp-spiral-list {
	list-style: none;
	padding-left: 0;
}
ul.pp-spiral-list li {
	padding-left: 1.75rem;
	background: url('assets/img/spiral.svg') no-repeat 0 0.3em;
	background-size: 0.9em auto;
	margin-bottom: 0.75rem;
}

/* Note cards: spiral watermark, subtle */
.pp-note-card {
	position: relative;
	overflow: hidden;
}
.pp-note-card::after {
	content: '';
	position: absolute;
	right: -1.5rem;
	bottom: -1.5rem;
	width: 7rem;
	height: 7rem;
	background: url('assets/img/spiral.svg') no-repeat center / contain;
	opacity: 0.06;
	pointer-events: none;
}

/* ---------- Card image language & internal rhythm ---------- */

/* One radius across all card imagery */
:root {
	--pp-radius-card: 6px;
}

/* Featured image bleeds to the card edges; the card's own 6px radius
   plus overflow:hidden clip the top corners consistently. */
.pp-note-card .wp-block-post-featured-image {
	margin: 0;
}
.pp-note-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale var(--pp-dur-slow) var(--pp-ease);
}

/* Quiet editorial hover: slow ease-scale, clipped by the card frame */
.pp-note-card:hover .wp-block-post-featured-image img,
.pp-note-card:focus-within .wp-block-post-featured-image img {
	scale: 1.04;
}

/* Keep the keyboard focus ring visible inside the clipped card */
.pp-note-card .wp-block-post-featured-image a:focus-visible {
	outline-offset: -2px;
}

/* Inner rhythm: tight meta-title-date stack, roomier excerpt */
.pp-note-card .wp-block-group > * + * {
	margin-block-start: 0.5rem;
}
.pp-note-card .wp-block-post-title {
	margin-block-start: 0.375rem;
	font-size: clamp(1.1875rem, 1.1rem + 0.45vw, 1.375rem);
	line-height: 1.3;
}
.pp-note-card .wp-block-post-excerpt {
	margin-block-start: 0.75rem;
}

/* Reduced motion: remove the hover end-state, not just the timing */
@media (prefers-reduced-motion: reduce) {
	.pp-note-card:hover .wp-block-post-featured-image img,
	.pp-note-card:focus-within .wp-block-post-featured-image img {
		scale: none;
	}
}

/* Note cards: subtle lift with forest-tinted shadow. Uses the individual
   `translate` property so it composes with the entrance animation, which
   owns `transform`. :focus-within mirrors hover for keyboard users. */
.pp-note-card {
	box-shadow: 0 1px 2px rgba(10, 74, 48, 0.06);
	transition:
		translate var(--pp-dur-base) var(--pp-ease),
		box-shadow var(--pp-dur-base) var(--pp-ease);
}
.pp-note-card:hover,
.pp-note-card:focus-within {
	translate: 0 -3px;
	box-shadow: 0 6px 18px rgba(10, 74, 48, 0.1);
}

/* Spiral watermark breathes slightly on hover */
.pp-note-card::after {
	transition: opacity var(--pp-dur-base) var(--pp-ease);
}
.pp-note-card:hover::after,
.pp-note-card:focus-within::after {
	opacity: 0.1;
}

/* Reduced motion: no lift end-state */
@media (prefers-reduced-motion: reduce) {
	.pp-note-card:hover,
	.pp-note-card:focus-within {
		translate: none;
	}
}

/* Entrance: cards rise as they scroll into view. No JS, compositor-only.
   Browsers without view timelines simply show static cards. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.pp-note-card {
			animation: pp-rise-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
	}
}

/* Floating WhatsApp button */
.pp-whatsapp-float {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	/* WhatsApp teal (not the lighter #25d366): white glyph reaches 4.1:1,
	   meeting the 3:1 non-text minimum (WCAG 1.4.11) */
	background: #128c7e;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: scale var(--pp-dur-fast) var(--pp-ease);
}
.pp-whatsapp-float:hover,
.pp-whatsapp-float:focus-visible {
	scale: 1.06;
}
/* Two-tone focus ring: visible over any backdrop the fixed button floats
   across (white page, ivory bands, forest footer) */
.pp-whatsapp-float:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 6px rgba(10, 74, 48, 0.9);
}
.pp-whatsapp-float svg {
	width: 1.9rem;
	height: 1.9rem;
	fill: #fff;
}
@media (prefers-reduced-motion: reduce) {
	.pp-whatsapp-float {
		transition: none;
	}
	.pp-whatsapp-float:hover,
	.pp-whatsapp-float:focus-visible {
		scale: none;
	}
}

/* Visible keyboard focus, brand-colored */
:where(a, button, input, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta);
	outline-offset: 2px;
}

/* Terracotta button variant — the warm accent, used sparingly */
.is-style-pp-terracotta .wp-block-button__link {
	background-color: var(--wp--preset--color--terracotta);
	color: #fff;
}

/* Buttons: eased color swap + gentle press feedback */
.wp-block-button__link {
	transition:
		background-color var(--pp-dur-fast) var(--pp-ease),
		color var(--pp-dur-fast) var(--pp-ease),
		border-color var(--pp-dur-fast) var(--pp-ease),
		translate var(--pp-dur-fast) var(--pp-ease);
}
.wp-block-button__link:active {
	translate: 0 1px;
}

/* Terracotta CTA darkens within its own hue instead of flashing leaf */
.is-style-pp-terracotta .wp-block-button__link:hover,
.is-style-pp-terracotta .wp-block-button__link:focus-visible {
	background-color: #8f4c20;
	color: #fff;
}

/* Screen-reader-only helper for icon links */
.pp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Content links: understated underline that sharpens and settles on hover */
:where(p, li, .wp-block-post-excerpt, .wp-block-query-pagination) a {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	transition:
		color var(--pp-dur-fast) var(--pp-ease),
		text-decoration-color var(--pp-dur-fast) var(--pp-ease),
		text-underline-offset var(--pp-dur-fast) var(--pp-ease);
}
:where(p, li, .wp-block-post-excerpt, .wp-block-query-pagination) a:hover,
:where(p, li, .wp-block-post-excerpt, .wp-block-query-pagination) a:focus-visible {
	text-decoration-color: currentColor;
	text-underline-offset: 0.26em;
}

/* Post titles: never underlined; color eases (hover color comes from theme.json) */
.wp-block-post-title a {
	text-decoration: none;
	transition: color var(--pp-dur-fast) var(--pp-ease);
}

/* Query grid: comfortable gutters at every width */
.wp-block-post-template.is-layout-grid {
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}
@media (min-width: 600px) and (max-width: 899px) {
	.wp-block-post-template.is-layout-grid.columns-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 599px) {
	.wp-block-post-template.is-layout-grid {
		gap: var(--wp--preset--spacing--40);
	}
}

/* ---------- Editorial rhythm & measure ---------- */

/* Balanced rag for headings, calmer rag for running text */
h1, h2, h3, h4 {
	text-wrap: balance;
}
p {
	text-wrap: pretty;
}

/* Standfirst: the lede paragraph under a display headline */
.pp-standfirst {
	font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
	line-height: 1.55;
	max-width: 32em;
}

/* Nav links: terracotta underline grows from the left on hover/focus */
.wp-block-navigation-item__content {
	position: relative;
}
.wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.25em;
	height: 2px;
	background: var(--wp--preset--color--terracotta);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--pp-dur-base) var(--pp-ease);
}
.wp-block-navigation-item__content:hover::after,
.wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

/* Current page: static leaf underline as a wayfinding mark */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	background: var(--wp--preset--color--leaf);
}

/* Arrow nudge: slides right when its link is hovered or focused */
.pp-arrow {
	display: inline-block;
	transition: translate var(--pp-dur-fast) var(--pp-ease);
}
a:hover .pp-arrow,
a:focus-visible .pp-arrow {
	translate: 0.2em 0;
}
/* Reduced motion: remove positional end-states, not just the timing */
@media (prefers-reduced-motion: reduce) {
	a:hover .pp-arrow,
	a:focus-visible .pp-arrow {
		translate: none;
	}
	.wp-block-button__link:active {
		translate: none;
	}
}

/* Smooth in-page scrolling for anchor jumps */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---------- Media + text (Sobre) ---------- */

/* Same radius language as the note cards; image fills its column.
   Rule: flush images get clipped by their container's radius; inset
   images carry the 6px radius themselves. */
.pp-media-card .wp-block-media-text__media img {
	border-radius: var(--pp-radius-card, 6px);
	width: 100%;
	height: 100%;
	object-fit: cover;
}