/* ==========================================================================
   CONTACT (/contact/)
   01 hero · 02 form + routes · 03 official channels · 04 find a chapter · 05 map / office · 06 help strip
   Class prefix: contact-.  Semantic tone variables only (--bg --fg --line --accent …).
   ========================================================================== */


/* ==========================================================================
   01 HERO — black, 45–55svh, centred; temple / India horizon + a subtle bell silhouette
   ========================================================================== */
.contact-hero {
	--hero-min: 52svh; /* plan: 45–55svh */
	align-items: center;
}

@supports not (min-height: 1svh) {
	.contact-hero {
		--hero-min: 52vh;
	}
}

.contact-hero__inner {
	/* .page-hero__inner sets width:100%, which would cancel the .wrap gutters */
	width: min(100% - 2 * var(--gutter), var(--container));
}

.contact-hero .page-hero__content {
	max-width: 58rem;
}

/* Empty background slot: keep the lattice, drop the centred label that would sit behind the heading. */
.contact-hero__media .media-slot__meta {
	display: none;
}

.contact-hero__title {
	margin-bottom: 1.25rem;
}

.contact-hero__lead {
	max-width: 44rem;
	margin-inline: auto;
}

/* a soft shadow keeps small type readable over any photograph */
.contact-hero .eyebrow,
.contact-hero__lead {
	text-shadow: 0 1px 12px rgba(11, 9, 7, 0.7), 0 0 2px rgba(11, 9, 7, 0.5);
}

/* The bell: quiet, static, tablet and up — a phone gets the horizon only. */
.contact-hero__bell {
	position: absolute;
	right: clamp(1rem, 7vw, 8rem);
	bottom: clamp(2rem, 4vw, 4.5rem);
	z-index: 1;
	display: none;
	width: clamp(150px, 19vw, 300px);
	color: var(--antique-gold);
	opacity: 0.5;
	pointer-events: none;
	filter: drop-shadow(0 0 44px rgba(244, 122, 31, 0.24));
}

@media (min-width: 900px) {
	.contact-hero__bell {
		display: block;
	}
}

/* Placeholder state: only the line art, no labelled box. A real model / image renders normally. */
.contact-hero__bell .media-slot {
	background: transparent;
}

.contact-hero__bell .media-slot__placeholder {
	background: none;
	box-shadow: none;
}

.contact-hero__bell .media-slot__pattern,
.contact-hero__bell .media-slot__meta {
	display: none;
}

.contact-hero__bell .media-slot__art {
	inset: 0;
	filter: none;
}


/* ==========================================================================
   02 CONTACT FORM — ivory. 7-col form card + 5-col "choose the right desk"
   ========================================================================== */
.contact-form-section__grid {
	align-items: start;
	gap: clamp(2rem, 1.2rem + 3vw, 4rem);
}

.contact-form-card {
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--card-shadow);
}

/* the "form frame": two quiet gold corner brackets on the card's edge — the lightbox's sacred frame, kept off the fields */
.contact-form-card {
	position: relative;
}

.contact-form-card::before,
.contact-form-card::after {
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	border: 0 solid var(--antique-gold);
	pointer-events: none;
}

.contact-form-card::before {
	top: 12px;
	left: 12px;
	border-top-width: 1.5px;
	border-left-width: 1.5px;
}

.contact-form-card::after {
	right: 12px;
	bottom: 12px;
	border-right-width: 1.5px;
	border-bottom-width: 1.5px;
}

.contact-form-card__head {
	margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

.contact-form-card__head .eyebrow {
	margin-bottom: 0.9rem;
}

.contact-form-card__title {
	margin: 0 0 0.6rem;
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
	line-height: 1.05;
}

.contact-form-card__lead {
	max-width: 38rem;
	margin: 0;
	color: var(--fg-soft);
}

.contact-form {
	gap: 1.5rem;
}

.contact-form__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.35rem;
}

