/* ==========================================================================
   Doxa Print — theme styles
   Colors come from theme.json presets, so the dark default and the
   "Linen (light)" style variation both work without extra CSS.
   ========================================================================== */

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

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

::selection {
	background: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--ink);
}

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

/* Header, main and footer butt together; sections carry their own padding. */
body .wp-site-blocks > * { margin-block: 0; }

/* ---- Header ---------------------------------------------------------------- */
.dp-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .dp-site-header { top: var(--wp-admin--admin-bar--height, 0); }

.dp-site-header .dp-logo { flex-shrink: 0; }
.dp-site-header .dp-logo img {
	height: clamp(2.75rem, 2rem + 2vw, 4rem);
	width: auto;
}

.dp-site-header .wp-block-navigation a {
	padding-block: 0.5rem;
	border-bottom: 1px solid transparent;
	transition: border-color 220ms var(--wp--custom--ease);
}
.dp-site-header .wp-block-navigation a:hover,
.dp-site-header .wp-block-navigation .current-menu-item > a,
.dp-site-header .wp-block-navigation a[aria-current="page"] {
	border-color: var(--wp--preset--color--parchment);
}
.dp-site-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--brand) !important;
	color: var(--wp--preset--color--linen) !important;
	padding: var(--wp--preset--spacing--60) var(--wp--custom--gutter);
}
.dp-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--sm);
}

/* ---- Footer ---------------------------------------------------------------- */
.dp-site-footer a { text-decoration: none; }
.dp-site-footer a:hover { text-decoration: underline; }
.dp-site-footer .wp-block-navigation { text-transform: none; letter-spacing: 0; font-size: var(--wp--preset--font-size--sm); font-weight: 400; }

/* ---- Block style: Matted print (core/image) -------------------------------
   A photo presented like a physical print: white mat plus soft shadow.     */
.wp-block-image.is-style-print img {
	background: var(--wp--custom--mat);
	padding: clamp(8px, 2vw, 20px);
	box-shadow: var(--wp--preset--shadow--print);
}

/* ---- Block style: Shop grid (core/gallery) --------------------------------
   Uniform 4:5 tiles with caption revealed on hover (always on touch).       */
.wp-block-gallery.is-style-shop-grid.has-nested-images figure.wp-block-image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
.wp-block-gallery.is-style-shop-grid.has-nested-images figure.wp-block-image img {
	height: 100%;
	object-fit: cover;
	transition: transform 420ms var(--wp--custom--ease);
}
.wp-block-gallery.is-style-shop-grid.has-nested-images figure.wp-block-image:hover img {
	transform: scale(1.03);
}
.wp-block-gallery.is-style-shop-grid.has-nested-images figure.wp-block-image figcaption {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	background: linear-gradient(to top, rgb(31 36 25 / 0.8), transparent);
	color: var(--wp--preset--color--linen);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	text-align: left;
	line-height: 1.2;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 220ms var(--wp--custom--ease), transform 220ms var(--wp--custom--ease);
}
.wp-block-gallery.is-style-shop-grid.has-nested-images figure.wp-block-image:is(:hover, :focus-within) figcaption {
	opacity: 1;
	transform: none;
}
@media (hover: none) {
	.wp-block-gallery.is-style-shop-grid.has-nested-images figure.wp-block-image figcaption { opacity: 1; transform: none; }
}
.wp-block-gallery.is-style-shop-grid figcaption a { color: inherit; text-decoration: none; }

/* ---- Block style: Wordmark caps (core/heading) ---------------------------- */
.wp-block-heading.is-style-wordmark {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wordmark);
	font-weight: 500;
}

/* ---- Block style: Eyebrow (core/paragraph) -------------------------------- */
p.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ---- Block style: Leaf ornament (core/separator) ------------------------- */
.wp-block-separator.is-style-leaf {
	border: 0 !important;
	height: 20px;
	max-width: 22rem;
	margin-inline: auto;
	opacity: 1;
	color: var(--wp--preset--color--parchment);
	background:
		linear-gradient(currentColor, currentColor) left center / calc(50% - 22px) 1px no-repeat,
		linear-gradient(currentColor, currentColor) right center / calc(50% - 22px) 1px no-repeat;
	position: relative;
}
.wp-block-separator.is-style-leaf::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M12 21c-4-3-6-7-5-11 1-3.5 3.5-5.5 5-7 1.5 1.5 4 3.5 5 7 1 4-1 8-5 11Z'/%3E%3Cpath d='M12 21V8'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M12 21c-4-3-6-7-5-11 1-3.5 3.5-5.5 5-7 1.5 1.5 4 3.5 5 7 1 4-1 8-5 11Z'/%3E%3Cpath d='M12 21V8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Block style: Panel (core/group) -------------------------------------- */
.wp-block-group.is-style-panel {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--60);
}

/* ---- Buttons: parchment on brand bands stays parchment in both styles ---- */
.has-brand-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.has-brand-deep-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--parchment);
	border-color: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--ink);
}
.has-brand-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--linen);
	border-color: rgb(244 240 230 / 0.5);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgb(127 127 127 / 0.1);
}

/* Headings and links on the olive band are always light */
.has-brand-background-color :where(h1, h2, h3, h4, a:not(.wp-block-button__link)),
.has-brand-deep-background-color :where(h1, h2, h3, h4, a:not(.wp-block-button__link)) {
	color: var(--wp--preset--color--linen);
}

/* ---- Forms (comments, search, and plugin forms that don't style their own) */
:where(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="password"], select, textarea) {
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	font: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
}
:where(input, select, textarea):focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
}
::placeholder { color: var(--wp--preset--color--muted); opacity: 0.8; }

/* ---- Post cards --------------------------------------------------------- */
.dp-post-card .wp-block-post-featured-image img { aspect-ratio: 4 / 3; object-fit: cover; }

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