/*
Theme Name: Pepper in Salt
Theme URI: https://pepperinsalt.com
Author: Kacy Culpepper
Author URI: https://pepperinsalt.com
Description: Hand-built block theme for the Pepper in Salt brand. Standard stack, distinct flavor — the salt is the standard, the pepper is the point.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pepperinsalt
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, one-column
*/

/* Tokens theme.json can't express. */
:root {
	--pis-radius: 14px;
	--pis-hairline: color-mix(in srgb, var(--wp--preset--color--chrome) 35%, transparent);
	--pis-surface: color-mix(in srgb, var(--wp--preset--color--cream) 5%, var(--wp--preset--color--peppercorn));
}

::selection {
	background: var(--wp--preset--color--chili);
	color: var(--wp--preset--color--salt);
}

/*
 * Template-part wrappers step out of layout so the sticky header
 * pins to the viewport instead of the height of its own wrapper.
 */
.wp-block-template-part {
	display: contents;
}

/* Bento card — the house component. */
.pis-card {
	background: var(--pis-surface);
	border: 1px solid var(--pis-hairline);
	border-radius: var(--pis-radius);
	padding: var(--wp--preset--spacing--50);
	transition: border-color 0.2s ease, translate 0.2s ease;
}

.pis-card:hover {
	border-color: var(--wp--preset--color--ember);
	translate: 0 -3px;
}

/* The pepper in the grid: one hot card per group, no more. */
.pis-card--hot {
	border-top: 3px solid var(--wp--preset--color--chili);
}

/* Mono eyebrow. */
.pis-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Big stat number. */
.pis-stat {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
	margin: 0;
}

/* Sticky glass header — the one glass moment per page. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background: color-mix(in srgb, var(--wp--preset--color--peppercorn) 82%, transparent);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.site-header.is-stuck {
	border-bottom-color: var(--pis-hairline);
}

/* Focus + reduced motion: non-negotiable. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--glass);
	outline-offset: 3px;
	border-radius: 4px;
}

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

/* Anchored headings clear the sticky glass header. */
html {
	scroll-behavior: smooth;
}

[id] {
	scroll-margin-top: 6rem;
}

/* Fallback site logo, rendered until a custom logo is uploaded. */
.pis-logo-fallback svg {
	display: block;
	width: 44px;
	height: 44px;
}

/* Stem badge — 'available' pills. Sparingly: one per group. */
.pis-badge {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--wp--preset--color--stem);
	color: var(--wp--preset--color--salt);
	border-radius: 999px;
	padding: 0.25rem 0.75rem;
}

/* Mono price line on plan cards. */
.pis-price {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}