/**
 * Yodha Fuel — Contact Us page styles.
 *
 * Same architecture as assets/css/about.css for the About Us page: this
 * file renders and contains none of the page's actual copy. The Contact
 * Us page is a normal WordPress Page, built entirely from core Gutenberg
 * blocks in wp-admin (plus one WPForms block for the message form),
 * rendered through the theme's existing page.php + template-parts/
 * content-page.php (both completely unmodified). This file only styles
 * that editor-built content — section rhythm, the hero/final-CTA full-
 * bleed treatments, the three contact-option cards, a light visual
 * adapter for WPForms' own form markup, and the same Button-block adapter
 * about.css already uses. Every class below is meant to be typed into a
 * block's "Additional CSS class(es)" field in the editor's Advanced panel
 * — see the Contact Us setup instructions for the full list and the
 * recommended block structure.
 *
 * Loaded ONLY on the Contact Us page (see inc/enqueue.php's conditional,
 * gated on yodha_fuel_is_contact_page() from inc/contact.php), so nothing
 * here can affect Homepage / Shop / Product / Cart / Checkout / My
 * Account / Thank You / About Us — none of them load this file at all.
 * Classes are still namespaced `.yf-contact-*` as a second, belt-and-
 * suspenders layer, matching the `.yf-about-*` / `.yf-hero-slider` /
 * `.yf-shop-*` per-page naming convention already used across the theme.
 *
 * Reuses the existing design system throughout: --yodha-orange /
 * --warrior-dark / --space-* / --radius-* / --shadow-card* / --fs-* /
 * --container-max tokens (variables.css), the global .yf-container /
 * .yf-section / .yf-section--alt layout classes (layout.css), and
 * heading typography that already comes free from base.css's global
 * h1–h6 rules and global a:focus-visible outline — no second design
 * system, no duplicate button system, no new JavaScript.
 *
 * Two lessons carried over from building the About Us page, baked in
 * here from the start rather than re-discovered live:
 *   1. A Group block with a constrained layout on this install always
 *      renders its own extra .wp-block-group__inner-container wrapper
 *      div around its content, same as a Cover block's own
 *      .wp-block-cover__inner-container — so a full-bleed section's
 *      background-color stays on the OUTER element while its max-width/
 *      padding/centering and any inverse text color go on that INNER
 *      wrapper, never on the same element as the background. See the
 *      hero/final-CTA blocks below.
 *   2. Doubling-padding fixes for .yf-section > .yf-container use a
 *      descendant combinator, not ">" — the extra inner-container
 *      wrapper above means .yf-container is never actually a direct
 *      child of .yf-section.
 *
 * Mobile-first: base rules are the 375px default; this file uses the
 * same shared 480 / 768 / 1024 / 1280px breakpoints as the rest of the
 * theme.
 */

/* ============================================================
   PAGE-LEVEL OVERRIDES — scoped to body.yf-contact-page only (added by
   yodha_fuel_contact_body_class() in inc/contact.php). Identical to the
   three About Us page-level overrides in about.css — see that file's
   comments for the full reasoning; not repeated here verbatim to keep
   this file shorter, but the technique and the reasons are the same.
   ============================================================ */
body.yf-contact-page .yf-page__header {
	display: none;
}

body.yf-contact-page .yf-page__content {
	max-width: none;
	margin: 0;
}

body.yf-contact-page #primary.content-area {
	width: 100%;
	float: none;
	margin-right: 0;
}

/* Doubling-padding fix for .yf-section > .yf-container — descendant
   combinator on purpose, see this file's top comment (lesson 2). */
.yf-contact-page .yf-section .yf-container {
	padding-top: 0;
	padding-bottom: 0;
}

/* ============================================================
   SHARED HELPERS
   ============================================================ */

/* A narrower reading column for editorial copy (form intro, order-help
   text). Apply to an inner Group alongside, or instead of, .yf-container. */
.yf-contact-prose {
	max-width: var(--container-max-narrow);
	margin: 0 auto;
}

.yf-contact-prose p {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* ============================================================
   BUTTON ADAPTER — makes core Gutenberg's own Button block match the
   site's existing CTA look. Same tokens .yf-btn already uses in
   components.css, same technique as about.css's own button adapter
   (each page-CSS file carries its own copy rather than depending on
   another page's file, since only one of these ever loads at a time).
   No custom class needed: use the Button block's own built-in Style
   switcher — "Fill" (default) for the solid orange primary look,
   "Outline" for the outline look.
   ============================================================ */
.yf-contact-page .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--btn-height-lg);
	padding: 0 var(--btn-padding-x-lg);
	border: var(--btn-border-width) solid var(--yodha-orange);
	border-radius: var(--btn-radius);
	background-color: var(--yodha-orange);
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-button);
	font-weight: var(--fw-button);
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.yf-contact-page .wp-block-button__link:hover,
.yf-contact-page .wp-block-button__link:focus {
	background-color: var(--yodha-orange-dark);
	border-color: var(--yodha-orange-dark);
	color: var(--white);
}

