/* Udderly Crafty Creations — "County Fair" theme custom styles */

/* ---------- Sticky footer: keeps footer at the bottom of the viewport on short pages ---------- */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.site-main {
	flex: 1 0 auto;
}
/* Generic sticky-footer fix: various WooCommerce templates (cart, single
   product, my-account...) each wrap their actual content differently —
   sometimes it's <main class="site-main"> directly, sometimes WooCommerce
   injects an extra wrapper div around it. Rather than patch every template
   individually, just grow whatever the real direct child between header
   and footer happens to be. */
.wp-site-blocks > *:not(header.wp-block-template-part):not(footer.wp-block-template-part) {
	flex: 1 0 auto;
}
.site-header,
.site-footer {
	flex-shrink: 0;
}

/* ---------- Header: sticky, flush against main (no default block-gap) ----------
   WordPress wraps the header template part in its own <header class="wp-block-template-part">,
   so the actual flex child of .wp-site-blocks isn't .site-header itself but that wrapper.
   Sticky positioning has to be applied to the direct flex child to work reliably. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky !important;
	top: 0 !important;
	z-index: 100 !important;
}
.site-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 100 !important;
}
.site-main {
	margin-top: 0 !important;
}

.site-header .wp-block-navigation-item .wp-block-navigation-item__content {
	font-weight: 600;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	text-decoration: none !important;
	transition: border-color 0.15s ease;
}
.site-header .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.site-header .wp-block-navigation-item:focus-visible .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--rust);
	text-decoration: none !important;
}

/* Active/current page indicator in the main nav */
.site-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--rust);
	border-bottom-color: var(--wp--preset--color--rust);
}

/* Footer nav: colour change only, no underline (avoids the same double-line issue) */
.site-footer .wp-block-navigation-item__content {
	text-decoration: none !important;
	transition: color 0.15s ease;
}
.site-footer .wp-block-navigation-item:hover .wp-block-navigation-item__content {
	color: var(--wp--preset--color--gold) !important;
	text-decoration: none !important;
}
.site-header {
	box-shadow: 0 4px 10px rgba(58, 44, 31, 0.08);
}

/* Enlarge the logo without growing the header row: oversize the image, then
   pull it back in vertically so it doesn't add to the flex row's height. */
.site-header__logo img {
	margin-top: -12px;
	margin-bottom: -12px;
}

/* ---------- Hero background (applied via "site-hero" block class) ---------- */
.site-hero {
	background-image: url('../img/hero-bg.svg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.site-hero .eyebrow-pill {
	display: inline-block;
	padding: 6px 18px;
	border: 1px solid var(--wp--preset--color--moss);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--moss);
}

/* ---------- Category / label pills ---------- */
.cat-tag {
	display: inline-block;
	background: var(--wp--preset--color--moss);
	color: var(--wp--preset--color--paper);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.03em;
	padding: 3px 12px;
	border-radius: 999px;
}

/* ---------- Shop category grid (4-wide) ---------- */
.shop-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
@media (max-width: 980px) {
	.shop-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.shop-grid {
		grid-template-columns: 1fr;
	}
}
.shop-tile {
	margin: 0 !important;
}

/* ---------- Category/subcategory archive pages: breadcrumbs is the first
   child of the content area, and core resets its top margin to 0 via the
   *logical* property margin-block-start, not margin-top — setting only
   margin-top here left margin-block-start's 1.2rem still winning. Set
   both explicitly so neither the physical nor logical rule can override it. ---------- */
.shop-archive-content {
	margin-top: var(--wp--preset--spacing--50) !important;
	margin-block-start: var(--wp--preset--spacing--50) !important;
}
/* On single product pages, WooCommerce injects an extra wrapper div
   (.woocommerce.product) around <main> that isn't in the template file —
   that wrapper is the true flex child sitting flush under the sticky
   header, so it needs its own default spacing reset to zero. */
:has(> .shop-archive-content) {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* ---------- Shop page: categories grouped with subcategory tiles ---------- */
.shop-cat-group {
	margin-bottom: 48px;
}
.shop-cat-group:last-child {
	margin-bottom: 0;
}
.shop-cat-group__title {
	margin-bottom: 20px;
}
.shop-cat-group__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.shop-cat-group__title a:hover {
	color: var(--wp--preset--color--rust);
}
.shop-subcat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
@media (max-width: 760px) {
	.shop-subcat-grid {
		grid-template-columns: 1fr;
	}
}
.shop-subcat-tile {
	display: flex;
	align-items: stretch;
	min-height: 96px;
	gap: 16px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	border: 1px solid rgba(58, 44, 31, 0.14);
	border-radius: 14px;
	overflow: hidden;
	background: var(--wp--preset--color--card);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.shop-subcat-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(58, 44, 31, 0.12);
}
.shop-subcat-tile__image {
	display: block;
	flex: 0 0 96px;
	width: 96px;
	background-size: cover;
	background-position: center;
	background-color: var(--wp--preset--color--paper);
}
.shop-subcat-tile__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 14px 16px 14px 0;
	min-width: 0;
}
.shop-subcat-tile__label {
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.3;
}
.shop-subcat-tile__desc {
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	opacity: 0.7;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Dashed-inset "farmhouse card" treatment ---------- */
.card-dashed {
	position: relative;
	background: var(--wp--preset--color--card);
	border: 1px solid rgba(58, 44, 31, 0.14);
	border-radius: 16px;
}
.card-dashed::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px dashed rgba(58, 44, 31, 0.22);
	border-radius: 11px;
	pointer-events: none;
}

