/*!
 * Kat's Gone Global — design system
 * Version 1.2.3
 *
 * ONE stylesheet. Every KGG component is styled here and nowhere else.
 * Post content carries class names only. If you are about to write a
 * style="" attribute into a post, stop: the class is missing from this file.
 *
 * Contrast: every text/background pair below passes WCAG 2.1 AA for its
 * size. Values marked (fixed) were corrected from the mockups, which failed.
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
	/* Surfaces */
	--kgg-paper: #FBF9F4;
	--kgg-surface: #FFFFFF;
	--kgg-cream: #F3F1E9;

	/* Ink */
	--kgg-ink: #1F2A22;
	--kgg-ink-muted: #55635A;
	--kgg-ink-faint: #75695A; /* (fixed) mockups used #8A8071 — 3.69:1, failed AA */

	/* Green — primary */
	--kgg-green: #1D5C34;
	--kgg-green-deep: #237030;
	--kgg-green-bright: #3FA34D; /* decorative / large only — 3.04:1 */
	--kgg-green-tint: #EAF3EB;
	--kgg-sage-tint: #E3EEE4;

	/* Pink — signature accent */
	--kgg-pink: #E85D8A;      /* decorative / large only — 3.14:1 */
	--kgg-pink-text: #C43D6E; /* readable on paper — 4.71:1 */
	--kgg-pink-deep: #B63866; /* (fixed) readable on pink tint — 4.65:1 */
	--kgg-pink-tint: #FBE4EC;

	/* Amber — secondary accent, the verdict colour */
	--kgg-amber: #F5A623;
	--kgg-amber-text: #9B610B; /* (fixed) mockups used #A96A0D — 4.00:1, failed AA */
	--kgg-amber-tint: #FBF3E1;

	/* Rules */
	--kgg-rule: #E4E1D6;
	--kgg-rule-strong: #D8D6CC;

	/* Type */
	--kgg-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--kgg-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--kgg-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Space — 4px base */
	--kgg-s1: 4px;
	--kgg-s2: 8px;
	--kgg-s3: 12px;
	--kgg-s4: 16px;
	--kgg-s5: 20px;
	--kgg-s6: 26px;
	--kgg-s7: 32px;
	--kgg-s8: 44px;
	--kgg-s9: 56px;

	/* Radius */
	--kgg-r-sm: 4px;
	--kgg-r-md: 10px;
	--kgg-r-lg: 14px;
	--kgg-r-pill: 99px;

	/* Measure — the site's own content width, fluid below it.

	   Everything sits on one width: hero, title, body, tables, components.
	   `min(100%, …)` means it fills the screen on a phone and stops at the
	   theme's content size on a desktop, so there is one left edge down the
	   whole page and nothing looks indented under the hero.

	   The honest trade, recorded once so nobody has to rediscover it: 1200px
	   of body copy is a long line. The type scale below compensates by going
	   up on wide screens, which brings the character count back down — but it
	   is still longer than a book column. That is a deliberate choice in
	   favour of the page not looking narrow on a desktop.

	   To go back to a narrow reading column, set --kgg-measure to
	   min(100%, 53rem) — 848px — and nothing else has to change.

	   Both tiers are the same value now. The second token is kept because the
	   timeline and the map read from it, and separating them again later
	   should not mean touching those components. */
	--kgg-measure: min(100%, var(--wp--style--global--content-size, 75rem));
	--kgg-measure-wide: min(100%, var(--wp--style--global--content-size, 75rem));
}

/* ==========================================================================
   3. UTILITY TEXT
   ========================================================================== */

/* The mono eyebrow. Used above headings, inside every callout. */
.kgg-eyebrow {
	font-family: var(--kgg-font-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kgg-ink-muted);
	margin: 0 0 var(--kgg-s1);
}

.kgg-kicker {
	font-family: var(--kgg-font-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--kgg-green);
	margin: 0 0 var(--kgg-s3);
}

