/* ==========================================================================
   HolaGrower — site styles for the Divi child theme
   Layouts use these classes via each module's CSS Class field.
   ========================================================================== */

:root {
	--hg-ink:         #14271d;
	--hg-ink-soft:    #43574c;
	--hg-forest:      #2d6a4f;   /* brand */
	--hg-forest-deep: #1b4332;
	--hg-paper:       #f4f7f2;
	--hg-white:       #ffffff;
	--hg-sprout:      #d8f3dc;
	--hg-line:        #cfddd3;
	--hg-marigold:    #e9b949;   /* citation markers only */

	--hg-serif: "Literata", Georgia, "Times New Roman", serif;
	--hg-sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--hg-wrap:   1160px;
	--hg-gutter: 24px;
	--hg-space:  clamp(72px, 9vw, 128px);
}

/* ---------- Base ---------- */
body,
body #page-container {
	font-family: var(--hg-sans);
	color: var(--hg-ink);
	background-color: var(--hg-paper);
	-webkit-font-smoothing: antialiased;
}
#page-container .et_pb_module,
#page-container .et_pb_text {
	font-family: var(--hg-sans);
	font-size: 18px;
	line-height: 1.65;
	color: var(--hg-ink);
}
#main-content { background-color: var(--hg-paper); }

#page-container h1,
#page-container h2,
#page-container h3 {
	font-family: var(--hg-serif);
	font-weight: 600;
	color: var(--hg-ink);
	line-height: 1.12;
	letter-spacing: -0.015em;
	padding-bottom: 0;
	margin: 0 0 0.5em;
}
#page-container h1 { font-size: clamp(2.5rem, 5.2vw, 4.2rem); }
#page-container h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
#page-container h3 { font-size: 1.4rem; line-height: 1.25; }
#page-container .et_pb_text p { padding-bottom: 0; margin: 0 0 1em; }
#page-container .et_pb_text p:last-child { margin-bottom: 0; }

#page-container a { color: var(--hg-forest); }
#page-container a:focus-visible,
#page-container button:focus-visible,
#page-container input:focus-visible,
#page-container textarea:focus-visible {
	outline: 3px solid var(--hg-marigold);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Layout primitives ---------- */
.et_pb_section.hg-sec {
	padding: var(--hg-space) 0;
	background-color: transparent;
	position: relative;
}
.et_pb_row.hg-row {
	width: calc(100% - 2 * var(--hg-gutter));
	max-width: var(--hg-wrap);
	padding: 0;
	position: relative;
	z-index: 1;
}
.et_pb_row.hg-row + .et_pb_row.hg-row { margin-top: clamp(40px, 5vw, 64px); }
.et_pb_row.hg-row--narrow { max-width: 760px; }
@media (min-width: 981px) {
	.et_pb_row.hg-row--center { display: flex; align-items: center; }
}

#page-container .hg-lead,
#page-container .hg-lead p {
	font-size: clamp(1.1rem, 1.6vw, 1.25rem);
	line-height: 1.6;
	color: var(--hg-ink-soft);
	max-width: 36em;
}

/* ---------- Buttons & badges ---------- */
.hg-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
	margin-top: 32px;
}
.hg-center .hg-actions { justify-content: center; }

a.hg-play { display: inline-block; line-height: 0; }
#page-container a.hg-play img { height: 64px; width: auto; margin: -8px; } /* badge PNG has built-in padding */
#page-container a.hg-play--small img { height: 50px; margin: -6px; }

.hg-soon {
	display: inline-flex;
	align-items: center;
	padding: 14px 22px;
	border-radius: 999px;
	background: var(--hg-forest);
	color: var(--hg-white);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
}

#page-container a.hg-textlink {
	font-weight: 600;
	color: var(--hg-forest);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
#page-container a.hg-textlink:hover { color: var(--hg-forest-deep); }

#page-container p.hg-note { font-size: 0.95rem; color: var(--hg-ink-soft); margin-top: 18px; }

/* ---------- Header (Theme Builder) ---------- */
.et-l--header { position: sticky; top: 0; z-index: 99; }
.admin-bar .et-l--header { top: 32px; }
@media (max-width: 782px) { .admin-bar .et-l--header { top: 0; position: relative; } }

