/**
 * Yodha Fuel — Shipping Policy page styles.
 *
 * Same architecture as assets/css/about.css and assets/css/contact.css:
 * this file renders and contains none of the page's actual copy. The
 * Shipping 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
 * (non-dark) hero band, a narrow readable prose column for the policy
 * sections, an optional highlighted callout box (used for the shipping-
 * charge and contact sections), and a dark final-CTA band reusing the
 * same proven pattern as about.css/contact.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 Shipping Policy setup
 * instructions for the full list and the recommended block structure.
 *
 * Loaded ONLY on the Shipping Policy page (see inc/enqueue.php's
 * conditional, gated on yodha_fuel_is_shipping_policy_page() from
 * inc/shipping-policy.php), so nothing here can affect any other existing
 * page. Classes are namespaced `.yf-shipping-*` as a second, belt-and-
 * suspenders layer, matching the `.yf-about-*` / `.yf-contact-*` 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 and Contact Us
 * 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-shipping-policy-page only
   (added by yodha_fuel_shipping_policy_body_class() in
   inc/shipping-policy.php). Identical technique to the About Us / Contact
   Us page-level overrides — see about.css's top comment for the full
   reasoning; not repeated here verbatim to keep this file shorter.
   ============================================================ */
body.yf-shipping-policy-page .yf-page__header {
	display: none;
}

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

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

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

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

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

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

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

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

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

/* ============================================================
   BUTTON ADAPTER — own copy, same tokens/technique as about.css's and
   contact.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-shipping-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-shipping-policy-page .wp-block-button__link:hover,
.yf-shipping-policy-page .wp-block-button__link:focus {
	background-color: var(--yodha-orange-dark);
	border-color: var(--yodha-orange-dark);
	color: var(--white);
}

.yf-shipping-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-shipping-policy-page .wp-block-button.is-style-outline .wp-block-button__link:hover,
.yf-shipping-policy-page .wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--warrior-dark);
	color: var(--white);
}

/* ============================================================
   HERO — class "yf-shipping-hero". A LIGHT full-bleed band (not the dark
   Cover treatment the Hero/Final-CTA sections use elsewhere) — a policy
   page reads as trustworthy and calm, not a marketing moment, per the
   "do not over-design" / "readability and trust" brief. Still a core
   Group block with background-color set, so the same lesson-1 rule
   applies: background-color on the OUTER element, max-width/padding/
   centering on the INNER .wp-block-group__inner-container wrapper.
   ============================================================ */
.wp-block-group.yf-shipping-hero {
	background-color: var(--color-bg-alt);
}

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

.yf-shipping-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-shipping-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-shipping-hero .wp-block-group__inner-container {
		padding-left: var(--container-padding-desktop);
		padding-right: var(--container-padding-desktop);
	}
}

/* ============================================================
   CALLOUT — class "yf-shipping-callout". A simple bordered information
   box for the sections that benefit from being visually set apart: the
   current ₹99 Shipping Charges section and the Contact section. Same
   pattern as contact.css's .yf-contact-order-help, generalised with a
   neutral name since this page uses it more than once.
   ============================================================ */
.yf-shipping-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-shipping-callout h2,
.yf-shipping-callout h3 {
	margin-top: 0;
}

.yf-shipping-callout p:last-child {
	margin-bottom: 0;
}

/* A slightly stronger left accent variant for the single most
   operationally-important box on the page (the current shipping charge) —
   purely a visual emphasis, communicated by more than color alone (an
   icon/label the admin can add in content), never color alone. */
.yf-shipping-callout--accent {
	border-left: 4px solid var(--yodha-orange);
}

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

.wp-block-group.yf-shipping-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-shipping-final-cta .wp-block-group__inner-container > * {
	color: var(--color-text-inverse);
}

.yf-shipping-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-shipping-final-cta .wp-block-group__inner-container {
		padding-left: var(--container-padding-tablet);
		padding-right: var(--container-padding-tablet);
	}
}