/*
Theme Name: Dr Ryu Natural Medicine
Theme URI: https://drryu.co.uk
Author: Agnes Ryu
Author URI: https://drryu.co.uk
Description: Custom block theme for Dr Ryu Natural Medicine — fertility and metabolic medicine clinic, Wimbledon, London. Design system per DESIGN.md; all design tokens defined in theme.json.
Version: 0.1.9
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: drryu
Tags: full-site-editing, block-styles, blog, custom-colors, custom-logo
*/

/*
 * Block themes load nearly all styling from theme.json.
 * Use this file ONLY for the rare rule that cannot be expressed in theme.json.
 * Do NOT hardcode colours, fonts, or spacing here — reference the generated
 * CSS variables instead, e.g. var(--wp--preset--color--accent).
 */

/* Article lead paragraph: first paragraph of post content reads slightly
   larger than body copy (~19px) but smaller than the Lead/large preset (20px),
   so it doesn't carry too far down a long article. */
.wp-block-post-content > p:first-of-type {
	font-size: 1.1875rem;
	line-height: var(--wp--custom--line-height--lead);
}

/* FAQ Accordion (patterns/faq-accordion.php) — native Details block styling */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wp-block-details summary {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--wp--preset--color--text-primary);
	padding: var(--wp--preset--spacing--40) 0;
	cursor: pointer;
}

.wp-block-details summary::marker {
	color: var(--wp--preset--color--accent);
}

.wp-block-details > :not(summary) {
	padding-bottom: var(--wp--preset--spacing--40);
}

/* =========================================================
   Evidence Tier Badges — DESIGN.md §4 Clinical Evidence Badge
   Inline <span class="evidence-badge"> in article prose
   ========================================================= */
.evidence-badge {
	background: var(--wp--preset--color--bg-tertiary);
	color: var(--wp--preset--color--text-secondary);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--tag);
	font-family: var(--wp--preset--font-family--clinical);
	font-size: 0.75rem;
	line-height: 1;
	padding: 0.2em 0.55em;
	display: inline-block;
	vertical-align: baseline;
	white-space: nowrap;
}

/* =========================================================
   Callout Blocks — DESIGN.md §4 Callout Blocks
   .callout-note / .callout-warning / .callout-finding
   ========================================================= */
.callout-note,
.callout-warning,
.callout-finding {
	padding: 20px 24px;
}

.callout-note {
	border-left: 3px solid var(--wp--preset--color--accent);
	background: rgba(124, 106, 82, 0.06);
}

.callout-warning {
	border-left: 3px solid var(--wp--preset--color--warm-red);
	background: var(--wp--preset--color--warm-red-light);
}

.callout-finding {
	border-left: 3px solid var(--wp--preset--color--botanical);
	background: rgba(90, 110, 74, 0.07);
}

.callout-note p:last-child,
.callout-warning p:last-child,
.callout-finding p:last-child {
	margin-bottom: 0;
}

/* =========================================================
   /book/ page — Pabau embed placeholder
   Replace the wp:html block in page-book.html with the
   actual Pabau iframe/script when Pabau onboarding is done.
   ========================================================= */
.pabau-embed-placeholder {
	min-height: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--wp--preset--spacing--40);
	border: 1.5px dashed var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--80);
	background: var(--wp--preset--color--surface-elevated);
}

.pabau-embed-label {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

.pabau-embed-sub {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/* =========================================================
   /book/ page — Enquiry form
   Styled per DESIGN.md §4 Inputs & Forms
   ========================================================= */
.enquiry-form {
	max-width: 520px;
}

.enquiry-form label {
	display: block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	color: var(--wp--preset--color--text-secondary);
	margin-bottom: 6px;
}

/* Required indicator: botanical green (not red — DESIGN.md §4) */
.required-mark {
	color: var(--wp--preset--color--botanical);
}

.enquiry-form input[type="text"],
.enquiry-form input[type="email"],
.enquiry-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 4px;
	padding: 12px 16px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.75;
	color: var(--wp--preset--color--text-primary);
	background: var(--wp--preset--color--surface-elevated);
	margin-bottom: var(--wp--preset--spacing--50);
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
	-webkit-appearance: none;
	appearance: none;
}

.enquiry-form input[type="text"]::placeholder,
.enquiry-form input[type="email"]::placeholder,
.enquiry-form textarea::placeholder {
	color: var(--wp--preset--color--text-muted);
}

/* Walnut focus ring — DESIGN.md §4 */
.enquiry-form input[type="text"]:focus,
.enquiry-form input[type="email"]:focus,
.enquiry-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(124, 106, 82, 0.12);
}

