/*
Theme Name:   Skip N Go Farm
Description:  Child theme of Hello Elementor for skipngofarm.com. Deployed by Centry Host's Git deployment into wp-content/themes/skipngofarm-child: the folder becomes exactly this repository's main branch.
Template:     hello-elementor
Version:      1.6.3
Requires PHP: 7.4
Text Domain:  skipngofarm-child
License:      Proprietary
*/

/* Site-specific CSS goes here, below this header. */

/*
 * Service cards: each card is its column, so all three are as tall as the
 * tallest; its widgets stack, and "More" sits at the foot.
 */
.sng-card > .elementor-widget-wrap {
	flex-direction: column;
	flex-wrap: nowrap;
	/* A flex item never shrinks below its longest word unless told it may. */
	min-width: 0;
}

/* A title one word wider than the card ("Training/Lessons") breaks, as it did before, rather than widen its card. */
.sng-card .elementor-heading-title {
	overflow-wrap: anywhere;
}

/*
 * Trail Riding (`0ae92c5`, the same column on staging and live): its photo is
 * about 2.5 times brighter behind the text than the other cards' (mean
 * luminance 0.167 against 0.057 and 0.070). A 33% black overlay - blended in
 * display colour, so it removes about 58% of the light - brings it to
 * their darkness, in both states, so its white text reads as theirs does.
 */
.sng-card.elementor-element-0ae92c5 > .elementor-widget-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(0, 0, 0, 0.33);
	pointer-events: none;
}

.sng-card.elementor-element-0ae92c5 > .elementor-widget-wrap > .elementor-element {
	position: relative;
	z-index: 1;
}

.sng-card .elementor-widget-button {
	margin-top: auto;
}

/*
 * News cards (Elementor Pro Posts, `sng-news`), styled as the service cards:
 * the post's image fills the card, darkened and lightening on hover as the
 * service cards' photos do; white Poppins title and text; the green pill
 * button at the foot. `.elementor .elementor-element.sng-news` outranks the
 * widget's own generated styles.
 */
.elementor .elementor-element.sng-news .elementor-posts-container {
	--grid-column-gap: 30px;
	--grid-row-gap: 30px;
}

.elementor .elementor-element.sng-news .elementor-post {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 420px;
	overflow: hidden;
	background-color: #000;
}

.elementor .elementor-element.sng-news .elementor-post__thumbnail__link {
	position: absolute;
	inset: 0;
	width: 100%;
	margin: 0;
}

.elementor .elementor-element.sng-news .elementor-post__thumbnail {
	position: absolute;
	inset: 0;
	padding-bottom: 0;
}

.elementor .elementor-element.sng-news .elementor-post__thumbnail img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: none;
	filter: brightness(0.45);
	transition: filter 1s;
}

.elementor .elementor-element.sng-news .elementor-post:hover .elementor-post__thumbnail img {
	filter: brightness(0.75);
}

/* The text sits over the image; only its links take the pointer, so the rest of the card opens the post. */
.elementor .elementor-element.sng-news .elementor-post__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 100px 100px 30px 25px;
	pointer-events: none;
}

.elementor .elementor-element.sng-news .elementor-post__text a {
	pointer-events: auto;
}

.elementor .elementor-element.sng-news .elementor-post__title,
.elementor .elementor-element.sng-news .elementor-post__title a {
	margin: 0 0 10px;
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.1em;
	text-transform: capitalize;
}

.elementor .elementor-element.sng-news .elementor-post__excerpt p {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: 0.9rem;
}

.elementor .elementor-element.sng-news a.elementor-post__read-more {
	align-self: flex-start;
	margin-top: auto;
	padding: 7px 20px;
	border-radius: 33px;
	color: #fff;
	background-color: var(--e-global-color-accent);
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	text-decoration: underline;
	text-transform: capitalize;
}

.elementor .elementor-element.sng-news a.elementor-post__read-more:hover {
	color: #fff;
	background-color: var(--e-global-color-f46b420);
}

@media (max-width: 1024px) {
	.elementor .elementor-element.sng-news .elementor-post__title,
	.elementor .elementor-element.sng-news .elementor-post__title a {
		font-size: 1.2rem;
	}

	.elementor .elementor-element.sng-news .elementor-post__text {
		padding: 100px 20px 30px;
	}
}

@media (max-width: 767px) {
	.elementor .elementor-element.sng-news .elementor-post__text {
		padding: 100px 100px 30px 25px;
	}
}

/*
 * Every button on the site is a pill, as the service cards' "More" is.
 * `!important` because Elementor writes each button's own radius with a
 * selector more specific than any theme rule.
 */
.elementor-button,
.elementor-post__read-more,
button,
input[type="submit"],
input[type="button"] {
	border-radius: 33px !important;
}

/*
 * From Hello Elementor's Customizer > Additional CSS, which WordPress keeps per
 * theme and so stayed behind when this child theme was activated.
 */

/*
 * Every Elementor Pro form, styled here by element selector and never in the
 * form's Style tab (the CMHWorks forms standard), so all forms look alike and
 * follow one change. The look is the site's Contact Form 7 form's, which these
 * replace. `.elementor .elementor-element.elementor-widget-form form` outranks
 * the styles Elementor generates from a form's defaults.
 */
.elementor .elementor-element.elementor-widget-form form.elementor-form .elementor-field-group {
	margin-bottom: 14px;
}

