/* =============================================================================
   Legal pages (page-legal.html): Privacy Policy, Terms & Conditions, Cookie Policy, Disclaimers. Each shows the client's
   hosted policy (wherespinky/policy-embed, slice 3 #19), or the placeholder line when a page has no policy key.
   No design page: built from the design-system postcard and eyebrow, as the 404. Tokens only (guard: npm run guard:tokens).
   ============================================================================= */
.wsp-legal-card { max-width: var(--wp--custom--maxw--text); margin: 0 auto; padding: var(--s-12); }
.wsp-legal-title {
	font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.08;
	letter-spacing: var(--wp--custom--ls--title); color: var(--c-navy); margin: 0 0 var(--s-6); text-wrap: balance;
}
.wsp-legal-text { font-size: var(--fs-body); line-height: var(--wp--custom--lh--body); color: var(--c-ink); margin: 0 0 var(--s-4); max-width: var(--wp--custom--maxw--prose); }
.wsp-legal-text:last-child { margin-bottom: 0; }
.wsp-legal-text a { color: var(--c-pink-text); border-bottom: 1px solid var(--c-pink); transition: color var(--m-fast) var(--e-std); }
.wsp-legal-text a:hover { color: var(--c-navy); }
/* Cara's G9 "too narrow" (2026-10-19): from desktop (900) the postcard takes the site's standard content width; below
   that it stays as it was (full width on a phone). Not a min-width: that would break every phone. */
@media (min-width: 900px) {
	.wsp-legal-card { max-width: var(--wp--custom--maxw--content); }
}
@media (max-width: 640px) {
	.wsp-legal-card { padding: var(--s-8) var(--s-6); }
}

/* ---- Hosted policy (wherespinky/policy-embed) -------------------------------------------------------------
   The provider's HTML arrives with an ID-scoped reset (#<key> …, specificity 1-0-1); every rule here starts with
   .wsp-policy #policy (1-1-x) so the theme's tokens win: readable measure, heading scale, link colour.
   The policy fades in when it arrives (view.js adds .is-loaded); under reduced motion it swaps in without the fade. */
/* Loading state (Ben, 2026-10-19): while the policy loads the postcard is only as tall as its kicker, title and waiting
   line; the section still fills to the footer in sand (theme.css sticky footer). When the policy arrives the postcard
   grows to fit on an eased height transition (js/pages/legal.js holds the old height, then the new one, then hands
   the height back) while the text fades in, so the footer moves down once, smoothly. Reduced motion: no animation,
   the policy just swaps in (legal.js skips the height; the fade is switched off below). */
.wsp-legal-card.is-growing { overflow: hidden; transition: height var(--m-slow) var(--e-std); }
/* Ben, 19–20 Oct: no measure of its own. The policy fills the postcard's inner width: paragraphs, lists, headings and
   accordions all share it, and the provider's centred section headings centre on it. On a phone it already filled the
   card. */
.wsp-policy #policy { font-family: var(--f-body); font-size: var(--fs-md); line-height: var(--wp--custom--lh--body); color: var(--c-ink); max-width: none; }
.wsp-policy:not(.is-loaded) #policy { color: var(--c-muted); }
.wsp-policy.is-loaded #policy { animation: wsp-policy-in var(--m-slow) var(--e-enter) both; }
@keyframes wsp-policy-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.wsp-policy.is-loaded #policy { animation: none; }
}
.wsp-policy #policy p, .wsp-policy #policy li { font-size: var(--fs-md); line-height: var(--wp--custom--lh--body); color: var(--c-ink); margin: 0 0 var(--s-4); }
/* Ben, 20 Oct (prompt 18): the ~100-character cap from prompt 17 is gone. Text narrower than the accordions looked
   broken, so paragraphs and lists run the full inner width with them. Left-aligned, as before. */
.wsp-policy #policy p, .wsp-policy #policy li { text-align: left; }
.wsp-policy #policy ul, .wsp-policy #policy ol { margin: 0 0 var(--s-4); padding-left: var(--s-6); }
.wsp-policy #policy ul { list-style: disc; }
.wsp-policy #policy ol { list-style: decimal; }
.wsp-policy #policy li { margin-bottom: var(--s-2); }
.wsp-policy #policy h2, .wsp-policy #policy h3:not(.accordion-heading) {
	font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); line-height: var(--wp--custom--lh--tight);
	color: var(--c-navy); text-align: left; margin: var(--s-10) 0 var(--s-4);
}
.wsp-policy #policy h4 { font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--button); text-transform: uppercase; color: var(--c-navy); margin: 0 0 var(--s-1); }
.wsp-policy #policy .tg-last-updated-date { font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--button); text-transform: uppercase; color: var(--c-muted); }
.wsp-policy #policy a { color: var(--c-pink-text); border-bottom: 1px solid var(--c-pink); text-decoration: none; overflow-wrap: anywhere; transition: color var(--m-fast) var(--e-std); }
.wsp-policy #policy a:hover { color: var(--c-navy); }
.wsp-policy #policy strong, .wsp-policy #policy b { font-weight: 700; }
/* The provider's accordions are native <details>: dressed as the theme's FAQ-style rows. */
.wsp-policy #policy .accordion { border: 2px solid var(--c-navy); background-color: var(--c-white); margin: 0 0 var(--s-3); }
/* Provider overrides (prompt 14a). The provider's embed stylesheet (policies.termageddon.com/api/embed_css/<key>.css)
   loads after this file, so on a specificity tie it wins. It draws the group as one box with stacked rows:
     #<key> .accordions             { border: 1px solid #aaa; border-radius: 4px; margin: 16px 0; }   1-1-0
     #<key> .accordion              { border-bottom: 1px solid #aaa; }                                 1-1-0
     #<key> .accordion:last-child   { border-bottom: 0px; }                                            1-2-0
   The last one ties .wsp-policy #policy .accordion (1-2-0) above and took the last row's bottom border; the wrapper
   rule showed as a grey rounded line under the group and grey edges in the gaps between rows. These win on
   specificity (1-2-0 for the wrapper, 1-3-0 / 1-4-0 for the rows), not !important: no wrapper box, every row its own
   full navy box, and the group's spacing comes from .accordions alone (the last row adds no margin of its own). */
.wsp-policy #policy .accordions { border: 0; border-radius: 0; padding: 0; background: none; margin: var(--s-4) 0; }
.wsp-policy #policy .accordions > .accordion,
.wsp-policy #policy .accordions > .accordion:last-child,
.wsp-policy #policy .accordions > .accordion:only-child { border: 2px solid var(--c-navy); }
.wsp-policy #policy .accordions > .accordion:last-child { margin-bottom: 0; }
.wsp-policy #policy .accordion-summary {
	cursor: pointer; padding: var(--s-3) var(--s-4); background-color: var(--c-sand);
	transition: background-color var(--m-fast) var(--e-std), color var(--m-fast) var(--e-std);
}
.wsp-policy #policy .accordion-summary:hover { background-color: var(--c-cream); }
.wsp-policy #policy .accordion-heading { display: inline; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-md); line-height: 1.3; color: var(--c-navy); margin: 0; }
.wsp-policy #policy .accordion-content { padding: var(--s-4); border-top: 2px dashed var(--wp--custom--alpha--navy-30); }
.wsp-policy #policy .accordion-section { margin: 0 0 var(--s-4); }
.wsp-policy #policy .accordion-section-content { font-size: var(--fs-button); color: var(--c-body); }
.wsp-policy #policy .accordion-section-content ul { margin-bottom: 0; }