/* ---------- Buttons ---------- */
.wp-block-button__link {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(58, 44, 31, 0.18);
}

/* ---------- WooCommerce product cards ---------- */
ul.products li.product,
.wc-block-product-template li.wc-block-product,
.wc-block-grid__product,
.wc-block-components-product-image {
	border-radius: 14px;
}
ul.products li.product,
.wc-block-product-template li.wc-block-product,
.wc-block-grid__product {
	background: var(--wp--preset--color--card);
	border: 1px solid rgba(58, 44, 31, 0.14);
	padding: 14px;
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
ul.products li.product::before,
.wc-block-product-template li.wc-block-product::before,
.wc-block-grid__product::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px dashed rgba(58, 44, 31, 0.22);
	border-radius: 9px;
	pointer-events: none;
}
ul.products li.product:hover,
.wc-block-product-template li.wc-block-product:hover,
.wc-block-grid__product:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(58, 44, 31, 0.12);
}
ul.products li.product img,
.wc-block-components-product-image img,
.wc-block-grid__product-image img {
	border-radius: 10px;
}
/* Fill the square image area properly instead of sitting tiny in empty
   space — matters most for WooCommerce's placeholder icon on products
   that don't have a real photo yet. !important guards against the same
   inline-style-after-load behaviour seen on the single product gallery. */
.wc-block-components-product-image,
.wc-block-grid__product-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.wc-block-components-product-image img,
.wc-block-grid__product-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
.product-cat-pill {
	/* Centered regardless of the post-terms block's own text-align, which
	   doesn't reliably pick up its "centered" setting on this block type. */
	display: table;
	margin: 10px auto var(--wp--style--block-gap, 1.2rem);
	background: var(--wp--preset--color--moss);
	border-radius: 999px;
	padding: 3px 12px;
}
.product-cat-pill a {
	color: var(--wp--preset--color--paper) !important;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.03em;
	text-decoration: none !important;
}
.wc-block-grid__product-title {
	color: var(--wp--preset--color--ink);
}
.wc-block-grid__product-price {
	color: var(--wp--preset--color--rust);
}
.wc-block-grid__products {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding: 0;
	margin: 0;
	list-style: none;
}
.wc-block-grid__products .wc-block-grid__product {
	flex: 1 1 calc(25% - 18px);
}
@media (max-width: 980px) {
	.wc-block-grid__products .wc-block-grid__product {
		flex: 1 1 calc(50% - 12px);
	}
}
@media (max-width: 560px) {
	.wc-block-grid__products .wc-block-grid__product {
		flex: 1 1 100%;
	}
}

