/*
 * Acceptance criteria overrides.
 *
 * Everything in this file is a deliberate, documented departure from the
 * approved mockup, required by a numbered acceptance criterion in
 * PROJECT-BRIEF.md section 9. It is kept separate from theme.css so that the
 * approved design stays pristine and every deviation from it is auditable in
 * one place, rather than being edited into the design and then forgotten.
 *
 * Rules:
 *   - Nothing goes in here without a criterion number.
 *   - Nothing goes in here that is merely a preference.
 *   - If a criterion is later reworded, delete the rule rather than leaving it.
 */

/*
 * Criterion 19: every interactive target 44px or larger at 390px, "including
 * the navigation burger, which measured 30 to 38px in the mockup".
 *
 * Measured in the approved design: .burger is font-size:30px with no explicit
 * box, so it renders around 30x38. This gives it a real 44x44 target without
 * changing where the glyph sits, so the header's visual rhythm is unaffected.
 *
 * Note this is the burger only. Every one of the 22 pages has between 16 and 44
 * further targets under 44px, so criterion 19 still fails site wide. Enlarging
 * all of them changes spacing on every page and is BUILD-REPORT.md open
 * question 11, which is unanswered. Do not quietly widen the scope of this rule.
 */
.burger {
	min-width: 44px;
	min-height: 44px;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
}

@media (max-width: 1024px) {
	.burger {
		display: flex;
	}
}

.mnav .x {
	min-width: 44px;
	min-height: 44px;
}

/*
 * Criterion 5: zero WCAG AA contrast failures, measured on rendered output.
 *
 * The header "Book a consultation" button renders invisible in the approved
 * mockup, on all 22 pages. It is cream text on a cream background, a contrast
 * ratio of roughly 1:1, and it is the primary call to action on every page.
 *
 * Cause: .book sits inside nav.nav-links, so `.nav-links a` at specificity
 * (0,1,1) overrides `.book { color: var(--navy) }` at (0,1,0). It is a
 * specificity accident, not a design decision, and it was verified against the
 * mockup's own rendering rather than assumed: the exported design shows the same
 * empty white box.
 *
 * This restores the colour the design already declares for .book rather than
 * choosing a new one, so it applies the designer's stated intent instead of
 * inventing a treatment. Flagged to the client regardless, per SKILL.md 2B.
 */
.nav-links a.book {
	color: var(--navy);
}

/*
 * Criterion 2: Lighthouse accessibility 95 or above.
 *
 * The approved design has no skip link and no visible focus style. Neither is a
 * design decision, they are simply absent from a flat mockup, so adding them is
 * not overriding the designer.
 */
/*
 * Clipped rather than pushed off-canvas with a negative offset. A negative
 * offset widens the document and trips criterion 18, zero horizontal overflow
 * at 390px, which is exactly what it did when this was first written.
 */
.skip {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 200;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	overflow: visible;
	clip-path: none;
	background: var(--navy);
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
}

:where(a, button, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 2px;
}

/*
 * Criterion 19, homepage testimonial dots.
 *
 * The approved design draws these at 9x9. The visible dot is kept at 9x9 via a
 * pseudo-element while the button itself becomes a real 44px target, so the
 * design is unchanged to the eye and the target is reachable by thumb.
 */
.jcnd-dot {
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	background: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.jcnd-dot::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: var(--line);
	transition: background .25s ease;
}

.jcnd-dot[aria-current="true"]::before {
	background: var(--navy);
}

/*
 * Criterion 2 and 10: content must not depend on JavaScript to be visible.
 *
 * The approved design starts .rev sections at opacity 0 and reveals them with
 * .rev-in, which its own runtime added. If our script does not run, 18 sections
 * of the homepage would stay invisible. The jcnd-js class is set by an inline
 * snippet in the head, so the hidden state only ever applies when JavaScript is
 * actually running and able to reveal it again.
 */
html:not(.jcnd-js) .rev {
	opacity: 1;
	transform: none;
}

/*
 * Criterion 20: diagram label text at 11px effective size or larger at 390px.
 *
 * Measured in the approved design: the diagrams have a 680px viewBox and render
 * 342px wide at a 390px viewport, a scale of 0.503. Declared label sizes of 12px
 * and 14px therefore land at 6.04px and 7.04px on a phone, which is what the
 * brief reports and what was independently confirmed here.
 *
 * This renders the diagram at its natural width inside a scroll container below
 * 700px, so the scale is 1 and the labels render at their declared 12 to 22px.
 * Criterion 20 passes and the client's artwork is not touched at all, which
 * brief section 7 requires: the fix there is constrained to label position, and
 * changing the type size would trip the section 8 stop-and-ask.
 *
 * Page level overflow is unaffected because the container scrolls internally,
 * so criterion 18 still passes.
 *
 * SIGNED OFF by the client, closing open question 5. It was the recommended
 * option of three; the alternatives were restyling the SVG labels with CSS, or
 * asking the client for revised artwork.
 */
