/*!
 * Kat's Gone Global — article typography
 * Version 1.2.3
 *
 * Split out from kgg-design-system.css on purpose. These rules take over
 * headings, body copy and links inside the post content, which is an opt-in
 * behaviour (KGG_BLOCKS_TAKE_OVER_TYPOGRAPHY) — so it has to be possible to
 * load the components without loading this.
 *
 * Loads AFTER kgg-design-system.css. Section 17b below restates the component
 * rules that would otherwise lose to the article defaults, so the order is not
 * optional.
 *
 * The `.editor-styles-wrapper` twin of each selector puts the same rules
 * inside the block editor's iframe, which is why the editor matches the front
 * end. It is enqueued only on the post editor, never the site editor.
 */

/* ==========================================================================
   2. ARTICLE TYPOGRAPHY (opt-in via the kgg-typography body class)
   Scoped to the post content wrapper only. Never styles bare elements
   globally, so it cannot break the theme's header, footer or widgets.
   ========================================================================== */

/* The container keeps normal specificity so the fonts actually land.
   Everything below it is wrapped in :where() — zero specificity — so any
   KGG component class overrides it without a specificity fight and
   without a single !important. */

body.kgg-typography .entry-content,
body.kgg-typography .wp-block-post-content,
.editor-styles-wrapper.editor-styles-wrapper {
	font-family: var(--kgg-font-body);
	font-size: 18px;
	line-height: 1.7;
	color: var(--kgg-ink);
	/* Twenty Twenty-Five sets a root weight of 300 and -0.1px tracking through
	   theme.json. Those are body-element rules, so they are not overridden by
	   anything above unless they are named here — and Inter at 300 with
	   negative tracking is not the brand. */
	font-weight: 400;
	letter-spacing: normal;
}

/* On a wide screen the column is wide, so the type goes up to match. This is
   what stops 1200px reading as a thin ribbon of small text — and it pulls the
   line length back from about 150 characters to about 135. Twenty
   Twenty-Five's own root size is 21px, so 20px here is not out of character
   for the site. */
@media (min-width: 1024px) {
	body.kgg-typography .entry-content,
	body.kgg-typography .wp-block-post-content,
	.editor-styles-wrapper.editor-styles-wrapper {
		font-size: 20px;
		line-height: 1.65;
	}
}

/* Direct children only: the measure. Nested content inside a component is
   laid out by the component.
   The :not() chain is core's own escape hatch — without it, an alignfull
   image or cover would be squeezed to the 740px measure, because core emits
   its override inside :where() at (0,1,0) and this rule is (0,2,0). */
body.kgg-typography .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
body.kgg-typography .wp-block-post-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
	/* --kgg-block-measure lets a component opt into the wide tier without
	   fighting this rule's specificity, which the :not() chain makes high. */
	max-width: var(--kgg-block-measure, var(--kgg-measure));
	margin-left: auto;
	margin-right: auto;
}