/* Stop meta: "Stop 2 · 2 hrs · timed entry" */
.kgg-meta {
	font-family: var(--kgg-font-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--kgg-ink-muted);
	margin: 0 0 var(--kgg-s5);
}

.kgg-lede {
	font-size: 19px;
	line-height: 1.6;
	color: var(--kgg-ink-muted);
}

.kgg-byline {
	font-size: 15px;
	color: var(--kgg-ink-muted);
	padding-bottom: var(--kgg-s6);
	border-bottom: 1px solid var(--kgg-rule);
	margin: 0 0 var(--kgg-s7);
}

.kgg-aside {
	font-size: 15px;
	line-height: 1.6;
	color: var(--kgg-ink-muted);
}

/* ==========================================================================
   4. PILL ROW
   ========================================================================== */

/* Doubled class for the same reason as the table: if these Groups ever carry
   a flex layout attribute, core emits a .wp-container-* rule at (0,1,0) with
   its own gap and alignment, printed after this file. The patterns use the
   default layout so it should not arise — this is the belt to that braces. */
.wp-block-group.kgg-pills,
.kgg-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kgg-s2);
	margin: 0 0 var(--kgg-s6);
}

.kgg-pills p,
.kgg-pill {
	font-family: var(--kgg-font-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 7px 13px;
	border-radius: var(--kgg-r-pill);
	margin: 0;
	background: var(--kgg-surface);
	border: 1px solid var(--kgg-rule);
	color: var(--kgg-ink-muted);
}

/* Pill variants — set on the paragraph, not on the row. */
.kgg-pills .kgg-pill--alert,
.kgg-pill--alert {
	background: var(--kgg-pink-tint);
	border-color: transparent;
	color: var(--kgg-pink-deep);
}

.kgg-pills .kgg-pill--go,
.kgg-pill--go {
	background: var(--kgg-sage-tint);
	border-color: transparent;
	color: var(--kgg-green);
}

/* ==========================================================================
   5. DISCLOSURE
   Must sit above the first affiliate link. ASA requires this to be
   unambiguous — never "may contain affiliate links".
   ========================================================================== */

.kgg-disclosure {
	border-left: 3px solid var(--kgg-rule-strong);
	padding: var(--kgg-s1) 0 var(--kgg-s1) var(--kgg-s5);
	margin: 0 0 var(--kgg-s7);
}

.kgg-disclosure p:last-child {
	font-size: 15px;
	line-height: 1.6;
	color: var(--kgg-ink-muted);
	margin: 0;
}

/* ==========================================================================
   6. FACTS — two shapes, same job
   ========================================================================== */

/* 6a. Two-column table (Money Guide). Core Table block + this class.
   The class lands on the <figure>, so the table itself is addressed
   one level down. */
.kgg-facts {
	margin: 0 0 var(--kgg-s8);
}

/* table-layout: fixed is what makes the label-column width below stick. Under
   the default auto layout the browser sizes columns from their content, so a
   long value sentence drags the split to 32/68 no matter what width the label
   cell asks for. Fixed honours the declared width. Safe here because every
   value is prose that can wrap. */
.kgg-facts table,
table.kgg-facts {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	border: 0;
}

/* Core's table stylesheet is printed lazily, during the_content, so it lands
   AFTER this file. `.wp-block-table td` is (0,1,1) — identical to `.kgg-facts
   td` — and later wins, which would give every cell a 1px box border. The
   doubled class takes the specificity to (0,2,1). */
.wp-block-table.kgg-facts td,
.wp-block-table.kgg-facts th {
	border: 0;
	border-top: 1px solid var(--kgg-rule);
	padding: var(--kgg-s4) var(--kgg-s4) var(--kgg-s4) 0;
}

.wp-block-table.kgg-facts tr:last-child td,
.wp-block-table.kgg-facts tr:last-child th {
	border-bottom: 1px solid var(--kgg-rule);
}

.wp-block-table.kgg-facts td:last-child,
.wp-block-table.kgg-facts th:last-child {
	padding-right: 0;
}

.kgg-facts td,
.kgg-facts th {
	border: 0;
	border-top: 1px solid var(--kgg-rule);
	padding: var(--kgg-s4) var(--kgg-s4) var(--kgg-s4) 0;
	vertical-align: top;
	text-align: left;
	font-size: 16px;
	line-height: 1.6;
}

.kgg-facts tr:last-child td,
.kgg-facts tr:last-child th {
	border-bottom: 1px solid var(--kgg-rule);
}

.kgg-facts td:first-child,
.kgg-facts th:first-child {
	/* A flat 32% was fine at a 848px measure. At 1200px it hands the word
	   "WHEN" a 384px column and the gap before the value reads as a fault.
	   Fixed at 15rem instead, with the percentage restored below 600px where
	   a 240px label column would starve the value. min() is not used here:
	   a percentage inside min() is unreliable as a table-cell width. */
	width: 15rem;
	font-family: var(--kgg-font-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kgg-green);
}

@media (max-width: 600px) {
	.kgg-facts td:first-child,
	.kgg-facts th:first-child {
		width: 32%;
	}
}

.kgg-facts td:last-child,
.kgg-facts th:last-child {
	padding-right: 0;
}

/* 6b. Four-cell grid (Day Guide). Core Group + four nested Groups. */
.kgg-factgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	background: var(--kgg-rule);
	border: 1px solid var(--kgg-rule);
	border-radius: var(--kgg-r-md);
	overflow: hidden;
	margin: var(--kgg-s7) 0 var(--kgg-s2);
	padding: 0;
}