/* ---------- Native select dropdowns (e.g. shop sort order) ---------- */
select {
	appearance: none;
	-webkit-appearance: none;
	display: inline-block;
	padding: 10px 36px 10px 14px;
	border: 1.5px solid rgba(58, 44, 31, 0.22);
	border-radius: 10px;
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233A2C1F' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}
select:focus {
	outline: none;
	border-color: var(--wp--preset--color--rust);
	box-shadow: 0 0 0 3px rgba(179, 78, 39, 0.15);
}

.onsale,
.wc-block-components-product-sale-badge {
	background-color: var(--wp--preset--color--rust) !important;
	color: var(--wp--preset--color--paper) !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
}

/* Out of stock / sold out badge, where theme markup allows styling hook */
.stock.out-of-stock {
	color: var(--wp--preset--color--rust);
	font-weight: 700;
	background: rgba(179, 78, 39, 0.1);
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
}

/* ---------- Contact page: split layout with contact-channel rows ---------- */
.contact-split {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
	/* !important needed: this block is now the first child of the page's
	   constrained content area, and core resets a first child's top margin
	   to 0 with equal specificity, so a plain rule here gets silently lost. */
	margin-top: var(--wp--preset--spacing--50) !important;
}
@media (max-width: 760px) {
	.contact-split {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}
.contact-eyebrow {
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
	margin: 0 0 6px;
}
.contact-rows {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 28px;
}
.contact-row {
	display: flex;
	align-items: center;
	gap: 14px;
}
.contact-row .icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	flex-shrink: 0;
	color: var(--wp--preset--color--paper);
}
.contact-row .icon-badge svg {
	width: 16px;
	height: 16px;
}
.contact-channel-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--moss);
	margin-bottom: 2px;
}
.contact-value {
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.contact-value:hover {
	color: var(--wp--preset--color--rust);
}

/* ---------- WooCommerce My Account ----------
   Core WooCommerce CSS floats the nav/content (30%/68%) inside the
   .woocommerce wrapper div; override that with flex. Left/right margin
   must stay auto — that's what centers this constrained block; a blanket
   margin:0 here previously cancelled that and pinned it to the left edge. */
.woocommerce-account .woocommerce {
	display: flex !important;
	gap: 32px !important;
	align-items: flex-start !important;
	flex-wrap: wrap !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: var(--wp--preset--spacing--50) !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
}
@media (max-width: 760px) {
	.woocommerce-account .woocommerce {
		flex-direction: column !important;
	}
}

.woocommerce-MyAccount-navigation {
	float: none !important;
	width: auto !important;
	flex: 0 0 230px;
	background: var(--wp--preset--color--card);
	border: 1px solid rgba(58, 44, 31, 0.14);
	border-radius: 16px;
	padding: 12px;
}
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.woocommerce-MyAccount-navigation li {
	margin: 0;
}
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 14px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.woocommerce-MyAccount-navigation li a:hover {
	background: rgba(179, 78, 39, 0.08);
	color: var(--wp--preset--color--rust);
}
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wp--preset--color--rust);
	color: var(--wp--preset--color--paper);
}

.woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	flex: 1 1 480px;
	background: var(--wp--preset--color--card);
	border: 1px solid rgba(58, 44, 31, 0.14);
	border-radius: 18px;
	padding: 32px;
}
.woocommerce-MyAccount-content table.shop_table {
	border-color: rgba(58, 44, 31, 0.14);
}
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content textarea,
.woocommerce-MyAccount-content select {
	border: 1.5px solid rgba(58, 44, 31, 0.22);
	border-radius: 10px;
	padding: 10px 14px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button.button {
	background-color: var(--wp--preset--color--rust);
	color: var(--wp--preset--color--paper);
	border-radius: 999px;
	border: none;
	font-weight: 700;
	padding: 11px 24px;
}
.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content button.button:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* ---------- Login / Create Account (logged-out My Account page) ---------- */
.woocommerce-account .u-columns.col2-set {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	width: 100%;
}
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 {
	flex: 1 1 320px;
	float: none;
	width: auto;
	background: var(--wp--preset--color--card);
	border: 1px solid rgba(58, 44, 31, 0.14);
	border-radius: 18px;
	padding: 32px;
}
.woocommerce-account .u-columns h2 {
	margin-top: 0;
}
.woocommerce-form-row {
	margin-bottom: 18px;
}
.woocommerce-form-row label {
	display: block;
	font-weight: 700;
	font-size: 0.85rem;
	margin-bottom: 6px;
	color: var(--wp--preset--color--ink);
}
.woocommerce-form-row .required {
	color: var(--wp--preset--color--rust);
}
.woocommerce-form input.input-text {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid rgba(58, 44, 31, 0.22);
	border-radius: 10px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.95rem;
}
.woocommerce-form input.input-text:focus {
	outline: none;
	border-color: var(--wp--preset--color--rust);
	box-shadow: 0 0 0 3px rgba(179, 78, 39, 0.15);
}
.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	font-size: 0.9rem;
}
.woocommerce-LostPassword {
	margin-top: 14px;
	font-size: 0.85rem;
}
.woocommerce-privacy-policy-text {
	margin-top: 14px;
	font-size: 0.78rem;
	opacity: 0.7;
}
@media (max-width: 700px) {
	.woocommerce-account .u-columns.col2-set {
		flex-direction: column;
	}
}

/* ---------- Single product page ---------- */
/* PhotoSwipe lightbox (the gallery image zoom/expand feature) — swap its
   default pure-black backdrop for the site's dark "ink" brown instead. */