.et_pb_section.hg-header {
	padding: 12px 0;
	background-color: rgba(244, 247, 242, 0.94);
	-webkit-backdrop-filter: saturate(1.4) blur(8px);
	        backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--hg-line);
}
.hg-nav.et_pb_menu { background-color: transparent !important; }
.hg-nav .et_pb_menu__logo img { max-height: 40px; width: auto; }
.hg-nav .et-menu > li > a {
	font-family: var(--hg-sans);
	font-weight: 500;
	font-size: 16px;
	color: var(--hg-ink) !important;
	padding-bottom: 0 !important;
}
.hg-nav .et-menu > li > a:hover { color: var(--hg-forest) !important; opacity: 1; }
/* A menu item given the CSS class "hg-menu-cta" becomes a button */
.hg-nav .et-menu > li.hg-menu-cta > a {
	background: var(--hg-forest);
	color: var(--hg-white) !important;
	padding: 10px 18px !important;
	border-radius: 999px;
}
.hg-nav .et-menu > li.hg-menu-cta > a:hover { background: var(--hg-forest-deep); color: var(--hg-white) !important; }
.hg-nav .et_mobile_menu { border-top-color: var(--hg-forest); background: var(--hg-paper) !important; }
.hg-nav .et_mobile_menu a { color: var(--hg-ink) !important; }
.hg-nav .mobile_menu_bar:before { color: var(--hg-forest) !important; }

/* ---------- Hero ---------- */
.et_pb_section.hg-hero {
	padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 9vw, 120px);
	background-color: var(--hg-paper);
	overflow: hidden;
}
/* square-foot grid behind the phone, fading out toward the text */
.et_pb_section.hg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(45, 106, 79, 0.11) 1px, transparent 1px),
		linear-gradient(90deg, rgba(45, 106, 79, 0.11) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(ellipse at 78% 50%, #000 0%, transparent 62%);
	        mask-image: radial-gradient(ellipse at 78% 50%, #000 0%, transparent 62%);
	pointer-events: none;
}
#page-container .hg-hero h1 { max-width: 15ch; }
#page-container p.hg-platform { font-size: 0.95rem; color: var(--hg-ink-soft); margin-top: 20px; }

.hg-phone { text-align: center; }
#page-container .hg-phone img {
	display: block;
	width: 100%;
	max-width: 300px;
	margin-inline: auto;
	border: 10px solid var(--hg-ink);
	border-radius: 42px;
	background: var(--hg-white);
	box-shadow: 0 40px 70px -30px rgba(27, 67, 50, 0.55);
}
@media (max-width: 980px) {
	#page-container .hg-phone { margin-top: 40px; }
	#page-container .hg-phone img { max-width: 260px; }
}

/* ---------- Problem ---------- */
.et_pb_section.hg-problem { background-color: var(--hg-white); }
#page-container .hg-problem h2 { max-width: 16ch; }

/* ---------- Features ---------- */
.et_pb_section.hg-features { background-color: var(--hg-paper); }
#page-container .hg-feature {
	border-top: 3px solid var(--hg-forest);
	padding-top: 24px;
}
#page-container .hg-feature h3 { margin-bottom: 0.6em; }
#page-container .hg-feature p { font-size: 1.02rem; color: var(--hg-ink-soft); }

#page-container sup.hg-cite { font-size: 0.68em; line-height: 0; vertical-align: super; margin-left: 1px; }
#page-container sup.hg-cite a {
	color: var(--hg-forest);
	font-weight: 700;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
#page-container sup.hg-cite a:hover { text-decoration: underline; }

#page-container .hg-also {
	border: 1px solid var(--hg-line);
	border-radius: 18px;
	padding: 28px 32px;
	background: var(--hg-white);
}
.hg-also-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px 40px;
}
#page-container .hg-also h3 {
	font-family: var(--hg-sans);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	margin-bottom: 4px;
}
#page-container .hg-also p { font-size: 0.98rem; color: var(--hg-ink-soft); }

/* ---------- Sources (the signature section) ---------- */
.et_pb_section.hg-sources { background-color: var(--hg-forest-deep); }
#page-container .hg-sources h2,
#page-container .hg-sources h3 { color: var(--hg-white); }
#page-container .hg-sources .et_pb_text,
#page-container .hg-sources p { color: rgba(244, 247, 242, 0.84); }
#page-container .hg-sources .hg-lead p { color: rgba(244, 247, 242, 0.9); }

.hg-ref {
	position: relative;
	padding: 20px 0 4px 50px;
	border-top: 1px solid rgba(244, 247, 242, 0.22);
	scroll-margin-top: 120px;
}
.hg-ref-n {
	position: absolute;
	left: 0;
	top: 20px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--hg-marigold);
	color: var(--hg-ink);
	font: 700 0.9rem/32px var(--hg-sans);
	text-align: center;
	font-variant-numeric: tabular-nums;
}
#page-container .hg-ref h3 {
	font-family: var(--hg-sans);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	margin: 4px 0 6px;
}
#page-container .hg-ref p { font-size: 0.98rem; line-height: 1.55; margin-bottom: 6px; }
#page-container .hg-ref p.hg-ref-cov { color: var(--hg-sprout); font-weight: 600; font-size: 0.92rem; }
.hg-ref:target .hg-ref-n { box-shadow: 0 0 0 6px rgba(233, 185, 73, 0.35); }
#page-container .hg-sources .hg-note { color: rgba(244, 247, 242, 0.72); }