/* Honeypot: invisible, but parked inside the page instead of 9999px off-screen (no phantom horizontal overflow). */
.contact-form .hp-field {
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	clip-path: inset(100%);
}

.contact-form .field__label {
	font-size: 0.84rem;
}

.contact-form .field__hint {
	order: 3;
	font-size: 0.8rem;
}

/* a route card just set this field: a brief saffron halo */
.contact-form .field.is-flash select {
	outline: 3px solid transparent;
	outline-offset: 2px;
	animation: contact-flash 1.4s var(--ease-out);
}

@keyframes contact-flash {
	0%,
	60% {
		outline-color: rgba(244, 122, 31, 0.6);
	}
}

/* error lines: main.js fills the [data-error-for] slot and toggles [hidden] */
.contact-form .field__error {
	display: block;
	order: 4;
	margin: 0;
	color: var(--sindoor-red);
	font-size: 0.84rem;
	font-weight: 600;
	line-height: 1.4;
}

.contact-form .check input[aria-invalid='true'] + .check__box,
.contact-form .check input.is-invalid + .check__box {
	border-color: var(--sindoor-red);
	box-shadow: 0 0 0 3px rgba(183, 52, 32, 0.2);
}

.contact-form .check a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.contact-form .check .req {
	color: var(--accent);
}

.contact-form__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem 1.5rem;
	margin-top: 0.35rem;
}

.contact-form__note {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.82rem;
}

@media (max-width: 559px) {
	.contact-form__submit .btn {
		width: 100%;
	}
}

/* status line (top of the form) */
.contact-form .form-status {
	font-size: 0.95rem;
}

.contact-form .form-status.is-success {
	border-color: rgba(47, 106, 59, 0.45);
	background: rgba(94, 158, 107, 0.16);
	color: #1f4a2a;
}

.contact-form .form-status.is-error {
	border-color: rgba(183, 52, 32, 0.55);
	background: rgba(183, 52, 32, 0.08);
	color: #7d2314;
}

/* sent: the fields give way to a quiet thank-you */
.contact-form__tick,
.contact-form__after {
	display: none;
}

.contact-form.is-sent .contact-form__body {
	display: none;
}

.contact-form.is-sent .contact-form__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
	padding-block: clamp(1.25rem, 0.8rem + 3vw, 3rem);
	text-align: center;
}

.contact-form.is-sent .contact-form__tick {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border: 1px solid rgba(47, 106, 59, 0.45);
	border-radius: 50%;
	background: rgba(94, 158, 107, 0.14);
	color: #2f6a3b;
}

.contact-form.is-sent .form-status {
	max-width: 30rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--heading);
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
	font-weight: 400;
	line-height: 1.25;
}

.contact-form.is-sent .contact-form__after {
	display: flex;
	justify-content: center;
}

/* plugin-supplied forms keep their own markup; give them the same breathing room */
.contact-form-card__plugin {
	display: grid;
	gap: 1rem;
}

/* routes */
.contact-form-section__aside {
	min-width: 0;
}

@media (min-width: 1024px) {
	.contact-form-section__aside {
		position: sticky;
		top: calc(var(--header-h) + 24px);
	}
}

.contact-routes__head {
	margin-bottom: 1.5rem;
}

.contact-routes__head .eyebrow {
	margin-bottom: 0.9rem;
}

.contact-routes__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
	line-height: 1.08;
}

.contact-routes__lead {
	margin: 0;
	color: var(--fg-muted);
}

.contact-routes__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-routes__list > li {
	margin: 0;
}

.contact-route {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 1.1rem 0.85rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--fg);
	transition: border-color var(--dur) ease, box-shadow 0.55s var(--ease-out), translate 0.55s var(--ease-out);
}

.contact-route:hover,
.contact-route:focus-visible {
	border-color: rgba(244, 122, 31, 0.55);
	box-shadow: var(--card-shadow);
	color: var(--fg);
	translate: 4px 0;
}

.contact-route .icon-box {
	width: 3rem;
	height: 3rem;
	border-radius: 14px;
}

