/* =============================================================
   POLICY PAGES — css/policy-pages.css
   -------------------------------------------------------------
   Covers Terms & Conditions, Privacy Policy and Refund & Returns.
   PORTING-MAP §E, E5–E7: one decision, one file, because all
   three pages share the same `wows-tc-*` markup in the database —
   the same wrapper, quick nav, section cards, contact callout and
   governing-law banner. v1 had already noticed this and pointed
   all three at its `css/terms-conditions.css`; the name is kept
   generic here so the next person doesn't assume it is T&C-only.

   Decision: **restyle**, not port. The markup is untouched (it
   carries no schema but it is hand-written HTML in the block
   editor, so a rewrite is manual DB work on live for no gain),
   but every v1 colour is retokenised — v1's #0073aa blue, #e67e22
   orange and its one-off #1e3a5f / #f4f8fb / #fffbf0 greys are
   all retired by the mockup palette (INSTRUCTIONS.md §5).

   Structure follows v1's section order so the two files can be
   diffed, with one gap: v1's §2 "Last updated badge"
   (`.wows-tc-meta` / `.wows-tc-meta-item`) is **deliberately not
   here.** Codex flagged it as a missing regression in the
   session-8 review; checked against the database, that markup
   appears in **two revisions of the T&C page and nowhere else** —
   no published page renders it. Carrying the rules over would be
   dead CSS. If a "last updated" line is ever wanted back, it has
   to be added to the page content first.

   0. Page container   1. Page header      2. Quick nav
   3. Section cards    4. Contact callout  5. Governing law
   6. Responsive
   ============================================================= */


/* ==============================================
   0. PAGE CONTAINER
   ============================================== */

/* The content supplies its own <h1> inside .wows-tc-header, so the
   template's title would be a second one. v1 hid it the same way.
   Safe unscoped because this file only loads on the three pages. */
.entry-header {
	display: none;
}

/* The block editor leaves empty <p>s between Custom HTML blocks. */
.entry-content > p:empty {
	display: none;
	margin: 0;
	padding: 0;
}

.wows-tc-wrap {
	max-width: 860px;
	margin: 0 auto;
	padding: var(--wows-section-sm) var(--wows-gutter) var(--wows-section-xl);
	color: var(--wows-text);
	font-family: var(--wows-font-body);
	font-size: var(--wows-fs-md);
	line-height: var(--wows-lh-body);
}


/* ==============================================
   1. PAGE HEADER
   ============================================== */
.wows-tc-header {
	text-align: center;
	margin-bottom: var(--wows-sp-8);
	padding-bottom: var(--wows-sp-7);
	border-bottom: 1px solid var(--wows-border-soft);
}

.wows-tc-header h1 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-section);
	font-weight: 700;
	line-height: var(--wows-lh-heading);
	letter-spacing: var(--wows-ls-h1);
	color: var(--wows-ink);
	margin: 0 0 var(--wows-sp-1);
}

.wows-tc-header p {
	font-size: var(--wows-fs-base);
	color: var(--wows-text-muted);
	margin: 0;
}


/* ==============================================
   2. QUICK NAV
   ============================================== */
.wows-tc-quicknav {
	background: var(--wows-accent-tint-2);
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-panel);
	padding: var(--wows-sp-6) var(--wows-sp-7);
	margin-bottom: var(--wows-sp-9);
}

.wows-tc-quicknav h3 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wows-ls-eyebrow);
	color: var(--wows-accent);
	margin: 0 0 var(--wows-sp-2);
}

.wows-tc-quicknav ol {
	margin: 0;
	padding-left: var(--wows-sp-5);
	columns: 2;
	column-gap: var(--wows-sp-7);
	font-size: var(--wows-fs-base);
	line-height: 2;
	color: var(--wows-text-faint);
}

.wows-tc-quicknav ol li a {
	color: var(--wows-accent);
	text-decoration: none;
	transition: color var(--wows-t-base);
}

.wows-tc-quicknav ol li a:hover {
	color: var(--wows-accent-dark);
	text-decoration: underline;
}


/* ==============================================
   3. SECTION CARDS
   ============================================== */
.wows-tc-section {
	margin-bottom: var(--wows-sp-8);
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-lg);
	overflow: hidden;
	/* The quick nav jumps to these; clear the sticky header. */
	scroll-margin-top: var(--wows-sticky-top);
}

.wows-tc-section-header {
	display: flex;
	align-items: center;
	gap: var(--wows-sp-3);
	/* Vertical padding is up from sp-4 now the 38px icon chip no longer sets
	   the row height — without it the header reads as a cramped strip. */
	padding: var(--wows-sp-5) var(--wows-sp-7);
	background: var(--wows-surface-2);
	border-bottom: 1px solid var(--wows-border-soft);
}

/*
 * The section emoji are hidden, not deleted.
 *
 * Every section header in the page content carries an emoji —
 * <span class="wows-tc-section-icon">ℹ️</span> and so on. Eddy's call on
 * 16 Aug 2026: on terms, privacy and refunds they read as AI-generated, and
 * these are the three pages where the tone has to be plainest.
 *
 * Hidden in CSS rather than stripped from the database, so the change is
 * reversible in one line and does not touch three pages of hand-written HTML.
 * `display: none` and not `visibility: hidden`, so the flex row closes up and
 * the title sits against the padding edge.
 *
 * The sections are numbered in their own titles ("1. General Information"), so
 * nothing is lost as a wayfinding cue.
 */
