/**
 * am-extracted.css
 *
 * Verbatim port of the Additional CSS that lived in the Site Editor Global Styles
 * record (DB post `wp-global-styles-frost`, ID 4672). Promoted into a version-controlled
 * file so the child theme renders identically on activation. Every selector from the DB
 * record is reproduced here. Do not "improve" — this is an extraction, not a redesign.
 *
 * NOTE: Editor-only selectors (.block-editor-*, .editor-styles-wrapper, .post-type-am_product)
 * are retained for fidelity; they are inert on the front end. The CPT-editor width overrides
 * are also enqueued by the Products CPT plugin in the admin, so these duplicate harmlessly.
 */

.temp-content {
	display: none;
}

.block-editor-block-list__layout.is-root-container > .alignfull {
	max-width: none;
}

/* Make Products CPT behave like Pages/Posts in editor */
.post-type-am_product .editor-styles-wrapper {
	max-width: none;
}

.post-type-am_product .block-editor-writing-flow {
	max-width: none;
}

.post-type-am_product .block-editor-block-list__layout.is-root-container {
	max-width: none;
}

.am-spec-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;  /* left anchor */
	gap: 28px 48px;               /* row gap / column gap */
}

@media (min-width: 900px) {
	.am-spec-row {
		justify-content: space-between; /* spreads across, still left-anchored by container */
		gap: 0;
	}
}

/* Spec row (5 -> 3 -> 2 -> 1) */
.am-spec-row.is-layout-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 40px);
	text-align: center;
	align-items: center;
}

.am-spec-row p {
	margin: 0;
	font-weight: 600;
	letter-spacing: .02em;
	font-size: clamp(14px, 1.1vw, 18px);
	line-height: 1.5;
}

@media (max-width: 900px) {
	.am-spec-row.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.am-spec-section h2.am-section {
		font-size: 25px !important;
	}
}
@media (max-width: 600px) {
	.am-spec-row.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
	.am-spec-row.is-layout-grid { grid-template-columns: 1fr; }
}

/* Resources grid: clamp post titles to 2 lines */
.am-resources-loop .wp-block-post-title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* Keep card heights consistent even when titles differ */
.am-resources-loop .wp-block-post-title {
	min-height: 2.6em; /* tweak if needed */
}

body {
	font-family: var(--wp--preset--font-family--inter), san-serif;
}

figure.site-logo {
	display: flex;
}

figure.site-logo a {
	line-height: 1;
}

h1.balance-text, h2.balance-text, h3.balance-text, h4.balance-text, h5.balance-text, h6.balance-text, p.balance-text {
	text-wrap: balance !important;
}

h1, h2, h3, h4, h5, h6, p {
	text-wrap: pretty;
}

li {
	text-wrap: pretty;
}

b, strong, th {
	font-weight: 600 !important;
}

h3.wp-block-accordion-heading {
	font-size: var(--wp--preset--font-size--large);
	font-size: 20px;
	font-weight: 500;
}

li.choosing-middle {
	margin-top: 22px;
	margin-bottom: 22px;
}

ul.feature-bullets li {
	line-height: 1.4;
	margin-bottom: 15px;
}

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	text-transform: none;
	font-weight: 500;
	letter-spacing: 0.5px;
}

.site-footer .wp-block-image img {
	opacity: 0.7;
}

.site-footer p,
.site-footer h4 {
	opacity: 0.7;
}

.site-footer a {
	text-decoration: none;
	opacity: 0.7;
}

.site-footer a:hover {
	text-decoration: underline;
	opacity: 1;
}

.site-footer ul {
	padding-left: 0;
	list-style: none;
}

.nf-form-content button, .nf-form-content input[type=button]:hover, .nf-form-content input[type=submit]:hover,
.nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit] {
	background: var(--wp--preset--color--primary);
	border: 0;
	background-color: var(--wp--preset--color--primary);
	border-radius: 5px;
	border-width: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	font-weight: 600;
	letter-spacing: inherit;
	line-height: 1 !important;
	padding-top: 15px;
	padding-right: 30px;
	padding-bottom: 15px;
	padding-left: 30px;
	text-decoration: none;
	text-transform: none;
}

.nf-form-cont.open-house-form nf-form-content {
	padding: 0;
	margin: 0 auto;
}

.nf-form-cont.open-house-form .nf-form-fields-required {
	display: none;
}

@media (min-width: 768px) {
	.000mobile-only {
		display: none !important;
	}
}

@media (max-width: 768px) {
	h2.am-section {
		font-size: 38px !important;
	}

	h3.am-section {
		font-size: 26px !important;
	}

	p.am-section,
	li.am-section {
		font-size: 16px !important;
		line-height: 1.65;
	}
}

@media (max-width: 781px) {
	.hero-buttons {
		align-items: flex-start;
	}

	.hero-buttons .wp-block-button {
		width: min(100%, 275px);
	}

	.hero-buttons .wp-block-button__link {
		width: 100%;
		box-sizing: border-box;
		justify-content: center;
		text-align: center;
	}
}

/* Equal-width stacked button groups — multi-button groups only.
   When a wp:buttons group has 2+ buttons and stacks at the mobile breakpoint, give every
   button full-container width so the stacked top/bottom edges align (Tracker hero, homepage
   hero, and any future dual-CTA hero / final CTA). Same 781px breakpoint as .hero-buttons
   above, for consistency. The :has(> .wp-block-button + .wp-block-button) guard matches ONLY
   groups with two or more buttons — a single/lone CTA (e.g. a final-CTA "Shop on Etsy", the
   dark-band "Get the Free Kit") is intentionally NOT matched and keeps its content width.
   Width + alignment only — no change to button color, height, or style. */
