/*
 * Smith Rise & Nourish — styles that theme.json cannot express.
 * Loaded on the front end and inside the editor.
 */

:root {
	/* Header banner logo (wide artwork): fluid between phone and desktop. */
	--srn-logo-width: clamp(13rem, 42vw, 24rem);
	--srn-transition: var(--wp--custom--transition, 200ms ease);
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
video {
	max-width: 100%;
	height: auto;
}

/* Focus: always visible, never hover-only. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--charcoal);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--wp--preset--color--greige);
	color: var(--wp--preset--color--charcoal);
}

/* ---------- Logo ---------- */

.srn-logo img {
	/* The logo JPEG has a pure-white ground; multiply makes it sit on warm white. */
	mix-blend-mode: multiply;
	width: var(--srn-logo-width);
	height: auto;
}

.srn-logo .custom-logo-link {
	display: block;
	line-height: 0;
}

/* ---------- Header ---------- */

.srn-header {
	z-index: 50;
	transition: padding var(--srn-transition), box-shadow var(--srn-transition);
}

/*
 * The template-part wrapper is the element that actually needs to stick: the group
 * inside it has no room to move within a wrapper that is only as tall as itself.
 */
.wp-site-blocks > .wp-block-template-part:has(> .srn-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}

.srn-header .srn-logo,
.srn-header .srn-header-nav {
	width: 100%;
	display: flex;
	justify-content: center;
}

.srn-header .srn-logo .custom-logo-link {
	display: inline-block;
}

.srn-header .srn-logo img {
	transition: width var(--srn-transition);
}

.srn-header > .wp-block-group {
	transition: gap var(--srn-transition);
}

.srn-header.is-scrolled {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
	box-shadow: 0 1px 0 color-mix(in srgb, var(--wp--preset--color--charcoal) 12%, transparent);
}

.srn-header.is-scrolled > .wp-block-group {
	gap: 0.25rem !important;
}

.srn-header.is-scrolled .srn-logo img {
	width: clamp(8rem, 20vw, 11rem);
}

.srn-header .srn-header-nav {
	position: relative;
}

.srn-header .srn-header-nav .wp-block-navigation {
	flex: 0 0 auto;
}

@media (max-width: 599px) {
	.srn-header .srn-header-nav {
		gap: var(--wp--preset--spacing--16);
	}
}

.srn-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.5rem;
}

.srn-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--32) max(1.25rem, 5vw);
}

.srn-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--24);
}

.srn-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 400;
	letter-spacing: -0.01em;
	text-transform: none;
	line-height: 1.1;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* ---------- Eyebrow / labels ---------- */

.is-style-eyebrow,
.srn-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brown);
}

/* ---------- Signature ---------- */

.is-style-signature,
.srn-signature {
	margin-top: clamp(1.5rem, 1rem + 2vw, 3rem);
	margin-bottom: 0;
	color: var(--wp--preset--color--brown);
	font-family: "Segoe Script", "Snell Roundhand", "Bradley Hand", "Brush Script MT", cursive;
	font-size: clamp(3.25rem, 2.4rem + 4vw, 5.75rem);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 1;
	transform: rotate(-2deg);
}

/* ---------- Contact form ---------- */

.srn-contact-content {
	width: 100%;
}

.srn-contact-form {
	margin-top: var(--wp--preset--spacing--48);
}

.srn-contact-form :where(.grunion-field-wrap, .contact-form__field) {
	margin-bottom: var(--wp--preset--spacing--24);
}

.srn-contact-form :where(label, .grunion-field-label) {
	display: block;
	margin-bottom: var(--wp--preset--spacing--8);
	color: var(--wp--preset--color--brown);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.srn-contact-form :where(input[type="email"], input[type="text"], textarea) {
	box-sizing: border-box;
	width: 100%;
	min-height: 3.25rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--wp--preset--color--greige);
	border-radius: 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--charcoal);
	font: inherit;
	transition: border-color var(--srn-transition), outline-color var(--srn-transition);
}

.srn-contact-form textarea {
	min-height: 12rem;
	resize: vertical;
}

.srn-contact-form :where(input[type="email"], input[type="text"], textarea):focus {
	border-color: var(--wp--preset--color--charcoal);
	outline: 2px solid var(--wp--preset--color--charcoal);
	outline-offset: 2px;
}

.srn-contact-form :where(button[type="submit"], input[type="submit"]) {
	min-height: 3rem;
	padding: 0.9rem 1.75rem;
	border: 1px solid var(--wp--preset--color--charcoal);
	border-radius: 0;
	background: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--srn-transition), border-color var(--srn-transition);
}