.enquiry-form textarea {
	min-height: 130px;
	resize: vertical;
}

.enquiry-form button[type="submit"] {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bg-primary);
	border: none;
	border-radius: 4px;
	padding: 14px 28px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--button);
	cursor: pointer;
	transition: background var(--wp--custom--transition), transform var(--wp--custom--transition);
	-webkit-appearance: none;
	appearance: none;
	min-height: 44px;
}

.enquiry-form button[type="submit"]:hover {
	background: var(--wp--preset--color--accent-hover);
	transform: translateY(-1px);
}

/* Form submission state messages */
.enquiry-message {
	padding: 16px 20px;
	border-radius: 4px;
	margin-bottom: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.75;
}

.enquiry-message p { margin: 0; }

.enquiry-sent {
	border-left: 3px solid var(--wp--preset--color--botanical);
	background: rgba(90, 110, 74, 0.07);
	color: var(--wp--preset--color--text-primary);
}

.enquiry-error {
	border-left: 3px solid var(--wp--preset--color--warm-red);
	background: var(--wp--preset--color--warm-red-light);
	color: var(--wp--preset--color--warm-red);
}

/* IVF schedule SVG — responsive wrapper */
.ivf-schedule-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--wp--preset--spacing--60);
}
.ivf-schedule-wrap svg {
	width: 100%;
	height: auto;
	display: block;
	min-width: 560px; /* below this the SVG text becomes unreadable — scroll instead */
}

/* =========================================================
   Article Tag Chips — DESIGN.md §4 Article Tag Chip
   Filed-under terms under the article byline (single.html).
   Each chip owns its background and border; the row must never
   read as one continuous band. 8px gap is mandatory.
   ========================================================= */
.article-tag-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.article-tag-chips a {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: var(--wp--preset--color--bg-secondary);
	color: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px; /* DESIGN.md specifies 4px; --radius--tag is 3px and belongs to the category eyebrow */
	padding: 6px 12px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-decoration: none;
	transition: background var(--wp--custom--transition), color var(--wp--custom--transition);
}

/* Hash prefix: marks each chip as a tag without putting the character into the
   term name itself, so the taxonomy stays clean. Decorative only. */
.article-tag-chips a::before {
	content: "#";
	opacity: 0.55;
}

.article-tag-chips a:hover::before {
	opacity: 0.8;
}

.article-tag-chips a:hover,
.article-tag-chips a:focus-visible {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bg-primary);
}

/* The separator is emptied in the template; hide any that survives so the
   chips can never join into a single bar. */
.article-tag-chips .wp-block-post-terms__separator {
	display: none;
}

/* =========================================================
   Article byline — DESIGN.md §4
   The author's name leads the meta line and sits a step darker and
   heavier than the date beside it.
   ========================================================= */
.article-byline-name {
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--label);
}

/* Separator between the name and the date. It lives on the date, not the name,
   so it only appears when there is a date to separate: core/post-date renders
   nothing for unpublished posts, so a draft shows the name with no dangling
   punctuation. Colour and weight are inherited from the date itself.
   The group's own flex gap is zeroed so the spacing stays symmetric. */
.article-byline {
	gap: 0;
}

.article-byline .wp-block-post-date::before {
	content: "\00b7";
	margin: 0 0.5em;
}

/* =========================================================
   Fees page — tables and category rhythm (page 21 only)
   The vault renders these tables from markdown, so they arrive as bare
   <table> with no classes. Everything below is therefore keyed to
   .page-id-21 and element selectors.
   ========================================================= */
