/* ==========================================================================
   Contact Page Styles — RisingStar Child Theme
   File-based layout mirroring /栏目规划/contact.html.
   Tailwind utility classes come from the global Tailwind CDN runtime
   (preflight disabled so it never resets theme/Kadence styles). This file
   only adds:
     - minimal layout fixes (top margin, full-bleed safety, empty-p removal)
     - the custom component classes used by the hardcoded template
       (.contact-card, .pre-footer*)
     - FluentForm field / checkbox / radio styling (design-system blue)
   ========================================================================== */

/* Kill the default top margin the block theme injects before the first block. */
body.page-id-41 .wp-site-blocks > * {
	margin-block-start: 0;
}

/* Page background: subtle gray so the form + cards float on white. */
body.page-id-41 {
	background: #F8FAFC;
}

/* The article is full-width; inner sections set their own max-width. */
.rs-contact-content {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Prevent a horizontal scrollbar from any full-bleed element. */
body.page-id-41 {
	overflow-x: hidden;
}

/* Hide the empty paragraph that sometimes precedes the content. */
.rs-contact-content > p:empty {
	display: none;
}

/* The backend-embedded body content (the_content — e.g. the map) is NOT
   width-constrained. The user designs it in the block editor and may place
   full-bleed blocks (a full-width map). We only reset margin/padding here;
   every width decision is left to the editor. Note: the design-system
   typography ramp above (.rs-contact-content h2/h3/p) still applies to this
   area, so map captions stay on the design draft's scale. */
.rs-contact-content-map {
	margin: 0;
	padding: 0;
}

/* Let WordPress / Kadence "full width" (alignfull) blocks inside the body
   content break out to the viewport edges. Without this, a block editor
   alignfull block would be capped by the normal flow width. */
.rs-contact-content-map .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   Typography — explicit design-system scale (like Solution pages)
   The Contact page mixes a hardcoded template, the FluentForm shortcode,
   and a backend-embedded map (the_content). To keep every heading /
   paragraph on the design-system scale — and stop the block theme's
   oversized default h2 from blowing up the form title or the map caption —
   we define the type ramp HERE instead of leaving it to the editor (the
   About approach, which is hands-off on typography).
   Scale mirrors the RisingStar Design System:
     gray-900 #111827 headings · gray-600 #4B5563 body · blue-600 #2563EB links
   ========================================================================== */

/* Base text — inherited by the whole page. The hardcoded cards and hero in
   page-contact.php carry their OWN Tailwind utilities (text-sm, text-lg,
   font-bold, …) that are pixel-identical to the design draft (contact.html),
   so we must NOT override element selectors here — doing so would drift the
   cards away from the draft (e.g. a global `p{font-size:1rem}` would beat the
   cards' `text-sm`). Only the inherited baseline lives here. */
.rs-contact-content {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #374151;
	font-size: 1rem;
	line-height: 1.6;
}

/* Page title — already carries Tailwind size utilities (text-4xl /
   lg:text-5xl); we only normalise weight + colour to the design draft. */
.rs-contact-content h1 {
	font-weight: 800;
	color: #111827;
}

/* Typography for the BACKEND-EMBEDDED body only (the_content — the map and
   its captions). The user designs this in the editor and may drop raw <h2>/
   <p> with no utilities, so we pin them to the design-system scale to stop
   the block theme's oversized default h2 from blowing up. This scope is
   limited to .rs-contact-content-map so it NEVER touches the hardcoded cards
   (which keep their Tailwind utilities from the draft). */
.rs-contact-content-map h2 {
	font-size: 1.5rem;
	line-height: 1.25;
	font-weight: 700;
	color: #111827;
	margin: 0 0 1rem;
}
@media (min-width: 1024px) {
	.rs-contact-content-map h2 {
		font-size: 1.875rem;
	}
}
.rs-contact-content-map h3 {
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 700;
	color: #111827;
}
.rs-contact-content-map h4 {
	font-size: 1.0625rem;
	line-height: 1.35;
	font-weight: 600;
	color: #111827;
}
.rs-contact-content-map p {
	font-size: 1rem;
	line-height: 1.7;
	color: #4b5563;
}
.rs-contact-content-map a {
	color: #2563eb;
}

/* FluentForm title — FluentForm's own skin can render the form title as a
   large h2; pin it to the design-system scale. !important guards against the
   plugin's default CSS. Scoped to .fluentform so it doesn't touch the cards. */
.rs-contact-content .fluentform h2,
.rs-contact-content .fluentform .ff-form-title,
.rs-contact-content .ff-form-title {
	font-size: 1.25rem !important;
	line-height: 1.3;
	font-weight: 700;
	color: #111827;
	margin: 0 0 0.75rem !important;
}

/* --- Contact info panel (right column) — consolidated, borderless --- *
   The four contact methods are now a single light-grey panel with no card
   borders or shadows; items are separated by whitespace only and ranked by
   font size (primary Email/WhatsApp > secondary Factory > tertiary times). */
.contact-info-panel {
	background: #F1F5F9;            /* subtle light grey, distinct from #F8FAFC page */
	border-radius: 1rem;
	padding: 2rem 2.25rem;
	height: 100%;                   /* stretch to match the form column height */
	display: flex;
	flex-direction: column;
	justify-content: center;        /* balance the stack against the form */
}

.info-item {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1.5rem 0;
}
/* Whitespace only — no dividers, no shadows. */
.info-item + .info-item {
	border-top: none;
}

.info-icon {
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	color: #6b7280;
	margin-top: 0.15rem;
}
.info-body {
	min-width: 0;
}
.info-label {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	line-height: 1.3;
	font-weight: 700;
	color: #111827;
}
.info-value {
	display: inline-block;
	font-size: 1rem;
	font-weight: 600;
	color: #2563eb;
	text-decoration: none;
}
.info-value:hover {
	color: #1d4ed8;
	text-decoration: underline;
}
.info-sub {
	margin: 0.2rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #6b7280;
}

/* Factory — secondary: smaller icon + reduced hierarchy. */
.info-item--secondary .info-icon {
	width: 1.25rem;
	height: 1.25rem;
}
.info-item--secondary .info-label {
	font-size: 0.9375rem;
	font-weight: 600;
}
.info-item--secondary .info-sub {
	font-size: 0.8125rem;
	color: #9ca3af;
}

/* Response Time — tertiary: smallest font. */
.info-item--tertiary .info-icon {
	width: 1.25rem;
	height: 1.25rem;
}
.info-item--tertiary .info-label {
	font-size: 0.875rem;
	font-weight: 600;
}
.info-item--tertiary .info-sub {
	font-size: 0.8125rem;
	color: #9ca3af;
}

/* ==========================================================================
   Micro-interactions — hover lift, focus ring, staggered entrance
   Contact page only. Map (the_content) and FluentForm markup untouched.
   ========================================================================== */

/* 1) Right-panel hover: the whole item lifts ~2px and its bare SVG icon
      scales up 1.1×, hinting interactivity on the primary channels
      (Email / WhatsApp). Pure CSS — no Tailwind `group` wrapper needed. */
.contact-info-panel .info-item {
	transition: transform 0.3s ease-out;
}
.contact-info-panel .info-item:hover {
	transform: translateY(-2px);
}
.contact-info-panel .info-icon {
	transition: transform 0.3s ease-out;
}
.contact-info-panel .info-item:hover .info-icon {
	transform: scale(1.1);
}

/* 2) Entrance: staggered fade-in-up. Left form first, right panel +0.18s,
      guiding the eye from the form to the info panel. Smooth easing (no
      bounce) to match the industrial brand's calm, trustworthy feel.
      CSS load-trigger is used because this module sits above the fold on the
      contact page — it needs no JS and degrades gracefully if scripts are
      blocked. (Scroll-trigger via IntersectionObserver available on request.) */
@keyframes rsContactFadeInUp {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}
body.page-id-41 .lg\:col-span-7,
body.page-id-41 .lg\:col-span-5 {
	animation: rsContactFadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.page-id-41 .lg\:col-span-5 {
	animation-delay: 0.18s;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	body.page-id-41 .lg\:col-span-7,
	body.page-id-41 .lg\:col-span-5,
	.contact-info-panel .info-item,
	.contact-info-panel .info-icon {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}

/* Pre-footer role-select styles now live in assets/css/pre-footer.css
   (loaded globally for every page that includes template-parts/pre-footer-role.php). */

/* ==========================================================================
   FluentForm shared styles are in talk-to-engineer.css (loaded globally).
   Only page-specific overrides live here.
   ========================================================================== */

/* Contact page textarea — identical sizing to the Talk-to-Engineer page.
   Anchor to `textarea.ff-el-form-control` WITHOUT the `.ff-el-input` ancestor:
   FluentForm actually nests the textarea inside `.ff-el-input--content`
   (note the --content suffix), so the old `.ff-el-input textarea` never
   matched and the textarea fell back to WP's global `small` (13.33px) —
   the same root-cause we fixed on the engineers page. */
body.page-id-41 textarea.ff-el-form-control {
	width: 100%;
	min-height: 150px;
	padding: 0.875rem 1rem !important;
	font-family: inherit !important; /* lock to page font, beat plugin system stack */
	font-size: 1rem !important;
	line-height: 1.7 !important;
	color: #1f2937;
	resize: vertical !important;
	box-sizing: border-box;
}

/* Contact page text-inputs (single-line): match the textarea size so the
   form feels of a piece — slightly larger than the shared default.
   `select` is anchored to `.ff-el-form-control` (not `.ff-el-input`) for the
   same --content nesting reason as the textarea above. */
body.page-id-41 .ff-el-input input[type="text"],
body.page-id-41 .ff-el-input input[type="email"],
body.page-id-41 .ff-el-input input[type="tel"],
body.page-id-41 .ff-el-input input[type="number"],
body.page-id-41 .ff-el-input input[type="url"],
body.page-id-41 select.ff-el-form-control {
	font-size: 1.0625rem !important;
}

/* ==========================================================================
   Form section floating effect + enhanced input styling
   ========================================================================== */

/* Form wrapper: white card on the gray page background. */
body.page-id-41 .fluentform {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	padding: 2rem 2rem 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .03);
}

/* Enhanced inputs: more padding, clearer border, premium focus glow.
   textarea/select are anchored to `.ff-el-form-control` (not `.ff-el-input`)
   because they live inside `.ff-el-input--content`. Radius unified to 8px
   (0.5rem) to match the Talk-to-Engineer page. */
body.page-id-41 .ff-el-input input[type="text"],
body.page-id-41 .ff-el-input input[type="email"],
body.page-id-41 .ff-el-input input[type="tel"],
body.page-id-41 .ff-el-input input[type="number"],
body.page-id-41 .ff-el-input input[type="url"],
body.page-id-41 textarea.ff-el-form-control,
body.page-id-41 select.ff-el-form-control {
	padding: 0.875rem 1rem !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 0.5rem !important;
	background: #fff !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

body.page-id-41 .ff-el-input input[type="text"]:focus,
body.page-id-41 .ff-el-input input[type="email"]:focus,
body.page-id-41 .ff-el-input input[type="tel"]:focus,
body.page-id-41 .ff-el-input input[type="number"]:focus,
body.page-id-41 .ff-el-input input[type="url"]:focus,
body.page-id-41 textarea.ff-el-form-control:focus,
body.page-id-41 select.ff-el-form-control:focus {
	border-color: #9ca3af !important;            /* gray-400 — soft, neutral */
	box-shadow: 0 0 0 4px rgba(243, 244, 246, 0.7) !important; /* gray-100 ring */
	outline: none !important;
}

/* ==========================================================================
   Product Interest — 2-column card grid with checkmark badge
   Mirrors the Talk-to-Engineer "Primary Technical Challenge" treatment:
   option cards built on the clickable <label> (native box visually hidden),
   brand-blue selected state, and a top-right checkmark badge. Target with the
   field's custom CSS class `rs-product-interest` (FluentForm → Advanced →
   CSS Class) for precise scoping; the generic `.ff-el-input-checkbox` rules
   below are a fallback so the 2-column layout still applies if unset.
   ========================================================================== */

/* Visually hide the native checkbox — the card is the control surface. */
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-form-check-input,
body.page-id-41 .rs-product-interest .ff-el-form-check-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	margin: 0 !important;
}

/* Reset the option cell; the label becomes the clickable card. */
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-form-check,
body.page-id-41 .rs-product-interest .ff-el-form-check {
	margin-bottom: 0 !important;
}

/* 2-column grid — generic fallback + precise class. */
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-input--content,
body.page-id-41 .rs-product-interest .ff-el-input--content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.625rem;
	padding-top: 0.35rem;   /* clearance for the selected checkmark badge */
}
@media (max-width: 640px) {
	body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-input--content,
	body.page-id-41 .rs-product-interest .ff-el-input--content {
		grid-template-columns: 1fr;
	}
}

/* Shared card surface (the label). */
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-form-check-label,
body.page-id-41 .rs-product-interest .ff-el-form-check-label {
	display: flex !important;
	align-items: center;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.875rem;
	border: 1.5px solid #e2e8f0;
	border-radius: 0.5rem;
	background: #ffffff;
	color: #374151;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-form-check-label:hover,
body.page-id-41 .rs-product-interest .ff-el-form-check-label:hover {
	border-color: #cbd5e1;
	background: #f9fafb;
}
/* Keyboard focus ring (accessibility). */
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-form-check-label:has(.ff-el-form-check-input:focus-visible),
body.page-id-41 .rs-product-interest .ff-el-form-check-label:has(.ff-el-form-check-input:focus-visible) {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Selected card: brand border + tint + blue text. */
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-form-check-label:has(.ff-el-form-check-input[type="checkbox"]:checked),
body.page-id-41 .rs-product-interest .ff-el-form-check-label:has(.ff-el-form-check-input[type="checkbox"]:checked) {
	border-color: #2563eb;
	background: #eff6ff;
	color: #1d4ed8;
	box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}

/* Checkmark badge (top-right), only revealed when the option is selected. */
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-form-check-label::after,
body.page-id-41 .rs-product-interest .ff-el-form-check-label::after {
	content: "";
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background-color: #2563eb;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.8rem;
	box-shadow: 0 1px 3px rgba(37, 99, 235, 0.45);
	opacity: 0;
	transform: scale(0.5);
	transition: opacity .18s ease, transform .18s ease;
}
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-form-check-label:has(.ff-el-form-check-input[type="checkbox"]:checked)::after,
body.page-id-41 .rs-product-interest .ff-el-form-check-label:has(.ff-el-form-check-input[type="checkbox"]:checked)::after {
	opacity: 1;
	transform: scale(1);
}