.kgg-factgrid > .wp-block-group,
.kgg-factgrid > div {
	background: var(--kgg-surface);
	padding: var(--kgg-s4) 18px;
	margin: 0;
}

.kgg-factgrid p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.kgg-factgrid .kgg-eyebrow {
	font-size: 10px;
	letter-spacing: 0.08em;
	margin-bottom: 5px;
}

/* ==========================================================================
   7. VERDICT — Worth It / Not Worth It
   The brand's closing move. Amber = worth it, grey = not.
   ========================================================================== */

.kgg-verdict {
	border-left: 3px solid var(--kgg-amber);
	background: var(--kgg-amber-tint);
	border-radius: 0 var(--kgg-r-sm) var(--kgg-r-sm) 0;
	padding: var(--kgg-s4) var(--kgg-s5);
	margin: 0 0 var(--kgg-s7);
}

.kgg-verdict .kgg-eyebrow {
	color: var(--kgg-amber-text);
}

.kgg-verdict p:last-child {
	font-size: 16px;
	line-height: 1.6;
	color: var(--kgg-ink);
	margin: 0;
}

.kgg-verdict--no {
	border-left-color: var(--kgg-rule-strong);
	background: var(--kgg-paper);
}

.kgg-verdict--no .kgg-eyebrow {
	color: var(--kgg-ink-muted);
}

/* A pair sitting together — worth it directly above not worth it. */
.kgg-verdict-pair {
	display: grid;
	gap: var(--kgg-s3);
	margin: 0 0 var(--kgg-s7);
	padding: 0;
}

.kgg-verdict-pair .kgg-verdict {
	margin: 0;
}

/* ==========================================================================
   8. PRICE CHECK
   Dated, receipted numbers. The date is not optional.
   ========================================================================== */

.kgg-pricecheck {
	background: var(--kgg-cream);
	border: 1px solid var(--kgg-rule);
	border-radius: var(--kgg-r-sm);
	padding: var(--kgg-s4) var(--kgg-s5);
	margin: 0 0 var(--kgg-s4);
}

