/*
 * Sonder Hill — WordPress / Divi adjustments.
 * Loaded after theme.css + responsive.css so the designer's files stay
 * untouched and can be replaced with newer versions as-is.
 */

/* ------------------------------------------------------------------ Base */

/* Design typography over Divi's body defaults (and its customizer CSS). */
html body {
	font-family: var(--body-font);
	font-size: 20px;
	line-height: 1.5;
	color: var(--gray-sh);
}

/* Divi adds bottom padding to every heading and paragraph. */
.sh-header p, .sh-footer p, .sh-home p,
.sh-header h1, .sh-header h2, .sh-header h3, .sh-header h4, .sh-header h5, .sh-header h6,
.sh-footer h1, .sh-footer h2, .sh-footer h3, .sh-footer h4, .sh-footer h5, .sh-footer h6,
.sh-home h1, .sh-home h2, .sh-home h3, .sh-home h4, .sh-home h5, .sh-home h6 {
	padding-bottom: 0;
}

/* Zero specificity, so theme.css line-heights still apply on top. */
:where(.sh-header, .sh-footer, .sh-home) p {
	line-height: inherit;
}

/* ---------------------------------------------------------------- Layout */

/* Sticky footer without the fixed 630px offset: the footer height changes
   with the menu / newsletter form, so it can't be hard-coded in WordPress. */
.outersection {
	display: flex;
	flex-direction: column;
}
#innercontainer {
	flex: 1 0 auto;
	width: 100%;
	padding-bottom: 0;
}
footer.sh-footer {
	position: static;
	flex-shrink: 0;
}
.admin-bar .outersection {
	min-height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
	.admin-bar .outersection {
		min-height: calc(100vh - 46px);
	}
}

/* theme.css styles the bare header / footer / section elements. Undo that
   for any such element inside page content (Divi, Gutenberg, plugins).
   :where() keeps specificity at zero so content styles still win. */
:where(#main-content) header,
:where(#main-content) footer {
	position: static;
	width: auto;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	margin: 0;
	z-index: auto;
}
:where(#main-content) section {
	padding-top: 0;
	padding-bottom: 0;
}

/* ---------------------------------------------------------------- Header */

/* Inner pages have no banner behind the transparent header. */
.sh-inner header.sh-header {
	position: relative;
	background-color: var(--deepblue-sh-v2);
}
.sh-inner header.sh-header hr {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- Footer */

/* Newsletter rendered by Contact Form 7 (see Theme Settings > Footer). */
.newsletter_area .wpcf7 form p {
	margin: 0;
	padding: 0;
}
.subscribe_field_area .wpcf7-form-control-wrap {
	flex: 1 1 auto;
}
.subscribe_field_area input.btn-golden {
	cursor: pointer;
}
.subscribe_field_area .wpcf7-spinner {
	display: none;
}
.newsletter_area .wpcf7-not-valid-tip,
.newsletter_area .wpcf7 form .wpcf7-response-output {
	font-size: 16px;
	color: var(--white-sh);
}
.newsletter_area .wpcf7-not-valid-tip {
	position: absolute;
	left: 25px;
	bottom: -28px;
}
.newsletter_area .wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
}

/* ------------------------------------------------- Home: stallions grid */

/* 4 at a time; theme.js rotates them. Before the script runs, the first 4
   in the (server-shuffled) markup show. */
.sh-stallion-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	margin: 0;
	padding: 0;
	transition: opacity 0.4s ease;
}
.sh-stallion-grid:not(.is-ready) > li:nth-child(n+5),
.sh-stallion-grid > li[hidden] {
	display: none;
}
.sh-stallion-grid > li {
	transition: opacity 0.4s ease;
}
.sh-stallion-grid > li.is-fading {
	opacity: 0;
}
.sh-stallion-grid .stallions_img {
	aspect-ratio: 4 / 5;
}
.sh-stallion-grid .stallions_img a,
.sh-stallion-grid .stallions_img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 991px) {
	.sh-stallion-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 575px) {
	.sh-stallion-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Services: grid instead of carousel (3 / 2 / 1 columns) */
.sh-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin:0;padding:0}
.sh-services-grid > li{margin:0;min-width:0}
.sh-services-grid .services_area{height:100%}
@media (max-width:1023px){.sh-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.sh-services-grid{grid-template-columns:1fr;gap:20px}}