.yf-contact-page .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--warrior-dark);
	color: var(--warrior-dark);
}

.yf-contact-page .wp-block-button.is-style-outline .wp-block-button__link:hover,
.yf-contact-page .wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--warrior-dark);
	color: var(--white);
}

/* Modifier for an outline button sitting on a DARK section (hero, final
   CTA) — add alongside the core "Outline" style class, e.g.
   "is-style-outline yf-contact-btn-inverse". */
.yf-contact-page .wp-block-button.is-style-outline.yf-contact-btn-inverse .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--white);
}

.yf-contact-page .wp-block-button.is-style-outline.yf-contact-btn-inverse .wp-block-button__link:hover,
.yf-contact-page .wp-block-button.is-style-outline.yf-contact-btn-inverse .wp-block-button__link:focus {
	background-color: var(--white);
	border-color: var(--white);
	color: var(--warrior-dark);
}

/* ============================================================
   HERO — class "yf-contact-hero". Works on either a core Cover block (a
   full-bleed background photo) or a plainer core Group block with a
   background color set (simpler, no image required) — same dual support
   as about.css's hero, and the same lesson-1 rule: background-color on
   the OUTER element, max-width/padding/centering and inverse text color
   on the INNER .wp-block-cover__inner-container / .wp-block-group__
   inner-container wrapper.
   ============================================================ */
.wp-block-cover.yf-contact-hero,
.wp-block-group.yf-contact-hero {
	background-color: var(--warrior-dark);
}

.wp-block-cover.yf-contact-hero .wp-block-cover__inner-container,
.wp-block-group.yf-contact-hero .wp-block-group__inner-container {
	width: 100%;
	max-width: var(--container-max-narrow);
	margin: 0 auto;
	padding: var(--space-2xl) var(--container-padding-mobile);
	text-align: center;
}

.wp-block-cover.yf-contact-hero .wp-block-cover__inner-container {
	padding-top: 0;
	padding-bottom: 0;
}

.yf-contact-hero .wp-block-cover__inner-container > *,
.yf-contact-hero .wp-block-group__inner-container > * {
	color: var(--color-text-inverse);
}

.yf-contact-hero__eyebrow {
	color: var(--yodha-orange);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	font-size: var(--fs-label);
}

.yf-contact-hero h1 {
	color: var(--color-text-inverse);
	font-size: clamp(2.25rem, 6vw, 3.75rem);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
}

.yf-contact-hero__subtitle {
	color: var(--color-text-inverse-muted);
	max-width: 48ch;
	margin-left: auto;
	margin-right: auto;
	font-size: var(--fs-body);
}

@media (min-width: 768px) {
	.wp-block-cover.yf-contact-hero .wp-block-cover__inner-container,
	.wp-block-group.yf-contact-hero .wp-block-group__inner-container {
		padding-left: var(--container-padding-tablet);
		padding-right: var(--container-padding-tablet);
	}
}

@media (min-width: 1024px) {
	.wp-block-cover.yf-contact-hero .wp-block-cover__inner-container,
	.wp-block-group.yf-contact-hero .wp-block-group__inner-container {
		padding-left: var(--container-padding-desktop);
		padding-right: var(--container-padding-desktop);
	}
}

/* ============================================================
   CONTACT OPTIONS — a core Columns block, class "yf-contact-cards"; each
   inner Column block, class "yf-contact-card". Modeled directly on
   home.css's .yf-goal-card (icon badge + title + description) so this
   page reads as the same design system, not a new one. Core Columns
   already stacks to one column on mobile on its own.
   ============================================================ */
.yf-contact-cards.wp-block-columns {
	gap: var(--space-md);
}

.yf-contact-card.wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
	padding: var(--space-lg);
	background-color: var(--color-bg);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--card-radius);
	transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.yf-contact-card.wp-block-column:hover {
	border-color: var(--yodha-orange);
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.yf-contact-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	background-color: var(--color-bg-alt);
	color: var(--yodha-orange);
	margin-bottom: var(--space-2xs);
}

.yf-contact-card__icon .yf-icon {
	width: 22px;
	height: 22px;
}

.yf-contact-card h3 {
	font-size: var(--fs-body);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	margin: 0;
}

.yf-contact-card p {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	margin: 0;
}

.yf-contact-card__value {
	font-weight: var(--fw-bold);
	color: var(--color-heading);
	font-size: var(--fs-body);
	word-break: break-word;
}

