/* ── Circular Cups — page frame ─────────────────────────────────────────
   The frame the patterns sit inside: the content measure, the section rhythm,
   the skip link, and the few places core's layout defaults need correcting.

   The design's `.wrap` is `max-width: 1080px; padding: 0 32px`. That is
   theme.json's `wideSize` plus root padding, so a `constrained` Group with
   `align: wide` reproduces it exactly and there is no `.wrap` class here —
   an editor should be able to build these layouts from the inserter, not by
   typing a class name into the Advanced panel. */

/* ── Skip link ─────────────────────────────────────────────────────────
   First focusable thing on the page, invisible until it takes focus. Inside
   the header block it would land after the logo; it is emitted by the header
   as its own first child so the very first Tab reaches it (WCAG 2.4.1). */

.cc-skip {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 100;
	transform: translateY(-200%);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-pill);
	background: var(--primary-active);
	color: var(--on-primary);
	font-size: var(--text-small);
	font-weight: var(--weight-semibold);
	text-decoration: none;
	transition: transform var(--duration-fast) var(--ease-standard);
}

.cc-skip:focus {
	transform: translateY(0);
}

/* ── Main ──────────────────────────────────────────────────────────────
   `tabindex="-1"` is added by Utilities\make_main_focusable so the skip link
   genuinely moves focus; that makes <main> focusable, and without this it
   would show a focus ring every time someone used the skip link — a ring
   around the entire page, which reads as a rendering fault. The link's target
   is still announced, because focus really did move there. */

main:focus {
	outline: none;
}

/* ── Section rhythm ────────────────────────────────────────────────────
   The design's vertical scale, exposed as classes the patterns apply. Named
   for what they are rather than their size, so the rhythm can be retuned in
   one place. */

.cc-section {
	padding-block: var(--space-9);
}

.cc-section--tight {
	padding-block: var(--space-8) var(--space-7);
}

/* The problem/solution beats run together as one column of copy with no rule
   between them, so the second and third carry no top padding. */
.cc-section--continues {
	padding-block-start: 0;
}

.cc-section--flush-bottom {
	padding-block-end: 0;
}

/* ── Prose measure ─────────────────────────────────────────────────────
   theme.json's contentSize is a pixel value, not `68ch`. The `ch` unit resolves
   against each element's own font, so a 48px display heading inside a
   constrained group was given a 68-character measure of *its* font — nearly
   1,500px, which is to say no measure at all. The reading measure survives as
   `--container-prose` for the places that genuinely want it, all of which are
   body text.

   The lead paragraph under a page title is one of them, and it sits flush with
   the left edge its heading sits on rather than centred. The `!important` is
   core's doing, not a preference: the constrained layout emits
   `margin-left: auto !important; margin-right: auto !important` on every child.
   The element selector is there for a related reason — core wraps its selector
   in `:where()`, which contributes no specificity, so a bare `.cc-lede` would
   tie with it and lose on source order. */

p.cc-lede {
	max-width: var(--container-prose);
	margin-inline: 0 !important;
	font-size: var(--text-body-lg);
	line-height: 1.75;
	color: var(--neutral-600);
}

/* ── Images ────────────────────────────────────────────────────────────
   Every image in the design is either a photograph inside a rounded frame or a
   cut-out with a drop shadow and no frame. Both need the intrinsic ratio
   preserved, and a block image with a width but no height set is the usual
   cause of a CLS regression on a card grid. */

.wp-block-image img {
	border-radius: inherit;
}

/* ── Print ─────────────────────────────────────────────────────────────
   Event organisers print the FAQ and the resource list to bring to a venue, so
   the two things that are useless on paper are dropped and the accordions are
   forced open. */

@media print {

	.cc-header,
	.cc-footer__nav,
	.cc-band,
	.cc-skip {
		display: none;
	}

	details {
		display: block;
	}

	details > *:not(summary) {
		display: block !important;
	}
}