.contact-route__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.contact-route__title {
	font-family: var(--font-display);
	font-size: 1.15rem;
	line-height: 1.2;
}

.contact-route__desc {
	color: var(--fg-muted);
	font-size: 0.88rem;
	line-height: 1.45;
}

.contact-route__arrow {
	flex: none;
	color: var(--accent);
	transition: translate var(--dur) var(--ease-out);
}

.contact-route:hover .contact-route__arrow,
.contact-route:focus-visible .contact-route__arrow {
	translate: 4px 0;
}

/* direct lines beside the form — shown only when the Customizer holds them */
.contact-direct {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.9rem;
	margin-top: 1.25rem;
	padding: 1.15rem 1.25rem;
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-md);
}

.contact-direct__title {
	margin: 0;
	color: var(--accent);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.contact-direct__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-direct__list li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	min-width: 0;
}

.contact-direct__icon {
	flex: none;
	color: var(--accent-2);
}

.contact-direct__list a {
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	color: var(--heading);
	font-weight: 700;
	overflow-wrap: anywhere;
}

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


/* ==========================================================================
   03 OFFICIAL CHANNELS — ivory band. Cards are rendered only from filled-in values.
   ========================================================================== */
.tone-ivory.contact-info {
	background-color: var(--bg-alt);
	border-top: 1px solid var(--line);
}

/* 1 column → 2 → 3. Flex rather than grid so an incomplete last row sits centred instead of leaving an orphan at the left. */
.contact-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap);
}

.contact-cards > * {
	flex: 1 1 100%;
	min-width: 0;
}

@media (min-width: 640px) {
	.contact-cards > * {
		flex: 0 0 calc((100% - var(--gap)) / 2);
	}
}

@media (min-width: 1024px) {
	.contact-cards > * {
		flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
	}
}

.contact-card .card__body {
	align-items: flex-start;
	gap: 0.55rem;
}

.contact-card .icon-box {
	margin-bottom: 0.5rem;
}

.contact-card__title {
	font-size: 1.3rem;
}

.contact-card__value {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.contact-card__value a {
	color: var(--heading);
}

.contact-card:hover .contact-card__value a {
	color: var(--accent);
}

.contact-card__address {
	font-style: normal;
	font-weight: 600;
}

.contact-card__note {
	margin: 0;
	color: var(--fg-muted);
}

.contact-card__action {
	margin-top: 0.4rem;
}

.contact-use-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 2rem;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--card-shadow);
}

.contact-use-form__text {
	flex: 1 1 20rem;
}

.contact-use-form__title {
	margin: 0 0 0.4rem;
	font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem);
	line-height: 1.15;
}

.contact-use-form__text p {
	max-width: 36rem;
	margin: 0;
	color: var(--fg-soft);
}

.contact-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.contact-social__label {
	margin: 0;
	color: var(--accent);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.contact-social .social-links {
	margin: 0;
}

.contact-social .social-links a {
	color: var(--fg);
}


/* ==========================================================================
   04 FIND A CHAPTER / TEAM — charcoal. State selector + the teams we have published.
   ========================================================================== */
.contact-chapters__grid {
	align-items: start;
	gap: clamp(2rem, 1.2rem + 3vw, 4rem);
}

.contact-chapters__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-content: start;
	min-width: 0;
}

@media (min-width: 1024px) {
	.contact-chapters__intro {
		position: sticky;
		top: calc(var(--header-h) + 24px);
	}
}

.contact-chapters__head {
	margin-bottom: 0;
}

.contact-chapters__filter {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.65rem;
	padding: 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
}

.contact-chapters__filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.contact-chapters__filter-row select {
	flex: 1 1 14rem;
	width: auto;
	min-width: 0;
	max-width: 100%;
}

html.hs-js .contact-chapters__apply {
	display: none;
}

.contact-chapters__status {
	margin: 0;
	color: var(--fg-muted);
	font-size: var(--fs-sm);
	font-weight: 600;
}