.yf-contact-card .wp-block-buttons {
	margin-top: var(--space-xs);
}

.yf-contact-card .wp-block-button__link {
	height: var(--btn-height-md);
	padding: 0 var(--space-lg);
	font-size: var(--fs-small);
}

/* ============================================================
   CONTACT FORM — light visual adapter for the WPForms plugin's own form
   markup (class "wpforms-container", already applied automatically by
   WPForms itself — nothing an admin needs to add). This only restyles
   WPForms' existing fields/button to match the site's design tokens; it
   does not change WPForms' own structure, validation, or submission
   behaviour in any way.
   ============================================================ */
.yf-contact-page .wpforms-container {
	max-width: var(--container-max-narrow);
	margin: var(--space-lg) auto 0;
}

.yf-contact-page .wpforms-container label.wpforms-field-label {
	font-weight: var(--fw-bold);
	color: var(--color-heading);
	font-size: var(--fs-small);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	margin-bottom: var(--space-2xs);
}

.yf-contact-page .wpforms-container input[type="text"],
.yf-contact-page .wpforms-container input[type="email"],
.yf-contact-page .wpforms-container input[type="tel"],
.yf-contact-page .wpforms-container input[type="number"],
.yf-contact-page .wpforms-container textarea,
.yf-contact-page .wpforms-container select {
	width: 100%;
	height: var(--btn-height-lg);
	padding: 0 var(--space-md);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--white);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.yf-contact-page .wpforms-container textarea {
	height: auto;
	min-height: 140px;
	padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
}

.yf-contact-page .wpforms-container input:focus,
.yf-contact-page .wpforms-container textarea:focus,
.yf-contact-page .wpforms-container select:focus {
	outline: none;
	border-color: var(--yodha-orange);
	box-shadow: 0 0 0 3px rgba(245, 83, 1, 0.15);
}

.yf-contact-page .wpforms-container .wpforms-field {
	padding: 0;
	margin-bottom: var(--space-md);
}

.yf-contact-page .wpforms-container button[type="submit"],
.yf-contact-page .wpforms-container .wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--btn-height-lg);
	padding: 0 var(--btn-padding-x-lg);
	border: var(--btn-border-width) solid var(--yodha-orange);
	border-radius: var(--btn-radius);
	background-color: var(--yodha-orange);
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-button);
	font-weight: var(--fw-button);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.yf-contact-page .wpforms-container button[type="submit"]:hover,
.yf-contact-page .wpforms-container button[type="submit"]:focus,
.yf-contact-page .wpforms-container .wpforms-submit:hover,
.yf-contact-page .wpforms-container .wpforms-submit:focus {
	background-color: var(--yodha-orange-dark);
	border-color: var(--yodha-orange-dark);
}

/* ============================================================
   ORDER HELP — a core Group block, class "yf-contact-order-help". A
   simple bordered callout rather than a full dark section, so it reads
   as supporting content next to the form rather than a competing CTA.
   ============================================================ */
.yf-contact-order-help {
	background-color: var(--color-bg-alt);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--card-radius);
	padding: var(--space-lg);
	text-align: center;
}

.yf-contact-order-help h2,
.yf-contact-order-help h3 {
	margin-top: 0;
}

.yf-contact-order-help p {
	color: var(--color-text-muted);
	max-width: 48ch;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   FINAL CTA — class "yf-contact-final-cta". Same pattern as about.css's
   final CTA (and home.css's .yf-final-cta before that) — kept separate
   here since neither of those files loads on this page.
   ============================================================ */
.wp-block-cover.yf-contact-final-cta,
.wp-block-group.yf-contact-final-cta {
	background-color: var(--color-bg-dark);
}

.wp-block-cover.yf-contact-final-cta .wp-block-cover__inner-container,
.wp-block-group.yf-contact-final-cta .wp-block-group__inner-container {
	width: 100%;
	max-width: var(--container-max-narrow);
	margin: 0 auto;
	padding: var(--space-2xl) var(--container-padding-mobile);
	text-align: center;
}

.wp-block-cover.yf-contact-final-cta .wp-block-cover__inner-container {
	padding-top: 0;
	padding-bottom: 0;
}

.yf-contact-final-cta .wp-block-cover__inner-container > *,
.yf-contact-final-cta .wp-block-group__inner-container > * {
	color: var(--color-text-inverse);
}

.yf-contact-final-cta p {
	color: var(--color-text-inverse-muted);
	max-width: 48ch;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	.wp-block-cover.yf-contact-final-cta .wp-block-cover__inner-container,
	.wp-block-group.yf-contact-final-cta .wp-block-group__inner-container {
		padding-left: var(--container-padding-tablet);
		padding-right: var(--container-padding-tablet);
	}
}