/*
Theme Name:   Hello Elementor Child (SSMG)
Theme URI:    https://www.ssmgfl.com
Description:  Child theme for Southern States Management Group. Holds self-hosted fonts, ACF JSON, REST helpers for the Elementor build, and the small amount of CSS that Elementor cannot express (Gravity Forms skin, focus rings).
Author:       Zgraph, Inc
Template:     hello-elementor
Version:      0.1.15
Text Domain:  hello-elementor-child
*/

/* ------------------------------------------------------------------
   Self-hosted fonts (design: Estate II).
   Elementor global fonts reference these family names.
   ------------------------------------------------------------------ */
@font-face {
	font-family: 'Sorts Mill Goudy';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/sorts-mill-goudy-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Sorts Mill Goudy';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/sorts-mill-goudy-400-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/public-sans-var.woff2') format('woff2');
}
@font-face {
	font-family: 'Public Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/public-sans-400-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Pinyon Script';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/pinyon-script-400.woff2') format('woff2');
}

/* Brief native-popup loading state; the existing Gravity Forms skin stays in use. */
.ss-proposal-loader[aria-busy="true"] { min-height: 280px; }
.ss-proposal-loader [data-proposal-retry][hidden] { display: none; }
.ss-proposal-loader [data-proposal-status],
.ss-proposal-loader [data-proposal-fallback] { font-family: 'Public Sans', sans-serif; }

/* Keyboard focus ring, sitewide. */
body { background-color: var(--paper, #FBFAF6); }

/* The Theme Builder wrapper must stick: its inner header alone is confined
   to the wrapper's own height. Visual shrink styles live in ss-header-scroll. */
.elementor-location-header:has(.ss-header-scroll) {
	position: sticky;
	top: 0;
	z-index: 85;
	width: 100%;
}
body.admin-bar .elementor-location-header:has(.ss-header-scroll) { top: 32px; }
html { scroll-padding-top: var(--ssmg-header-clearance, 176px); }
@media (max-width: 782px) {
	body.admin-bar .elementor-location-header:has(.ss-header-scroll) { top: 46px; }
}
/* WordPress's phone admin bar scrolls away instead of staying fixed. */
@media (max-width: 600px) {
	body.admin-bar .elementor-location-header:has(.ss-header-scroll.is-compact) { top: 0; }
}
:focus-visible {
	outline: 2px solid var(--e-global-color-accent, #392C84);
	outline-offset: 2px;
}

/* The backdrop is outside Elementor's header; drawer presentation uses the
   reusable ss-mobile-flyout Global Class. */
.ss-mobile-backdrop {
	position: fixed;
	inset: 0;
	z-index: 84;
	background: rgba(30, 23, 71, .42);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, visibility .25s;
}

/* Honor reduced motion everywhere. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Loop cards: cycle a tint through yellow, indigo and red (the design pattern). Add the class
   ss-tint-cycle to a Loop Grid widget; items expose --cycle-bg, --cycle-fg and --cycle-bar. */
/* Elementor prepends a STYLE sibling. Count loop items, not all child nodes. */
.ss-tint-cycle .e-loop-item:nth-child(3n+1 of .e-loop-item) { --cycle-bg: var(--ss-yellow-tint); --cycle-fg: var(--ss-gold-ink); --cycle-bar: var(--ss-yellow); }
.ss-tint-cycle .e-loop-item:nth-child(3n+2 of .e-loop-item) { --cycle-bg: var(--ss-indigo-tint); --cycle-fg: var(--ss-indigo); --cycle-bar: var(--ss-indigo); }
.ss-tint-cycle .e-loop-item:nth-child(3n+3 of .e-loop-item) { --cycle-bg: var(--ss-red-tint); --cycle-fg: var(--ss-red); --cycle-bar: var(--ss-red); }
.elementor .ss-tint-cycle .ss-icon-tile { background-color: var(--cycle-bg); color: var(--cycle-fg); }
.elementor .ss-tint-cycle .ss-icon-tile svg { color: var(--cycle-fg); }
.elementor .ss-tint-cycle .ss-cycle-bar { background-color: var(--cycle-bar); }
.elementor .ss-tint-cycle .ss-cycle-top { border-top-color: var(--cycle-bar); }

/* Resource cards: the second card carries the three-color ridge along its top edge (design detail).
   Add ss-ridge-second next to ss-tint-cycle on the Loop Grid widget. */
.ss-ridge-second .e-loop-item:nth-child(2 of .e-loop-item) .ss-card,
.elementor-254 .ss-ridge-second .e-loop-item .ss-card { position: relative; overflow: hidden; }
.ss-ridge-second .e-loop-item:nth-child(2 of .e-loop-item) .ss-card::before,
.elementor-254 .ss-ridge-second .e-loop-item .ss-card::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
	background: linear-gradient(90deg, var(--ss-yellow) 0 33.4%, var(--ss-indigo) 33.4% 66.7%, var(--ss-red) 66.7% 100%);
}

/* ------------------------------------------------------------------
   Gravity Forms skin. Gravity Forms 2.9 exposes CSS variables on the form wrapper; map them to the
   SSMG design tokens (Variables from Elementor) so every form matches the site.
   ------------------------------------------------------------------ */
.gform_wrapper.gform-theme--framework {
	--gf-font-family-base: var(--font-sans, 'Public Sans', sans-serif);
	--gf-color-primary: var(--ss-red);
	--gf-color-primary-darker: var(--ss-red-deep);
	--gf-color-primary-lighter: var(--ss-red);
	--gf-color-in-ctrl: var(--white);
	--gf-color-in-ctrl-primary: var(--ss-red);
	--gf-color-in-ctrl-primary-hover: var(--ss-red-deep);
	--gf-color-in-ctrl-light: var(--line);
	--gf-color-out-ctrl-dark: var(--ss-ink);
	--gf-ctrl-color: var(--ss-ink);
	--gf-ctrl-bg-color: var(--white);
	--gf-ctrl-border-color: var(--line-strong);
	--gf-ctrl-border-color-focus: var(--ss-indigo);
	--gf-ctrl-outline-color-focus: var(--ss-indigo);
	--gf-ctrl-radius: 3px;
	--gf-ctrl-size: 44px;
	--gf-ctrl-label-color-primary: var(--ss-ink);
	--gf-ctrl-label-font-size-primary: 13.5px;
	--gf-ctrl-label-font-weight-primary: 600;
	--gf-ctrl-label-color-secondary: var(--ink-2);
	--gf-ctrl-desc-color: var(--ink-2);
	--gf-ctrl-placeholder-color: var(--ink-3);
	--gf-ctrl-btn-bg-color-primary: var(--ss-red);
	--gf-ctrl-btn-bg-color-hover-primary: var(--ss-red-deep);
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-color-primary: var(--white);
	--gf-ctrl-btn-color-hover-primary: var(--white);
	--gf-ctrl-btn-radius: 3px;
	--gf-ctrl-btn-font-size: 15px;
	--gf-ctrl-btn-font-weight: 600;
	--gf-ctrl-btn-size: 44px;
	--gf-field-gap-y: 18px;
}
.gform_wrapper.gform-theme--framework .gfield_required { color: var(--ss-red); }
.gform_wrapper.gform-theme--framework .gform_footer { padding-block-start: 8px; }
.gform_wrapper.gform-theme--framework .gform_confirmation_message { font-family: var(--font-sans); color: var(--ss-ink); }