/*
 * Green Grass Concept: shared styles for Astra + core blocks.
 * Layout, spacing and color choices live in Astra's global settings where
 * possible; this file covers fonts, block section treatments, focus states,
 * post-list thumbnails and the concept notice.
 */

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin-wght.woff2") format("woff2");
}

@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/karla-latin-wght.woff2") format("woff2");
}

:root {
	--ggc-accent: var(--ast-global-color-0, #f7c948);
	--ggc-accent-strong: var(--ast-global-color-1, #efb526);
	--ggc-ink: var(--ast-global-color-2, #11472f);
	--ggc-body: var(--ast-global-color-3, #4a5f52);
	--ggc-white: var(--ast-global-color-4, #ffffff);
	--ggc-mint: var(--ast-global-color-5, #f1f9f4);
	--ggc-line: var(--ast-global-color-7, #dae5de);
	--ggc-font-head: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
	--ggc-font-body: "Karla", "Helvetica Neue", Arial, sans-serif;
	--ggc-radius: 14px;
	--ggc-section-y: clamp(3.5rem, 7vw, 6.5rem);
}

body,
.editor-styles-wrapper {
	font-family: var(--ggc-font-body);
	color: var(--ggc-body);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.editor-styles-wrapper :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--ggc-font-head);
	color: var(--ggc-ink);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* Heading sizes come from Astra's typography settings (tools/configure-site.php). */

p { text-wrap: pretty; }

/* ---------- Focus and skip link ---------- */

/* body + :is() outranks Astra's a:focus, button:focus and input:focus resets. */
body :is(a, button, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ggc-ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--ggc-accent);
	border-radius: 4px;
}

body :is(input, select, textarea):focus,
body .wpforms-container :is(input, select, textarea):focus {
	outline: 2px solid var(--ggc-ink) !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--ggc-accent) !important;
}

body :is(.ggc-dark, .wp-block-cover, .site-footer) :is(a, button):focus-visible {
	outline-color: var(--ggc-white);
}

/* ---------- Buttons (core/button) ---------- */

.wp-block-button__link,
.ast-custom-button,
.wpforms-container .wpforms-submit {
	font-family: var(--ggc-font-body);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	padding: 0.9em 1.6em;
	border-radius: 999px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--ggc-accent);
	color: var(--ggc-ink);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--ggc-accent-strong);
	color: var(--ggc-ink);
}

/* Astra and core both style outline buttons with high-specificity selectors, so
   these match that specificity to keep outline text readable on every ground. */
body .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	background: transparent;
	border: 2px solid currentColor;
	color: var(--ggc-ink);
}

body .ggc-dark .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
body .wp-block-cover .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--ggc-white);
}

body .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover {
	background: var(--ggc-ink);
	border-color: var(--ggc-ink);
	color: var(--ggc-white);
}

body .ggc-dark .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover,
body .wp-block-cover .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover {
	background: var(--ggc-white);
	border-color: var(--ggc-white);
	color: var(--ggc-ink);
}

/* ---------- Sections ---------- */

.ggc-section {
	padding-top: var(--ggc-section-y);
	padding-bottom: var(--ggc-section-y);
}

.ggc-mint { background-color: var(--ggc-mint); }

.ggc-dark {
	background-color: var(--ggc-ink);
	color: rgba(255, 255, 255, 0.86);
}

.ggc-dark :is(h1, h2, h3, h4) { color: var(--ggc-white); }
.ggc-dark a:not(.wp-block-button__link) { color: var(--ggc-accent); }

.ggc-eyebrow {
	font-family: var(--ggc-font-body);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ggc-ink);
	margin-bottom: 0.75rem;
}

.ggc-dark .ggc-eyebrow,
.wp-block-cover .ggc-eyebrow { color: var(--ggc-accent); }

.ggc-lede { font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.6; }

/* ---------- Hero (core/cover) ---------- */

.ggc-hero.wp-block-cover { min-height: min(86vh, 760px); }
.ggc-hero .wp-block-cover__inner-container { max-width: 1200px; }
.ggc-hero h1 { color: var(--ggc-white); max-width: 14ch; }
body .wp-block-cover.ggc-hero:not(.has-text-color.has-link-color) p { color: rgba(255, 255, 255, 0.94); max-width: 46ch; }
/* White, not accent yellow: yellow measured 4.23:1 against the brightest photo pixels behind it. */
body .wp-block-cover.ggc-hero:not(.has-text-color.has-link-color) p.ggc-eyebrow { color: var(--ggc-white); }
.ggc-hero .wp-block-cover__inner-container > * { margin-left: 0 !important; }

/* ---------- Fact strip ---------- */

.ggc-facts .wp-block-column {
	border-top: 3px solid var(--ggc-accent);
	padding-top: 1.1rem;
}

.ggc-facts h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.ggc-facts p { margin: 0; font-size: 0.98rem; }

/* ---------- Cards ---------- */

.ggc-card {
	background: var(--ggc-white);
	border: 1px solid var(--ggc-line);
	border-radius: var(--ggc-radius);
	overflow: hidden;
	height: 100%;
}

