/**
 * InTouch GeoDir — shared component styles
 *
 * This stylesheet covers only the field-level elements rendered by the
 * [itgd_*] shortcodes. All layout, colours, and row-level styling are
 * managed in Beaver Builder — nothing here sets widths, backgrounds,
 * or positioning.
 *
 * Custom properties can be overridden per-row in BB's custom CSS field:
 *
 *   .fl-node-XXXXXX {
 *     --itgd-btn-bg:      #003366;
 *     --itgd-btn-color:   #ffffff;
 *   }
 */

/* ── Shared custom properties ─────────────────────────────────────────────── */

:root {
	--itgd-btn-bg:           transparent;
	--itgd-btn-color:        inherit;
	--itgd-btn-border:       1px solid currentColor;
	--itgd-btn-radius:       3px;
	--itgd-btn-padding:      0.25em 0.75em;

	--itgd-link-hover:       inherit;
	--itgd-transition:       color 0.15s ease, background-color 0.15s ease;
}

/* ── Field spans ──────────────────────────────────────────────────────────── */

/*
 * Fields start visible — BB controls the row's empty-state appearance.
 * JS will set display:none on individual fields only when the resolved
 * location has no value for that field (e.g. no phone on record).
 */
.itgd-field {
	display: inline;
}

/* ── Phone link ───────────────────────────────────────────────────────────── */

.itgd-phone-link {
	display:         inline-flex;
	align-items:     center;
	gap:             0.375em;
	color:           inherit;
	text-decoration: none;
	transition:      var( --itgd-transition );
}

.itgd-phone-link:hover,
.itgd-phone-link:focus-visible {
	color: var( --itgd-link-hover );
}

/* ── Details button ───────────────────────────────────────────────────────── */

a.itgd-btn,
.itgd-location-btn {
	display:          inline-flex;
	align-items:      center;
	padding:          var( --itgd-btn-padding );
	background-color: var( --itgd-btn-bg );
	color:            var( --itgd-btn-color );
	border:           var( --itgd-btn-border );
	border-radius:    var( --itgd-btn-radius );
	text-decoration:  none;
	white-space:      nowrap;
	transition:       var( --itgd-transition );
}

a.itgd-btn:hover,
.itgd-location-btn:hover,
a.itgd-btn:focus-visible,
.itgd-location-btn:focus-visible {
	background-color: var( --itgd-link-hover );
	color:            var( --itgd-btn-bg );
}

/* ── Icon ─────────────────────────────────────────────────────────────────── */

.itgd-icon {
	display:        inline-block;
	width:          1em;
	height:         1em;
	flex-shrink:    0;
	vertical-align: middle;
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.itgd-phone-link,
	a.itgd-btn,
	.itgd-location-btn {
		transition: none;
	}
}

/* ── InTouch GeoDirectory — conditional visibility classes ─────────────────
 *
 * .itc-geo-show-on-found      Hidden until a location is resolved.
 *
 * .itc-geo-show-no-location   Visible until a location is resolved. Also
 *                              visible while geolocation is still pending.
 *
 * .itc-geo-show-on-failed     Hidden until geolocation has FAILED (denied,
 *                              timed out, or nothing in range). Use for the
 *                              address / ZIP search so it never flashes while
 *                              the browser is still locating the visitor.
 *
 * Add data-itcgeo-source="nearest" (or post) to scope an element, or nest a
 * geo element inside it. With neither, the element belongs to "nearest".
 *
 * JS toggles .itc-geo-resolved / .itc-geo-failed and never touches inline
 * styles, so BB's own display type is preserved. display:none also removes
 * the element from the accessibility tree.
 *
 * In the Beaver Builder and Elementor editors the "hidden until" rules are
 * lifted so designers can see and edit every state.
 * ─────────────────────────────────────────────────────────────────────────── */

body:not( .fl-builder-edit ):not( .elementor-editor-active ) .itc-geo-show-on-found:not( .itc-geo-resolved ),
body:not( .fl-builder-edit ):not( .elementor-editor-active ) .itc-geo-show-on-failed:not( .itc-geo-failed ) {
	display: none !important;
}

/* Hide show-no-location elements once a location resolves */
.itc-geo-show-no-location.itc-geo-resolved {
	display: none !important;
}

/* ── Address / ZIP search ─────────────────────────────────────────────────── */

.itcgeo-search__label {
	display:       block;
	margin-bottom: 0.5em;
}

.itcgeo-search__row {
	display:   flex;
	flex-wrap: wrap;
	gap:       0.5em;
}

.itcgeo-search__input {
	flex:      1 1 12em;
	min-width: 0;
}

.itcgeo-search__input {
	box-sizing: border-box;
}

.itcgeo-search__btn {
	cursor: pointer;
}

.itcgeo-search__btn {
	position: relative;
}

.itcgeo-search__btn[aria-disabled="true"] {
	cursor:  progress;
}

/* Busy: the label stays in the layout (button width doesn't change) but is
 * hidden, and a spinner in the button's text colour replaces it. */
.itcgeo-search__btn.is-busy .itcgeo-search__btn-text {
	visibility: hidden;
}

.itcgeo-search__spinner {
	display: none;
}

.itcgeo-search__btn.is-busy .itcgeo-search__spinner {
	display:       block;
	position:      absolute;
	top:           50%;
	left:          50%;
	width:         1.1em;
	height:        1.1em;
	margin:        -0.55em 0 0 -0.55em;
	border:        2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation:     itcgeo-spin 0.7s linear infinite;
}

@keyframes itcgeo-spin {
	to { transform: rotate( 360deg ); }
}

@keyframes itcgeo-pulse {
	50% { opacity: 0.3; }
}

/* Reduced motion: a gentle pulse instead of rotation. */
@media ( prefers-reduced-motion: reduce ) {
	.itcgeo-search__btn.is-busy .itcgeo-search__spinner {
		animation: itcgeo-pulse 1.5s ease-in-out infinite;
	}
}

/* Keyboard focus stays visible whatever borders the module sets.
 * Colour and width come from the module's Keyboard Focus settings. */
.itcgeo-search__input:focus-visible,
.itcgeo-search__btn:focus-visible {
	outline:        var( --itcgeo-focus-width, 2px ) solid var( --itcgeo-focus-color, currentColor );
	outline-offset: 2px;
}

.itcgeo-search__status {
	margin:     0.5em 0 0;
	min-height: 1.5em;
}

/* Visually hidden live region for screen reader announcements. */
.itcgeo-sr-only {
	position:   absolute;
	width:      1px;
	height:     1px;
	margin:     -1px;
	padding:    0;
	overflow:   hidden;
	clip:       rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border:     0;
}

/* ── Map iframe responsive override ─────────────────────────────────────────
 * Forces Google Maps (or any) iframe inside .itcgeo-map to fill its
 * container completely, overriding Google's hardcoded width/height attrs.
 * ─────────────────────────────────────────────────────────────────────────── */

.itcgeo-map iframe {
	width: 100% !important;
	height: 100% !important;
	display: block;
}