/* Refinements from the design review of 2026-11-06
   (~/Documents/projects/agile-site-design-review.md). Loaded after style.css /
   style.min.css so the main stylesheet and its minified twin stay untouched.
   Each block names the review finding it answers. */

/* L4: the 200-weight section titles read washed out next to the 900-weight H1.
   300 keeps the light/black two-tone headline, with a tighter line-height. */
.title--is-main-title {
	font-weight: 300;
	line-height: 1.1
}

/* L6: the red diagonal wedge sits on the right 6rem of every button and the
   last letters of longer labels ran into it. Reserve that space. */
.cta-link:not([data-header]):has(.cta-animation) {
	padding-inline-end: 7.5rem
}

/* U2: phones had no call to action in the header at all (only logo and
   menu). Show a compact version of the header button below 768px, with a
   short label (the full label returns from 768px up). */
.cta-label--short {
	display: none
}

@media (max-width: 767px) {
	.row[data-header] {
		grid-template-columns: auto auto;
		grid-column-gap: 2rem
	}

	.cta--is-red[data-header] {
		display: block;
		min-inline-size: 0
	}

	.cta--is-red .cta-link[data-header] {
		font-size: 1.1rem;
		letter-spacing: .14rem;
		min-height: 3.6rem;
		padding: .8rem 1.4rem
	}

	.cta--is-red[data-header] .cta-animation,
	.cta--is-red[data-header] .cta-label--full {
		display: none
	}

	.cta--is-red[data-header] .cta-label--short {
		display: inline
	}
}

/* S5: anchor jumps (TOC, FAQ, #local-audit-form) landed under the fixed
   header (86px desktop, 64px mobile). */
html {
	scroll-padding-top: 7.5rem
}

@media (min-width: 1024px) {
	html {
		scroll-padding-top: 10rem
	}
}

/* S4: the 60rem size estimate for off-screen sections is far below the real
   height of the case grids on phones, so the scrollbar jumped as they
   rendered. A closer first guess on small screens; `auto` still remembers
   the real size afterwards. */
@media (max-width: 767px) {
	section[data-c30],
	section[data-c17],
	section[data-c25] {
		contain-intrinsic-block-size: auto 140rem
	}
}

/* A9: desktop menu links showed a thin white box on focus; use the same
   2px red ring as everything else. */
.primary-navigation a:focus-visible,
.menu--is-navigation a:focus-visible {
	outline: .2rem solid var(--accent);
	outline-offset: .4rem
}

/* M2: replace `transition: all` with the properties that actually change. */
.footer-lang a {
	transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease)
}

/* P5: case-study cards are CSS backgrounds, so they had no srcset. The grid
   template now passes a 768px rendition as --background-sm for phones. */
@media (max-width: 767px) {
	[data-c30] .image {
		background-image: var(--background-sm, var(--background))
	}
}

/* L2: on phones the home page's three case grids ran to about 8 screens.
   Show the first grid (three case studies) only; "View all work" sits in the
   ratings band under the hero. Tablets and desktops keep all three. */
@media (max-width: 767px) {
	.home section[data-c30] + section[data-c30] {
		display: none
	}
}

/* Blog tables (2026-11-09). The core table block had no theme styling, so tables
   rendered as dark-bordered boxes and wide ones were cut off. Brand palette:
   indigo #0d0324, lilac #f4f0fb, muted text #5b536c. Scoped to blog posts.
   Sizes in px: the theme's root font size is 10px, so rem renders far too small. */
.single-blog .wp-block-table {
	margin: 32px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #e4dff0;
	border-radius: 10px
}
.single-blog .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font-size: 16px;
	line-height: 1.55
}
.single-blog .wp-block-table th,
.single-blog .wp-block-table td {
	border: 0;
	border-bottom: 1px solid #e4dff0;
	padding: 13px 16px;
	text-align: left;
	vertical-align: top
}
.single-blog .wp-block-table thead th {
	background: #0d0324;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	border-bottom: 0
}
.single-blog .wp-block-table tbody tr:nth-child(even) td {
	background: #f4f0fb
}
.single-blog .wp-block-table tbody tr:last-child td {
	border-bottom: 0
}
/* On 3+ column tables the first column labels the row. */
.single-blog .wp-block-table table:has(th:nth-child(3)) tbody td:first-child {
	font-weight: 700;
	color: #0d0324
}
/* Wide tables keep readable columns and scroll inside their frame. */
.single-blog .wp-block-table table:has(th:nth-child(4)) {
	min-width: 736px
}
.single-blog .wp-block-table figcaption {
	margin: 0;
	padding: 11px 16px;
	border-top: 1px solid #e4dff0;
	font-size: 14px;
	color: #5b536c;
	text-align: left
}
@media (max-width: 767px) {
	.single-blog .wp-block-table table:has(th:nth-child(3)) {
		min-width: 544px
	}
	.single-blog .wp-block-table th,
	.single-blog .wp-block-table td {
		padding: 11px 13px
	}
}

/* Blog: embed/code snippets (e.g. infographic embed code) */
.single-blog .wp-block-code {
	background: #f4f0fb;
	border: 1px solid #e4dff0;
	border-radius: 10px;
	padding: 16px 18px;
	margin: 16px 0 32px;
	max-height: 220px;
	overflow: auto;
}
.single-blog .wp-block-code code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	line-height: 1.55;
	color: #26232a;
	white-space: pre-wrap;
	word-break: break-all;
	user-select: all;
}