/*
Theme Name: Southgate
Author: Digivate
Author URI: https://digivate.com/
Theme URI: https://www.digivate.com/
Description: Block theme for Southgate Global.
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 8.0
Version: 2.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: southgate
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, custom-colors, custom-menu, featured-images
Support: support@digivate.com
*/

/*
 * Only what theme.json cannot express lives here. Block-specific rules are in
 * assets/styles/<block>.css and load only when that block is on the page.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--wp--custom--header--height) + var(--wp-admin--admin-bar--height, 0px) + 20px);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
}

b,
strong {
	font-weight: 700;
}

/* Sticky header: the header template part sticks, below the admin bar when present. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: var(--wp--preset--color--white);
}

.wp-site-blocks > main {
	margin-top: 0;
}

/* Form fields (Contact Form 7, Gravity Forms and core search). */
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select,
textarea {
	width: 100%;
	border: 1px solid var(--wp--preset--color--light-grey);
	border-radius: 5px;
	background-color: var(--wp--preset--color--white);
	padding: 12px 15px;
	color: var(--wp--preset--color--dark-grey);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
}

input[type="submit"],
button[type="submit"]:not(.wp-element-button) {
	border: 0;
	border-radius: 24px;
	background-color: var(--wp--preset--color--red);
	cursor: pointer;
	padding: 11px 26px;
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

input[type="submit"]:hover,
button[type="submit"]:not(.wp-element-button):hover {
	background-color: var(--wp--preset--color--blue);
}

/* Responsive helpers, available as "Additional CSS class" on any block. */
@media (max-width: 781px) {
	.hide-mobile {
		display: none !important;
	}

	.reverse-on-mobile {
		flex-direction: column-reverse;
	}
}

@media (min-width: 782px) {
	.hide-desktop {
		display: none !important;
	}
}

/* Calculator and schematic pop-ups. */
.sg-modal {
	/* Hidden with visibility, not display, so forms inside can measure themselves. */
	display: flex;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	position: fixed;
	inset: 0;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.6);
	padding: 20px;
}

.sg-modal.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.sg-modal__dialog {
	position: relative;
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--medium);
	width: min(100%, 900px);
	max-height: 90vh;
	overflow: auto;
}

.sg-modal__dialog--wide {
	width: min(100%, 1300px);
}

.sg-modal__dialog iframe {
	border: 0;
	width: 100%;
	height: 80vh;
}

.sg-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--dark-grey);
	cursor: pointer;
	width: 32px;
	height: 32px;
	color: var(--wp--preset--color--white);
	font-size: 20px;
	line-height: 1;
}

/* Headings follow the text colour of a coloured section. */
.has-text-color :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/* Gravity Forms: buttons and accents in the site's colours. */
.gform_wrapper.gform-theme {
	--gf-color-primary: var(--wp--preset--color--red);
	--gf-color-primary-darker: var(--wp--preset--color--dark-blue);
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--red);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--dark-grey);
	--gf-ctrl-btn-radius: 24px;
	--gf-ctrl-btn-padding-x: 26px;
	--gf-ctrl-btn-font-size: 1rem;
	--gf-ctrl-radius: 5px;
	--gf-ctrl-border-color: var(--wp--preset--color--light-grey);
	--gf-ctrl-label-color-primary: currentColor;
	--gf-ctrl-desc-color: currentColor;
}

.has-text-color .gform_wrapper.gform-theme {
	--gf-ctrl-label-color-req: currentColor;
	--gf-color-danger: currentColor;
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
	border-radius: 24px;
	background-color: var(--wp--preset--color--red);
	padding: 11px 26px;
	color: var(--wp--preset--color--white);
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
	background-color: var(--wp--preset--color--dark-grey);
}

/* Posts written before the block editor. */
.sg-classic-content > * {
	margin-block: 0 1.25em;
}

.sg-classic-content img {
	border-radius: 5px;
}

.sg-classic-content::after {
	display: block;
	clear: both;
	content: "";
}

/* Forms on a coloured card: submit button on the right, with the arrow used on other buttons. */
.sg-form .gform_wrapper .gform_footer,
.sg-form .gform_wrapper .gform-footer {
	justify-content: flex-end;
}

.sg-form .gform_wrapper .gform_button {
	background-image: url("assets/img/arrow-right.svg");
	background-position: right 20px center;
	background-size: 24px 24px;
	background-repeat: no-repeat;
	padding-right: 56px;
	min-width: 30%;
}

/* Space between top-level sections of a page; full-width bands sit flush against each other. */
.wp-block-post-content > * + * {
	margin-block-start: var(--wp--preset--spacing--large);
}

.wp-block-post-content > .alignfull + .alignfull,
.wp-block-post-content > .wp-block-cover.is-style-hero:first-child {
	margin-block-start: 0;
}

/* The footer always has clear space above it. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-top: var(--wp--preset--spacing--large) !important;
}

/* Gravity Forms on a coloured card: outlined fields, tight rows, full-width submit. */
.sg-form.has-background .gform_wrapper.gform-theme {
	--gf-form-gap-y: 12px;
	--gf-ctrl-bg-color: transparent;
	--gf-ctrl-border-color: var(--wp--preset--color--white);
	--gf-ctrl-color: currentColor;
	--gf-ctrl-size: 38px;
	--gf-ctrl-label-font-size-primary: 0.875rem;
}

.sg-form.has-background .gform_wrapper :is(input:not([type="submit"]), select, textarea) {
	border-color: var(--wp--preset--color--white);
	background-color: transparent;
	padding: 7px 12px;
	color: inherit;
}

.sg-form.has-background .gform_wrapper select option {
	color: var(--wp--preset--color--dark-grey);
}

.sg-contact .sg-form .gform_wrapper .gform_button {
	background-color: var(--wp--preset--color--dark-grey);
	width: 100%;
}

.sg-contact .sg-form .gform_wrapper .gform_button:hover {
	background-color: var(--wp--preset--color--red);
}

/* Forms on a coloured card, wherever they are used. */
.sg-form.has-background .gform_wrapper.gform-theme :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
	border: 1px solid var(--wp--preset--color--white) !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
}

.sg-form.has-background .gform_wrapper.gform-theme .gform_fields {
	row-gap: 10px;
}

.sg-form.has-background .gform_wrapper.gform-theme .gfield_label {
	margin-bottom: 2px;
	font-weight: 400;
}

.sg-form.has-background .gform_wrapper .gform_button {
	background-color: var(--wp--preset--color--dark-grey);
	width: 100%;
	min-width: 0;
}

.sg-form.has-background .gform_wrapper .gform_button:hover {
	background-color: var(--wp--preset--color--red);
}

.sg-form.has-background {
	padding: 26px 28px;
}

.sg-form.has-background > h3 {
	margin-bottom: 6px;
}

.sg-form.has-background .gform_wrapper.gform-theme .gform_button,
.sg-form.has-background .gform_wrapper.gform-theme input[type="submit"] {
	background-color: var(--wp--preset--color--dark-grey) !important;
	background-image: url("assets/img/arrow-right.svg") !important;
	background-position: right 20px center !important;
	background-size: 22px 22px !important;
	background-repeat: no-repeat !important;
	width: 100% !important;
}

.sg-form.has-background .gform_wrapper.gform-theme .gform_button:hover,
.sg-form.has-background .gform_wrapper.gform-theme input[type="submit"]:hover {
	background-color: var(--wp--preset--color--red) !important;
}

.sg-form.has-background .gform_wrapper.gform-theme select {
	padding-block: 0 !important;
	height: 38px;
	line-height: 36px;
}