/* Compass — Blocks-rendered content (#64, #66). Loaded on Blocks pages and in the editor canvas.
 * Bound to Compass tokens only. The Legacy builder's pages never load this file (rendering rule, ADR-0007).
 *
 * Two environments must give ONE result (a Block's preview = its published render):
 *   live page     .compass-surface > .compass-content, with the carried mywp stylesheet also on the page — a
 *                 full reset (margin / padding / font on every element, no list bullets), html { font-size: 10px },
 *                 a { text-decoration: none }, a:hover { color: … }.
 *   editor canvas .editor-styles-wrapper > .is-root-container, with browser defaults.
 * So nothing here or in a Block's stylesheet relies on a browser default, and nothing uses rem:
 *   - prose rules address the core blocks as DIRECT CHILDREN of the container that carry no cx- class — a
 *     Block's root always has one and its inner elements are never direct children, so a prose rule cannot
 *     reach into a Block (a Block's root may itself be a <ul>, <dl> or <figure>);
 *   - rich text inside a Block sits in a .cx-richtext container, normalised below;
 *   - every link rule names :hover and :focus too, so the carried a:hover colour never shows through;
 *   - units are px and tokens (a rem is 10px on the live page, 16px in the canvas). */
.compass-surface { position: relative; isolation: isolate; overflow-x: clip; clip-path: inset(0); background: var(--surface-base); }
/* The column is the approved pages' .wrap: 1180px wide with a 40px gutter (22px on a phone). */
.compass-content { position: relative; z-index: 1; box-sizing: border-box; max-width: 1180px; margin: 0 auto; padding: var(--space-8) 40px; font: 400 var(--type-body-lg) / 1.6 var(--type-font-body); color: var(--content-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (max-width: 720px) {
  .compass-content { padding-left: 22px; padding-right: 22px; }
}

/* Flow: one rhythm between top-level Blocks; a section heading opens a new section with more air above it. */
.compass-content > * { margin-top: 0; margin-bottom: 22px; }
.compass-content > .cx-section-head { margin-bottom: var(--section-head-margin-bottom); }
.compass-content > .cx-section-head:not(:first-child) { margin-top: 84px; }
.compass-content > .cx-closeout:not(:first-child) { margin-top: 62px; }
.compass-content > :last-child { margin-bottom: 0; }

/* Ambient palm backdrop — an Immersive EVENT page: one whose EventHero shows the event's dates (approved Winterfest
 * treatment, James 2026-09-02: vibrant, screen-blended at 30%). A hero without dates is a program or landing page
 * (the approved FFP page, #79) and has no palms. Fixed to the viewport, clipped to the surface (clip-path above),
 * behind the column. Live page only; the editor canvas does not draw it. */
[data-mode="immersive"] .compass-surface:has(.cx-event-hero__dates)::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url(brand/logo-palms.svg), url(brand/logo-palms.svg); background-repeat: no-repeat, no-repeat; background-position: left -70px bottom -40px, right -70px bottom -40px; background-size: auto 46vh, auto 46vh; opacity: .30; mix-blend-mode: screen; }
@media (max-width: 720px) {
  [data-mode="immersive"] .compass-surface:has(.cx-event-hero__dates)::before { background-size: auto 26vh, auto 26vh; }
}

/* Scroll reveal (Immersive) — the approved motion: each top-level Block fades up once as it enters view.
 * No-JS safe: visible by default; assets/reveal.js adds .js-reveal to <html>, then .is-in per Block. */
[data-mode="immersive"].js-reveal .compass-content > :not(.is-in) { opacity: 0; transform: translateY(34px); }
[data-mode="immersive"] .compass-content > * { transition: opacity .7s var(--motion-easing-standard), transform .7s var(--motion-easing-standard); }
@media (prefers-reduced-motion: reduce) {
  [data-mode="immersive"] .compass-content > * { opacity: 1 !important; transform: none !important; transition: none; }
}

/* The fixed accent list (contracts.json propTypes.accent). An item with an accent sets --cx-accent for its dot or
 * edge; the default is teal. Decorative fills only — text never takes --cx-accent. */
.cx-accent--gold { --cx-accent: var(--tier-gold); }
.cx-accent--bronze { --cx-accent: var(--tier-bronze); }
.cx-accent--silver { --cx-accent: var(--tier-silver); }
.cx-accent--platinum { --cx-accent: var(--tier-platinum); }
.cx-accent--diamond { --cx-accent: var(--tier-diamond); }
.cx-accent--standard { --cx-accent: var(--tier-standard); }

/* Tier colour as TEXT (ladder tier names, matrix column heads) — Immersive only. On the dark surfaces every tier
 * ink is >= 4.6:1; on white the deepened inks reach only ~3:1, so in Conversion the text keeps its own colour. */
[data-mode="immersive"] .cx-tier--standard { --cx-tier-ink: var(--tier-standard); }
[data-mode="immersive"] .cx-tier--bronze { --cx-tier-ink: var(--tier-bronze); }
[data-mode="immersive"] .cx-tier--silver { --cx-tier-ink: var(--tier-silver); }
[data-mode="immersive"] .cx-tier--gold { --cx-tier-ink: var(--tier-gold); }
[data-mode="immersive"] .cx-tier--platinum { --cx-tier-ink: var(--tier-platinum); }
[data-mode="immersive"] .cx-tier--diamond { --cx-tier-ink: var(--tier-diamond); }

/* Prose — core paragraph / heading / list / quote / table / image, as direct children of the container. */
:is(.compass-content, .is-root-container) > :is(h2, h3, h4) { font-family: var(--type-font-display); font-weight: 700; line-height: 1.15; letter-spacing: normal; text-transform: none; color: var(--content-primary); }
:is(.compass-content, .is-root-container) > h2 { font-size: var(--type-headline-lg); }
:is(.compass-content, .is-root-container) > h3 { font-size: var(--type-headline-sm); }
:is(.compass-content, .is-root-container) > h4 { font-size: var(--type-title-lg); }
:is(.compass-content, .is-root-container) > :is(p, ul, ol, blockquote, figure):not([class*="cx-"]) :is(strong, b) { font-weight: 600; }
:is(.compass-content, .is-root-container) > :is(p, ul, ol, blockquote, figure):not([class*="cx-"]) :is(a, a:hover, a:focus) { color: var(--content-primary); text-decoration: underline; text-decoration-color: var(--accent-base); text-underline-offset: .15em; }
:is(.compass-content, .is-root-container) > :is(ul, ol):not([class*="cx-"]) { padding-left: var(--space-5); }
:is(.compass-content, .is-root-container) > ul:not([class*="cx-"]), :is(.compass-content, .is-root-container) > ul:not([class*="cx-"]) ul { list-style: disc; }
:is(.compass-content, .is-root-container) > ol:not([class*="cx-"]), :is(.compass-content, .is-root-container) > ol:not([class*="cx-"]) ol { list-style: decimal; }
:is(.compass-content, .is-root-container) > :is(ul, ol):not([class*="cx-"]) :is(ul, ol) { padding-left: var(--space-5); }
:is(.compass-content, .is-root-container) > blockquote:not([class*="cx-"]) { margin-left: 0; margin-right: 0; padding-left: var(--space-5); border-left: 3px solid var(--accent-base); color: var(--content-muted); }
:is(.compass-content, .is-root-container) > :is(table, figure):not([class*="cx-"]) table { width: 100%; border-collapse: collapse; }
:is(.compass-content, .is-root-container) > :is(table, figure):not([class*="cx-"]) :is(th, td) { padding: var(--space-3) var(--space-4); border: 0; border-bottom: 1px solid var(--line-outline); text-align: left; font-weight: 400; }
:is(.compass-content, .is-root-container) > :is(table, figure):not([class*="cx-"]) th { font-weight: 600; }
:is(.compass-content, .is-root-container) > figure:not([class*="cx-"]) { margin-left: 0; margin-right: 0; }
:is(.compass-content, .is-root-container) > figure:not([class*="cx-"]) img { max-width: 100%; height: auto; }

/* Rich text inside a Block (a wysiwyg field's HTML): paragraphs, lists, emphasis and links, stated outright.
 * A Block sets the font and colour on the container and the children inherit them (the doubled class out-ranks
 * the editor's own `.editor-styles-wrapper p` line-height); emphasis colour is the Block's own rule. */
.cx-richtext.cx-richtext > * { margin: 0 0 .75em; padding: 0; font: inherit; }
.cx-richtext.cx-richtext > :last-child { margin-bottom: 0; }
.cx-richtext.cx-richtext :is(ul, ol) { padding-left: var(--space-5); }
.cx-richtext ul { list-style: disc; }
.cx-richtext ol { list-style: decimal; }
:where(.cx-richtext) :is(strong, b) { font-weight: 700; }
:where(.cx-richtext) :is(em, i) { font-style: italic; }
.cx-richtext :is(a, a:hover, a:focus) { position: relative; z-index: 1; color: var(--content-primary); text-decoration: underline; text-decoration-color: var(--accent-base); text-underline-offset: .15em; }

/* Shared text parts (#79), from the approved FFP page. Fine print under a Block (.fineprint): 12px mono at 1.7,
 * content.faint, 18px above, at most 80ch; a rich-text container, so several paragraphs sit 18px apart. A tier
 * price inside author text ([ffp_price], inc/price.php; .gcard .gr / .feature .gold): mono, in the highlight. */
.cx-fineprint { max-width: 80ch; margin: 18px 0 0; font: 400 12px / 1.7 var(--type-font-mono); color: var(--content-faint); }
.cx-fineprint.cx-richtext > * + * { margin-top: 18px; }
.cx-fineprint.cx-richtext > * { margin-bottom: 0; }
.cx-price { font-family: var(--type-font-mono); color: var(--price-tag-fg); }
.cx-price-missing { padding: 0 4px; border-radius: 4px; background: var(--surface-section); color: var(--content-primary); } /* editor only: an [ffp_price] whose tier is not in the table */

/* Shared by every Block: text for assistive technology only, and the editor-only "fill me in" hint. */
.cx-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx-block-placeholder { margin: 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--surface-section); font: 400 var(--type-body-md) / 1.5 var(--type-font-body); color: var(--content-muted); }

/* Editor canvas: the page surface and text in the page's mode (data-mode is set by editor-mode.js). */
.editor-styles-wrapper { background: var(--surface-base); color: var(--content-primary); font-family: var(--type-font-body); }
.editor-styles-wrapper .is-root-container { box-sizing: border-box; max-width: 1180px; margin: 0 auto; padding: var(--space-8) 40px; font: 400 var(--type-body-lg) / 1.6 var(--type-font-body); -webkit-font-smoothing: antialiased; }