/**
 * Yodha Fuel — Privacy Policy page styles.
 *
 * Same architecture as assets/css/shipping-policy.css and
 * assets/css/refund-return-policy.css: this file renders and contains
 * none of the page's actual copy. The Privacy 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, and a highlighted callout box for the
 * closing contact section — reusing the same proven patterns as the
 * other policy pages. 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 Privacy Policy setup instructions for the full list
 * and the recommended block structure.
 *
 * Loaded ONLY on the Privacy Policy page (see inc/enqueue.php's
 * conditional, gated on yodha_fuel_is_privacy_policy_page() from
 * inc/privacy-policy.php), so nothing here can affect any other existing
 * page. Classes are namespaced `.yf-privacy-*` as a second, belt-and-
 * suspenders layer, matching the 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.
 *
 * Unlike the Shipping Policy / Refund & Return Policy pages, this page has
 * no separate dark "final CTA" band — the brief's own section structure
 * ends on a single contact callout (Section 15, "Questions About
 * Privacy?"), so no second promotional section was added that the brief
 * did not ask for.
 *
 * Two lessons carried over from building the earlier 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
 *      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-privacy-policy-page only
   (added by yodha_fuel_privacy_policy_body_class() in
   inc/privacy-policy.php). Identical technique to the other policy
   pages' page-level overrides — see about.css's top comment for the full
   reasoning; not repeated here verbatim to keep this file shorter.
   ============================================================ */
body.yf-privacy-policy-page .yf-page__header {
	display: none;
}

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

body.yf-privacy-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-privacy-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-privacy-prose {
	max-width: var(--container-max-narrow);
	margin: 0 auto;
}

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

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

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

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

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

/* A small muted line, used for the editable "Last updated" date in the
   Changes to This Policy section. */
.yf-privacy-prose .yf-privacy-updated {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	font-style: italic;
}

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

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

/* ============================================================
   HERO — class "yf-privacy-hero". Same light, non-dark full-bleed
   treatment as the other policy pages' hero (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-privacy-hero {
	background-color: var(--color-bg-alt);
}

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

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

/* ============================================================
   CALLOUT — class "yf-privacy-callout". A simple bordered information
   box, used for the closing "Questions About Privacy?" contact section so
   it stands out from the long-form policy prose above it. Same pattern as
   the other policy pages' callout boxes.
   ============================================================ */
.yf-privacy-callout {
	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-privacy-callout h2,
.yf-privacy-callout h3 {
	margin-top: 0;
}

.yf-privacy-callout p {
	max-width: 48ch;
	margin-left: auto;
	margin-right: auto;
}