.kgg-pricecheck p:last-child {
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

.kgg-pricecheck strong {
	font-weight: 600;
}

/* ==========================================================================
   9. AFFILIATE CTA
   Green tint. One clear action. Never a wall of links.
   ========================================================================== */

.kgg-affiliate {
	background: var(--kgg-green-tint);
	border-radius: var(--kgg-r-sm);
	padding: var(--kgg-s6) 28px;
	margin: 0 0 var(--kgg-s8);
}

.kgg-affiliate .kgg-eyebrow {
	color: var(--kgg-green-deep);
	margin-bottom: var(--kgg-s2);
}

.kgg-affiliate p {
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 var(--kgg-s4);
}

.kgg-affiliate .wp-block-buttons {
	margin: 0;
}

/* Inline booking link — the in-flow version, used mid-section. */
.kgg-booking {
	font-size: 17px;
	line-height: 1.7;
	margin: 0 0 var(--kgg-s5);
}

.kgg-booking a {
	font-weight: 500;
}

/* ==========================================================================
   10. BUTTON
   ========================================================================== */

.wp-block-button.kgg-btn .wp-block-button__link,
.kgg-btn > a {
	display: inline-block;
	background: var(--kgg-green);
	color: var(--kgg-surface);
	font-family: var(--kgg-font-body);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.2;
	padding: 12px 23px;
	border: 0;
	border-radius: var(--kgg-r-pill);
	text-decoration: none;
}

.wp-block-button.kgg-btn .wp-block-button__link:hover,
.kgg-btn > a:hover {
	background: var(--kgg-green-deep);
	color: var(--kgg-surface);
}

.wp-block-button.kgg-btn .wp-block-button__link:focus-visible,
.kgg-btn > a:focus-visible {
	outline: 2px solid var(--kgg-pink-text);
	outline-offset: 2px;
}

/* ==========================================================================
   11. TIMELINE (Day Guide) — a Custom HTML block
   Authored as HTML rather than nested blocks: the connector rail, the marker
   states and the leg rows are the kind of structure core blocks can only
   approximate, and one HTML block is also one thing for an agent to write
   reliably rather than forty nested ones.
   Mediavine sees one <div>: one insertion point, and no ad splits the route.
   Markup: see docs/kgg-signature-components.md
   ========================================================================== */

.kgg-timeline {
	background: var(--kgg-surface);
	border: 1px solid var(--kgg-rule);
	border-radius: var(--kgg-r-lg);
	padding: 28px var(--kgg-s6) var(--kgg-s6);
	margin: 0 0 var(--kgg-s9);
}

.kgg-timeline__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--kgg-s4);
	flex-wrap: wrap;
	margin: 0 0 var(--kgg-s6);
	padding: 0;
}

.kgg-timeline__head p {
	margin: 0;
}

.kgg-timeline__head .kgg-eyebrow:first-child {
	color: var(--kgg-green);
}

/* A real <ol>, because the stops are a genuine sequence. `list-style: none`
   makes WebKit drop the list semantics, so the markup carries role="list" to
   put them back — without it VoiceOver announces no ordering at all, since the
   visible numbers are aria-hidden. */
.kgg-timeline__stops {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* A stop. Three columns — time, marker rail, content — and two rows, the
   stop itself and the leg to the next one. */
.kgg-stop {
	display: grid;
	grid-template-columns: 58px 42px 1fr;
	grid-template-rows: auto auto;
	column-gap: var(--kgg-s3);
	position: relative;
	padding: 0;
	margin: 0;
}

/* The connector rail, drawn once per stop rather than assembled from parts.
   58px column + 12px gap + half of the 42px marker column = 91px. */
.kgg-stop::before {
	content: "";
	position: absolute;
	left: 90px;
	top: 30px;
	bottom: 0;
	width: 2px;
	background: var(--kgg-rule);
}

.kgg-stop:last-child::before {
	display: none;
}

.kgg-stop__time {
	grid-column: 1;
	grid-row: 1;
	font-family: var(--kgg-font-mono);
	font-weight: 500;
	font-size: 14px;
	color: var(--kgg-ink);
	padding-top: 5px;
	margin: 0;
}

/* The marker. Ink on the bright green, not white: white is 3.20:1 and fails
   AA, ink on the same green is 4.64:1 and keeps the brand colour. */
.kgg-stop__marker {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--kgg-green-bright);
	color: var(--kgg-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--kgg-font-mono);
	font-weight: 500;
	font-size: 12px;
	margin: 0;
}