/* optional India chapter map: decoration only, not on phones */
.contact-chapters__map {
	width: min(100%, 26rem);
	color: var(--antique-gold);
}

.contact-chapters__map .media-slot {
	border-radius: var(--r-lg);
	background: transparent;
}

.contact-chapters__map .media-slot__placeholder {
	background: none;
	box-shadow: none;
}

.contact-chapters__map .media-slot__pattern,
.contact-chapters__map .media-slot__meta {
	display: none;
}

.contact-chapters__map .media-slot__art {
	inset: 4%;
	filter: none;
	opacity: 0.8;
}

.contact-chapters__results {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.75rem, 1.2rem + 2vw, 3rem);
	min-width: 0;
}

.contact-state__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.1rem;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var(--line-strong);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	line-height: 1.1;
}

.contact-state__count {
	flex: none;
	color: var(--accent-2);
	font-family: var(--font-body);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.contact-state__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap);
}

@media (min-width: 640px) {
	.contact-state__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.contact-team {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
	padding: 1.3rem 1.4rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
	transition: border-color var(--dur) ease;
}

.contact-team:hover {
	border-color: rgba(244, 122, 31, 0.45);
}

.contact-team__level {
	margin: 0;
	color: var(--accent-2);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.contact-team__role {
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.2;
}

.contact-team__name {
	margin: 0;
	color: var(--fg-soft);
}

.contact-team__place {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0.3rem 0 0;
	color: var(--fg-muted);
	font-size: 0.9rem;
}

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

.contact-team__links {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.4rem;
	margin: 0.7rem 0 0;
	padding: 0.8rem 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.contact-team__links li {
	margin: 0;
}

.contact-team__links a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 32px;
	color: var(--accent);
	font-size: 0.92rem;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.contact-chapters__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	padding: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(1.25rem, 1rem + 2vw, 3rem);
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-lg);
	text-align: center;
}

.contact-chapters__empty-art {
	width: min(8rem, 40%);
	color: var(--accent-2);
	opacity: 0.85;
}

.contact-chapters__empty-title {
	margin: 0;
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
	line-height: 1.12;
}

.contact-chapters__empty p {
	max-width: 32rem;
	margin: 0 0 0.75rem;
	color: var(--fg-soft);
}


/* ==========================================================================
   05 MAP / OFFICE — ivory, only when the office is public
   ========================================================================== */
.contact-office__grid {
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.contact-map {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 22rem;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface-2);
	box-shadow: var(--card-shadow);
}

.contact-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 1023px) {
	.contact-map {
		height: auto;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

.contact-office-card {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	height: 100%;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--card-shadow);
}

.contact-office-card .eyebrow {
	margin: 0;
}

.contact-office-card__title {
	margin: 0;
	font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem);
	line-height: 1.05;
}

.contact-office-card__block {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.4rem;
}

.contact-office-card__label {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	color: var(--accent);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.contact-office-card__text {
	margin: 0;
	font-style: normal;
	font-size: 1.05rem;
	line-height: 1.6;
}

.contact-office-card__note {
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	color: var(--fg-muted);
	font-size: var(--fs-sm);
}

.contact-office-card__actions {
	margin-top: auto;
}


/* ==========================================================================
   06 HELP STRIP — saffron, three buttons, no media
   ========================================================================== */
.contact-help__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
}

.contact-help__title {
	margin: 0;
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
	line-height: 1.05;
}

.contact-help__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem 1rem;
}

@media (max-width: 767px) {
	.contact-help__actions {
		flex-direction: column;
		width: 100%;
	}

	.contact-help__actions .btn {
		width: 100%;
	}
}


/* ==========================================================================
   LONG TEXT — addresses, e-mail addresses, names and links typed in the admin wrap inside their box instead of widening the page.
   ========================================================================== */
.contact-hero,
.contact-info,
.contact-chapters,
.contact-office,
.contact-help {
	overflow-wrap: break-word;
	overflow-wrap: anywhere;
}