/*
Theme Name: Lipet
Theme URI: https://lipet.co.il
Description: Child theme for Lipet, an Israeli online pet store. Built on Twenty Twenty-Five. Bidirectional by design — Hebrew and Arabic run RTL, English and Russian LTR.
Author: Lipet
Version: 0.3.0
Template: twentytwentyfive
Text Domain: lipet
Requires at least: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Design tokens live in theme.json, not here. This file is for the few rules
   that cannot be expressed as tokens. Keep it small.

   Authoring rules (see docs/DESIGN.md §11):
   - Logical properties only where meaning is logical: margin-inline-*,
     padding-inline-*, inset-inline-*, text-align: start/end.
   - Physical left/right only for genuinely physical positioning, and every
     such use carries a comment saying why.
   - Breakpoints (min-width, mobile-first): 480px / 768px / 1024px / 1280px.
     theme.json cannot express these — this comment is their registry. */

/* --- Focus ring — 3:1 verified against background and surface. Never remove. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}

/* --- Reduced motion: all non-essential motion off (WCAG 2.3.3). */
@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;
	}
}

/* --- Prices and SKUs stay LTR inside RTL text. WooCommerce wraps amounts in
       <bdi> already; this covers any we output ourselves. */
.lipet-ltr-isolate {
	unicode-bidi: isolate;
	direction: ltr;
}

/* --- Buttons/links: no layout-shifting hover. Color transitions only. */
:where(.wp-element-button, .wp-block-button__link) {
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* --- Clickable cards: whole card is the link (stretched link), hover lift,
       no underline — the card boundary is the affordance. */
.lipet-card {
	position: relative;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.lipet-card a {
	text-decoration: none;
}
.lipet-card a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.lipet-card:hover,
.lipet-card:focus-within {
	box-shadow: var(--wp--preset--shadow--md);
	border-color: var(--wp--preset--color--brand-secondary);
}

/* --- Hero: depth from a brand-primary -> brand-dark gradient (token-mixed,
       no raw hex) and the paw symbol as a quiet oversized watermark anchored
       to the inline-end. Physical `top` is intentional: vertical, not
       reading-order dependent. */
.lipet-hero {
	background: linear-gradient(
		165deg,
		var(--wp--preset--color--brand-primary) 35%,
		color-mix(in srgb, var(--wp--preset--color--brand-primary) 55%, var(--wp--preset--color--brand-dark))
	);
	position: relative;
	overflow: hidden;
}
.lipet-hero::before {
	content: "";
	position: absolute;
	inset-inline-end: -6%;
	top: -18%;
	width: min(44vw, 540px);
	aspect-ratio: 520 / 495;
	background: url("assets/brand/li-pet-symbol-white.svg") no-repeat center / contain;
	opacity: 0.08;
	pointer-events: none;
}
.lipet-hero > * {
	position: relative; /* content above the watermark */
}
@media (max-width: 781px) {
	.lipet-hero::before {
		width: 70vw;
		inset-inline-end: -25%;
		top: auto;
		bottom: -30%;
	}
}

/* --- Icon circles (category cards, trust row). Lucide stroke icons inherit
       currentColor. */
.lipet-icon-circle {
	width: 72px;
	height: 72px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface-muted);
	color: var(--wp--preset--color--brand-primary);
	display: grid;
	place-items: center;
	margin-inline: auto;
}
.lipet-icon-circle svg {
	width: 34px;
	height: 34px;
}
.lipet-card:hover .lipet-icon-circle,
.lipet-card:focus-within .lipet-icon-circle {
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--on-dark);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.lipet-trust-icon {
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	display: grid;
	place-items: center;
	margin-inline: auto;
}
.lipet-trust-icon svg {
	width: 26px;
	height: 26px;
}