/* Marker states. Colour is never the only signal — every one of these is
   also carried by the badge text beside the stop title. */
.kgg-stop--booked .kgg-stop__marker {
	background: var(--kgg-green);
	color: var(--kgg-surface);
	outline: 2px dashed var(--kgg-pink);
	outline-offset: 3px;
}

.kgg-stop--terminus .kgg-stop__marker {
	background: var(--kgg-ink-muted);
	color: var(--kgg-surface);
	border-radius: 6px;
}

.kgg-stop__body {
	grid-column: 3;
	grid-row: 1;
	padding: 0 0 var(--kgg-s1);
	margin: 0;
}

.kgg-stop__title {
	font-family: var(--kgg-font-display);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.25;
	color: var(--kgg-ink);
	margin: 0 0 3px;
}

.kgg-stop__title a {
	color: var(--kgg-ink);
	text-decoration: none;
}

.kgg-stop__title a:hover {
	color: var(--kgg-pink-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kgg-stop__body p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--kgg-ink-muted);
	margin: 0;
}

/* Badge sits inline after the stop title. */
.kgg-badge {
	display: inline-block;
	font-family: var(--kgg-font-mono);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kgg-ink-muted);
	background: var(--kgg-cream);
	border-radius: var(--kgg-r-sm);
	padding: 3px 7px;
	margin-left: var(--kgg-s2);
	vertical-align: 2px;
}

.kgg-badge--book {
	color: var(--kgg-pink-deep);
	background: var(--kgg-pink-tint);
}

/* The leg between two stops: "↓ 40 min train · every 20 min" */
.kgg-leg {
	grid-column: 3;
	grid-row: 2;
	font-family: var(--kgg-font-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--kgg-ink-faint);
	padding: var(--kgg-s2) 0 var(--kgg-s3);
	margin: 0;
}

.kgg-timeline__key {
	margin: var(--kgg-s6) 0 0;
	padding-top: var(--kgg-s4);
	border-top: 1px solid var(--kgg-rule);
	font-family: var(--kgg-font-mono);
	font-size: 11px;
	line-height: 1.6;
	color: var(--kgg-ink-faint);
}

@media (max-width: 560px) {
	.kgg-stop {
		grid-template-columns: 48px 32px 1fr;
	}
	.kgg-stop::before {
		left: 75px;
	}
	.kgg-timeline {
		padding: var(--kgg-s5) var(--kgg-s4) var(--kgg-s4);
	}
}

/* ==========================================================================
   11b. ROUTE MAP — inline SVG in a Custom HTML block
   Not an uploaded image: WordPress blocks SVG uploads by default, and inline
   SVG inherits the brand fonts and tokens instead of baking them in.
   The wrapping <div> is what Mediavine counts.
   Generated by tools/kgg-map.py — see docs/kgg-signature-components.md
   ========================================================================== */

.kgg-map {
	margin: 0 0 var(--kgg-s8);
}

.kgg-map svg {
	display: block;
	width: 100%;
	height: auto;
	background: var(--kgg-surface);
	border: 1px solid var(--kgg-rule);
	border-radius: var(--kgg-r-md);
}

