/*
 * Goldstar base rules — loaded on the front end and in the block editor.
 * Colours/type come from GP Customizer; this file only adds what GP can't set.
 */

body,
.editor-styles-wrapper {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Bold = 700 per brand (body copy is 300). */
b,
strong {
	font-weight: 700;
}

/* Body links: ink, bold, underlined (brand "link" component). */
.entry-content p a:not(.gb-text),
.entry-content li a:not(.gb-text),
.editor-styles-wrapper p a:not(.gb-text),
.editor-styles-wrapper li a:not(.gb-text) {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Visible focus ring on every interactive element (WCAG 2.2 AA). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ink-900, #0D0C09);
	outline-offset: 2px;
}

.goldstar-on-dark a:focus-visible,
.goldstar-on-dark button:focus-visible {
	outline-color: var(--primary, #BC8D16);
}

/* Bulleted lists inside GB content (core/list with className "list"). */
ul.list {
	margin-left: 1.25em;
}

/*
 * GX Scroll Motion writes an inline clip-path:inset(0) on every animated block,
 * whatever the effect. It clips glyphs that overhang tight line-heights
 * (descenders on big headings). Only the clip-reveal effect needs clipping.
 */
.sm-animate:not(.sm-clip-reveal),
.sm-animate:not(.sm-clip-reveal) [data-sm-child] {
	clip-path: none !important;
}

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

/*
 * Gravity Forms (Orbital theme) in brand colours.
 * GF exposes CSS variables; overriding them keeps GF's own layout/accessibility.
 */
.gform-theme--framework {
	--gf-color-primary: var(--primary, #BC8D16);
	--gf-color-primary-rgb: 188, 141, 22;
	--gf-color-primary-contrast: var(--ink, #0D0C09);
	--gf-color-primary-darker: var(--secondary, #9D7726);
	--gf-color-in-ctrl-primary: var(--ink, #0D0C09);
	--gf-ctrl-border-color: var(--line-300, #D3CFC4);
	--gf-ctrl-border-color-focus: var(--ink, #0D0C09);
	--gf-ctrl-radius: 8px;
	--gf-ctrl-btn-radius: 999px;
	--gf-ctrl-label-color-primary: var(--ink-800, #1C1A15);
	--gf-ctrl-btn-font-weight: 700;
	--gf-font-family-base: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.gform-theme--framework .gform_footer .gform_button,
.gform-theme--framework .gform_page_footer .gform_next_button {
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Check lists (core/list with className "list gs-list-check"); gs-on-dark on dark sections */
ul.gs-list-check {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

ul.gs-list-check li {
	margin-bottom: 0.75rem;
	padding-left: 2rem;
	position: relative;
}

ul.gs-list-check li::before {
	background: var(--primary, #BC8D16);
	border-radius: 999px;
	content: '';
	height: 1.25rem;
	left: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat, linear-gradient(#000, #000);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	position: absolute;
	top: 0.2em;
	width: 1.25rem;
}

ul.gs-list-cols {
	column-gap: 2rem;
	columns: 2;
}

ul.gs-on-dark li {
	color: rgba(254, 254, 252, 0.85);
}

ul.gs-on-dark strong {
	color: var(--surface-50, #FEFEFC);
}

@media (max-width: 767px) {
	ul.gs-list-cols {
		columns: 1;
	}
}

ol.gs-list-check {
	counter-reset: gs;
}

/* FAQ accordions (core/details with className "gs-details") */
.gs-details {
	border-bottom: 1px solid var(--line-200, #E6E3DA);
	padding: 0;
}

.gs-details summary {
	color: var(--ink-800, #1C1A15);
	cursor: pointer;
	font-weight: 700;
	list-style: none;
	padding: 1.25rem 2rem 1.25rem 0;
	position: relative;
}

.gs-details summary::-webkit-details-marker {
	display: none;
}

.gs-details summary::after {
	color: var(--gold-text, #7A5C10);
	content: '+';
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	position: absolute;
	right: 0;
	top: 1.1rem;
}

.gs-details[open] summary::after {
	content: '\2212';
}

.gs-details > p {
	padding-bottom: 1.25rem;
}

/* Division check lists: deep division colour (AA on light) */
ul.gs-check-residential li::before { background: var(--residential-deep, #004270); }
ul.gs-check-commercial li::before { background: var(--commercial-deep, #00673E); }
ul.gs-check-industrial li::before { background: var(--industrial-deep, #9F3515); }

/* Division pages (body class from functions.php): header Call Now, gold closing band and
   mobile call bar take the division colour instead of gold. Ink text stays AA on all three. */
body.gs-division-residential { --gs-div: var(--residential, #009CDC); --gs-div-deep: var(--residential-deep, #004270); }
body.gs-division-commercial { --gs-div: var(--commercial, #2CB34A); --gs-div-deep: var(--commercial-deep, #00673E); }
body.gs-division-industrial { --gs-div: var(--industrial, #F47421); --gs-div-deep: var(--industrial-deep, #9F3515); }

body.gs-division .gb-element-hdr005,
body.gs-division .gb-element-fcta001,
body.gs-division .gb-element-fbar001 {
	background-color: var(--gs-div);
}

body.gs-division .gb-element-hdr005:hover,
body.gs-division .gb-element-hdr005:focus-visible {
	background-color: var(--gs-div-deep);
	color: #fff;
}

/* Division pages: quote form buttons and focus colour follow the division.
   GF prints its brand variables under an ID selector (#gform_wrapper_N), hence !important. */
body.gs-division-residential .gform_wrapper.gform-theme { --gf-color-primary-rgb: 0, 156, 220 !important; }
body.gs-division-commercial .gform_wrapper.gform-theme { --gf-color-primary-rgb: 44, 179, 74 !important; }
body.gs-division-industrial .gform_wrapper.gform-theme { --gf-color-primary-rgb: 244, 116, 33 !important; }

body.gs-division .gform_wrapper.gform-theme {
	--gf-color-primary: var(--gs-div) !important;
	--gf-color-primary-darker: var(--gs-div-deep) !important;
	--gf-color-primary-lighter: var(--gs-div) !important;
}

/* Divided tick list (division pages, portrait block): plain tick in the division colour, hairline rows */
ul.gs-list-ticks {
	border-top: 1px solid var(--line-200, #E8E5DD);
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.gs-list-ticks li {
	border-bottom: 1px solid var(--line-200, #E8E5DD);
	color: var(--ink, #0D0C09);
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0;
	padding: 0.9rem 0 0.9rem 2rem;
	position: relative;
}

ul.gs-list-ticks li::before {
	background: var(--gs-tick, var(--primary, #BC8D16));
	content: '';
	height: 1.1rem;
	left: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1.1rem;
}

ul.gs-tick-residential { --gs-tick: var(--residential, #009CDC); }
ul.gs-tick-commercial { --gs-tick: var(--commercial, #2CB34A); }
ul.gs-tick-industrial { --gs-tick: var(--industrial, #F47421); }

/* Blog: card grid gutters (GP Premium Blog columns + "Post Card" content template) */
.blog .generate-columns-container,
.archive .generate-columns-container {
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

.blog .generate-columns,
.archive .generate-columns {
	margin-bottom: 1.5rem;
}

/* Single post reading styles */
.single-post .entry-content > * + h2,
.single-post .entry-content > * + h3 {
	margin-top: 2rem;
}

.single-post .entry-content img,
.single-post .featured-image img {
	border-radius: 12px;
}

/* Pages with their own closing band (About: "Trust the Shine.") hide the global Site Footer band */
body:has(.gs-own-band) .gb-element-fcta001 { display: none; }