.wows-tc-section-icon {
	display: none;
}

.wows-tc-section-title {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-lg);
	font-weight: 600;
	letter-spacing: var(--wows-ls-tight);
	color: var(--wows-ink);
	margin: 0;
}

.wows-tc-section-body {
	padding: var(--wows-sp-6) var(--wows-sp-7);
}

/* Numbered clauses carry their own "1.1" in a <strong>, so the list
   marker is suppressed and each clause is a ruled row. */
.wows-tc-section-body ol {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.wows-tc-section-body ol li {
	padding: var(--wows-sp-1) 0;
	border-bottom: 1px solid var(--wows-divider);
	font-size: var(--wows-fs-base);
	line-height: var(--wows-lh-body);
	color: var(--wows-text);
}

.wows-tc-section-body ol li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.wows-tc-section-body ol li strong {
	color: var(--wows-ink);
	font-weight: 600;
}

/* Nested (a) (b) (c) lists — e.g. the warranty-void conditions. */
.wows-tc-sublist {
	margin: var(--wows-sp-1) 0 0 var(--wows-sp-4);
	padding-left: var(--wows-sp-4);
	list-style: lower-alpha;
	font-size: var(--wows-fs-base);
	color: var(--wows-text-muted);
	line-height: var(--wows-lh-body);
}

/* Overrides the ruled-row treatment inherited from the parent <ol>.
   !important is v1's and is kept: the parent rule is equally
   specific and lands later in the file. */
.wows-tc-sublist li {
	border-bottom: none !important;
	padding: 2px 0 !important;
}


/* ==============================================
   4. CONTACT CALLOUT
   ============================================== */
.wows-tc-contact {
	background: var(--wows-gradient-accent);
	border-radius: var(--wows-r-xl);
	padding: var(--wows-sp-8) var(--wows-sp-9);
	margin: var(--wows-sp-9) 0;
	color: var(--wows-white);
	display: flex;
	align-items: flex-start;
	gap: var(--wows-sp-6);
	box-shadow: var(--wows-shadow-accent);
}

.wows-tc-contact-icon {
	font-size: var(--wows-fs-2xl);
	line-height: 1;
	flex-shrink: 0;
	margin-top: 2px;
}

.wows-tc-contact-body h3 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-lg);
	font-weight: 600;
	letter-spacing: var(--wows-ls-tight);
	margin: 0 0 var(--wows-sp-1);
	color: var(--wows-white);
}

.wows-tc-contact-body p {
	margin: 0 0 var(--wows-sp-2);
	font-size: var(--wows-fs-base);
	color: var(--wows-on-accent);
	line-height: var(--wows-lh-body);
}

.wows-tc-contact-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wows-sp-1);
}

/* !important on colour and text-decoration is v1's, and still needed:
   style.css §8 styles .entry-content a and lands later. */
.wows-tc-contact-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--wows-sp-1) var(--wows-sp-4);
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--wows-r-sm);
	color: var(--wows-white) !important;
	font-size: var(--wows-fs-sm);
	font-weight: 600;
	text-decoration: none !important;
	transition: background var(--wows-t-base);
}

.wows-tc-contact-link:hover {
	background: rgba(255, 255, 255, 0.28);
	color: var(--wows-white) !important;
}


/* ==============================================
   5. GOVERNING LAW BANNER
   ============================================== */
/* v1 built this in #e67e22 orange, which the mockup palette retires.
   --wows-rating is the only amber left in the token set; it reads as
   a notice rule rather than as an error, which is the intent. */
.wows-tc-govlaw {
	background: var(--wows-surface);
	border: 1px solid var(--wows-border-soft);
	border-left: 4px solid var(--wows-rating);
	border-radius: 0 var(--wows-r-md) var(--wows-r-md) 0;
	padding: var(--wows-sp-4) var(--wows-sp-6);
	margin-bottom: var(--wows-sp-8);
	font-size: var(--wows-fs-base);
	color: var(--wows-text);
	line-height: var(--wows-lh-body);
}

.wows-tc-govlaw strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wows-ls-eyebrow);
	color: var(--wows-ink);
}


/* ==============================================
   6. RESPONSIVE
   ----------------------------------------------
   Breakpoints are the theme's 900 / 680 (mobile
   mockup), not v1's 600 / 560.
   ============================================== */
@media (max-width: 680px) {
	.wows-tc-quicknav ol {
		columns: 1;
	}

	.wows-tc-section-header {
		padding: var(--wows-sp-3) var(--wows-sp-4);
		gap: var(--wows-sp-2);
	}

	.wows-tc-section-body {
		padding: var(--wows-sp-4);
	}

	.wows-tc-contact {
		flex-direction: column;
		gap: var(--wows-sp-2);
		padding: var(--wows-sp-6);
	}

	.wows-tc-contact-links {
		flex-direction: column;
	}

	.wows-tc-contact-link {
		justify-content: center;
	}
}