/* InnerG Contact widgets (Map + Form + Info) — structural rules only. */

.innerg-contact-info {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.innerg-contact-info__eyebrow {
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 1.25rem;
}

.innerg-contact-info__eyebrow--icon {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.innerg-contact-info__eyebrow--icon svg {
	width: 11px;
	height: 11px;
}

.innerg-contact-info__list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.innerg-contact-info__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block-end: 1.25rem;
	border-block-end: 1px solid var( --border );
}

.innerg-contact-info__item:last-child {
	padding-block-end: 0;
	border-block-end: none;
}

.innerg-contact-info__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	background: var( --secondary );
	color: var( --accent );
}

.innerg-contact-info__icon svg {
	width: 14px;
	height: 14px;
}

.innerg-contact-info__text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.innerg-contact-info__label {
	font-size: 0.625rem;
	color: var( --muted-foreground );
	letter-spacing: 0.02em;
}

.innerg-contact-info__value {
	font-size: 0.875rem;
	font-weight: 500;
	color: var( --foreground );
	text-decoration: none;
	transition: color 0.2s ease;
}

a.innerg-contact-info__value:hover {
	color: var( --accent );
}

.innerg-contact-info__hours {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.innerg-contact-info__hours-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.875rem;
	padding-block-end: 0.75rem;
	border-block-end: 1px solid var( --border );
}

.innerg-contact-info__hours-row:last-child {
	padding-block-end: 0;
	border-block-end: none;
}

.innerg-contact-info__hours-day {
	color: var( --muted-foreground );
}

.innerg-contact-info__hours-time {
	font-weight: 500;
	color: var( --foreground );
}

.innerg-contact-info__note {
	font-size: 0.75rem;
	color: var( --muted-foreground );
	margin-block-start: 0.75rem;
}

.innerg-contact-info__social {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.innerg-contact-info__social-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: inherit;
}

.innerg-contact-info__social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	border: 1px solid var( --border );
	color: var( --muted-foreground );
	transition: border-color 0.2s ease, color 0.2s ease;
}

.innerg-contact-info__social-icon svg {
	width: 13px;
	height: 13px;
}

.innerg-contact-info__social-link:hover .innerg-contact-info__social-icon {
	border-color: var( --accent );
	color: var( --accent );
}

.innerg-contact-info__social-text {
	display: flex;
	flex-direction: column;
}

.innerg-contact-info__social-label {
	font-size: 0.75rem;
	color: var( --muted-foreground );
}

.innerg-contact-info__social-handle {
	font-size: 0.875rem;
	font-weight: 500;
	color: var( --foreground );
}

/* ---------- Locations ("Find Us") ---------- */

.innerg-locations {
	position: relative;
	width: 100vw;
	margin-inline: calc( 50% - 50vw );
	padding: 5rem 1.5rem;
	background: var( --secondary );
}

.innerg-locations__inner {
	max-width: 80rem;
	margin-inline: auto;
}

.innerg-locations__eyebrow {
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 1rem;
}

.innerg-locations__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 2.25rem;
	color: var( --brand-dark );
	margin-block-end: 3rem;
}

.innerg-locations__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var( --border );
}

@media ( min-width: 768px ) {
	.innerg-locations__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.innerg-locations__card {
	padding: 2.5rem;
	background: var( --brand-dark );
	color: var( --background );
}

.innerg-locations__tag {
	display: block;
	font-size: 0.5625rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 1rem;
}

.innerg-locations__name {
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 1.5rem;
	margin-block-end: 0.25rem;
}

.innerg-locations__tagline {
	font-size: 0.75rem;
	color: rgba( 255, 255, 255, 0.5 );
	margin-block-end: 1.5rem;
}

.innerg-locations__details {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-block-end: 2rem;
}

.innerg-locations__detail-row {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: rgba( 255, 255, 255, 0.7 );
}

.innerg-locations__detail-row svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	margin-block-start: 0.2em;
	color: var( --accent );
}

.innerg-locations__detail-row a {
	color: inherit;
	text-decoration: none;
}

.innerg-locations__detail-row a:hover {
	color: var( --accent );
}

.innerg-locations__hours {
	padding-block-start: 1.5rem;
	border-block-start: 1px solid rgba( 255, 255, 255, 0.1 );
}

.innerg-locations__hours-label {
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 0.75rem;
}

.innerg-locations__hours-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.75rem;
	padding-block: 0.375rem;
	border-block-end: 1px solid rgba( 255, 255, 255, 0.1 );
}