.ggc-card.ggc-dark { background: var(--ggc-ink); border-color: var(--ggc-ink); display: flex; align-items: flex-end; }
.ggc-card.ggc-dark h3 { color: var(--ggc-white); }

.ggc-card .wp-block-image { margin: 0; }
.ggc-card .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
/* Two service cards show a neighbouring bordered bed rather than the service itself;
   the visible caption says what the photo shows. */
.ggc-card .wp-block-image figcaption { margin: 0; padding: 0.7rem 1.5rem 0; font-size: 0.88rem; line-height: 1.45; color: var(--ggc-body); }
.ggc-card__body { padding: 1.4rem 1.5rem 1.6rem; }
.ggc-card__body > :last-child { margin-bottom: 0; }
.ggc-card h3 { margin-bottom: 0.5rem; }
.ggc-card a:not(.wp-block-button__link) { color: var(--ggc-ink); font-weight: 700; text-underline-offset: 3px; }

.wp-block-columns.ggc-card-grid { gap: 1.5rem; }
.ggc-card-grid > .wp-block-column { display: flex; flex-direction: column; }

/* ---------- Photos ---------- */

.ggc-photo img { border-radius: var(--ggc-radius); }
.ggc-photo-tall img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; height: auto; }

.wp-block-gallery.ggc-gallery .wp-block-image img { border-radius: 10px; aspect-ratio: 3 / 4; object-fit: cover; }

body .wp-block-gallery.has-nested-images.ggc-gallery figure.wp-block-image {
	flex-grow: 0;
	flex-direction: column;
	justify-content: flex-start;
}

body .wp-block-gallery.has-nested-images.ggc-gallery figure.wp-block-image:has(figcaption)::before { display: none; }

body .wp-block-gallery.has-nested-images.ggc-gallery figure.wp-block-image figcaption {
	position: static;
	flex: none;
	background: none;
	color: var(--ggc-body);
	font-size: 0.92rem;
	line-height: 1.4;
	text-align: left;
	text-shadow: none;
	padding: 0.55rem 0.1rem 0;
	max-height: none;
	overflow: visible;
}

body .wp-block-gallery.has-nested-images.ggc-gallery figure.wp-block-image img { flex: none; height: auto; }

/* ---------- Testimonials ---------- */

.ggc-quote.wp-block-quote:not(.has-text-align-right):not(.has-text-align-center) {
	border: 0;
	margin: 0;
	padding: 0;
	font-style: normal;
	font-size: 1.05rem;
	color: var(--ggc-ink);
}

.ggc-quote.wp-block-quote::before {
	content: "\201C";
	display: block;
	font-family: var(--ggc-font-head);
	font-size: 3.5rem;
	line-height: 0.8;
	color: var(--ggc-accent-strong);
}

.ggc-quote cite { display: block; margin-top: 0.75rem; font-style: normal; font-weight: 700; color: var(--ggc-body); }

.ggc-source-note { font-size: 0.9rem; color: var(--ggc-body); }

/* ---------- Header and footer ---------- */

.site-title a { font-family: var(--ggc-font-head); font-weight: 700; }

.main-header-menu > .menu-item > .menu-link { font-weight: 600; }

.main-header-menu > .current-menu-item > .menu-link,
body:is(.blog, .single-post, .archive) .main-header-menu > .current_page_parent > .menu-link {
	text-decoration: underline;
	text-decoration-color: var(--ggc-accent-strong);
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}

/* Astra colors the mobile menu icon with brand gold and the drawer's hover and current
   items with hover gold. Each measured under 2:1 on the white or light ground, so use ink;
   the current item keeps the desktop gold underline. */
