/**
 * Syntax — global component toolkit.
 *
 * Reusable, brand-accurate classes you can apply to Elementor sections / widgets
 * and Blocksy elements so the Elementor-built header, footer and homepage match
 * the source design. All values derive from the tokens in style.css.
 */

/* ---------- Layout ---------- */
.syntax-shell {
	max-width: var(--syntax-shell);
	margin-inline: auto;
	padding-inline: 32px;
}

/* ---------- Sections / bands ---------- */
.syntax-section-dark { background: var(--syntax-ink); color: var(--syntax-cream); }
.syntax-section-dark :is(h1, h2, h3) { color: var(--syntax-cream); }
.syntax-band-forest { background: var(--syntax-forest); color: #eef2ec; }
.syntax-footer { background: var(--syntax-ink-2); color: #a8a293; }

/* ---------- Eyebrow label (uppercase gold, optional lead line) ---------- */
.syntax-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--syntax-gold-ink);
}
.syntax-eyebrow--ondark { color: var(--syntax-gold); }
.syntax-eyebrow--line::before {
	content: "";
	width: 26px;
	height: 1px;
	background: currentColor;
}

/* ---------- Headings ---------- */
.syntax-h1 { font-family: var(--syntax-font-head); font-weight: 400; font-size: clamp(2.5rem, 5vw, 3.6rem); line-height: 1.04; letter-spacing: -.02em; }
.syntax-h2 { font-family: var(--syntax-font-head); font-weight: 400; font-size: clamp(1.8rem, 3vw, 1.9rem); letter-spacing: -.01em; }
.syntax-serif-italic { font-family: var(--syntax-font-head); font-style: italic; color: var(--syntax-gold); }

/* ---------- Buttons (pills) ---------- */
.syntax-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--syntax-radius-pill);
	padding: 14px 28px;
	font-family: var(--syntax-font-body);
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background .15s ease, transform .15s ease, color .15s ease;
}
.syntax-btn--gold { background: var(--syntax-gold); color: var(--syntax-ink); }
.syntax-btn--gold:hover { background: var(--syntax-gold-2); color: var(--syntax-ink); }
.syntax-btn--dark { background: var(--syntax-ink); color: var(--syntax-cream); }
.syntax-btn--dark:hover { background: var(--syntax-ink-soft); color: var(--syntax-cream); }
.syntax-btn--ghost { background: transparent; border-color: rgba(244, 241, 234, .28); color: var(--syntax-cream); }
.syntax-btn--ghost:hover { background: rgba(244, 241, 234, .08); color: var(--syntax-cream); }

/* ---------- Pills / tags ---------- */
.syntax-pill {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 6px 14px;
	border-radius: var(--syntax-radius-pill);
	background: rgba(255, 255, 255, .1);
	color: var(--syntax-cream);
}

/* ---------- Cards ---------- */
.syntax-card {
	background: #fff;
	border: 1px solid var(--syntax-line);
	border-radius: var(--syntax-radius);
	padding: 28px;
}

/* ---------- Utility ---------- */
.syntax-muted { color: var(--syntax-muted); }
.syntax-tabular { font-variant-numeric: tabular-nums; }

/* ---------- Accessibility: visible focus everywhere ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.syntax-btn:focus-visible,
.syntax-wa:focus-visible {
	outline: 2px solid var(--syntax-gold-ink);
	outline-offset: 2px;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Responsive container padding ---------- */
@media (max-width: 640px) {
	.syntax-shell { padding-inline: 20px; }
}

body.home .entry-header{display:none!important}

/* Homepage Elementor Products widget: brand to ink/gold */
.elementor-widget-woocommerce-products ul.products li.product a.button,.elementor-widget-woocommerce-products ul.products li.product a.add_to_cart_button,.elementor-widget-woocommerce-products ul.products li.product a.added_to_cart{background-color:#17140e!important;color:#f4f1ea!important;border:0!important;border-radius:8px!important;font-weight:600!important}
.elementor-widget-woocommerce-products ul.products li.product a.button:hover{background-color:#2a251a!important}
.elementor-widget-woocommerce-products ul.products li.product .onsale{background-color:#17140e!important;color:#e6c266!important;border:0!important}
a.syntax-wa--loop{display:block!important;text-align:center!important;background:#e6c266!important;color:#17140e!important;font-weight:700!important;padding:11px 16px!important;border-radius:8px!important;text-decoration:none!important;margin-top:8px!important;border:0!important}
a.syntax-wa--loop:hover{background:#d9b24e!important}
/* close empty band under header on home */
body.home .entry-content{margin-top:0!important;padding-top:0!important}
body.home main.site-main .ct-container-full{padding-top:0!important}
body.home article.hentry{margin-top:0!important;padding-top:0!important}
body.home .entry-content>.elementor{margin-top:0!important}

/* hero image: clean band, not full portrait height */
.elementor-element-hero .elementor-widget-image img{width:100%!important;max-height:460px;object-fit:cover;border-radius:16px;display:block}

.elementor-widget-heading .accent{color:#e6c266!important;font-style:italic}
#hero-img img{max-height:480px;object-fit:cover;border-radius:16px;width:100%}
#solar-img img{max-height:360px;object-fit:cover;border-radius:16px;width:100%}