.pswp__bg {
	background-color: rgba(0, 0, 0, 0.85) !important;
}
form.cart {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
/* !important throughout: WooCommerce's own block CSS has a more specific
   rule (.wp-block-woocommerce-add-to-cart-form .quantity .qty) that sets
   box-sizing:content-box and a fixed em-based width, which was silently
   overriding this on standard (non-variable) products specifically. */
.quantity .qty {
	box-sizing: border-box !important;
	width: 70px !important;
	height: 48px !important;
	padding: 0 12px !important;
	border: 1.5px solid rgba(58, 44, 31, 0.22);
	border-radius: 10px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.95rem;
	line-height: normal;
	text-align: center;
}
.quantity .qty:focus {
	outline: none;
	border-color: var(--wp--preset--color--rust);
	box-shadow: 0 0 0 3px rgba(179, 78, 39, 0.15);
}

/* Reviews is the only remaining tab (Description/Additional Info were
   removed above), so the tab switcher is pointless — hide it and let the
   review count that WooCommerce already renders into the tab label ("Reviews
   (3)") get copied onto the section heading instead, via the tiny script
   below. Nothing about comment/review submission itself is touched. */
.woocommerce-tabs ul.tabs {
	display: none;
}
.woocommerce-Tabs-panel--reviews {
	display: block !important;
}
/* Make the gallery image (including WooCommerce's placeholder icon) fill
   its column width instead of sitting tiny and centered in empty space —
   this also means real photos will size in properly once they're added. */
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image--placeholder {
	width: 100%;
	/* WooCommerce puts a flat 1px grey border on the placeholder wrapper by
	   default, which looks odd once the image inside has rounded corners. */
	border: none !important;
}
.woocommerce-product-gallery__wrapper img,
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image--placeholder img {
	/* !important: WooCommerce's gallery JS (Flexslider/Zoom) sets inline
	   width/height styles on this image after page load, which would
	   otherwise beat a plain external rule. */
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 14px;
}

/* ---------- Footer logo badge: clip the square logo image to the circular frame ---------- */
.footer-logo-box {
	overflow: hidden;
}

/* ---------- Page title headings ---------- */
.wp-block-heading.has-text-color {
	margin-top: var(--wp--preset--spacing--40);
}

/* ---------- Event cards (Where to Find Us Next) ---------- */
.wp-block-post-template.is-layout-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
@media (max-width: 680px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

.event-card {
	position: relative;
	color: var(--wp--preset--color--paper);
}
/* Makes the whole card clickable when an Event Link is set, via an
   invisible link covering the card — the card itself isn't an <a> since
   it's built from separate title/content blocks. */
.event-card__stretched-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.event-card__info {
	font-size: 12px;
	font-style: italic;
	opacity: 0.85;
}
.wp-block-post-template > li:nth-child(3n+1) .event-card { background-color: var(--wp--preset--color--sage-green); }
.wp-block-post-template > li:nth-child(3n+2) .event-card { background-color: var(--wp--preset--color--dusty-pink); }
.wp-block-post-template > li:nth-child(3n+3) .event-card { background-color: var(--wp--preset--color--dusty-blue); }

.event-card__date {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.1;
	margin: 0 0 4px !important;
	color: inherit !important;
}
.event-card__details {
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.9;
}
.event-card__details p {
	margin: 0;
}

/* ---------- Contact form ---------- */
.jetpack-contact-form-container {
	max-width: 560px !important;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	background: var(--wp--preset--color--card) !important;
	border: 1px solid rgba(58, 44, 31, 0.14) !important;
	border-radius: 18px !important;
	padding: 32px !important;
	margin-top: 0 !important;
	margin-bottom: 24px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	align-items: stretch !important;
	--jetpack--contact-form--border: none;
	--jetpack--contact-form--input-height: auto;
}
.jetpack-contact-form-container::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px dashed rgba(58, 44, 31, 0.2);
	border-radius: 13px;
	pointer-events: none;
}
.jetpack-contact-form-container form {
	width: 100% !important;
}
.jetpack-contact-form-container .grunion-field-wrap {
	width: 100% !important;
	flex: 1 1 100% !important;
}
.jetpack-contact-form-container .wp-block-button {
	margin-top: 12px;
}
.grunion-field-label {
	display: block;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin-bottom: 6px;
	font-size: 14px;
}
.grunion-field-label .required {
	color: var(--wp--preset--color--rust);
	font-weight: 400;
}
input.grunion-field,
textarea.grunion-field {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 12px 16px;
	border: 1.5px solid rgba(58, 44, 31, 0.22);
	border-radius: 10px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 15px;
	margin-bottom: 20px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input.grunion-field:focus,
textarea.grunion-field:focus {
	outline: none;
	border-color: var(--wp--preset--color--rust);
	box-shadow: 0 0 0 3px rgba(179, 78, 39, 0.15);
}
textarea.grunion-field {
	min-height: 140px;
	resize: vertical;
}

/* ---------- Footer ---------- */
.site-footer a:hover {
	color: var(--wp--preset--color--gold) !important;
}
.footer-legal-links a {
	color: inherit;
	text-decoration: none;
}
.footer-legal-links a:hover {
	text-decoration: underline;
}