.elementor .elementor-element.elementor-widget-form form.elementor-form .elementor-field-group > .elementor-field-label {
	padding-bottom: 6px;
	color: #333;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
}

.elementor .elementor-element.elementor-widget-form form.elementor-form .elementor-field-textual {
	min-height: 0;
	padding: 8px 16px;
	border: 1px solid #666;
	border-radius: 3px;
	color: #000;
	background-color: #fff;
	font-size: 16px;
	line-height: 24px;
}

.elementor .elementor-element.elementor-widget-form form.elementor-form .elementor-field-option label {
	color: #333;
	font-size: 16px;
}

.elementor .elementor-element.elementor-widget-form form.elementor-form .e-form__buttons {
	justify-content: flex-start;
}

.elementor .elementor-element.elementor-widget-form form.elementor-form .elementor-button[type="submit"] {
	flex: 0 0 auto;
	width: auto;
	padding: 15px 25px;
	border: none;
	color: #fff;
	background-color: #6ec1e4;
	font-size: 18px;
	font-weight: 700;
	transition: background-color 0.4s ease;
}

.elementor .elementor-element.elementor-widget-form form.elementor-form .elementor-button[type="submit"]:hover {
	background-color: #494949;
}

.elementor .elementor-element.elementor-widget-form form.elementor-form .elementor-button[type="submit"]:active {
	background-color: #5da4c1;
}

/*
 * Header menu (Elementor Pro Nav Menu, `sng-menu`): what Essential Addons'
 * Simple Menu drew and the Nav Menu's controls cannot - uneven item padding,
 * and a desktop dropdown styled apart from the mobile list.
 */
/* Specific enough to outrank Pro's `.elementor-nav-menu--main .elementor-nav-menu a:hover`, so hover never moves an item. */
.sng-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
	padding: 16px 10px 0 5px;
}

/*
 * The "More" dropdown on desktop: a narrow white list under the item's right
 * edge. `.elementor-location-header` outranks the widget's own dropdown rules
 * (`.elementor-<id> .elementor-element.elementor-element-<id> ...`), which
 * style the mobile list and must not style this.
 */
.elementor-location-header .sng-menu .elementor-nav-menu--main .sub-menu {
	left: auto !important;
	right: 0;
	width: 140px;
	min-width: 140px !important;
	background-color: #fff;
	box-shadow: none;
}

.elementor-location-header .sng-menu .elementor-nav-menu--main .sub-menu a.elementor-sub-item {
	justify-content: flex-end;
	padding: 5px 15px 0;
	border-bottom: 1px solid #666;
	color: #000;
	background-color: #fff;
	font-family: "Playfair Display", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 40px;
}

/* The list the toggle opens below the breakpoint. */
.sng-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container a {
	padding: 10px 20px;
}

.sng-menu .elementor-menu-toggle {
	padding: 5px 10px;
}

/*
 * Photo gallery filter titles (Elementor Pro Gallery, type Multiple): each is
 * the site's pill button - the service cards' "More" - green while its gallery
 * is showing, blue under the pointer. The widget's own active marker is an
 * underline in a transparent colour, so the active gallery showed nothing.
 * `.elementor .elementor-element.elementor-widget-gallery` outranks the styles
 * Elementor generates from the widget's settings.
 */
.elementor .elementor-element.elementor-widget-gallery .elementor-gallery__titles-container .elementor-gallery-title {
	padding: 7px 20px;
	border-radius: 33px;
	color: #333;
	background-color: transparent;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	transition: background-color 0.3s, color 0.3s;
}

.elementor .elementor-element.elementor-widget-gallery .elementor-gallery__titles-container .elementor-gallery-title.elementor-item-active {
	color: #fff;
	background-color: var(--e-global-color-accent);
}

.elementor .elementor-element.elementor-widget-gallery .elementor-gallery__titles-container .elementor-gallery-title:hover,
.elementor .elementor-element.elementor-widget-gallery .elementor-gallery__titles-container .elementor-gallery-title:focus-visible {
	color: #fff;
	background-color: var(--e-global-color-f46b420);
}

.elementor .elementor-element.elementor-widget-gallery .elementor-gallery__titles-container .elementor-gallery-title::after {
	display: none;
}

/* Invisible, and so it must not take clicks either: it sits over the scroll-to-top button's corner. */
.grecaptcha-badge {
	opacity: 0;
	pointer-events: none;
}

/*
 * Scroll-to-top: the header's fixed Button widget (`51e088e`, the same on
 * staging and live), a circle at the bottom right. `!important` because
 * Elementor writes the widget's position offsets more specifically than a
 * theme rule can.
 */
.elementor-element.elementor-element-51e088e {
	right: 20px !important;
	left: auto !important;
	/* The widget is set 0% wide and its button overflowed it, which only worked anchored left. */
	width: 50px !important;
	max-width: none !important;
}

.elementor-element-51e088e .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border-radius: 50% !important;
}

/* Yet Another Related Posts. */
a.yarpp-thumbnail,
a.yarpp-thumbnail span {
	color: #29abe0;
}

.yarpp h3 {
	color: #29abe0;
	font-family: "Playfair Display", sans-serif;
	font-size: 32px !important;
}

span.yarpp-thumbnail-title {
	font-family: "Playfair Display", sans-serif;
	font-size: 1.2em !important;
	font-weight: 600;
}