/* ============================================================
   George Walker — pattern one-offs (home + content pages) and
   the Gravity Forms button override. Loads last, sitewide.
   Minimal bespoke bits only; everything else is native blocks +
   theme.json. Preset variables only. Sibling sheets: global.css,
   header.css, shop.css.
   ============================================================ */

/* ============================================================
   Home page patterns (patterns/home-*.php) — bespoke bits that
   core blocks + theme.json can't express cleanly.
   ============================================================ */

/* --- Home: hero floating "milled on site" card (scoped to gw-hero-media) --- */
.gw-hero-media { position: relative; }
.gw-hero-card {
	width: fit-content;
	box-shadow: 0 8px 24px -10px rgba(28, 29, 24, .18), 0 2px 6px rgba(28, 29, 24, .06);
}
@media (min-width: 782px) {
	.gw-hero-card {
		position: absolute;
		bottom: -22px;
		left: -22px;
		margin: 0;
	}
}
.gw-hero-card p { margin: 0; }

/* placeholder figures: hold their aspect-ratio and centre the label */
.gw-hero-figure,
.gw-delivery-figure {
	display: grid;
	place-items: center;
	overflow: hidden;
	box-shadow: 0 30px 60px -28px rgba(14, 52, 42, .35);
}
.gw-ph-label { margin: 0; opacity: .65; padding-inline: var(--wp--preset--spacing--40); }

/* --- Home: hero category quick-nav — editorial divided row --- */
.gw-quicknav__icon { color: var(--wp--preset--color--pine-600); line-height: 0; display: inline-flex; }
.gw-quicknav__shop a { color: var(--wp--preset--color--accent-dark); display: inline-flex; gap: 5px; align-items: center; }
/* The whole cell is the click target: the "Shop" link is stretched over the
   cell via a positioned ::after, so clicking anywhere in the square navigates. */
.gw-quicknav__cell { position: relative; transition: background-color .2s ease; }
.gw-quicknav__shop a::after { content: ""; position: absolute; inset: 0; }
/* Hairline-divided grid of paper cells at every width: the 1px grid gap over a
   line-coloured container shows as separators; each whole cell is tappable via
   the ::after on the "Shop" link. 2-up on mobile, 4-up from tablet — eight
   departments make two even rows of four. */
.gw-quicknav .wp-block-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin-top: 1px;
	background: var(--wp--preset--color--line);
}
.gw-quicknav .wp-block-column {
	flex-basis: auto;
	margin: 0;
	padding: 22px 18px;
	background: var(--wp--preset--color--paper);
}
.gw-quicknav__cell:active { background: var(--wp--preset--color--paper-3); }
@media (min-width: 782px) {
	.gw-quicknav .wp-block-columns { grid-template-columns: repeat(4, 1fr); }
	.gw-quicknav .wp-block-column { padding: 24px 18px 22px; }
	.gw-quicknav__cell:hover { background: var(--wp--preset--color--paper-3); }
}

/* --- Home: trust strip — 1px-gap divided grid of paper-2 cells --- */
.gw-trust { overflow: hidden; gap: 1px; background: var(--wp--preset--color--line); }
.gw-trust__icon { color: var(--wp--preset--color--pine-600); line-height: 0; display: inline-flex; }
.gw-trust__item { border-radius: 0 !important; }

/* --- Home: delivery info cards — icon chip + text --- */
.gw-delivery-card__icon {
	flex: none;
	width: 46px; height: 46px;
	border-radius: 999px;
	display: grid; place-items: center;
	background: var(--wp--preset--color--pine-100);
	color: var(--wp--preset--color--pine-700);
}

/* ============================================================
   Phase 5 — content pages (patterns/page-*.php, single-guide).
   ============================================================ */

/* --- Delivery: mode-card checklists — green tick instead of a disc bullet.
   Registered as the "Checklist" block style variation (styles/blocks/checklist.json);
   the tick glyph below is a ::before pseudo-element theme.json can't express, so it
   stays here keyed on the generated .is-style-checklist class. --- */
.is-style-checklist { list-style: none; margin-left: 0; padding-left: 0; }
.is-style-checklist li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	color: var(--wp--preset--color--ink-2);
}
.is-style-checklist li::before {
	content: "";
	position: absolute;
	left: 0; top: 4px;
	width: 18px; height: 18px;
	background: no-repeat center/contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C6A50' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* --- Delivery: FAQ disclosures (core/details). Pointer + roomier summary;
   the native marker stays as the open/closed affordance. --- */
.gw-faq summary { cursor: pointer; font-size: 17px; }
.gw-faq summary strong { font-weight: 700; }

/* --- Delivery: zone pricing table — full width, top-align the two-line cells. --- */
.gw-zones-table,
.gw-zones-table table { width: 100%; }
.gw-zones-table td { vertical-align: top; }

/* --- CTA band & guide aside: the site-info phone reads as one inline unit
   (icon + number) and picks up the band's accent link colour. --- */
.gw-cta-call a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.gw-cta-call a:hover { text-decoration: underline; }

/* --- Guides hub: card grid (Query Loop). Card chrome the editor can't set:
   raised paper tile, flush image, hover lift. Columns come from the block. --- */
.gw-guide-grid .wp-block-post-template { gap: clamp(20px, 2.4vw, 32px); }
.gw-guide-grid .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--wp--preset--color--paper-2);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.gw-guide-grid .wp-block-post-template > li:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px -22px rgba(14, 52, 42, .4);
}
.gw-guide-grid .wp-block-post-featured-image { margin: 0; }
.gw-guide-grid .wp-block-post-featured-image img {
	width: 100%; height: 220px; object-fit: cover; display: block;
}
.gw-guide-grid .gw-gcard__body { flex: 1 1 auto; }