.kgg-map__eyebrow {
	font-family: var(--kgg-font-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.08em;
}

.kgg-map__num {
	font-family: var(--kgg-font-mono);
	font-weight: 500;
	font-size: 12px;
}

.kgg-map__label {
	font-family: var(--kgg-font-body);
	font-weight: 600;
	font-size: 13px;
}

.kgg-map__note,
.kgg-map__key {
	font-family: var(--kgg-font-mono);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.05em;
}

.kgg-map__leg {
	font-family: var(--kgg-font-mono);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.04em;
}

.kgg-map .kgg-caption {
	font-family: var(--kgg-font-mono);
	font-size: 11px;
	line-height: 1.5;
	color: var(--kgg-ink-faint);
	font-style: normal;
	text-align: left;
	margin: var(--kgg-s2) 0 0;
}

/* ==========================================================================
   12. RANKED LIST (Hit List)
   A real <ol>. Screen readers announce "item 1 of 5" without help,
   which is why the visible number is aria-hidden in the pattern.
   ========================================================================== */

.kgg-ranked {
	/* A real ordered list with a styled ::marker, not list-style:none plus a
	   fake number. Keeps the list semantics screen readers rely on, and
	   reordering the picks renumbers them automatically. */
	/* `inside` keeps the marker within the item box, so the hairline rules
	   run full width and nothing is clipped. Items here are one line each,
	   so the lack of a hanging indent costs nothing. */
	list-style-position: inside;
	padding-left: 0;
	margin: 0 0 var(--kgg-s9);
}

.kgg-ranked > li {
	padding: var(--kgg-s6) 0;
	border-top: 1px solid var(--kgg-rule);
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
}

.kgg-ranked > li:last-child {
	border-bottom: 1px solid var(--kgg-rule);
}

.kgg-ranked > li::marker {
	content: counter(list-item) ".\00a0\00a0";
	color: var(--kgg-pink-text);
	font-family: var(--kgg-font-display);
	font-weight: 600;
	font-size: 26px;
}

/* ==========================================================================
   13. PIVOT — the closing block
   ========================================================================== */

.kgg-pivot {
	background: var(--kgg-sage-tint);
	border-radius: var(--kgg-r-lg);
	padding: 38px 36px;
	margin: var(--kgg-s9) 0 var(--kgg-s8);
}

.kgg-pivot .kgg-eyebrow {
	color: var(--kgg-green-deep);
	font-size: 12px;
	letter-spacing: 0.08em;
	margin-bottom: var(--kgg-s2);
}

.kgg-pivot h2,
.kgg-pivot h3 {
	font-family: var(--kgg-font-display);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.15;
	color: var(--kgg-green);
	margin: 0 0 var(--kgg-s4);
}

.kgg-pivot h2 em,
.kgg-pivot h3 em {
	font-weight: 500;
	font-style: italic;
}

.kgg-pivot p {
	font-size: 17px;
	line-height: 1.7;
	margin: 0 0 var(--kgg-s5);
}

/* ==========================================================================
   14. FAQ
   Core Details blocks, wrapped in one Group so Mediavine has a countable
   element. <details> on its own is not a p/div/ul/ol and is not counted.
   ========================================================================== */

.kgg-faq {
	border-top: 1px solid var(--kgg-rule);
	margin: 0 0 var(--kgg-s8);
	padding: 0;
}

.kgg-faq .wp-block-details,
.kgg-faq details {
	border-bottom: 1px solid var(--kgg-rule);
	padding: var(--kgg-s4) 0;
	margin: 0;
}

.kgg-faq summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--kgg-font-display);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.35;
	color: var(--kgg-ink);
}

.kgg-faq summary::-webkit-details-marker {
	display: none;
}

.kgg-faq summary::after {
	content: "+";
	float: right;
	font-family: var(--kgg-font-mono);
	color: var(--kgg-green);
	margin-left: var(--kgg-s3);
}

.kgg-faq details[open] summary::after {
	content: "–";
}

.kgg-faq summary:focus-visible {
	outline: 2px solid var(--kgg-pink-text);
	outline-offset: 3px;
}

.kgg-faq p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--kgg-ink);
	margin: var(--kgg-s3) 0 0;
}

/* ==========================================================================
   15. IMAGES
   ========================================================================== */

.kgg-figure img,
.entry-content .kgg-figure img {
	border-radius: var(--kgg-r-md);
	border: 1px solid var(--kgg-rule);
	width: 100%;
	height: auto;
	display: block;
	background: var(--kgg-cream);
}

