/*
 * MiraeLaw Contact page — Contact details + form two-panel section, and
 * FAQ two-column layout.
 *
 * The office-info panel reuses offices-locations.css's existing
 * .ml-office-row-eyebrow/-address/-field/-label/-map classes for every
 * piece of typography and map sizing (that file is loaded read-only
 * alongside this one via inc/contact/assets.php — never modified). Only
 * the page-specific composition — the two-panel row, the office panel's
 * own column layout, and two small overrides where this design genuinely
 * differs from the Offices ledger row — are new.
 */

.ml-contact-panels {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid var( --ml-primary );
}

.ml-contact-office-panel {
	flex: 1 1 380px;
	min-width: min( 320px, 100% );
	display: flex;
	flex-direction: column;
	background: var( --ml-background );
}

.ml-contact-office-info {
	padding: clamp( 28px, 4vw, 44px );
}

/* Contact's eyebrow is a single terracotta string (no green label + orange
   number split like the Offices ledger row) with more breathing room below
   it (18px vs. the ledger's 8px) — the only two values this design needs
   different from the reused .ml-office-row-eyebrow. */
.ml-contact-office-eyebrow {
	color: var( --ml-accent );
	margin-bottom: 18px;
}

.ml-contact-office-phone-region {
	color: var( --ml-neutral-500 );
	font-size: 12px;
}

.ml-contact-office-fax {
	font-family: var( --ml-font-mono );
	font-size: 14.5px;
}

.ml-contact-office-map {
	flex: 1;
	display: flex;
	min-height: 280px;
	border-top: 1px solid var( --ml-primary );
}

/* Third override needed beyond the two noted in the file header above:
   the reused .ml-office-row-address grid's 88px label column leaves only
   ~125px for values once this panel's own padding (up to 44px/side) stacks
   on top of the two-panel row's padding — on the Offices page itself,
   .ml-office-row-address always sits in a full-width single-column row
   with 230px+ to work with, so 88px+minmax(0,1fr) never gets this tight
   there. Confirmed at 375px viewport: the value column collapsed to 23px,
   and overflow-wrap:break-word (correctly fixing real overflow on the
   Offices page) broke every value onto one character per line here
   instead. Scoped to this page's own nesting so the Offices page's
   working two-column layout is never touched by this query. */
@media ( max-width: 600px ) {
	.ml-contact-office-info .ml-office-row-address {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.ml-contact-office-info .ml-office-row-label {
		margin-top: 8px;
	}
}

.ml-contact-form-panel {
	flex: 1.2 1 420px;
	min-width: min( 320px, 100% );
	background: var( --ml-surface );
	border-left: 1px solid var( --ml-primary );
}

/* Elementor's own `.e-con > .elementor-widget { max-width: 100% }` rule
   outranks a single class selector on specificity alone — same fix already
   applied to every other panel/lead element site-wide (see
   offices-hero.css's .ml-offices-hero-lead for the fullest explanation). */
.ml-contact-form-panel .elementor-widget-template {
	max-width: 100% !important;
}

/* ---------------------------------------------------------------
 * FAQ — two-column heading+list split, same flex-basis technique as
 * home-faq.css (values match exactly) — kept as its own page-scoped block
 * rather than reused cross-page, per this project's established
 * convention (see every *-hero.css file's own comment on this same
 * choice).
 * ------------------------------------------------------------- */
.ml-contact-faq-heading {
	flex: 1 1 260px;
}

.ml-contact-faq-heading .elementor-heading-title {
	margin: 0;
	font-family: var( --ml-font-heading );
	/* Fluid clamp() measured directly from the source design — smaller
	   than the shared --ml-text-h2 token (32-48px), so hand-specified. */
	font-size: clamp( 30px, 4vw, 44px );
	font-weight: 600;
	line-height: 1.08;
	color: var( --ml-primary );
}

.ml-contact-faq-list {
	flex: 2 1 480px;
	min-width: 0;
}

/* ---------------------------------------------------------------
 * CTA phone links — reuses .ml-team-cta-root/-inner/-heading verbatim
 * (team-cta.css, unmodified). This design's phone treatment is the one
 * genuinely new piece: large plain links in a column with a border-top
 * divider, not the existing bordered-box .ml-hero-tel-btn used elsewhere —
 * visually different enough (size, layout direction, no box) that reusing
 * .ml-hero-tel-btn as-is would not match the approved design's content, so
 * this one small block is added rather than forcing consistency with the
 * other CTA's button style. Every value still comes from existing tokens.
 * ------------------------------------------------------------- */
.ml-contact-cta-links {
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-top: 1px solid var( --ml-border-dark );
	padding-top: 20px;
}

.ml-contact-cta-tel {
	display: flex;
	align-items: baseline;
	gap: 14px;
	color: var( --ml-background );
	text-decoration: none;
	font-family: var( --ml-font-mono );
	font-size: clamp( 24px, 3.4vw, 32px );
	font-weight: var( --ml-font-weight-medium );
	transition: color var( --ml-transition-base );
}

.ml-contact-cta-tel:hover,
.ml-contact-cta-tel:focus-visible {
	color: var( --ml-accent-light );
}

.ml-contact-cta-tel-region {
	font-size: 13px;
	letter-spacing: var( --ml-tracking-wider );
	color: var( --ml-accent );
}

@media ( prefers-reduced-motion: reduce ) {
	.ml-contact-cta-tel {
		transition: none;
	}
}

/* Subtext under the CTA heading — new to this design's CTA variant (the
   established .ml-team-cta-heading has no accompanying paragraph on
   Team/Offices/Areas of Expertise), so has no existing class to reuse. */
.ml-contact-cta-subtext {
	margin: 10px 0 0;
	font-size: 16px;
	line-height: var( --ml-leading-relaxed );
	color: var( --ml-neutral-200 );
}