/* --- Single guide: "Materials we'd use" band (patterns/guide-materials.php).
   The product list sits in a core/details disclosure — open by default,
   collapsible for readers who just want the article. Summary plays the band's
   serif heading; like the FAQ, the native marker is the open/closed
   affordance. The row-card layout itself lives in shop.css with the archive
   list view. --- */
.gw-guide-materials summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--h-3); /* slug "h3" kebab-cases to h-3 */
	font-weight: 500;
	line-height: 1.2;
}
.gw-guide-materials details[open] > summary { margin-bottom: var(--wp--preset--spacing--40); }

/* --- Single guide: the aside CTA tracks the article on desktop, stacks on
   mobile — but only pins when it fits under the sticky header (archive.js
   toggles .gw-can-stick; see "Conditional sticky" there). --- */
@media (min-width: 782px) {
	.gw-guide-aside.gw-can-stick { position: sticky; top: var(--gw-sticky-offset, 140px); }
}

/* --- CTA bands (incl. the synced "Talk to us" block): the outline "Find the yard"
   button brightens its border to full on-dark + a faint wash on hover/focus — a
   clear affordance that keeps AA contrast. Scoped to the dark pine bands. --- */
.has-pine-900-background-color .is-style-outline .wp-block-button__link:hover,
.has-pine-900-background-color .is-style-outline .wp-block-button__link:focus-visible,
.has-pine-800-background-color .is-style-outline .wp-block-button__link:hover,
.has-pine-800-background-color .is-style-outline .wp-block-button__link:focus-visible {
	background-color: rgba(247, 243, 234, 0.10);
	border-color: var(--wp--preset--color--on-dark) !important;
}

/* --- "Talk to us" CTA band (synced block + cta-band.php): a faint honey glow
   in the top-right corner gives the flat pine field some depth, behind the
   action panel. Decorative + pointer-safe; content sits above it. --- */
.gw-cta-band { position: relative; overflow: hidden; }
.gw-cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(85% 120% at 100% 0%, rgba(201, 154, 51, 0.13), rgba(201, 154, 51, 0) 60%);
}
.gw-cta-band > * { position: relative; z-index: 1; }

/* --- "Call the yard" panel: a cream card lifted off the dark band with a soft
   shadow so it reads as a distinct, high-contrast action box. --- */
.gw-cta-action { box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.55); }

/* --- Contact: feature map. Full content-width, tall, rounded keyless embed. --- */
.gw-map iframe { width: 100%; display: block; border: 0; }
.gw-map--feature iframe {
	height: clamp(400px, 50vh, 560px);
	border-radius: 16px;
	box-shadow: 0 24px 48px -28px rgba(14, 52, 42, 0.4);
}

/* ============================================================
   Gravity Forms — brand the submit button to the pine pill that
   matches our theme.json buttons, site-wide (all forms). GF uses the
   Orbital theme; we set its design tokens AND override the selector
   directly so it holds regardless of GF theme/version. Values come
   from the --gw-btn-* tokens in global.css.
   ============================================================ */
.gform-theme--orbital,
.gform_wrapper {
	--gf-ctrl-btn-bg-color-primary: var(--gw-btn-bg);
	--gf-ctrl-btn-bg-color-hover-primary: var(--gw-btn-bg-hover);
	--gf-ctrl-btn-color-primary: var(--gw-btn-color);
	--gf-ctrl-btn-color-hover-primary: var(--gw-btn-color);
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-border-color-hover-primary: transparent;
}
.gform_wrapper .gform_footer .gform_button.button,
.gform_wrapper .gform_page_footer .gform_button.button,
.gform_wrapper input[type="submit"].gform_button,
.gform_wrapper button.gform_button {
	background-color: var(--gw-btn-bg) !important;
	color: var(--gw-btn-color) !important;
	border: var(--gw-btn-border) !important;
	border-radius: var(--gw-btn-radius) !important;
	font-family: var(--gw-btn-font-family);
	font-weight: 700;
	font-size: var(--gw-btn-font-size);
	letter-spacing: 0.01em;
	line-height: 1;
	padding: var(--gw-btn-padding) !important;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.gform_wrapper .gform_footer .gform_button.button:hover,
.gform_wrapper input[type="submit"].gform_button:hover,
.gform_wrapper button.gform_button:hover {
	background-color: var(--gw-btn-bg-hover) !important;
	color: var(--gw-btn-color) !important;
}

/* The site-info phone/email link renders an inline SVG glyph immediately before
   the text with no separation; give the icon and label a small gap wherever the
   block is used (header, footer, archive quote card, order confirmation).
   NOTE: stays at the END of the LAST-loaded sheet — it ties on specificity with
   `.gw-cta-call a` above and must win on source order, as it always has. */
.gw-site-info a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}