.innerg-locations__hours-row:last-child {
	border-block-end: none;
}

.innerg-locations__hours-row span:first-child {
	color: rgba( 255, 255, 255, 0.55 );
}

.innerg-locations__hours-row span:last-child {
	font-weight: 500;
	color: rgba( 255, 255, 255, 0.8 );
}

.innerg-locations__placeholder {
	padding: 2.5rem;
	background: var( --background );
	border: 2px dashed var( --border );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var( --muted-foreground );
}

.innerg-locations__placeholder svg {
	margin-block-end: 1rem;
}

.innerg-locations__placeholder-title {
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 1.25rem;
	color: var( --muted-foreground );
	margin-block-end: 0.5rem;
}

.innerg-locations__placeholder-text {
	font-size: 0.875rem;
	max-width: 14rem;
}

/* Image variant: same tile footprint as the card next to it, but a
   real photo with a bottom-weighted dark gradient (matching the
   .innerg-locations__card's own colour) so the title/text stay
   legible over any image. */
.innerg-locations__placeholder--image {
	position: relative;
	padding: 2.5rem;
	border: none;
	align-items: flex-start;
	justify-content: flex-end;
	text-align: start;
	overflow: hidden;
	color: var( --background );
}

/* Two classes so this beats Elementor's own `.elementor img { height:
   auto; max-width: 100% }` reset (0,1,1 beats a bare 0,1,0). */
.innerg-locations__placeholder--image .innerg-locations__placeholder-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.innerg-locations__placeholder--image:hover .innerg-locations__placeholder-bg {
	transform: scale( 1.04 );
}

.innerg-locations__placeholder-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, color-mix( in oklab, var( --brand-dark ) 88%, transparent ) 0%, color-mix( in oklab, var( --brand-dark ) 20%, transparent ) 65%, transparent 100% );
}

.innerg-locations__placeholder-content {
	position: relative;
}

.innerg-locations__placeholder--image .innerg-locations__placeholder-title {
	color: var( --background );
}

.innerg-locations__placeholder--image .innerg-locations__placeholder-text {
	color: rgba( 255, 255, 255, 0.7 );
	max-width: none;
}

.innerg-map {
	position: relative;
	width: 100vw;
	max-width: none;
	margin-inline: calc( 50% - 50vw );
	display: block;
	height: 480px;
	background: var( --secondary, #eee );
}

/* The Maps JS API is initialised on this inner div specifically (not
   `.innerg-map` itself) since it takes over and replaces the target
   element's entire contents on init — the hover popup lives as this
   div's sibling so the API never touches or wipes it out. */
.innerg-map__canvas {
	position: absolute;
	inset: 0;
}

/* Elementor's own `.elementor iframe { max-width:100%; width:100%;
   margin:0 }` reset (0,1,1) beats the single-class rule above (0,1,0)
   regardless of source order, clamping the break-out back down to the
   column's width and zeroing the negative margin — the embed-mode
   <iframe> needs the 2-class compound selector to win. */
.elementor-widget-innerg-map .innerg-map {
	width: 100vw;
	max-width: none;
	margin-inline: calc( 50% - 50vw );
}

.innerg-map--embed {
	border: 0;
}

.innerg-map--teaser {
	position: relative;
	overflow: hidden;
	background: var( --brand-dark );
	color: var( --background );
}

.innerg-map__teaser-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.4;
}

.innerg-map__teaser-overlay {
	position: absolute;
	inset: 0;
	background: color-mix( in oklab, var( --brand-dark ) 60%, transparent );
}

.innerg-map__teaser-grid {
	position: absolute;
	inset: 0;
	opacity: 0.1;
	background-image: linear-gradient( rgba( 115, 148, 124, 0.5 ) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba( 115, 148, 124, 0.5 ) 1px, transparent 1px );
	background-size: 60px 60px;
}

.innerg-map__teaser-content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

.innerg-map__teaser-pin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border: 2px solid var( --accent );
	background: color-mix( in oklab, var( --brand-dark ) 80%, transparent );
	color: var( --accent );
}

.innerg-map__teaser-pin svg {
	width: 22px;
	height: 22px;
}

.innerg-map__teaser-card {
	padding: 0.75rem 1.5rem;
	text-align: center;
	background: color-mix( in oklab, var( --brand-dark ) 90%, transparent );
	border: 1px solid color-mix( in oklab, var( --accent ) 30%, transparent );
}

