/*
 Theme Name:   Primo Woodworks
 Theme URI:    https://primowoodworks.ca/
 Description:  Bricks Builder child theme for Primo Woodworks. Holds site-specific CSS, PHP hooks and custom elements so Bricks updates never overwrite them.
 Author:       devEdge Internet Marketing
 Template:     bricks
 Version:      1.0.0
 Requires PHP: 8.1
 Text Domain:  primo-bricks-child
*/

/*
 * Site-wide behaviour that has no Bricks control. Component styling lives in
 * Bricks global classes; design tokens live in Bricks global variables and the
 * "Primo" colour palette (see design/README.md).
 */

/* Sticky header. Bricks' own "Sticky header" option is position: fixed and overlays content, so it stays off. */
#brx-header {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* Smooth in-page jumps (e.g. "Get a Free Quote" -> #quote); the reduced-motion rule below turns it off. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + var(--space-m));
}

/* Inline utilities used inside heading/rich-text content (e.g. <span class="text-gradient">).
   They are not Bricks elements, so Bricks would never output a global class for them. */
.text-gradient {
	background-image: linear-gradient(100deg, var(--primary) 0%, var(--accent) 55%, var(--primary-l-2) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Keyword line inside the homepage H1 ("Custom Carpentry & Woodworking in Greater Victoria"),
   styled as a small label above the display headline. */
.hero__kicker {
	display: block;
	margin-bottom: var(--space-s);
	font-family: var(--font-heading);
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* Gravity Forms Customizations
   Colours come from the gform_default_styles filter (includes/gravity_forms.php); this section
   brings fonts, spacing, corner shapes and the submit button in line with the Bricks .btn style.
--------------------------------------------- */
body .gform_wrapper.gform-theme--framework {
	--gf-font-family-base: var(--font-body);
	--gf-font-family-primary: var(--font-body);
	--gf-ctrl-font-family: var(--font-body);
	--gf-ctrl-label-font-family-primary: var(--font-heading);
	--gf-ctrl-label-font-weight-primary: 700;
	--gf-ctrl-desc-font-family: var(--font-body);
	--gf-form-validation-font-family: var(--font-body);
	--gf-form-validation-heading-font-family: var(--font-heading);
}

/* Adjust the vertical distance between fields. */
body .gform_wrapper.gform-theme--foundation .gform_fields {
	grid-row-gap: 20px;
	row-gap: 20px;
}

/* Signature corner shape (sharp top-left/bottom-right) on text inputs. */
body .gform_wrapper.gform-theme--framework .gfield input:where([type=text], [type=email], [type=tel], [type=url], [type=number]),
body .gform_wrapper.gform-theme--framework .gfield select,
body .gform_wrapper.gform-theme--framework .gfield textarea {
	border-radius: 0 var(--radius-s) 0 var(--radius-s);
}

body .gform_wrapper.gform-theme--framework .gfield textarea.large {
	block-size: 14rem;
	min-block-size: 14rem;
}

/* Makes the under input field description size and color consistent. */
body .gform_wrapper form .gfield_description {
	font-size: var(--gf-ctrl-desc-font-size);
	color: var(--gf-ctrl-label-color-tertiary);
}

/* Helps users identify readonly fields by greying out the input background. */
body .gform_wrapper form .gf_readonly input,
body .gform_wrapper form .gf_readonly select,
body .gform_wrapper form .gf_readonly textarea {
	background-color: var(--sand) !important;
}

/* Forces footer to 100% width, allowing the form button to be center or right aligned. */
body .gform_wrapper form .gform_footer {
	width: 100%;
	margin-block-start: 24px;
}

/* Submit / next / previous buttons match the Bricks .btn + .btn--primary classes. */
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_footer button[type=submit],
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_footer input.button,
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_footer input[type=submit],
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_page_footer button[type=submit],
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_page_footer input.gform_next_button.button,
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_page_footer button.gform_next_button.button,
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_page_footer input[type=submit],
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_page_footer input.gform_previous_button.button,
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_page_footer button.gform_previous_button {
	margin: 0;
	padding: 1.5rem 2.8rem;
	min-block-size: 0;
	border: 2px solid var(--primary);
	border-radius: 0 var(--radius-m) 0 var(--radius-m);
	background-color: var(--primary);
	color: var(--white);
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_footer button[type=submit]:hover,
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_footer input.button:hover,
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_footer input[type=submit]:hover,
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_page_footer button[type=submit]:hover,
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_page_footer input.gform_next_button.button:hover,
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_page_footer button.gform_next_button.button:hover,
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_page_footer input[type=submit]:hover {
	border-color: var(--primary-d-1);
	background-color: var(--primary-d-1);
	color: var(--white);
	transform: translateY(-2px);
}

/* Secondary (previous) button: dark variant, like .btn--dark. */
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_page_footer input.gform_previous_button.button,
body .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital form .gform_page_footer button.gform_previous_button {
	border-color: var(--ink);
	background-color: var(--ink);
}

/* Fix a weird visual artifact on the drop-down select arrow that shows up when the form is included via a template/component. */
.gform_wrapper .gfield .gravity-select-parent .select-arrow {
	position: absolute;
}

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