/* ==========================================================================
   OKC Reef — Reef Guides
   Presentation for the Reef Guide plugin's editorial components.
   Loaded only on single guides, after main.css and the plugin stylesheet.
   No global styles are altered here.

   WIDTH MODEL
   -----------
   Two separate ideas, deliberately not the same value:

     CANVAS   .okc-section__inner, 82rem. The page. Owned by main.css.
     MEASURE  --okcr-measure, 40rem. Readable paragraph line length.

   A section with no visual keeps the reading measure and lets headings,
   figures and tables break wider. A section with a visual becomes a two
   column editorial split, where the column itself is the measure and the
   image occupies the rest of the canvas.

   Alternation (which side the image sits on) is decided by the plugin and
   arrives as .okcr-section--left / --right / --full. This file only styles it.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

.okcr-guide {
	--okcr-measure: var(--okc-measure);        /* 40rem */
	--okcr-standfirst: 46rem;
	--okcr-section: 52rem;
	--okcr-headline: 64rem;
	--okcr-split-gap: clamp(2.5rem, 4vw, 4.5rem);
	--okcr-prose-measure: 46rem;               /* text-only body copy */
	--okcr-prose-heading: 56rem;               /* text-only H2 */
	--okcr-intro-measure: 50rem;               /* editorial introduction */
	--okcr-gap: var(--okc-flow);
	--okcr-gap-lg: var(--okc-space-c);
	--okcr-rule: var(--okc-line);
}

/*
 * Undo the plugin's centred measure column and set each level's default.
 *
 * Specificity matters: the defaults use `> *`, so every narrowing or breakout
 * rule below is written with an explicit class or element to out-specify them.
 */

/* Guide-level children default to the full canvas. */
.okc-guide-section .okcr-guide > * {
	max-width: 100%;
	margin-inline: 0;
}

/* Sections span the canvas; their text column carries the measure. */
.okc-guide-section .okcr-guide__body > .okcr-section {
	max-width: 100%;
	margin-inline: 0;
}

.okc-guide-section .okcr-section__text > * {
	max-width: min(100%, var(--okcr-measure));
	margin-inline: 0;
}

/* Headings get more room than the copy beneath them. */
.okc-guide-section .okcr-section__text > h2 {
	max-width: min(100%, var(--okcr-section));
}

.okc-guide-section .okcr-section__text > h3 {
	max-width: min(100%, 44rem);
}

/* Figures and tables inside a text-only section break to the canvas. */
.okc-guide-section .okcr-section__text > figure,
.okc-guide-section .okcr-section__text > .okcr-table-scroll,
.okc-guide-section .okcr-section__text > .wp-block-image,
.okc-guide-section .okcr-section__text > .wp-block-table {
	max-width: 100%;
}

/* 2. Article header -------------------------------------------------------- */

.okc-guide-section .okcr-guide > .okcr-guide__header {
	margin-bottom: var(--okc-space-c);
}

.okc-guide-section .okcr-guide__headline {
	max-width: min(100%, var(--okcr-headline));
}

/*
 * The H1 uses the editorial canvas and wraps naturally. text-wrap: balance
 * from main.css keeps the lines even; it needs real width to work with.
 */
.okc-guide-section .okcr-guide__title {
	max-width: min(100%, var(--okcr-headline));
	font-size: var(--okc-step-3);
	line-height: 1.02;
}

.okc-guide-section .okcr-guide__standfirst {
	max-width: min(100%, var(--okcr-standfirst));
	margin-block-start: clamp(1.25rem, 1rem + 1vw, 2rem);
	font-size: var(--okc-step-1);
	line-height: 1.4;
	color: var(--okc-text);
	opacity: 1;
	text-wrap: pretty;
}

.okc-guide-section .okcr-guide__verified {
	margin-block-start: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	color: var(--okc-muted);
	font-size: var(--okc-step--1);
	letter-spacing: 0.06em;
	opacity: 1;
}

/* Hero visual beside the headline. Only present when one is assigned. */
.okc-guide-section .okcr-guide__hero {
	margin: var(--okc-flow) 0 0;
}

.okc-guide-section .okcr-guide__hero img {
	display: block;
	width: 100%;
	border-radius: var(--okc-radius);
}