.innerg-map__teaser-tag {
	font-size: 0.625rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 0.25rem;
}

.innerg-map__teaser-address {
	font-family: var( --font-serif );
	font-weight: 600;
	font-size: 0.875rem;
	color: var( --background );
}

.innerg-map__teaser-link {
	position: absolute;
	bottom: 2rem;
	right: 2rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: var( --accent );
	color: #fff;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.innerg-map__teaser-link:hover {
	background: color-mix( in oklab, var( --accent ) 80%, black );
}

/* ---------- Map marker hover popup (Styled mode only) ---------- */

.innerg-map__popup {
	position: absolute;
	z-index: 10;
	width: 240px;
	background: var( --brand-dark, #2b291a );
	box-shadow: 0 16px 40px -8px rgba( 0, 0, 0, 0.4 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 6px );
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
	pointer-events: none;
}

.innerg-map__popup.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: auto;
}

/* Hover has no real touch equivalent, so the popup defaults to
   desktop-only — the widget's "Also show on mobile" switch flips this
   off by removing the [data-mobile] gate below (see Map_Widget.php). */
@media ( max-width: 767px ) {
	.innerg-map__popup:not( [data-mobile='1'] ) {
		display: none !important;
	}
}

/* Two classes so this beats Elementor's own `.elementor img { height:
   auto; max-width: 100% }` reset (0,1,1 beats a bare 0,1,0). */
.innerg-map__popup .innerg-map__popup-image {
	display: block;
	width: 100%;
	height: 110px;
	max-width: none;
	object-fit: cover;
}