body [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal { color: var(--ggc-ink); }
body [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon :is(.ast-mobile-svg, .ast-close-svg) { fill: var(--ggc-ink); }

body .ast-builder-menu-mobile .main-navigation .menu-item > .menu-link:is(:hover, :focus),
body .ast-builder-menu-mobile .main-navigation .main-header-menu > .menu-item:hover > .menu-link { color: var(--ggc-ink); }

body .ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item > .menu-link,
body:is(.blog, .single-post, .archive) .ast-builder-menu-mobile .main-navigation .menu-item.current_page_parent > .menu-link {
	color: var(--ggc-ink);
	text-decoration: underline;
	text-decoration-color: var(--ggc-accent-strong);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

.ast-builder-button-wrap .ast-custom-button { color: var(--ggc-ink); }

.site-footer .site-primary-footer-wrap,
.site-footer .site-below-footer-wrap { color: rgba(255, 255, 255, 0.86); }

.site-footer .site-primary-footer-wrap { padding-top: 3.5rem; padding-bottom: 3rem; }

.site-footer :is(.site-primary-footer-wrap, .site-below-footer-wrap) a,
.site-footer .footer-widget-area .menu-link { color: var(--ggc-white); }

.site-footer :is(.site-primary-footer-wrap, .site-below-footer-wrap) a:hover,
.site-footer .footer-widget-area .menu-link:hover { color: var(--ggc-accent); }

.site-footer .footer-widget-area .menu-link { padding-left: 0; padding-right: 0; }

.ggc-footer-title { font-family: var(--ggc-font-head); font-size: 1.2rem; font-weight: 600; color: var(--ggc-white); margin-bottom: 0.5rem; }

.site-footer .site-below-footer-wrap .ast-footer-copyright,
.site-footer .site-below-footer-wrap .ast-footer-copyright p { color: rgba(255, 255, 255, 0.82); font-size: 0.9rem; }
.site-footer .site-below-footer-wrap .ast-footer-copyright a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 921px) {
	.site-footer :is(.site-primary-footer-wrap, .site-below-footer-wrap) { padding-left: 24px; padding-right: 24px; }
	.ggc-concept-notice { font-size: 0.78rem; }
}

/* ---------- Blog and articles ---------- */

.ggc-archive-header { max-width: 1240px; margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) 20px 0; }
.ggc-archive-header h1 { margin-bottom: 0.5rem; }

/* Astra's search and archive headings repeat the visitor's query. A long unbroken term
   could not wrap and pushed the document wider than a phone screen, so allow breaks
   inside the word only when it would otherwise overflow. */
.ast-archive-description .ast-archive-title { overflow-wrap: anywhere; }

/* Astra gives post-list thumbnails a fixed 16:9 box but leaves object-fit at its
   default (fill), which squashed the portrait photos. Use the site's 4:3 card shape
   and crop proportionally, biased slightly upward to keep the bed and border in view. */
body:is(.blog, .archive, .search) .ast-article-post .post-thumb-img-content img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 40%;
}

body.single-post header.entry-header .entry-title { font-size: clamp(2.2rem, 4.4vw, 3.3rem); line-height: 1.1; }
.single-post .entry-content { font-size: 1.1rem; line-height: 1.75; }
.single-post .entry-content h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.2; }
.single-post .entry-content h3 { font-size: clamp(1.25rem, 1.8vw, 1.45rem); }
.single-post .entry-content :is(h2, h3) { margin-top: 2.2rem; }
.single-post .entry-content figcaption { color: var(--ggc-body); font-size: 0.92rem; }

.ggc-side-heading.wp-block-heading { font-size: clamp(1.35rem, 2vw, 1.6rem); margin-top: 2rem; }
.ggc-side-heading.wp-block-heading:first-child { margin-top: 0; }

/* Contact: the details column comes first in the source so phones read service area and
   company details before the form. From the width where columns sit side by side, show
   the form on the left again. */
@media (min-width: 782px) {
	.wp-block-columns.ggc-contact-columns { flex-direction: row-reverse; }
}

.ggc-404 .ggc-404-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; list-style: none; margin: 1.5rem 0 2.5rem; padding: 0; }
.ggc-404 .ggc-404-links a { font-weight: 700; text-underline-offset: 4px; }
.single-post .entry-content > :is(p, ul, ol, h2, h3, figure) { max-width: 72ch; }

/* ---------- Forms (WPForms Lite) ---------- */

.wpforms-container {
	--wpforms-button-border-radius: 999px;
	--wpforms-button-background-color: #f7c948;
	--wpforms-button-text-color: #11472f;
	--wpforms-button-size-font-size: 17px;
	--wpforms-button-size-height: 50px;
	--wpforms-button-size-padding-h: 28px;
	--wpforms-field-border-radius: 8px;
	--wpforms-field-border-color: #83968a;
	--wpforms-label-color: #11472f;
	--wpforms-label-sublabel-color: #4a5f52;
	--wpforms-label-error-color: #9b1c1c;
	--wpforms-field-size-font-size: 17px;
}

.wpforms-container .wpforms-field-label { color: var(--ggc-ink); font-weight: 700; }
.wpforms-container :is(input, select, textarea) { border-radius: 8px !important; border-color: #83968a !important; font-size: 1rem !important; }
.wpforms-container .wpforms-submit { background-color: var(--ggc-accent) !important; color: var(--ggc-ink) !important; border: 0 !important; }
/* WPForms darkens the hovered button with a 20% black gradient, which turned the gold
   into dull mustard and dropped ink text below 4.5:1. Use the flat hover gold instead. */
.wpforms-container .wpforms-submit:is(:hover, :focus, :active) { background-color: var(--ggc-accent-strong) !important; background-image: none !important; }
.wpforms-container label.wpforms-error { color: #9b1c1c; font-weight: 600; }

.ggc-form-notice {
	background: #fff4cc;
	border: 1px solid var(--ggc-accent-strong);
	border-radius: 10px;
	padding: 1rem 1.2rem;
	color: var(--ggc-ink);
}

/* ---------- Concept notice ---------- */

.ggc-concept-notice {
	background: var(--ggc-ink);
	color: var(--ggc-white);
	font-size: 0.85rem;
	line-height: 1.4;
	text-align: center;
	padding: 0.5rem 1rem;
}

.ggc-concept-notice p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}