@media (min-width: 64rem) {
	.okc-guide-section .okcr-guide__header--hero {
		display: grid;
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		column-gap: var(--okcr-split-gap);
		align-items: center;
	}

	/* Inside the hero split the column is the constraint, not these caps. */
	.okc-guide-section .okcr-guide__header--hero .okcr-guide__headline,
	.okc-guide-section .okcr-guide__header--hero .okcr-guide__title,
	.okc-guide-section .okcr-guide__header--hero .okcr-guide__standfirst {
		max-width: 100%;
	}

	.okc-guide-section .okcr-guide__header--hero .okcr-guide__title {
		font-size: var(--okc-step-2);
	}

	.okc-guide-section .okcr-guide__header--hero .okcr-guide__hero {
		margin: 0;
	}
}

/* 3. Sections -------------------------------------------------------------- */

/*
 * Editorial rhythm: a hairline between sections and generous vertical space,
 * so the alternating composition reads as a spread rather than a stack of
 * cards. No borders on three sides, no boxes.
 */
.site-main .okc-guide-section .okcr-guide__body > .okcr-section {
	margin-block: 0;
}

.site-main .okc-guide-section .okcr-guide__body > .okcr-section + .okcr-section {
	margin-block-start: var(--okc-space-b);
	padding-block-start: var(--okc-space-b);
	border-top: 1px solid var(--okc-line);
}

/* A little more air either side of a section carrying a visual. */
.site-main .okc-guide-section .okcr-guide__body > .okcr-section--has-visual + .okcr-section,
.site-main .okc-guide-section .okcr-guide__body > .okcr-section + .okcr-section--has-visual {
	margin-block-start: var(--okc-space-a);
	padding-block-start: var(--okc-space-a);
}

.site-main .okc-guide-section .okcr-section__text > * {
	margin-block: 0;
}

.site-main .okc-guide-section .okcr-section__text > * + * {
	margin-block-start: var(--okc-flow);
}

.site-main .okc-guide-section .okcr-section__text > h2 + * {
	margin-block-start: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
}

.okc-guide-section .okcr-section__text h2 {
	font-size: var(--okc-step-2);
	line-height: 1.1;
}