@media (max-width: 781px) {
	.wp-block-buttons:has(> .wp-block-button + .wp-block-button) {
		align-items: stretch;
	}

	.wp-block-buttons:has(> .wp-block-button + .wp-block-button) > .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons:has(> .wp-block-button + .wp-block-button) > .wp-block-button > .wp-block-button__link {
		width: 100%;
		box-sizing: border-box;
		justify-content: center;
		text-align: center;
	}
}

/* =====================================================================
   CHECKPOINT 2 — APPROVED COLOR CHANGE (Section 5A) — dark-button exception
   The palette shifts (#171717 -> #101013 contrast, #f97316 -> #F08C2A primary)
   and the near-black CTA-text ROLE DEFAULT now live in theme.json
   (styles.elements.button.color.text = #101013). That makes near-black the
   default for filled buttons — correct on amber CTAs everywhere.
   The one exception is a filled button on the dark (contrast) background:
   the nav "Shop on Etsy" button (backgroundColor:contrast -> has-contrast-
   background-color). Near-black on near-black is invisible, so it gets white
   text. Scoped to the dark background only — NOT a universal filled rule.
   The dark-band outline "Get the Free Kit" button is untouched: core's
   is-style-outline rule keeps its text at currentColor (white from the band).
   ===================================================================== */
.wp-block-button__link.has-contrast-background-color {
	color: #ffffff;
}

/* =====================================================================
   Job-grouped product cards (category grids) — equal-height, CTA pinned bottom.

   Root cause of the ragged Open House grid: WordPress core sets
   `.wp-block-columns{align-items:normal!important}` AND `flex-wrap:wrap!important`,
   so the neutral-background columns size to their OWN content. When card
   descriptions differ in length the cards render unequal heights with ragged
   bottoms, and the "Shop on Etsy" buttons land at different vertical positions
   (the long-copy card's button drops well below its neighbours'). Nothing is
   clipped — the cards just don't form an aligned row.

   Fix (no fixed height — a stretch floor, never a ceiling, so all content always
   renders): stretch the row's columns to equal height, make each card a flex
   column, and push the lone amber Etsy button (the buttons block) to the bottom
   with margin-block-start:auto so ragged copy still yields aligned card bottoms +
   aligned, always-visible CTAs. ("Learn more" sits up under the description.)
   Scoped to `.am-card-grid` (the three Open House job rows) so the FAQ and
   before/during/after columns are untouched. Two !important uses are required and
   intentional: one to beat core's `align-items:normal!important`, one to beat the
   buttons' inline `margin-top`. The standard for future lane category grids
   (Listing Marketing, Local Marketing). */
.wp-block-columns.am-card-grid {
	align-items: stretch !important;
}

.wp-block-columns.am-card-grid > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.wp-block-columns.am-card-grid > .wp-block-column > .wp-block-buttons {
	margin-block-start: auto;
	padding-top: var(--wp--preset--spacing--x-small);
}

/* "Learn more" — a restrained near-black underlined reading link that sits directly under the
   card description (a reading affordance: continue into the product page). It is separate from
   the lone amber "Shop on Etsy" commit button pinned at the card bottom. Orange stays reserved
   for that single Etsy button per card; "Learn more" is never a button. */
.am-learn-more a {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

.am-learn-more a:hover {
	text-decoration: none;
}

/* 2+1 lone card (Run the Event): match the two-up card width exactly — half the row minus half
   the column gap, identical to what the auto-distributed cards get in a full two-up row. Without
   this a single column flex-grows to full width (and the previous empty-column pairing rendered
   the lone card slightly wider than its row-mates). Scoped to >=782px; below that it stacks
   full-width like every other card. */
@media (min-width: 782px) {
	.wp-block-columns.am-card-grid.am-card-grid-solo > .wp-block-column {
		flex: 0 0 calc(50% - (var(--wp--preset--spacing--small) / 2));
		max-width: calc(50% - (var(--wp--preset--spacing--small) / 2));
	}
}

/* =====================================================================
   Product pages — de-band the middle sections (single white field + whitespace rhythm).

   Why: alternating gray/white full-bleed backgrounds organize the homepage (tall sections
   that fill the viewport) but on the SHORT product-page sections they render as thin
   horizontal stripes — a zebra pattern that fragments the page. So on product pages only,
   the middle sections run on one white field and the section HEADINGS carry the structural
   division. The two intentional color anchors stay: the light-gray HERO at top and the dark
   final-CTA band at bottom.

   Scoped to `.single-am_product` so the homepage and the category archive are untouched.
   The hero is the neutral group that contains the `.am-product-hero` two-column block, so
   `:not(:has(.am-product-hero))` keeps it gray while every other neutral (middle) section goes
   transparent. The final-CTA band is `has-contrast-background-color` (not neutral), so it's
   unaffected. The gap between two de-banded sections is already ~2× x-large
   (clamp(60px,10vw,100px)) of whitespace, which reads as distinct sections on its own — so no
   padding step-up or divider rule was needed (validated on the long Signs/Tracker pages). */
.single-am_product .wp-block-group.has-neutral-background-color:not(:has(.am-product-hero)) {
	background-color: transparent !important;
}