body.kgg-typography .entry-content :where(h1, h2, h3, h4),
body.kgg-typography .wp-block-post-content :where(h1, h2, h3, h4),
.editor-styles-wrapper.editor-styles-wrapper :where(h1, h2, h3, h4) {
	font-family: var(--kgg-font-display);
	font-weight: 600;
	color: var(--kgg-green);
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

body.kgg-typography .entry-content :where(h1),
body.kgg-typography .wp-block-post-content :where(h1),
.editor-styles-wrapper.editor-styles-wrapper :where(h1) {
	font-size: clamp(34px, 5.2vw, 48px);
	line-height: 1.08;
	margin-block: 0 var(--kgg-s5);
}

body.kgg-typography .entry-content :where(h2),
body.kgg-typography .wp-block-post-content :where(h2),
.editor-styles-wrapper.editor-styles-wrapper :where(h2) {
	font-size: clamp(26px, 3.4vw, 32px);
	line-height: 1.16;
	margin-block: var(--kgg-s9) var(--kgg-s4);
}

body.kgg-typography .entry-content :where(h3),
body.kgg-typography .wp-block-post-content :where(h3),
.editor-styles-wrapper.editor-styles-wrapper :where(h3) {
	font-size: 22px;
	line-height: 1.25;
	color: var(--kgg-ink);
	margin-block: var(--kgg-s7) var(--kgg-s3);
}

body.kgg-typography .entry-content :where(p),
body.kgg-typography .wp-block-post-content :where(p),
.editor-styles-wrapper.editor-styles-wrapper :where(p) {
	/* margin-block only. An `auto` inline margin here would be inherited by
	   paragraphs inside a flex component and space them apart. */
	margin-block: 0 var(--kgg-s4);
	text-wrap: pretty;
}

/* Buttons are excluded, the same way core excludes them from its own link
   styles. Without the :not() this rule is (0,2,1) and beats Twenty
   Twenty-Five's `:root :where(.wp-element-button)` at (0,1,0) — which paints
   the button label in link green on a green button. Invisible text, and it
   happens on every button on the site, not just the affiliate ones.
   `[class*="btn"]` is here for the same reason, one vocabulary further out:
   the hand-built landing pages style their own `.btn` / `.btn-ghost`, and
   `.kgg-home .btn` is (0,2,0) — a tie this rule wins on the extra element in
   its scope. Everything inside :where() costs zero specificity, so the
   exclusion list can grow without changing what this rule beats. */
body.kgg-typography .entry-content :where(a:not(.wp-element-button):not(.wp-block-button__link):not([class*="btn"])),
body.kgg-typography .wp-block-post-content :where(a:not(.wp-element-button):not(.wp-block-button__link):not([class*="btn"])),
.editor-styles-wrapper.editor-styles-wrapper :where(a:not(.wp-element-button):not(.wp-block-button__link):not([class*="btn"])) {
	color: var(--kgg-green);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

body.kgg-typography .entry-content :where(a:not(.wp-element-button):not(.wp-block-button__link):not([class*="btn"]):hover),
body.kgg-typography .wp-block-post-content :where(a:not(.wp-element-button):not(.wp-block-button__link):not([class*="btn"]):hover),
.editor-styles-wrapper.editor-styles-wrapper :where(a:not(.wp-element-button):not(.wp-block-button__link):not([class*="btn"]):hover) {
	color: var(--kgg-pink-text);
	/* Twenty Twenty-Five sets text-decoration:none on link hover. Without this
	   the underline disappears exactly when the pointer is on it. */
	text-decoration: underline;
}

body.kgg-typography .entry-content :where(em),
body.kgg-typography .wp-block-post-content :where(em),
.editor-styles-wrapper.editor-styles-wrapper :where(em) {
	font-style: italic;
}

/* Fraunces italic is the voice moment — only inside a display heading. */
body.kgg-typography .entry-content :where(h1, h2) em,
body.kgg-typography .wp-block-post-content :where(h1, h2) em,
.editor-styles-wrapper.editor-styles-wrapper :where(h1, h2) em {
	font-weight: 500;
	font-style: italic;
}

/* ==========================================================================
   17b. SPECIFICITY FIREWALL
   The article defaults in section 2 are scoped to the content wrapper, which
   makes them (0,2,0) — enough to beat a bare component class (0,1,0). Rather
   than scatter !important, every component rule that has to win is restated
   here at the same scope. This block is the only place that has to know
   about the collision, and it is the last word in the file.
   ========================================================================== */

body.kgg-typography .entry-content [class*="kgg-"] :where(p, h2, h3, h4),
body.kgg-typography .wp-block-post-content [class*="kgg-"] :where(p, h2, h3, h4),
.editor-styles-wrapper.editor-styles-wrapper [class*="kgg-"] :where(p, h2, h3, h4) {
	margin-block: 0;
	max-width: none;
}

/* Utility paragraphs sitting directly in the article flow. */
body.kgg-typography .entry-content :where(.kgg-eyebrow),
body.kgg-typography .wp-block-post-content :where(.kgg-eyebrow),
.editor-styles-wrapper.editor-styles-wrapper :where(.kgg-eyebrow) {
	margin-block: 0 var(--kgg-s1);
}

body.kgg-typography .entry-content :where(.kgg-kicker),
body.kgg-typography .wp-block-post-content :where(.kgg-kicker),
.editor-styles-wrapper.editor-styles-wrapper :where(.kgg-kicker) {
	margin-block: 0 var(--kgg-s3);
}

body.kgg-typography .entry-content :where(.kgg-meta),
body.kgg-typography .wp-block-post-content :where(.kgg-meta),
.editor-styles-wrapper.editor-styles-wrapper :where(.kgg-meta) {
	margin-block: 0 var(--kgg-s5);
}

body.kgg-typography .entry-content :where(.kgg-byline),
body.kgg-typography .wp-block-post-content :where(.kgg-byline),
.editor-styles-wrapper.editor-styles-wrapper :where(.kgg-byline) {
	margin-block: 0 var(--kgg-s7);
}

body.kgg-typography .entry-content :where(.kgg-booking),
body.kgg-typography .wp-block-post-content :where(.kgg-booking),
.editor-styles-wrapper.editor-styles-wrapper :where(.kgg-booking) {
	margin-block: 0 var(--kgg-s5);
}

/* Component internals. */
body.kgg-typography .entry-content .kgg-timeline > .kgg-timeline__head,
body.kgg-typography .wp-block-post-content .kgg-timeline > .kgg-timeline__head,
.editor-styles-wrapper.editor-styles-wrapper .kgg-timeline > .kgg-timeline__head {
	margin-block: 0 var(--kgg-s6);
}

body.kgg-typography .entry-content .kgg-pivot :where(h2, h3),
body.kgg-typography .wp-block-post-content .kgg-pivot :where(h2, h3),
.editor-styles-wrapper.editor-styles-wrapper .kgg-pivot :where(h2, h3) {
	margin-block: 0 var(--kgg-s4);
	font-size: 28px;
	line-height: 1.15;
}

body.kgg-typography .entry-content .kgg-pivot :where(p),
body.kgg-typography .wp-block-post-content .kgg-pivot :where(p),
.editor-styles-wrapper.editor-styles-wrapper .kgg-pivot :where(p) {
	margin-block: 0 var(--kgg-s5);
}

body.kgg-typography .entry-content .kgg-affiliate :where(p),
body.kgg-typography .wp-block-post-content .kgg-affiliate :where(p),
.editor-styles-wrapper.editor-styles-wrapper .kgg-affiliate :where(p) {
	margin-block: 0 var(--kgg-s4);
}

body.kgg-typography .entry-content .kgg-affiliate :where(.kgg-eyebrow),
body.kgg-typography .wp-block-post-content .kgg-affiliate :where(.kgg-eyebrow),
.editor-styles-wrapper.editor-styles-wrapper .kgg-affiliate :where(.kgg-eyebrow) {
	margin-block: 0 var(--kgg-s2);
}

body.kgg-typography .entry-content .kgg-faq :where(p),
body.kgg-typography .wp-block-post-content .kgg-faq :where(p),
.editor-styles-wrapper.editor-styles-wrapper .kgg-faq :where(p) {
	margin-block: var(--kgg-s3) 0;
}

body.kgg-typography .entry-content .kgg-related :where(p),
body.kgg-typography .wp-block-post-content .kgg-related :where(p),
.editor-styles-wrapper.editor-styles-wrapper .kgg-related :where(p) {
	margin-block: 0 var(--kgg-s2);
}

body.kgg-typography .entry-content :where(.kgg-timeline__key),
body.kgg-typography .wp-block-post-content :where(.kgg-timeline__key),
.editor-styles-wrapper.editor-styles-wrapper :where(.kgg-timeline__key) {
	margin-block: var(--kgg-s6) 0;
}

body.kgg-typography .entry-content .kgg-stop__body :where(p + p),
body.kgg-typography .wp-block-post-content .kgg-stop__body :where(p + p),
.editor-styles-wrapper.editor-styles-wrapper .kgg-stop__body :where(p + p) {
	margin-block: 3px 0;
}


/* ==========================================================================
   2c. THE ARTICLE COLUMN — hero, title and body on one measure
   The featured image and the post title are template blocks, not content
   blocks, so they sit OUTSIDE .wp-block-post-content and never saw the
   measure rule above. That is why the hero rendered at Twenty Twenty-Five's
   1200px content width while the body sat at 848 — two different left edges
   down the same page.

   These bring the hero and the title onto the same measure as the body, so
   the article reads as one column from the top of the page to the bottom.

   Gated on body.kgg-typography, which the plugin only sets on single posts
   and pages — archives and the front page keep the theme's own layout.

   TO PUT THE HERO BACK OUT WIDE: change var(--kgg-measure) below to
   var(--kgg-measure-wide) in this block only. To take the whole article out
   to the site's full 1200px instead, change --kgg-measure in
   kgg-design-system.css — but read the note there first, because 1200px of
   18px body copy is roughly 150 characters a line, about double what is
   comfortable to read.
   ========================================================================== */

body.kgg-typography .wp-block-post-featured-image,
body.kgg-typography figure.wp-block-post-featured-image,
body.kgg-typography .wp-block-post-title,
body.kgg-typography h1.wp-block-post-title {
	max-width: var(--kgg-measure);
	margin-left: auto;
	margin-right: auto;
}

/* The image fills whatever the figure ends up being, at its own aspect. */
body.kgg-typography .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   2b. TABLES — one treatment, no class required
   Scotland's facts block was a plain core Table with core's default 1px cell
   boxes, sitting on the same site as Sintra's hairline panel. Requiring a
   class to fix that only works if every post remembers the class, and they do
   not. So every table inside the article gets the house treatment, and the
   two shapes are told apart by their own structure rather than by a class.
   Scoped at (0,2,2), which beats core's (0,1,1) `.wp-block-table td` — that
   sheet is printed late, during the_content, so it lands after this file.
   ========================================================================== */

body.kgg-typography .entry-content table,
body.kgg-typography .wp-block-post-content table,
.editor-styles-wrapper.editor-styles-wrapper table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 1.6;
	margin-block: 0 var(--kgg-s8);
}

body.kgg-typography .entry-content table :is(td, th),
body.kgg-typography .wp-block-post-content table :is(td, th),
.editor-styles-wrapper.editor-styles-wrapper table :is(td, 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;
	word-break: normal;
}

body.kgg-typography .entry-content table tr:last-child :is(td, th),
body.kgg-typography .wp-block-post-content table tr:last-child :is(td, th),
.editor-styles-wrapper.editor-styles-wrapper table tr:last-child :is(td, th) {
	border-bottom: 1px solid var(--kgg-rule);
}

body.kgg-typography .entry-content table :is(td, th):last-child,
body.kgg-typography .wp-block-post-content table :is(td, th):last-child,
.editor-styles-wrapper.editor-styles-wrapper table :is(td, th):last-child {
	padding-right: 0;
}

/* Shape one — the label/value table. `:first-child:nth-last-child(2)` is true
   only when the row holds exactly two cells, so a facts table gets the mono
   green label column automatically and a real data table does not. */
body.kgg-typography .entry-content table :is(td, th):first-child:nth-last-child(2),
body.kgg-typography .wp-block-post-content table :is(td, th):first-child:nth-last-child(2),
.editor-styles-wrapper.editor-styles-wrapper table :is(td, th):first-child:nth-last-child(2) {
	/* Not a bare 32%. At the 1200px measure a flat third gives the word "WHEN"
	   a 384px column and the gap before the value reads as a fault. The
	   percentage comes back below 600px, where 240px would starve the value. */
	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) {
	body.kgg-typography .entry-content table :is(td, th):first-child:nth-last-child(2),
	body.kgg-typography .wp-block-post-content table :is(td, th):first-child:nth-last-child(2),
	.editor-styles-wrapper.editor-styles-wrapper table :is(td, th):first-child:nth-last-child(2) {
		width: 32%;
	}
}

/* Shape two — a genuine multi-column table. The header row carries the mono
   treatment instead, and loses its top rule so the block starts clean. */
body.kgg-typography .entry-content table thead th,
body.kgg-typography .wp-block-post-content table thead th,
.editor-styles-wrapper.editor-styles-wrapper table thead th {
	border-top: 0;
	border-bottom: 1px solid var(--kgg-rule-strong);
	font-family: var(--kgg-font-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kgg-green);
}

/* Below the fold of a phone a wide table has to scroll rather than squash. */
body.kgg-typography .entry-content figure.wp-block-table,
body.kgg-typography .wp-block-post-content figure.wp-block-table,
.editor-styles-wrapper.editor-styles-wrapper figure.wp-block-table {
	overflow-x: auto;
	border: 0;
	margin-block: 0 var(--kgg-s8);
}