.innerg-map__popup-body {
	padding: 1rem 1.125rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.innerg-map__popup-title {
	font-family: var( --font-serif );
	font-weight: 600;
	font-size: 1rem;
	color: var( --background, #fff );
	margin: 0 0 0.125rem;
}

.innerg-map__popup-detail {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: rgba( 255, 255, 255, 0.65 );
	margin: 0;
}

.innerg-map__popup-detail a {
	color: inherit;
	text-decoration: none;
}

.innerg-map__popup-detail a:hover {
	color: var( --background, #fff );
}

.innerg-map__popup-icon {
	display: flex;
	flex-shrink: 0;
	margin-block-start: 0.15em;
	color: var( --accent, #73947c );
}

.innerg-map__popup-icon svg {
	width: 12px;
	height: 12px;
}

.innerg-map__popup-arrow {
	position: absolute;
	bottom: -7px;
	left: 50%;
	transform: translateX( -50% );
	width: 14px;
	height: 14px;
	background: var( --brand-dark, #2b291a );
	clip-path: polygon( 0 0, 100% 0, 50% 100% );
}

/* "Always" trigger mode: a static card pinned to a corner of the map,
   no JS positioning/arrow involved — server-rendered already visible. */
.innerg-map__popup--fixed {
	transform: none;
	transition: opacity 0.2s ease;
}

.innerg-map__popup--pos-top-left {
	top: 24px;
	left: 24px;
}

.innerg-map__popup--pos-top-right {
	top: 24px;
	right: 24px;
}

.innerg-map__popup--pos-bottom-left {
	bottom: 24px;
	left: 24px;
}

.innerg-map__popup--pos-bottom-right {
	bottom: 24px;
	right: 24px;
}

/* Invisible DOM hit-area over the marker (hover mode only) — plain
   native mouseenter/mouseleave instead of google.maps.Marker's own
   mouseover/mouseout, whose canvas-based hit-testing loses hover on
   the smallest cursor movement. Sized/positioned by map.js using the
   same projection math as the popup itself. */
.innerg-map__hover-zone {
	position: absolute;
	z-index: 5;
}

.innerg-contact-form__header {
	margin-block-end: 2.5rem;
}

.innerg-contact-form__eyebrow {
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 1rem;
}

.innerg-contact-form__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	line-height: 1.15;
	font-size: 1.875rem;
	color: var( --brand-dark );
}

@media ( min-width: 768px ) {
	.innerg-contact-form__heading {
		font-size: 2.25rem;
	}
}

.innerg-contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 40rem;
}

.innerg-contact-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media ( min-width: 640px ) {
	.innerg-contact-form__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.innerg-contact-form__row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.innerg-contact-form__label {
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --muted-foreground );
}

.innerg-contact-form__field {
	box-sizing: border-box;
	border: 1px solid var( --border, #ddd );
	background: var( --secondary );
	padding: 0.75rem 1rem;
	font: inherit;
	font-size: 0.875rem;
	color: var( --foreground );
	transition: border-color 0.2s ease;
}

/* Every field except the textarea shares one fixed height — inputs and
   the native <select> render at slightly different intrinsic heights
   otherwise (the select's own UA chrome adds a few px on top of the
   same padding). */
.innerg-contact-form__field:not( .innerg-contact-form__field--textarea ) {
	height: 3rem; /* 48px */
}

.innerg-contact-form__field:focus {
	outline: none;
	border-color: var( --brand-dark );
}

.innerg-contact-form__field--textarea {
	resize: none;
}

/* Native <select>: replace the browser's own arrow (which sits right
   against the edge) with a themed chevron, room to breathe, and force
   a light colour scheme so the options list doesn't fall back to a
   dark, blue-highlighted native menu. */
select.innerg-contact-form__field {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	color-scheme: light;
	padding-inline-end: 2.5rem;
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23736c58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
}

[dir='rtl'] select.innerg-contact-form__field {
	background-position: left 1rem center;
}

select.innerg-contact-form__field option {
	background: var( --background );
	color: var( --foreground );
}

select.innerg-contact-form__field option:checked,
select.innerg-contact-form__field option:hover {
	background: var( --accent );
	color: #fff;
}

/* Checkbox field — a single label+input pair, not the label-above-field
   layout every other field type uses (the label reads naturally beside
   the box, matching the reference's own checkbox convention elsewhere
   on the site). */
.innerg-contact-form__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.875rem;
	color: var( --foreground );
	cursor: pointer;
}

.innerg-contact-form__checkbox input {
	margin-top: 0.2rem;
	accent-color: var( --brand-dark );
}

/* Radio group — same uppercase micro-label as every other field's
   __label, then a stack of label+input pairs below it (not the native
   fieldset/legend markup, to match this form's existing plain-div
   field-row shape). */
.innerg-contact-form__radio-group {
	gap: 0.6rem;
}

.innerg-contact-form__radio {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.875rem;
	color: var( --foreground );
	cursor: pointer;
}

.innerg-contact-form__radio input {
	accent-color: var( --brand-dark );
}

/* File input — same border/background/padding language as every other
   __field, with the browser's own file-picker button re-themed to match
   the form's submit button rather than left at UA-default grey. */
.innerg-contact-form__field--file {
	height: auto;
	padding: 0.6rem 1rem;
	cursor: pointer;
}

.innerg-contact-form__field--file::file-selector-button {
	margin-inline-end: 1rem;
	border: none;
	background: var( --brand-dark );
	color: var( --background );
	padding: 0.5rem 1rem;
	font: inherit;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.innerg-contact-form__hp {
	position: absolute;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.innerg-contact-form__submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 2.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.innerg-contact-form__submit:focus {
	outline: none;
}

.innerg-contact-form__submit:focus-visible {
	outline: 2px solid var( --accent );
	outline-offset: 2px;
}

.innerg-contact-form__submit-arrow {
	transition: transform 0.2s ease;
}

.innerg-contact-form__submit:hover .innerg-contact-form__submit-arrow {
	transform: translateX( 4px );
}

.innerg-contact-form__feedback {
	font-size: 0.8125rem;
	margin: 0;
}

.innerg-contact-form__feedback.is-error {
	color: #b3261e;
}

.innerg-recaptcha-notice {
	font-size: 0.6875rem;
	line-height: 1.5;
	color: var( --innerg-gray-500, #85807a );
	margin: 0.5rem 0 0;
}

.innerg-recaptcha-notice a {
	color: inherit;
	text-decoration: underline;
}

.innerg-contact-form__success {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 4rem 2.5rem;
	border: 1px solid var( --border );
	max-width: 40rem;
}

.innerg-contact-form__success[hidden] {
	display: none;
}

.innerg-contact-form__success-icon {
	color: var( --accent );
}

.innerg-contact-form__success-heading {
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 1.5rem;
	color: var( --brand-dark );
}

.innerg-contact-form__success-text {
	color: var( --muted-foreground );
	font-size: 0.875rem;
	line-height: 1.6;
	max-width: 24rem;
}

.innerg-contact-form__success-reset {
	background: none;
	border: none;
	padding: 0;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --muted-foreground );
	cursor: pointer;
	transition: color 0.2s ease;
}

.innerg-contact-form__success-reset:hover {
	color: var( --foreground );
}