.srn-contact-form :where(button[type="submit"], input[type="submit"]):hover,
.srn-contact-form :where(button[type="submit"], input[type="submit"]):focus-visible {
	border-color: var(--wp--preset--color--brown);
	background: var(--wp--preset--color--brown);
}

.srn-contact-privacy {
	margin-top: var(--wp--preset--spacing--24);
	color: var(--wp--preset--color--brown);
}

/* ---------- Editorial arrow link (button style) ---------- */

.wp-block-button.is-style-editorial-link .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--charcoal);
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--charcoal);
	border-radius: 0;
	padding: 0.35rem 0;
	letter-spacing: 0.1em;
	transition: color var(--srn-transition), border-color var(--srn-transition);
}

.wp-block-button.is-style-editorial-link .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.6em;
	transition: transform var(--srn-transition);
}

.wp-block-button.is-style-editorial-link .wp-block-button__link:hover,
.wp-block-button.is-style-editorial-link .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--wood);
	border-color: var(--wp--preset--color--wood);
}

.wp-block-button.is-style-editorial-link .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

.wp-block-button .wp-block-button__link {
	transition: background-color var(--srn-transition), color var(--srn-transition), border-color var(--srn-transition);
}

/* ---------- Cards (recipes, favorites) ---------- */

.srn-card {
	position: relative;
}

.srn-card .wp-block-post-featured-image,
.srn-card figure {
	overflow: hidden;
	background: var(--wp--preset--color--secondary);
}

.srn-card .wp-block-post-featured-image img {
	transition: transform 250ms ease, opacity 250ms ease;
	will-change: transform;
}

.srn-card:hover .wp-block-post-featured-image img,
.srn-card:focus-within .wp-block-post-featured-image img {
	transform: scale(1.02);
}

.srn-card .wp-block-post-title a {
	text-decoration: none;
}

.srn-card:hover .wp-block-post-title a,
.srn-card .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.srn-card .wp-block-post-excerpt__more-text {
	display: none;
}

/* ---------- Filter row (Terms List block style) ---------- */

.wp-block-categories.is-style-filter {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--12) var(--wp--preset--spacing--32);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wp-block-categories.is-style-filter li {
	margin: 0;
}

.wp-block-categories.is-style-filter a {
	display: inline-block;
	padding: 0.5rem 0;
	text-decoration: none;
	color: var(--wp--preset--color--brown);
	border-bottom: 1px solid transparent;
	transition: color var(--srn-transition), border-color var(--srn-transition);
}

.wp-block-categories.is-style-filter a:hover,
.wp-block-categories.is-style-filter a:focus-visible {
	color: var(--wp--preset--color--charcoal);
	border-bottom-color: var(--wp--preset--color--charcoal);
}

.wp-block-categories.is-style-filter .is-current a {
	color: var(--wp--preset--color--charcoal);
	border-bottom-color: var(--wp--preset--color--charcoal);
}

/* ---------- Recipe meta row ---------- */

.srn-recipe-meta {
	border-top: 1px solid var(--wp--preset--color--greige);
	border-bottom: 1px solid var(--wp--preset--color--greige);
	padding-block: var(--wp--preset--spacing--16);
}

.srn-meta-item .srn-meta-label {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brown);
}

.srn-meta-item .srn-meta-value {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

/* ---------- Breadcrumb ---------- */

.srn-breadcrumb {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brown);
}

.srn-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.srn-breadcrumb a:hover,
.srn-breadcrumb a:focus-visible {
	text-decoration: underline;
}

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

.srn-hero .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}

@media (min-width: 782px) {
	.srn-hero .wp-block-image img {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Wide editorial image ---------- */

.srn-wide-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

@media (max-width: 599px) {
	.srn-wide-image img {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Utility ---------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--white);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--charcoal);
	display: block;
	font-size: 1rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ---------- Motion preference ---------- */

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

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ---------- Additions: homepage ---------- */

.srn-logo-footer img {
	width: 9.5rem;
}

.srn-image-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--secondary);
}

.srn-portrait-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}

.srn-section-heading .wp-block-buttons {
	margin-bottom: 0.5rem;
}

.srn-favorite-disclosure:empty {
	display: none;
}

.srn-social-follow h2 a {
	text-decoration: none;
}

.srn-social-follow h2 a:hover,
.srn-social-follow h2 a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.1em;
}