/*
 * Base sizing, matching the approved design. This lives here rather than as an
 * inline style on the img because an inline style cannot be overridden by the
 * breakpoint below.
 */
.diagram-scroll > img {
	display: block;
	width: 100%;
	max-width: 700px;
	height: auto;
	margin: 0 auto;
}

@media (max-width: 700px) {
	.diagram-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/*
	 * Right-edge fade, added on client sign-off of open question 5: the
	 * scrollbar alone is easy to miss on a touch device, so this reads the
	 * container as scrollable without touching the client's artwork. Static
	 * rather than fading out at full scroll: the diagrams are wider than the
	 * viewport at every breakpoint below 700px, so the container never
	 * reaches an end state where the fade would be misleading.
	 *
	 * Positioned on .jcnd-diagram, the non-scrolling figure that wraps
	 * .diagram-scroll, not on .diagram-scroll itself. .diagram-scroll is the
	 * scrolling element: an absolutely positioned pseudo-element generated on
	 * it is part of its own scrollable content, so it would scroll away with
	 * the diagram instead of staying pinned to the visible edge. The figure
	 * never scrolls, so the fade stays put while the diagram moves under it.
	 */
	.jcnd-diagram {
		position: relative;
	}

	.jcnd-diagram::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 32px;
		background: linear-gradient(270deg, var(--cream), rgba(250, 248, 242, 0));
		pointer-events: none;
	}

	/*
	 * auto rather than a hard 680px, so this holds if a diagram is ever supplied
	 * at a different intrinsic width. The width attribute carries the viewBox
	 * width, so the image renders 1:1 and the labels render at their declared
	 * size.
	 */
	.diagram-scroll > img {
		width: auto;
		max-width: none;
	}
}

.diagram-scroll:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 2px;
}

/*
 * Criterion 19: every interactive target 44px or larger at 390px.
 *
 * Authorised on 10 August 2026, closing open question 11. It changes vertical
 * rhythm wherever links are stacked, which is why it needed sign-off.
 *
 * Applied to standalone targets: navigation, footer columns, the drawer, the
 * contents rail, related cards, reference source links and breadcrumbs.
 *
 * NOT applied to links inside body copy. WCAG 2.5.8 exempts inline links
 * explicitly, and padding a mid-sentence link to 44px would either overlap the
 * lines above and below or force the paragraph's leading open. Lighthouse's own
 * target-size audit already passes; this rule exists for the stricter 44px the
 * brief asks for, not because the page fails WCAG.
 */
.nav-links > a,
.mnav a,
.fcol > a,
.fsoc a,
.toc nav a,
.crumb a,
.refs a,
.author .lk a,
.rel .relcard {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Stacked link lists: keep the text where it sits, grow the hit area around it. */
.fcol > a,
.toc nav a,
.mnav a {
	display: flex;
	align-items: center;
}

.fsoc a {
	min-width: 44px;
	justify-content: center;
}

/* The related card is a block, so it grows rather than centring its contents. */
.rel .relcard {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*
 * Criterion 5: zero WCAG AA contrast failures, measured on rendered output.
 *
 * The approved --gold-deep, #9A7B2E, is used for the small uppercase eyebrow and
 * label text. Measured against the three backgrounds it actually sits on it
 * fails AA for small text on all of them: 3.77 on cream, 4.00 on paper, 3.70 on
 * tint, against the 4.5 that text under 18.66px requires.
 *
 * #856823 is the nearest value to the designer's that clears 4.5 everywhere:
 * 4.94 on cream, 5.25 on paper, 4.85 on tint. It is a small darkening of the
 * same hue rather than a new colour.
 *
 * This does NOT touch --gold or --navy. Criterion 17 pins those to exactly
 * #C9A84C and #1B2D73 and they are unchanged; --gold-deep is not covered by it.
 */
:root {
	--gold-deep: #856823;
}

/*
 * Criterion 19, the last two standalone targets.
 *
 * The breadcrumb links measured 34px wide, tall enough but too narrow. Padding
 * widens the hit area without moving the text.
 *
 * The homepage's standalone call-to-action links ("More about Jarrod") are
 * inline-flex in the approved markup and measured 25px tall.
 *
 * Two links remain under 44px by design and are left alone: "Gut restoration"
 * inside an h3 and "in what order" inside a paragraph. Both are inline links
 * within running text, which WCAG 2.5.8 exempts explicitly. Padding a link that
 * sits mid-sentence to 44px would overlap the lines above and below it.
 */
.crumb a {
	padding-inline: 6px;
	min-height: 44px;
}

#main a[style*="inline-flex"] {
	min-height: 44px;
}