.page-id-21 .wp-block-post-content table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--wp--preset--color--border);
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--70);
}

.page-id-21 .wp-block-post-content thead tr {
	background: var(--wp--preset--color--accent);
}

.page-id-21 .wp-block-post-content th {
	padding: 14px 20px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-align: left;
	color: var(--wp--preset--color--bg-primary);
}

.page-id-21 .wp-block-post-content td {
	padding: 14px 20px;
	vertical-align: top;
	border-top: 1px solid var(--wp--preset--color--border);
	line-height: 1.6;
}

/* Fee column, targeted BY POSITION — the last cell in the row. Every fees
   table currently ends with the price. If a column is ever added after the
   price (notes, availability), this rule will style that column instead and
   must be changed to an explicit class. */
.page-id-21 .wp-block-post-content td:last-child,
.page-id-21 .wp-block-post-content th:last-child {
	text-align: right;
	white-space: nowrap;
}

.page-id-21 .wp-block-post-content td:last-child {
	font-family: var(--wp--preset--font-family--clinical);
	color: var(--wp--preset--color--text-secondary);
}

/* Category rhythm: the four service categories previously ran together at
   one vertical rhythm. A hairline rule plus space above each h2 separates
   them. */
.page-id-21 .wp-block-post-content h2 {
	margin-top: var(--wp--preset--spacing--90);
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--border);
}

.page-id-21 .wp-block-post-content h2:first-of-type {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: 0;
	border-top: none;
}

.page-id-21 .wp-block-post-content h3 {
	margin-top: var(--wp--preset--spacing--70);
}

.page-id-21 .callout {
	margin-top: var(--wp--preset--spacing--50);
}

@media (max-width: 600px) {
	.page-id-21 .wp-block-post-content h2 {
		margin-top: var(--wp--preset--spacing--70);
		padding-top: var(--wp--preset--spacing--50);
	}
	.page-id-21 .wp-block-post-content h3 {
		margin-top: var(--wp--preset--spacing--60);
	}
	.page-id-21 .wp-block-post-content th,
	.page-id-21 .wp-block-post-content td {
		padding: 12px 14px;
	}
	/* Let headers wrap on phones: nowrap sets an artificial minimum table
	   width and squashes the body cells before the wrapper scrolls. */
	.page-id-21 .wp-block-post-content th {
		white-space: normal;
	}
}