.kgg-figure figcaption,
.kgg-caption {
	font-size: 14px;
	line-height: 1.5;
	color: var(--kgg-ink-muted);
	font-style: italic;
	text-align: center;
	margin: var(--kgg-s2) 0 var(--kgg-s7);
}

/* ==========================================================================
   16. RELATED
   ========================================================================== */

.kgg-related {
	border-top: 1px solid var(--kgg-rule);
	padding-top: var(--kgg-s5);
	margin: var(--kgg-s8) 0 0;
}

.kgg-related p {
	margin: 0 0 var(--kgg-s2);
	font-size: 15px;
}

/* ==========================================================================
   17. KAT NOTE — never ships
   Loud on purpose. The publish check in the plugin looks for this class.
   ========================================================================== */

.kgg-note {
	background: var(--kgg-surface);
	border: 2px dashed var(--kgg-pink);
	border-radius: var(--kgg-r-sm);
	padding: var(--kgg-s3) 18px;
	margin: 0 0 var(--kgg-s4);
}

.kgg-note p {
	font-family: var(--kgg-font-mono);
	font-size: 12px;
	line-height: 1.6;
	color: var(--kgg-pink-deep);
	margin: 0;
}

.kgg-note::before {
	content: "DRAFT NOTE — DELETE BEFORE PUBLISHING";
	display: block;
	font-family: var(--kgg-font-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--kgg-pink-deep);
	margin-bottom: var(--kgg-s1);
}

/* ==========================================================================
   18. LAYOUT GUARDS
   Block themes inject a blockGap rule of the shape
   :where(.wp-block-group.is-layout-flow) > :where(*+*) { margin-block-start: … }
   Harmless in a normal Group, fatal inside a grid: it puts a gap between
   timeline stops and breaks the connector rail. Zeroed explicitly, only
   inside KGG components, so the rest of the site keeps its spacing.
   ========================================================================== */

/* The timeline and the map are Custom HTML, so wp_render_layout_support_flag()
   never sees inside them and emits no blockGap rule — they need no guard, and
   guarding them here would beat their own margins. Only the components that
   are still core Groups are listed. */
.kgg-factgrid > *,
.kgg-factgrid > * + *,
.kgg-pills > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.kgg-verdict-pair > * + * {
	margin-block-start: 0;
}

.kgg-faq > * + * {
	margin-block-start: 0;
}

/* Components size themselves from the measure the article sets, whatever the
   theme does to constrained layouts. */
.kgg-timeline,
.kgg-factgrid,
.kgg-pivot,
.kgg-affiliate,
.kgg-verdict,
.kgg-pricecheck,
.kgg-faq,
.kgg-disclosure,
.kgg-map {
	box-sizing: border-box;
	max-width: var(--kgg-block-measure, var(--kgg-measure));
}

/* The wide tier, and it is deliberately short: the route timeline and the
   route map only. Those two are diagrams — extra width buys legibility.
   Everything else, tables and fact panels included, stays on the text
   measure, because a two-column facts table at 1200px produces a 130-character
   line, which is exactly the readability problem the measure exists to stop.
   Keeping them all on one width is also what makes the Scotland table and the
   Sintra panel finally read as the same site.

   These set a custom property rather than a max-width, so there is no
   specificity fight with the article's own measure rule — the declaration
   that consumes it is the same one either way. */
.kgg-timeline,
.kgg-map,
.kgg-insert-line {
	--kgg-block-measure: var(--kgg-measure-wide);
}

/* ==========================================================================
   19. ACCESSIBILITY BASELINE
   ========================================================================== */

.kgg-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

body.kgg-typography .entry-content a:focus-visible,
body.kgg-typography .wp-block-post-content a:focus-visible,
.editor-styles-wrapper.editor-styles-wrapper a:focus-visible {
	outline: 2px solid var(--kgg-pink-text);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.kgg-affiliate,
	.kgg-note {
		display: none;
	}
}