/**
 * Yodha Fuel — Refund & Return Policy page styles.
 *
 * Same architecture as assets/css/shipping-policy.css (and, before that,
 * about.css / contact.css): this file renders and contains none of the
 * page's actual copy. The Refund & Return Policy page is a normal
 * WordPress Page, built entirely from core Gutenberg blocks in wp-admin,
 * rendered through the theme's existing page.php + template-parts/
 * content-page.php (both completely unmodified). This file only styles
 * that editor-built content — a light hero band, a narrow readable prose
 * column for the policy sections, a highlighted callout box (used for the
 * 72-hour transit-damage reporting section), and a dark final-CTA band —
 * reusing the same proven patterns as shipping-policy.css. 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 Refund & Return Policy
 * setup instructions for the full list and the recommended block
 * structure.
 *
 * Loaded ONLY on the Refund & Return Policy page (see inc/enqueue.php's
 * conditional, gated on yodha_fuel_is_refund_return_policy_page() from
 * inc/refund-return-policy.php), so nothing here can affect any other
 * existing page. Classes are namespaced `.yf-refund-*` as a second,
 * belt-and-suspenders layer, matching the `.yf-about-*` / `.yf-contact-*`
 * / `.yf-shipping-*` per-page naming convention already used across the
 * theme.
 *
 * Reuses the existing design system throughout: --yodha-orange
 * (#F55301) / --warrior-dark (#272F32) / --space-* / --radius-* /
 * --shadow-card* / --fs-* / --container-max tokens (variables.css — these
 * values were confirmed against that file, not redefined here), 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 / Contact Us /
 * Shipping Policy pages, 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 — so a full-bleed section's background-color
 *      stays on the OUTER element while its max-width/padding/centering
 *      (and, on the dark final CTA, inverse text color) go on that INNER
 *      wrapper, never on the same element as the background.
 *   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-refund-return-policy-page only
   (added by yodha_fuel_refund_return_policy_body_class() in
   inc/refund-return-policy.php). Identical technique to the About Us /
   Contact Us / Shipping Policy page-level overrides — see about.css's top
   comment for the full reasoning; not repeated here verbatim to keep this
   file shorter.
   ============================================================ */
body.yf-refund-return-policy-page .yf-page__header {
	display: none;
}

body.yf-refund-return-policy-page .yf-page__content {
	max-width: none;
	margin: 0;
}

body.yf-refund-return-policy-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-refund-return-policy-page .yf-section .yf-container {
	padding-top: 0;
	padding-bottom: 0;
}

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

/* A narrower reading column for the policy's body paragraphs — the main
   helper used on almost every section of this page. Apply to an inner
   Group alongside, or instead of, .yf-container. */
.yf-refund-prose {
	max-width: var(--container-max-narrow);
	margin: 0 auto;
}

.yf-refund-prose p,
.yf-refund-prose li {
	color: var(--color-text);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.yf-refund-prose h2 {
	margin-top: var(--space-xl);
	margin-bottom: var(--space-xs);
}

.yf-refund-prose h2:first-child {
	margin-top: 0;
}

.yf-refund-prose ul,
.yf-refund-prose ol {
	padding-left: 1.25em;
}

.yf-refund-prose ul li,
.yf-refund-prose ol li {
	margin-bottom: var(--space-2xs);
}

/* ============================================================
   BUTTON ADAPTER — own copy, same tokens/technique as about.css's /
   contact.css's / shipping-policy.css's button adapters (each page-CSS
   file carries its own 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" for solid
   orange, "Outline" for outline.
   ============================================================ */
.yf-refund-return-policy-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-refund-return-policy-page .wp-block-button__link:hover,
.yf-refund-return-policy-page .wp-block-button__link:focus {
	background-color: var(--yodha-orange-dark);
	border-color: var(--yodha-orange-dark);
	color: var(--white);
}

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

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

/* ============================================================
   HERO — class "yf-refund-hero". Same light, non-dark full-bleed
   treatment as shipping-policy.css's hero (a policy page reads as calm
   and trustworthy, not a marketing moment). Still a core Group block
   with background-color set, so lesson 1 still applies: background-color
   on the OUTER element, max-width/padding/centering on the INNER
   .wp-block-group__inner-container wrapper.
   ============================================================ */
.wp-block-group.yf-refund-hero {
	background-color: var(--color-bg-alt);
}

.wp-block-group.yf-refund-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;
}

.yf-refund-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-refund-hero h1 {
	color: var(--color-heading);
	font-size: clamp(2.25rem, 6vw, 3.75rem);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
}

.yf-refund-hero__intro {
	color: var(--color-text-muted);
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
	font-size: var(--fs-body);
}

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

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

/* ============================================================
   CALLOUT — class "yf-refund-callout". A bordered information box, used
   for the transit-damage reporting requirements (the 72-hour window, the
   unboxing-video and evidence requirements) so this important process
   stands out from the surrounding prose. The emphasis is communicated by
   the border/background AND the heading text itself, never by color
   alone. Same pattern as shipping-policy.css's .yf-shipping-callout.
   ============================================================ */
.yf-refund-callout {
	background-color: var(--color-bg-alt);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--card-radius);
	padding: var(--space-lg);
}

.yf-refund-callout h2,
.yf-refund-callout h3 {
	margin-top: 0;
}

.yf-refund-callout p:last-child,
.yf-refund-callout ul:last-child,
.yf-refund-callout ol:last-child {
	margin-bottom: 0;
}

/* A slightly stronger left accent for the single most operationally
   important box on the page (the transit-damage reporting requirements) —
   a visual emphasis on top of the heading text itself, never color alone. */
.yf-refund-callout--accent {
	border-left: 4px solid var(--yodha-orange);
}

/* ============================================================
   FINAL CTA — class "yf-refund-final-cta". Identical proven pattern to
   shipping-policy.css's / about.css's / contact.css's final CTA (dark
   full-bleed band); kept as its own copy here since none of those files
   loads on this page.
   ============================================================ */
.wp-block-group.yf-refund-final-cta {
	background-color: var(--color-bg-dark);
}

.wp-block-group.yf-refund-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;
}

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

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

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