/* ── Diagnostics hub: dx-card accordion (restored from WP rev 74, 2026-07-05) ── */
.dx-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--wp--preset--spacing--40);margin:var(--wp--preset--spacing--60) 0}
@media(max-width:781px){.dx-grid{grid-template-columns:1fr}}
.dx-card{background:var(--wp--preset--color--surface-elevated,#fff);border:1px solid var(--wp--preset--color--border);border-radius:8px;overflow:hidden}
.dx-card[open]{border-color:var(--wp--preset--color--border-strong,#C4B8A8)}
.dx-card summary{list-style:none;cursor:pointer;padding:24px;display:block;position:relative}
.dx-card summary::-webkit-details-marker{display:none}
.dx-card summary:hover{background:rgba(124,106,82,0.04)}
.dx-card summary:focus-visible{outline:2px solid var(--wp--preset--color--accent);outline-offset:-2px}
.dx-name{font-family:var(--wp--preset--font-family--heading,'Playfair Display',Georgia,serif);font-size:21px;line-height:1.25;color:var(--wp--preset--color--text-primary);margin:0 0 4px;padding-right:28px}
.dx-lab{font-family:var(--wp--preset--font-family--ui);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;color:var(--wp--preset--color--text-muted);margin:0 0 14px}
.dx-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dx-sample{display:inline-block;background:var(--wp--preset--color--botanical-light,#D4DECE);color:var(--wp--preset--color--botanical,#5A6E4A);border-radius:3px;padding:4px 10px;font-family:var(--wp--preset--font-family--ui);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.04em}
.dx-fee{font-family:var(--wp--preset--font-family--heading,'Playfair Display',Georgia,serif);font-size:20px;color:var(--wp--preset--color--accent)}
.dx-card summary::after{content:"+";position:absolute;top:24px;right:24px;font-family:var(--wp--preset--font-family--ui);font-size:22px;line-height:1;color:var(--wp--preset--color--accent);font-weight:400}
.dx-card[open] summary::after{content:"\2212"}
.dx-body{padding:0 24px 24px;border-top:1px solid var(--wp--preset--color--border);margin-top:4px}
.dx-row{padding-top:16px}
.dx-label{font-family:var(--wp--preset--font-family--ui);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;color:var(--wp--preset--color--accent);margin:0 0 4px}
.dx-text{font-family:var(--wp--preset--font-family--body);font-size:16px;line-height:1.7;color:var(--wp--preset--color--text-primary);margin:0}
.dx-sub{font-family:var(--wp--preset--font-family--body);font-size:14px;line-height:1.6;color:var(--wp--preset--color--text-secondary);margin:6px 0 0}
.dx-text a{color:var(--wp--preset--color--accent);text-decoration:underline}
.dx-more{padding-top:16px}
.dx-more a{font-family:var(--wp--preset--font-family--ui);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;color:var(--wp--preset--color--accent);text-decoration:none}
.dx-more a:hover{text-decoration:underline}

/* FAQ accordion: DESIGN.md v2.4 §4 (S3, 28 Sept) */
.faq-item { margin: 0; border-bottom: 1px solid var(--wp--preset--color--border); }
.faq-list > .faq-item:first-child { border-top: 1px solid var(--wp--preset--color--border); }
.faq-item > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 18px 44px 18px 0; min-height: 44px;
  font-family: var(--wp--preset--font-family--body); font-weight: 600;
  font-size: 1.125rem; line-height: 1.45; color: var(--wp--preset--color--text-primary);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--wp--preset--font-family--ui); font-weight: 400;
  font-size: 1.5rem; line-height: 1; color: var(--wp--preset--color--accent);
  transition: transform 150ms ease;
}
.faq-item[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item > summary:hover::after { color: var(--wp--preset--color--accent-hover); }
.faq-item > summary:focus-visible {
  outline: 2px solid transparent; border-radius: 2px;
  box-shadow: var(--wp--custom--focus-ring, 0 0 0 2px var(--wp--preset--color--accent));
}
.faq-item > :not(summary) { margin: 0 0 20px; padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .faq-item > summary::after { transition: none; } }

/* Reference list: DESIGN.md v2.4 §4 (S3, 28 Sept) */
.references-heading {
  font-family: var(--wp--preset--font-family--ui); font-weight: 500;
  font-size: var(--wp--preset--font-size--label); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wp--preset--color--text-secondary); border-top: 1px solid var(--wp--preset--color--border);
  padding-top: 24px; margin-top: 56px;
}
.references {
  font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small);
  line-height: 1.5; color: var(--wp--preset--color--text-secondary); padding-left: 1.5em; margin: 12px 0 0;
}
.references li { margin: 0 0 6px; }
.references li p { margin: 0; font-size: inherit; }
.references li::marker { color: var(--wp--preset--color--text-muted); font-variant-numeric: tabular-nums; }
.references a {
  color: var(--wp--preset--color--accent); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px; overflow-wrap: anywhere;
}
.references a:hover { color: var(--wp--preset--color--accent-hover); }

/* Touching footnote markers read "1,9", not "19" (S3, 28 Sept) */
sup.fnref-follows::before { content: ","; }

/* =========================================================
   S4 fixes, 4 Oct 2026 — phones
   ========================================================= */

/* Images in content never exceed their column (post 110's diagrams carry
   width="560"). */
.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 599px) {
	/* Header CTA: the label reads "Book" on one line. " a consultation" stays
	   in the link, visually hidden (the screen-reader-text pattern), so the
	   accessible name is still "Book a consultation". */
	.header-cta .wp-block-button__link {
		white-space: nowrap;
		word-break: normal;
		overflow-wrap: normal;
	}
	.header-cta .header-cta-rest {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
		white-space: nowrap;
		word-wrap: normal !important;
	}

	/* Tables in content: long words hyphenate inside cells so the table fits
	   the column. Hyphenation only: overflow-wrap: anywhere also broke the
	   fees (tested at 375 px). Table semantics are kept (no display: block). */
	.wp-block-post-content th,
	.wp-block-post-content td {
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}

/* =========================================================
   Header lockup, 한국어 button, footer seal — DESIGN.md v2.8
   §4 Navigation, §8, §11 (4 Oct 2026)
   ========================================================= */

/* Header lockup: "Dr Ryu" italic over NATURAL MEDICINE in spaced capitals.
   Live text in a paragraph, linking home. The space between the two spans
   stays in the markup, so it reads "Dr Ryu Natural Medicine". */
.site-lockup {
	flex: none;
	margin: 0;
}
.site-lockup a {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.site-lockup a:hover {
	text-decoration: none;
}
.site-lockup .wm-name {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 500;
	font-size: 29px;
	line-height: 1;
	letter-spacing: 0.005em;
}
.site-lockup .wm-sub {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 10.5px;
	line-height: 1;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	white-space: nowrap;
	margin-top: 5px;
	padding-left: 2px;
}

/* 한국어 button: outlined, last in the row after Book, and Book's height
   (align-self: stretch, so it does not depend on the order WordPress loads
   its layout CSS). Never round. Hover as the Secondary Button. */
.wp-block-buttons.header-cta {
	flex-wrap: nowrap;
	gap: 10px;
}
.header-cta .lang-ko {
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 4px;
	background: transparent;
	color: var(--wp--preset--color--accent);
	font-family: Inter, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}
.header-cta .lang-ko:hover {
	background: var(--wp--preset--color--bg-tertiary);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.site-lockup a:focus-visible,
.header-cta .lang-ko:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Footer seal: 205px box, centred above the clinic's details, at every width. */
.footer-seal {
	width: 205px;
	margin: 0 auto 6px;
}
.footer-seal img {
	display: block;
	width: 100%;
	height: auto;
}
/* The footer group's block gap would otherwise open 1.5rem under the seal. */
.footer-seal + * {
	margin-block-start: 0;
}
/* The centred lines under the seal even out when they wrap. */
.footer-seal ~ p {
	text-wrap: balance;
}

/* Folded nav below 900px. WordPress folds the links into the menu icon only
   below 600px; between 600 and 899px lockup · links · Book a consultation ·
   한국어 do not fit, so the site header shows the icon there too. These two
   rules mirror core's (min-width: 600px) pair in blocks/navigation/style.css:
   re-check them after a WordPress update. The open menu (.is-menu-open) is
   untouched, so it opens and closes from the icon as on phones. */
@media (min-width: 600px) and (max-width: 899px) {
	.site-header-row .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.site-header-row .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Folded nav: the menu icon sits beside Book, not midway along the row. */
@media (max-width: 899px) {
	.site-header-row > .wp-block-navigation {
		margin-left: auto;
	}
}

@media (max-width: 599px) {
	/* 10px between the row's items and 14px either side of "Book", so
	   lockup · menu icon · Book · 한국어 fit from 320px. */
	.wp-block-group.site-header-row {
		gap: 10px;
	}
	.header-cta .wp-block-button__link {
		padding-left: 14px;
		padding-right: 14px;
	}
	.site-lockup .wm-name { font-size: 22px; }
	.site-lockup .wm-sub { font-size: 8px; letter-spacing: 0.22em; margin-top: 4px; }
	.header-cta .lang-ko { padding: 0 10px; }
}

@media (max-width: 359px) {
	.site-lockup .wm-name { font-size: 20px; }
	.site-lockup .wm-sub { font-size: 7.5px; letter-spacing: 0.18em; }
	/* The button shows 한 and still reads 한국어 (screen-reader-text pattern);
	   44px wide at least (DESIGN.md §8 touch target). */
	.header-cta .lang-ko {
		min-width: 44px;
		justify-content: center;
	}
	.header-cta .lang-ko-rest {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
		white-space: nowrap;
		word-wrap: normal !important;
	}
}