/**
 * Contact Page — All Sections
 *
 * File: masterstudy-child/inc/pages/contact/contact.css
 * Styles for Contact Hero, Contact Info + Map, Contact Form + Team,
 * Contact FAQ, Contact Social.
 *
 * Follows moyo-brand.css CSS variables — zero hardcoded colors.
 * BEM naming: .moyo-contact-{section}__{element}
 *
 * Breakpoints: 960px (tablet) + 640px (mobile)
 */



/* ==============================================================
   1. CONTACT HERO — Full-width dark navy banner
   ============================================================== */

.moyo-contact-hero {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	box-sizing: border-box;
	overflow: hidden;
}

.moyo-contact-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--moyo-hero-bg, #0c2340);
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 60px 60px;
}

.moyo-contact-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--moyo-container-max, 1200px);
	margin: 0 auto;
	padding: 80px 40px 72px;
	box-sizing: border-box;
	text-align: center;
}

/* Breadcrumb */
.moyo-contact-hero__breadcrumb {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 24px;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 14px;
}

.moyo-contact-hero__breadcrumb-link {
	color: rgba(255, 255, 255, 0.7) !important;
	text-decoration: none;
	transition: color var(--moyo-transition, 0.2s ease);
}

.moyo-contact-hero__breadcrumb-link:hover {
	color: var(--moyo-on-primary, #ffffff) !important;
}

.moyo-contact-hero__breadcrumb-sep {
	color: rgba(255, 255, 255, 0.4) !important;
	display: flex;
	align-items: center;
}

.moyo-contact-hero__breadcrumb-current {
	color: var(--moyo-on-primary, #ffffff) !important;
	font-weight: 500;
}

/* Heading */
.moyo-contact-hero__title {
	font-family: var(--moyo-font-heading, 'Poppins', sans-serif);
	font-size: 48px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--moyo-on-primary, #ffffff) !important;
	margin: 0 0 16px;
}

/* Subtitle */
.moyo-contact-hero__subtitle {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 18px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.8) !important;
	max-width: 640px;
	margin: 0 auto;
}

/* Hero entrance animation */
@keyframes moyoContactFadeUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

.moyo-contact-hero__breadcrumb { animation: moyoContactFadeUp 0.6s ease 0.1s both; }
.moyo-contact-hero__title      { animation: moyoContactFadeUp 0.6s ease 0.25s both; }
.moyo-contact-hero__subtitle   { animation: moyoContactFadeUp 0.6s ease 0.4s both; }


/* ==============================================================
   2. CONTACT INFO + MAP — Two-column layout
   ============================================================== */

.moyo-contact-info {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	box-sizing: border-box;
	background: var(--moyo-bg, #f3f4f6);
}

.moyo-contact-info__inner {
	max-width: var(--moyo-container-max, 1200px);
	margin: 0 auto;
	padding: 80px 40px;
	box-sizing: border-box;
}

.moyo-contact-info__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

/* --- Section headers (shared by both columns) --- */

.moyo-contact-info__section-header {
	margin-bottom: 28px;
}

.moyo-contact-info__section-title {
	font-family: var(--moyo-font-heading, 'Poppins', sans-serif);
	font-size: 24px;
	font-weight: 700;
	color: var(--moyo-heading, #1e293b) !important;
	margin: 0 0 10px;
}

.moyo-contact-info__title-line {
	display: block;
	width: 48px;
	height: 3px;
	background: var(--moyo-primary, #2563eb);
	border-radius: 2px;
}

/* --- Contact detail rows --- */

.moyo-contact-info__row {
	padding: 20px 0;
	border-bottom: 1px solid var(--moyo-border, #e5e7eb);
}

.moyo-contact-info__row:first-of-type {
	padding-top: 0;
}

.moyo-contact-info__row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* Full-width row (address) */
.moyo-contact-info__row--full {
	display: block;
}

/* Two-column row (phone/email, website/hours) */
.moyo-contact-info__row--half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

/* Individual info item */
.moyo-contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

/* Icon circle with gradient */
.moyo-contact-info__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--moyo-on-primary, #ffffff);
}

.moyo-contact-info__icon--address {
	background: linear-gradient(135deg, var(--moyo-primary, #2563eb), var(--moyo-primary-end, #3b82f6));
}

.moyo-contact-info__icon--phone {
	background: linear-gradient(135deg, var(--moyo-success-dark, #16a34a), var(--moyo-success, #22c55e));
}

.moyo-contact-info__icon--email {
	background: linear-gradient(135deg, var(--moyo-primary, #2563eb), var(--moyo-accent-highlight, #0ea5e9));
}

.moyo-contact-info__icon--globe {
	background: linear-gradient(135deg, var(--moyo-accent-highlight, #0ea5e9), var(--moyo-primary, #2563eb));
}

.moyo-contact-info__icon--clock {
	background: linear-gradient(135deg, var(--moyo-warning-text, #92400e), var(--moyo-warning-border, #fcd34d));
}

/* Label + value text */
.moyo-contact-info__text {
	flex: 1;
	min-width: 0;
}

.moyo-contact-info__label {
	display: block;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--moyo-muted, #64748b) !important;
	margin-bottom: 4px;
}

.moyo-contact-info__value {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 15px;
	line-height: 1.6;
	color: var(--moyo-heading, #1e293b) !important;
	margin: 0;
	word-break: break-word;
}

/* --- Right column: Map --- */

.moyo-contact-info__map-wrap {
	width: 100%;
	height: 400px;
	border-radius: var(--moyo-radius-lg, 8px);
	overflow: hidden;
	box-shadow: var(--moyo-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.08));
	border: 1px solid var(--moyo-border, #e5e7eb);
}

.moyo-contact-info__map {
	display: block;
	width: 100%;
	height: 100%;
}


/* ==============================================================
   3. CONTACT FORM + TEAM — Two-column layout
   ============================================================== */

.moyo-contact-form {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	padding: 0 40px 80px;
	background: var(--moyo-card, #ffffff);
	box-sizing: border-box;
}

/* Horizontal divider at top */
.moyo-contact-form__divider {
	max-width: var(--moyo-container-max, 1200px);
	margin: 0 auto 60px;
	height: 1px;
	background: var(--moyo-border, #e5e7eb);
}

.moyo-contact-form__inner {
	max-width: var(--moyo-container-max, 1200px);
	margin: 0 auto;
}

.moyo-contact-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

/* --- Left: Form --- */

.moyo-contact-form__title {
	font-family: var(--moyo-font-heading, 'Poppins', sans-serif);
	font-size: 28px;
	font-weight: 700;
	color: var(--moyo-heading, #1e293b) !important;
	margin: 0 0 12px;
}

.moyo-contact-form__subtitle {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 15px;
	line-height: 1.7;
	color: var(--moyo-body, #475569) !important;
	margin: 0 0 28px;
}

.moyo-contact-form__placeholder {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 14px;
	color: var(--moyo-muted, #64748b) !important;
	background: var(--moyo-bg, #f3f4f6);
	padding: 24px;
	border-radius: var(--moyo-radius-lg, 8px);
	text-align: center;
}

/* CF7 form styling — scoped to the contact widget */
.moyo-contact-form__cf7-wrap .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Kill CF7 / Bootstrap default margins inside form */
.moyo-contact-form__cf7-wrap .wpcf7-form p {
	margin: 0 0 16px;
}

.moyo-contact-form__cf7-wrap .wpcf7-form .row {
	margin-left: -8px;
	margin-right: -8px;
	margin-bottom: 0;
}

.moyo-contact-form__cf7-wrap .wpcf7-form .row > [class*="col-"] {
	padding-left: 8px;
	padding-right: 8px;
}

.moyo-contact-form__cf7-wrap .wpcf7-form .form-group {
	margin-bottom: 0;
}

.moyo-contact-form__cf7-wrap .wpcf7-form label {
	display: block;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 13px;
	font-weight: 500;
	color: var(--moyo-body, #475569) !important;
	margin-bottom: 6px;
}

.moyo-contact-form__cf7-wrap .wpcf7-form input[type="text"],
.moyo-contact-form__cf7-wrap .wpcf7-form input[type="email"],
.moyo-contact-form__cf7-wrap .wpcf7-form input[type="tel"],
.moyo-contact-form__cf7-wrap .wpcf7-form input[type="url"],
.moyo-contact-form__cf7-wrap .wpcf7-form textarea,
.moyo-contact-form__cf7-wrap .wpcf7-form select {
	width: 100%;
	padding: 12px 16px;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 14px;
	color: var(--moyo-heading, #1e293b) !important;
	background: var(--moyo-bg, #f3f4f6);
	border: 1px solid var(--moyo-border, #e5e7eb);
	border-radius: 8px;
	outline: none;
	box-sizing: border-box;
	transition: border-color var(--moyo-transition, 0.2s ease),
	            box-shadow var(--moyo-transition, 0.2s ease);
}

.moyo-contact-form__cf7-wrap .wpcf7-form input[type="text"]:focus,
.moyo-contact-form__cf7-wrap .wpcf7-form input[type="email"]:focus,
.moyo-contact-form__cf7-wrap .wpcf7-form input[type="tel"]:focus,
.moyo-contact-form__cf7-wrap .wpcf7-form input[type="url"]:focus,
.moyo-contact-form__cf7-wrap .wpcf7-form textarea:focus,
.moyo-contact-form__cf7-wrap .wpcf7-form select:focus {
	border-color: var(--moyo-primary, #2563eb);
	box-shadow: 0 0 0 3px rgba(var(--moyo-primary-rgb, 37, 99, 235), 0.08);
	background: #ffffff;
}

.moyo-contact-form__cf7-wrap .wpcf7-form input::placeholder,
.moyo-contact-form__cf7-wrap .wpcf7-form textarea::placeholder {
	color: #94a3b8;
}

.moyo-contact-form__cf7-wrap .wpcf7-form textarea {
	min-height: 120px;
	resize: vertical;
}

.moyo-contact-form__cf7-wrap .wpcf7-form input[type="submit"],
.moyo-contact-form__cf7-wrap .wpcf7-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 4px;
	padding: 14px 32px;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 15px;
	font-weight: 600;
	color: var(--moyo-on-primary, #ffffff) !important;
	background: var(--moyo-primary, #2563eb);
	border: none;
	border-radius: var(--moyo-radius, 4px);
	cursor: pointer;
	transition: background var(--moyo-transition, 0.2s ease),
	            box-shadow var(--moyo-transition, 0.2s ease);
	width: 100%;
}

.moyo-contact-form__cf7-wrap .wpcf7-form input[type="submit"]:hover,
.moyo-contact-form__cf7-wrap .wpcf7-form .wpcf7-submit:hover {
	background: var(--moyo-primary-end, #3b82f6);
	box-shadow: var(--moyo-shadow-primary, 0 2px 8px rgba(37, 99, 235, 0.35));
}

/* CF7 form field box-sizing (needed after Nuclear Reset bypass) */
.moyo-contact-form__cf7-wrap .wpcf7-form input.moyo-cf7,
.moyo-contact-form__cf7-wrap .wpcf7-form textarea.moyo-cf7,
.moyo-contact-form__cf7-wrap .wpcf7-form select.moyo-cf7 {
	box-sizing: border-box;
}

/* CF7 response messages — hidden since we use Moyo toast notifications */
.moyo-contact-form__cf7-wrap .wpcf7-response-output {
	display: none;
}

/* CF7 server-side validation errors — hidden (our JS handles validation) */
.moyo-contact-form__cf7-wrap .wpcf7-not-valid-tip {
	display: none !important;
}

/* CF7 default spinner — hidden (we use our own loading state) */
.moyo-contact-form__cf7-wrap .wpcf7-spinner {
	display: none;
}

/* Client-side validation — invalid field highlight */
.moyo-contact-form__cf7-wrap .moyo-cf7--invalid {
	border-color: var(--moyo-error, #ef4444);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Client-side validation — error tip text */
.moyo-contact-form__cf7-wrap .moyo-cf7-tip {
	display: block;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 13px;
	color: var(--moyo-error, #ef4444);
	margin-top: 4px;
}

/* Submit button loading state */
.moyo-contact-form__cf7-wrap .moyo-cf7--loading {
	opacity: 0.7;
	cursor: wait;
	position: relative;
}

/* Loading spinner — animated dots via pseudo-element */
.moyo-contact-form__cf7-wrap .moyo-cf7--loading::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 8px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: var(--moyo-on-primary, #ffffff);
	border-radius: 50%;
	animation: moyoCf7Spin 0.6s linear infinite;
	vertical-align: middle;
}

@keyframes moyoCf7Spin {
	to { transform: rotate(360deg); }
}

/* --- Right: Team Contacts --- */

.moyo-contact-form__team-title {
	font-family: var(--moyo-font-heading, 'Poppins', sans-serif);
	font-size: 28px;
	font-weight: 700;
	color: var(--moyo-heading, #1e293b) !important;
	margin: 0 0 28px;
}

.moyo-contact-form__team-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Team member row */
.moyo-contact-form__team-member {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 20px;
	background: var(--moyo-bg, #f3f4f6);
	border-radius: var(--moyo-radius-lg, 8px);
	border: 1px solid var(--moyo-border, #e5e7eb);
	transition: box-shadow var(--moyo-transition, 0.2s ease);
}

.moyo-contact-form__team-member:hover {
	box-shadow: var(--moyo-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.08));
}

/* Photo */
.moyo-contact-form__team-photo-wrap {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: var(--moyo-radius-lg, 8px);
	overflow: hidden;
}

.moyo-contact-form__team-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.moyo-contact-form__team-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--moyo-border, #e5e7eb);
	color: var(--moyo-muted, #64748b);
}

/* Details */
.moyo-contact-form__team-details {
	flex: 1;
	min-width: 0;
}

.moyo-contact-form__team-name {
	font-family: var(--moyo-font-heading, 'Poppins', sans-serif);
	font-size: 17px;
	font-weight: 600;
	color: var(--moyo-heading, #1e293b) !important;
	margin: 0 0 2px;
}

.moyo-contact-form__team-role {
	display: block;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 13px;
	color: var(--moyo-muted, #64748b) !important;
	margin-bottom: 10px;
}

.moyo-contact-form__team-contact-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	color: var(--moyo-body, #475569);
}

.moyo-contact-form__team-contact-row svg {
	flex-shrink: 0;
	color: var(--moyo-primary, #2563eb);
}

.moyo-contact-form__team-contact-val {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 14px;
	color: var(--moyo-body, #475569) !important;
	word-break: break-word;
}


/* ==============================================================
   4. CONTACT FAQ — Accordion (reuses .moyo-faq__* inner classes)
   ============================================================== */

.moyo-contact-faq {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	background: var(--moyo-card, #ffffff);
	box-sizing: border-box;
}

.moyo-contact-faq__inner {
	max-width: var(--moyo-container-max, 1200px);
	margin: 0 auto;
	padding: 96px 40px;
	box-sizing: border-box;
}

/* Header */
.moyo-contact-faq__header {
	text-align: center;
	margin-bottom: 56px;
}

.moyo-contact-faq__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--moyo-primary, #2563eb) !important;
	margin-bottom: 14px;
}

.moyo-contact-faq__eyebrow::before,
.moyo-contact-faq__eyebrow::after {
	content: '';
	width: 20px;
	height: 2px;
	background: var(--moyo-primary, #2563eb);
	border-radius: 2px;
	opacity: 0.5;
}

.moyo-contact-faq__title {
	font-family: var(--moyo-font-heading, 'Poppins', sans-serif) !important;
	font-size: 40px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--moyo-heading, #1e293b) !important;
	margin: 0 !important;
}

/* FAQ list — scoped inside contact-faq, reuses .moyo-faq__* classes */
.moyo-contact-faq .moyo-faq__list {
	max-width: 700px;
	margin: 0 auto;
}

/* Stagger for FAQ items inside contact-faq */
.moyo-contact-faq .moyo-faq__item.moyo-reveal:nth-child(1) { transition-delay: 0s; }
.moyo-contact-faq .moyo-faq__item.moyo-reveal:nth-child(2) { transition-delay: 0.07s; }
.moyo-contact-faq .moyo-faq__item.moyo-reveal:nth-child(3) { transition-delay: 0.14s; }
.moyo-contact-faq .moyo-faq__item.moyo-reveal:nth-child(4) { transition-delay: 0.21s; }


/* ==============================================================
   5. CONTACT SOCIAL — Dark navy full-width with social links
   ============================================================== */

.moyo-contact-social {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	overflow: hidden;
	text-align: center;
	box-sizing: border-box;
}

.moyo-contact-social__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--moyo-hero-bg, #0c2340);
}

.moyo-contact-social__bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 60px 60px;
}

.moyo-contact-social__inner {
	position: relative;
	z-index: 1;
	max-width: var(--moyo-container-max, 1200px);
	margin: 0 auto;
	padding: 96px 40px;
	box-sizing: border-box;
}

.moyo-contact-social__heading {
	font-family: var(--moyo-font-heading, 'Poppins', sans-serif) !important;
	font-size: 40px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--moyo-on-primary, #ffffff) !important;
	margin: 0 0 16px 0 !important;
}

.moyo-contact-social__subtitle {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 17px !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	color: rgba(255, 255, 255, 0.7) !important;
	max-width: 560px;
	margin: 0 auto 40px auto !important;
}

/* Social links row */
.moyo-contact-social__links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.moyo-contact-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--moyo-on-primary, #ffffff) !important;
	text-decoration: none !important;
	transition: all 0.3s ease;
}

.moyo-contact-social__link:hover {
	background: var(--moyo-primary, #2563eb);
	border-color: var(--moyo-primary, #2563eb);
	transform: scale(1.1);
	box-shadow: 0 0 20px rgba(var(--moyo-primary-rgb, 37, 99, 235), 0.4);
	color: var(--moyo-on-primary, #ffffff) !important;
	text-decoration: none !important;
}


/* ==============================================================
   8. CONTACT MAIN — Combined Info + Form (white bg)
   ============================================================== */

.moyo-contact-main {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	background: #ffffff;
	box-sizing: border-box;
}

.moyo-contact-main__inner {
	max-width: var(--moyo-container-max, 1200px);
	margin: 0 auto;
	padding: 96px 40px;
	box-sizing: border-box;
	width: 100%;
}

.moyo-contact-main__grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 72px;
	align-items: start;
}

/* --- Left column: Info --- */

.moyo-contact-main__info {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-top: 16px;
}

.moyo-contact-main__heading {
	font-family: var(--moyo-font-heading, 'DM Serif Display', serif);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--moyo-heading, #1e293b) !important;
	margin: 0 0 12px;
}

.moyo-contact-main__subtext {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 15px;
	line-height: 1.7;
	color: var(--moyo-muted, #64748b) !important;
	margin: 0 0 40px;
}

.moyo-contact-main__detail {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 28px;
}

.moyo-contact-main__detail-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(var(--moyo-primary-rgb, 37, 99, 235), 0.08);
	color: var(--moyo-primary, #2563eb);
}

.moyo-contact-main__detail-icon svg {
	width: 20px;
	height: 20px;
}

.moyo-contact-main__detail-text {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 15px;
	line-height: 1.7;
	color: var(--moyo-body, #475569) !important;
	padding-top: 10px;
}

.moyo-contact-main__detail-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--moyo-heading, #1e293b) !important;
	margin-bottom: 4px;
}

/* --- Follow us + social icons --- */

.moyo-contact-main__follow {
	margin-top: 16px;
	padding-top: 28px;
	border-top: 1px solid var(--moyo-border, #e5e7eb);
}

.moyo-contact-main__follow-title {
	display: block;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--moyo-heading, #1e293b) !important;
	margin-bottom: 16px;
}

.moyo-contact-main__socials {
	display: flex;
	align-items: center;
	gap: 12px;
}

.moyo-contact-main__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: rgba(var(--moyo-primary-rgb, 37, 99, 235), 0.08);
	color: var(--moyo-primary, #2563eb) !important;
	text-decoration: none !important;
	transition: all 0.25s ease;
}

.moyo-contact-main__social-link:hover {
	background: var(--moyo-primary, #2563eb);
	color: var(--moyo-on-primary, #ffffff) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(var(--moyo-primary-rgb, 37, 99, 235), 0.3);
	text-decoration: none !important;
}

/* --- Right column: Form Card --- */

.moyo-contact-main__card {
	background: var(--moyo-bg, #f3f4f6);
	border-radius: var(--moyo-radius-xl, 16px);
	padding: 40px;
	border: 1px solid var(--moyo-border, #e5e7eb);
}

.moyo-contact-main__card-title {
	font-family: var(--moyo-font-heading, 'DM Serif Display', serif);
	font-size: 26px;
	font-weight: 400;
	color: var(--moyo-heading, #1e293b) !important;
	margin: 0 0 24px;
}

/* CF7 inside the card — input bg override for gray card */
.moyo-contact-main__card .moyo-contact-form__cf7-wrap .wpcf7-form input[type="text"],
.moyo-contact-main__card .moyo-contact-form__cf7-wrap .wpcf7-form input[type="email"],
.moyo-contact-main__card .moyo-contact-form__cf7-wrap .wpcf7-form input[type="tel"],
.moyo-contact-main__card .moyo-contact-form__cf7-wrap .wpcf7-form textarea,
.moyo-contact-main__card .moyo-contact-form__cf7-wrap .wpcf7-form select {
	background: #ffffff;
}

.moyo-contact-main__card .moyo-contact-form__cf7-wrap .wpcf7-form input[type="submit"],
.moyo-contact-main__card .moyo-contact-form__cf7-wrap .wpcf7-form .wpcf7-submit {
	border-radius: 8px;
}


/* ==============================================================
   9. CONTACT MAP — Full-width Google Maps
   ============================================================== */

.moyo-contact-map {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	box-sizing: border-box;
	line-height: 0;
}

.moyo-contact-map__frame {
	display: block;
	width: 100%;
	border: none;
}


/* ==============================================================
   6. RESPONSIVE — 960px (tablet)
   ============================================================== */

@media (max-width: 960px) {

	/* Hero */
	.moyo-contact-hero__inner {
		padding: 80px 24px 60px;
	}

	.moyo-contact-hero__title {
		font-size: 36px;
	}

	.moyo-contact-hero__subtitle {
		font-size: 16px;
	}

	/* Info + Map: stack */
	.moyo-contact-info__inner {
		padding: 60px 24px;
	}

	.moyo-contact-info__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.moyo-contact-info__map-wrap {
		height: 350px;
	}

	/* Form + Team: stack */
	.moyo-contact-form {
		padding: 0 24px 60px;
	}

	.moyo-contact-form__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.moyo-contact-form__title,
	.moyo-contact-form__team-title {
		font-size: 24px;
	}

	/* Contact Main: stack columns */
	.moyo-contact-main__inner {
		padding: 64px 24px;
	}

	.moyo-contact-main__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.moyo-contact-main__heading {
		font-size: 32px;
	}

	.moyo-contact-main__card {
		padding: 32px;
	}

	/* FAQ */
	.moyo-contact-faq__inner {
		padding: 72px 24px;
	}
	.moyo-contact-faq__title {
		font-size: 32px !important;
	}

	/* Social */
	.moyo-contact-social__inner {
		padding: 72px 24px;
	}
	.moyo-contact-social__heading {
		font-size: 32px !important;
	}
}


/* ==============================================================
   7. RESPONSIVE — 640px (mobile)
   ============================================================== */

@media (max-width: 640px) {

	/* Hero */
	.moyo-contact-hero__inner {
		padding: 70px 16px 50px;
	}

	.moyo-contact-hero__title {
		font-size: 28px;
	}

	.moyo-contact-hero__subtitle {
		font-size: 15px;
	}

	.moyo-contact-hero__breadcrumb {
		font-size: 13px;
	}

	/* Info + Map */
	.moyo-contact-info__inner {
		padding: 48px 16px;
	}

	.moyo-contact-info__row--half {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.moyo-contact-info__section-title {
		font-size: 20px;
	}

	.moyo-contact-info__map-wrap {
		height: 280px;
	}

	/* Form + Team */
	.moyo-contact-form {
		padding: 0 16px 48px;
	}

	.moyo-contact-form__grid {
		gap: 32px;
	}

	.moyo-contact-form__title,
	.moyo-contact-form__team-title {
		font-size: 22px;
	}

	.moyo-contact-form__team-member {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 24px 16px;
	}

	.moyo-contact-form__team-contact-row {
		justify-content: center;
	}

	/* Full-width submit button already set */
	.moyo-contact-form__cf7-wrap .wpcf7-form input[type="submit"],
	.moyo-contact-form__cf7-wrap .wpcf7-form .wpcf7-submit {
		padding: 12px 24px;
		font-size: 14px;
	}

	/* Contact Main */
	.moyo-contact-main__inner {
		padding: 48px 16px;
	}

	.moyo-contact-main__heading {
		font-size: 26px;
		margin-bottom: 12px;
	}

	.moyo-contact-main__card {
		padding: 24px;
	}

	.moyo-contact-main__card-title {
		font-size: 20px;
	}

	/* Stack name/email row on mobile */
	.moyo-contact-main__card .wpcf7-form .row {
		flex-direction: column;
	}

	/* FAQ */
	.moyo-contact-faq__inner {
		padding: 56px 16px;
	}
	.moyo-contact-faq__header {
		margin-bottom: 36px;
	}
	.moyo-contact-faq__title {
		font-size: 26px !important;
	}

	/* Social */
	.moyo-contact-social__inner {
		padding: 56px 16px;
	}
	.moyo-contact-social__heading {
		font-size: 26px !important;
	}
	.moyo-contact-social__subtitle {
		font-size: 15px !important;
	}
	.moyo-contact-social__link {
		width: 48px;
		height: 48px;
	}
	.moyo-contact-social__links {
		gap: 14px;
	}
}