.okc-guide-section .okcr-section__text h3 {
	font-size: var(--okc-step-1);
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.okc-guide-section .okcr-section__text strong {
	color: var(--okc-white);
	font-weight: 700;
}

/* 4. Section visuals -------------------------------------------------------
 *
 * VISUAL PRODUCTION CONTRACT
 * --------------------------
 * The visual type set on a section decides whether the image may be cropped.
 * This is the whole rule, and it is enforced here rather than per-image:
 *
 *   photo    Editorial photography. No important text baked into the image.
 *            Cropping is intentional: 4/3 beside text, 16/9 as hero or
 *            full-width. object-fit: cover.
 *
 *   diagram  Informational. May carry labels.
 *   map      Informational. May carry labels.
 *   data     Informational. May carry labels.
 *            NEVER cropped. Natural aspect ratio, natural height,
 *            object-fit: contain. An informational graphic is allowed to be
 *            taller than the text beside it; it is never trimmed to match.
 *
 * If a graphic is being cut off, it is tagged photo. Change its type in
 * Section Visuals — do not work around it here.
 */

.okc-guide-section .okcr-section__visual {
	margin: var(--okc-flow) 0 0;
}

.okc-guide-section .okcr-section__visual img {
	display: block;
	width: 100%;
	border-radius: var(--okc-radius);
}

/* Photography is cropped to a settled shape so sections stay balanced. */
.okc-guide-section .okcr-section__visual[data-visual-type="photo"] img,
.okc-guide-section .okcr-guide__hero[data-visual-type="photo"] img {
	aspect-ratio: 4 / 3;
	height: 100%;
	object-fit: cover;
}

/*
 * Diagrams, maps and data visuals are never cropped. Written as explicit
 * selectors rather than a grouped :is(), so these always out-specify the
 * photo rule above no matter what order the stylesheets load in.
 */
.okc-guide-section .okcr-guide .okcr-section__visual[data-visual-type="diagram"] img,
.okc-guide-section .okcr-guide .okcr-section__visual[data-visual-type="map"] img,
.okc-guide-section .okcr-guide .okcr-section__visual[data-visual-type="data"] img,
.okc-guide-section .okcr-guide .okcr-guide__hero[data-visual-type="diagram"] img,
.okc-guide-section .okcr-guide .okcr-guide__hero[data-visual-type="map"] img,
.okc-guide-section .okcr-guide .okcr-guide__hero[data-visual-type="data"] img {
	aspect-ratio: auto;
	height: auto;
	max-height: none;
	object-fit: contain;
}

.okc-guide-section .okcr-section__visual figcaption {
	max-width: min(100%, var(--okcr-measure));
	margin-block-start: 0.75rem;
	color: var(--okc-muted);
	font-size: var(--okc-step--1);
	opacity: 1;
}

/*
 * The alternating split. Below this width both columns stop being useful, so
 * the section stacks: heading, text, then visual — which is also the source
 * order, so the reading order never changes.
 */
@media (min-width: 64rem) {
	.okc-guide-section .okcr-section--has-visual:not(.okcr-section--full) {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--okcr-split-gap);
		align-items: center;
	}

	/* Inside the split the column is the measure. */
	.okc-guide-section .okcr-section--has-visual:not(.okcr-section--full) .okcr-section__text > * {
		max-width: 100%;
	}

	.okc-guide-section .okcr-section--has-visual:not(.okcr-section--full) .okcr-section__visual {
		margin: 0;
	}

	/*
	 * Visual on the left: presentation only, source order is unchanged.
	 * The column widths reverse with it, so the visual always takes the
	 * larger 7fr column. Without this the image lands in the 5fr column and
	 * reads as a thumbnail beside a wall of text.
	 */
	.okc-guide-section .okcr-section--has-visual.okcr-section--left:not(.okcr-section--full) {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.okc-guide-section .okcr-section--left .okcr-section__text {
		order: 2;
	}

	.okc-guide-section .okcr-section--left .okcr-section__visual {
		order: 1;
	}

	/*
	 * An informational graphic sets its own height. Aligning the pair to the
	 * top keeps the heading level with the top of the map or diagram instead
	 * of floating it against a much taller image.
	 */
	.okc-guide-section .okcr-section--has-visual:has(.okcr-section__visual[data-visual-type="diagram"]),
	.okc-guide-section .okcr-section--has-visual:has(.okcr-section__visual[data-visual-type="map"]),
	.okc-guide-section .okcr-section--has-visual:has(.okcr-section__visual[data-visual-type="data"]) {
		align-items: start;
	}
}

/* 4b. Text-only and introductory sections ----------------------------------
 *
 * A section with no side visual is not a split section missing its right
 * column — it gets its own composition. The text block is centred in the
 * canvas, the heading breaks right out of the copy measure, and figures and
 * tables still reach the full canvas. It reads as an editorial interlude
 * between visual spreads rather than an image that failed to load.
 *
 * The selector covers three states, all of which have no side visual:
 *   - the untitled introduction before the first H2
 *   - sections with no visual assigned
 *   - full-width visual sections, whose text sits above the graphic
 *
 * Desktop and tablet only. On phones these are ordinary single-column
 * reading sections, handled in section 11.
 */
@media (min-width: 64rem) {
	.okc-guide-section .okcr-section:not(.okcr-section--left):not(.okcr-section--right) .okcr-section__text {
		display: grid;
		grid-template-columns:
			[canvas-start] minmax(0, 1fr)
			[text-start] min(100%, var(--okcr-prose-measure)) [text-end]
			minmax(0, 1fr) [canvas-end];
	}

	/* Body copy sits in the centred measure column. */
	.okc-guide-section .okcr-section:not(.okcr-section--left):not(.okcr-section--right) .okcr-section__text > * {
		grid-column: text-start / text-end;
		max-width: 100%;
	}

	/* The heading shares the copy's left edge and runs wider to the right. */
	.okc-guide-section .okcr-section:not(.okcr-section--left):not(.okcr-section--right) .okcr-section__text > h2 {
		grid-column: text-start / canvas-end;
		max-width: min(100%, var(--okcr-prose-heading));
	}

	.okc-guide-section .okcr-section:not(.okcr-section--left):not(.okcr-section--right) .okcr-section__text > h3 {
		grid-column: text-start / canvas-end;
		max-width: min(100%, 44rem);
	}

	/* Figures and tables break out of the centred block to the full canvas. */
	.okc-guide-section .okcr-section:not(.okcr-section--left):not(.okcr-section--right) .okcr-section__text > figure,
	.okc-guide-section .okcr-section:not(.okcr-section--left):not(.okcr-section--right) .okcr-section__text > .okcr-table-scroll,
	.okc-guide-section .okcr-section:not(.okcr-section--left):not(.okcr-section--right) .okcr-section__text > .wp-block-image,
	.okc-guide-section .okcr-section:not(.okcr-section--left):not(.okcr-section--right) .okcr-section__text > .wp-block-table {
		grid-column: canvas-start / canvas-end;
		max-width: 100%;
	}

	/*
	 * The introduction before the first heading carries a slightly wider
	 * measure, so the transition from the contents list into the article
	 * reads as a deliberate opening rather than a leftover content column.
	 */
	.okc-guide-section .okcr-section--intro:not(.okcr-section--left):not(.okcr-section--right) .okcr-section__text {
		grid-template-columns:
			[canvas-start] minmax(0, 1fr)
			[text-start] min(100%, var(--okcr-intro-measure)) [text-end]
			minmax(0, 1fr) [canvas-end];
	}
}

/* Full-width visual: text keeps its measure, the visual takes the canvas. */
/*
 * A full-width visual takes the whole editorial canvas beneath its text.
 * This is the right treatment for a complex map, decision tree or data
 * graphic, where half a canvas would make the labels too small to read.
 */
.okc-guide-section .okcr-section--full .okcr-section__visual {
	max-width: 100%;
	margin-block-start: var(--okc-space-c);
}

.okc-guide-section .okcr-section--full .okcr-section__visual[data-visual-type="photo"] img {
	aspect-ratio: 16 / 9;
}

/* 5. Table of contents ----------------------------------------------------- */

/*
 * A secondary navigation component, not a stack of underlined links. On wide
 * screens the label sits in a left column and the list flows in columns
 * beside it. It stacks on mobile.
 */
.okc-guide-section .okcr-toc {
	border-block: 1px solid var(--okc-line);
	padding-block: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	margin-block: 0 var(--okc-space-b);
}

.okc-guide-section .okcr-toc__title {
	margin: 0 0 1rem;
	color: var(--okc-muted);
	font-size: var(--okc-step--1);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 1;
}

.okc-guide-section .okcr-toc__list {
	counter-reset: okcr-toc;
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.okc-guide-section .okcr-toc__list > li {
	counter-increment: okcr-toc;
	break-inside: avoid;
	margin: 0;
	padding-block: 0.4rem;
}

.okc-guide-section .okcr-toc__list a {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	align-items: baseline;
	color: var(--okc-text);
	font-size: var(--okc-step--1);
	line-height: 1.35;
	text-decoration: none;
}

.okc-guide-section .okcr-toc__list a::before {
	content: counter(okcr-toc, decimal-leading-zero);
	color: var(--okc-muted);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.okc-guide-section .okcr-toc__list a:hover,
.okc-guide-section .okcr-toc__list a[aria-current="true"],
.okc-guide-section .okcr-toc__list a:hover::before,
.okc-guide-section .okcr-toc__list a[aria-current="true"]::before {
	color: var(--okc-coral);
}

@media (min-width: 56rem) {
	.okc-guide-section .okcr-toc {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
		column-gap: clamp(2rem, 4vw, 4rem);
		align-items: start;
	}

	.okc-guide-section .okcr-toc__title {
		margin: 0;
	}

	/* Multi-column so reading order runs down each column, then across. */
	.okc-guide-section .okcr-toc__list {
		columns: 2;
		column-gap: clamp(2rem, 4vw, 4rem);
	}
}

@media (min-width: 76rem) {
	.okc-guide-section .okcr-toc__list {
		columns: 3;
	}
}

/* 6. Pending internal links ------------------------------------------------ */

/*
 * A destination that is not published yet renders as plain prose. It must not
 * look like a link or invite a click.
 */
.okc-guide-section .okcr-link--pending {
	color: inherit;
	text-decoration: none;
	cursor: inherit;
}

/* 7. Tables ---------------------------------------------------------------- */

.okc-guide-section .okcr-table-scroll {
	margin-block: var(--okc-space-c);
}

.okc-guide-section .okcr-section__text table {
	font-size: var(--okc-step--1);
}

.okc-guide-section .okcr-section__text :is(th, td) {
	border-color: var(--okc-line);
	padding: 0.85em 1em;
}

.okc-guide-section .okcr-section__text thead th {
	border-bottom-color: var(--okc-line-strong);
	color: var(--okc-white);
	white-space: nowrap;
}

/* 8. Callout --------------------------------------------------------------- */

.okc-guide-section .okcr-guide > .okcr-callout {
	max-width: min(100%, var(--okcr-section));
	border-left: 3px solid var(--okc-coral);
	padding: 0 0 0 clamp(1.25rem, 1rem + 1vw, 2rem);
	margin-block: var(--okc-space-c);
}

.okc-guide-section .okcr-callout__label {
	margin: 0 0 0.5rem;
	color: var(--okc-muted);
	font-size: var(--okc-step--1);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 1;
}

/* 9. Service connection ---------------------------------------------------- */

.okc-guide-section .okcr-guide__cta {
	padding-top: var(--okc-space-c);
	margin-block: var(--okc-space-b) 0;
	border-top: 1px solid var(--okc-line);
}

/* 10. Related guides and sources ------------------------------------------- */

.okc-guide-section :is(.okcr-related, .okcr-sources) {
	border-top: 1px solid var(--okc-line);
	padding-top: var(--okc-space-c);
	margin-top: var(--okc-space-c);
}

/* The CTA already draws the rule above it. */
.okc-guide-section .okcr-guide__cta + .okcr-related {
	border-top: 0;
	padding-top: 0;
}

.okc-guide-section :is(.okcr-related__title, .okcr-sources__title) {
	margin: 0 0 var(--okc-flow);
	color: var(--okc-muted);
	font-size: var(--okc-step--1);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 1;
}

.okc-guide-section .okcr-related__list {
	display: grid;
	gap: 0;
}

.okc-guide-section .okcr-related__list > li {
	padding-block: 1.15rem 1.35rem;
	border-top: 1px solid var(--okc-line);
}

.okc-guide-section .okcr-related__list a {
	display: block;
	text-decoration: none;
}

.okc-guide-section .okcr-related__name {
	font-size: var(--okc-step-1);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.okc-guide-section .okcr-related__list a:hover .okcr-related__name {
	color: var(--okc-coral);
}

.okc-guide-section .okcr-related__desc {
	max-width: 52ch;
	margin-top: 0.35rem;
	color: var(--okc-muted);
	opacity: 1;
}

.okc-guide-section .okcr-sources__list {
	display: block;
	margin: 0;
	padding: 0;
	font-size: var(--okc-step--1);
}

.okc-guide-section .okcr-sources__list > li {
	break-inside: avoid;
	margin: 0;
	padding-block: 0.45rem;
}

.okc-guide-section .okcr-sources__detail {
	color: var(--okc-muted);
	opacity: 1;
}

@media (min-width: 56rem) {
	.okc-guide-section .okcr-related__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(2rem, 4vw, 4rem);
	}

	.okc-guide-section .okcr-related__list > li:nth-child(2) {
		border-top: 1px solid var(--okc-line);
	}

	.okc-guide-section .okcr-sources__list {
		columns: 2;
		column-gap: clamp(2rem, 4vw, 4rem);
	}
}

@media (min-width: 76rem) {
	.okc-guide-section .okcr-guide--hub .okcr-related__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.okc-guide-section .okcr-guide--hub .okcr-related__list > li:nth-child(3) {
		border-top: 1px solid var(--okc-line);
	}
}

/* 11. Narrow screens ------------------------------------------------------- */

/*
 * Single column throughout. Every width above is min(100%, …), so the only
 * job here is to stop the desktop grids producing cramped columns. Section
 * source order is heading, text, visual, and it is never reordered here.
 */
@media (max-width: 55.99rem) {
	.okc-guide-section .okcr-toc__list,
	.okc-guide-section .okcr-sources__list {
		columns: auto;
	}

	.okc-guide-section .okcr-related__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.okc-guide-section .okcr-guide__title {
		font-size: var(--okc-step-2);
	}
}

/*
 * Below the split breakpoint every section is a plain single column. The
 * centred text composition is desktop and tablet presentation only, and the
 * source order — heading, text, visual — is never altered.
 */
@media (max-width: 63.99rem) {
	.okc-guide-section .okcr-section__text {
		display: block;
	}
}