/* ---------- Screenshots ---------- */
.et_pb_section.hg-screens { background-color: var(--hg-white); }
.hg-shot { text-align: center; }
#page-container .hg-shot img {
	display: block;
	width: 100%;
	max-width: 240px;
	margin-inline: auto;
	border: 7px solid var(--hg-ink);
	border-radius: 30px;
	background: var(--hg-paper);
}
#page-container .hg-caption,
#page-container .hg-caption p {
	text-align: center;
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--hg-ink);
}
@media (max-width: 980px) {
	.hg-screens .et_pb_row.hg-row > .et_pb_column { width: 47.25% !important; margin-right: 5.5% !important; float: left; }
	.hg-screens .et_pb_row.hg-row > .et_pb_column:nth-child(2n) { margin-right: 0 !important; }
	.hg-screens .et_pb_row.hg-row > .et_pb_column:nth-child(2n+1) { clear: left; }
	.hg-screens .et_pb_row.hg-row::after { content: ""; display: block; clear: both; }
}

/* ---------- Download CTA ---------- */
.et_pb_section.hg-cta { background-color: var(--hg-sprout); }
#page-container .hg-center,
#page-container .hg-center p { text-align: center; }
#page-container .hg-cta h2 { max-width: 18ch; margin-inline: auto; color: var(--hg-forest-deep); }
#page-container .hg-cta p { max-width: 34em; margin-inline: auto; color: var(--hg-ink-soft); }

/* ---------- Footer (Theme Builder) ---------- */
.et_pb_section.hg-footer {
	padding: clamp(56px, 7vw, 88px) 0 32px;
	background-color: var(--hg-ink);
}
#page-container .hg-footer .et_pb_text,
#page-container .hg-footer p { color: rgba(244, 247, 242, 0.78); font-size: 0.98rem; }
#page-container .hg-footer h3 {
	font-family: var(--hg-sans);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--hg-white);
	margin-bottom: 12px;
}
#page-container .hg-footer ul.hg-links { list-style: none; padding: 0; margin: 0; }
#page-container .hg-footer ul.hg-links li { margin: 0 0 8px; font-size: 0.98rem; }
#page-container .hg-footer a { color: rgba(244, 247, 242, 0.9); text-decoration: none; }
#page-container .hg-footer a:hover { color: var(--hg-white); text-decoration: underline; text-underline-offset: 4px; }
#page-container .hg-footer-logo img { max-width: 190px; height: auto; }
.hg-footer .et_pb_row.hg-row.hg-footer-base {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(244, 247, 242, 0.16);
}
#page-container .hg-footer-base p { font-size: 0.85rem; color: rgba(244, 247, 242, 0.6); }

/* ---------- Legal & utility pages ---------- */
.et_pb_section.hg-legal { padding: clamp(48px, 7vw, 96px) 0 var(--hg-space); }
#page-container .hg-prose h1 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); margin-bottom: 0.3em; }
#page-container .hg-prose h2 {
	font-size: clamp(1.35rem, 2.2vw, 1.65rem);
	margin: 2.2em 0 0.6em;
}
#page-container .hg-prose h3 {
	font-family: var(--hg-sans);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0;
	margin: 1.6em 0 0.4em;
}
#page-container .hg-prose p,
#page-container .hg-prose li { font-size: 1.02rem; line-height: 1.7; }
#page-container .hg-prose ul,
#page-container .hg-prose ol { padding: 0 0 1em 1.3em; }
#page-container .hg-prose ul { list-style: disc; }
#page-container .hg-prose li { margin-bottom: 0.4em; }
#page-container .hg-prose a { text-decoration: underline; text-underline-offset: 3px; }
#page-container p.hg-updated { color: var(--hg-ink-soft); font-size: 0.95rem; }

/* Highlighted placeholders — replace every one before publishing */
mark.hg-fill {
	background: #ffe9a8;
	color: var(--hg-ink);
	padding: 0 0.25em;
	border-radius: 4px;
	outline: 1px dashed #b7791f;
}

/* Contact form */
.hg-form .et_pb_contact_field input,
.hg-form .et_pb_contact_field textarea,
.hg-form input.et_pb_contact_captcha {
	background: var(--hg-white) !important;
	border: 1px solid var(--hg-line) !important;
	border-radius: 10px;
	color: var(--hg-ink) !important;
	font-family: var(--hg-sans);
	font-size: 1rem;
}
.hg-form .et_pb_contact_field input:focus,
.hg-form .et_pb_contact_field textarea:focus { border-color: var(--hg-forest) !important; }
#page-container .hg-form .et_pb_button {
	background: var(--hg-forest);
	color: var(--hg-white) !important;
	border: 0;
	border-radius: 999px;
	padding: 12px 26px !important;
	font-family: var(--hg-sans);
	font-weight: 600;
	font-size: 1rem;
}
#page-container .hg-form .et_pb_button:hover { background: var(--hg-forest-deep); }
#page-container .hg-form .et_pb_button:after { display: none; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}