/*
 * Only what theme.json cannot express.
 *
 * Rule of thumb for this file: if a value exists as a token, reference the
 * token. Hard-coded hex belongs in theme.json, not here.
 */

/* --------------------------------------------------------------- layout */

/*
 * Sections butt up against one another.
 *
 * Core sets `margin-block-start: var(--wp--style--block-gap)` on every child of
 * a flow container, including the top-level header / main / footer. Each of our
 * sections carries its own 84px padding and its own surface colour, so that gap
 * only shows the page background as a stripe between two coloured bands.
 *
 * The block gap still applies *inside* a section, which is where it belongs.
 */
body .wp-site-blocks > * {
	margin-block-start: 0;
}

/* Landing pages: the sections are direct children of the post content. */
.drt-landing .entry-content > * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------- header */

.drt-header {
	padding-block-start: 26px;
}

/*
 * Monogram. Decorative: the wordmark next to it already links home and says
 * the name, so this is hidden from assistive tech rather than repeating it.
 */
.drt-monogram {
	inline-size: 48px;
	block-size: 48px;
	flex: none;
	border: 1px solid var(--wp--preset--color--sage-pale);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: 21px;
	letter-spacing: 1px;
	color: #E4E5DE;
	text-decoration: none;
	transition: color .18s, border-color .18s;
}

.drt-monogram:hover {
	color: var(--wp--preset--color--brass);
	border-color: var(--wp--preset--color--brass);
}

.drt-brand .wp-block-site-title a {
	text-decoration: none;
	color: inherit;
}

.drt-brand .wp-block-site-title a:hover {
	color: var(--wp--preset--color--chalk);
}

/*
 * Hairline under the header. The design system draws it as a single faint
 * rule, not a divider — it separates without being noticed.
 */
.drt-header .wp-block-separator {
	border: 0;
	block-size: 1px;
	background-color: rgba(228, 227, 221, .16);
	opacity: 1;
	color: transparent;
}

.drt-header__brand-line {
	font-size: 15px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--wp--preset--color--sage-muted);
	margin-block-start: 6px;
}

/*
 * Social icons. The glyph is the same colour as its outline, so the pair reads
 * as one quiet object next to the booking button rather than competing with it.
 *
 * sage-pale, not something fainter: at #8F9389 the icons sat at 2.04:1 against
 * sage, where WCAG asks 3.0 for a control's visible boundary. This is 3.87:1
 * and still reads as background next to the chalk menu.
 */
.drt-social__link {
	inline-size: 38px;
	block-size: 38px;
	border: 1px solid var(--wp--preset--color--sage-pale);
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--sage-pale);
	transition: color .18s, border-color .18s;
}

/* Fixed size, not the fluid scale: the header button should not shrink to
   14px on a narrow screen, which is what the global fluid typography does to
   a 19px value. */
.drt-header__actions .wp-block-button__link {
	font-size: 19px;
}

.drt-social__link svg {
	inline-size: 20px;
	block-size: 20px;
}

.drt-social__link:hover,
.drt-social__link:focus-visible {
	color: var(--wp--preset--color--chalk);
	border-color: var(--wp--preset--color--chalk);
}


/* Navigation: the underline is the hover affordance, so links carry no
   text-decoration of their own. */
.drt-nav .wp-block-navigation-item__content {
	text-decoration: none;
	border-block-end: 1px solid transparent;
	padding-block-end: 3px;
	transition: color .18s, border-color .18s;
}

.drt-nav .wp-block-navigation-item__content:hover,
.drt-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--brass);
	border-block-end-color: var(--wp--preset--color--brass);
}

/* Current page: underlined, so the active item is obvious without relying on
   a colour difference alone. */
.drt-nav .current-menu-item > .wp-block-navigation-item__content,
.drt-nav .current_page_item > .wp-block-navigation-item__content,
.drt-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--chalk);
	border-block-end-color: var(--wp--preset--color--brass);
}

/*
 * Submenu — the Conditions dropdown.
 *
 * The header surface is not fixed: it is sage today, and a landing page may
 * want olive or a light band tomorrow. So the dropdown does not hard-code
 * colours — it reads four custom properties, and each surface below sets
 * them. Add a surface, set the four values, and the dropdown follows.
 *
 * Defaults are the dark case, since that is what the header uses now.
 */
.drt-header {
	--drt-menu-bg: var(--wp--preset--color--olive-soft);
	--drt-menu-fg: var(--wp--preset--color--chalk);
	--drt-menu-border: #6F7368;
	--drt-menu-hover-bg: var(--wp--preset--color--sage);
	--drt-menu-hover-fg: var(--wp--preset--color--brass);
}

/* On deep olive the dropdown lifts instead of sinking, or it disappears
   into the header. */
.drt-header.has-olive-background-color {
	--drt-menu-bg: var(--wp--preset--color--sage);
	--drt-menu-border: #7A7E73;
	--drt-menu-hover-bg: var(--wp--preset--color--olive-soft);
}

/* Light headers: ink on paper, bronze for the accent — brass is too pale to
   read on a light surface. */
.drt-header.has-mist-background-color,
.drt-header.has-cream-background-color,
.drt-header.has-paper-background-color {
	--drt-menu-bg: #FFFFFF;
	--drt-menu-fg: var(--wp--preset--color--ink);
	--drt-menu-border: rgba(47, 53, 42, .18);
	--drt-menu-hover-bg: var(--wp--preset--color--mist);
	--drt-menu-hover-fg: var(--wp--preset--color--bronze);
}

/*
 * Core ships `.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container`
 * with a white background and black text. That selector outweighs a plain
 * `.drt-nav .wp-block-navigation__submenu-container`, so the override has to
 * match its shape — hence the `:not(.has-background)` here.
 */
.drt-header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container,
.drt-header .drt-nav .wp-block-navigation__submenu-container {
	background-color: var(--drt-menu-bg);
	color: var(--drt-menu-fg);
	border: 1px solid var(--drt-menu-border);
	border-radius: 10px;
	padding-block: 10px;
	min-inline-size: 246px;
}

.drt-header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container a,
.drt-header .drt-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 9px 20px;
	border-block-end: none;
	color: var(--drt-menu-fg);
	text-decoration: none;
}

.drt-header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container a:hover,
.drt-header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container a:focus-visible,
.drt-header .drt-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.drt-header .drt-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: var(--drt-menu-hover-bg);
	color: var(--drt-menu-hover-fg);
}

/* The hover fill should not poke out of the rounded corners. */
.drt-header .drt-nav .wp-block-navigation__submenu-container {
	overflow: hidden;
}

/*
 * Between the overlay-menu breakpoint and roughly 860px the inline nav still
 * shows, but "Conditions" sits close enough to the right edge that its 246px
 * panel pushes past the viewport and adds a horizontal scrollbar. Anchoring
 * the panel to the right of its parent keeps it on screen.
 */
@media (max-width: 860px) {
	.drt-header .drt-nav .wp-block-navigation__submenu-container {
		inset-inline-start: auto;
		inset-inline-end: 0;
		max-inline-size: min(246px, calc(100vw - 32px));
	}
}

/* ----------------------------------------------------------- typography */

/* Figures that have to line up: prices, durations, GMC number. */
.drt-numeral {
	font-family: var(--wp--preset--font-family--numeral);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.drt-eyebrow {
	font-size: var(--wp--preset--font-size--heading-6);
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--wp--preset--color--bronze);
}

/* On sage and olive the eyebrow flips to brass — bronze goes muddy there. */
.has-sage-background-color .drt-eyebrow,
.has-olive-background-color .drt-eyebrow,
.has-olive-soft-background-color .drt-eyebrow,
.has-clay-background-color .drt-eyebrow {
	color: var(--wp--preset--color--brass);
}

/*
 * Hero standfirst. Not a heading element — it sits under the H1 as running
 * copy — but it reads as display type, so it takes the display face and the
 * same uppercase treatment. Uppercase Italiana needs the tracking: set solid,
 * its narrow caps run together.
 */
/*
 * Sub-heading set in the display face without being a heading element.
 * Used where the design calls for display type but the document outline
 * should not gain a level — "When you see me, you get:" introduces a list,
 * it does not open a section.
 */
.drt-subhead {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	line-height: 1.2;
	color: var(--wp--preset--color--olive);
}

.has-sage-background-color .drt-subhead,
.has-olive-background-color .drt-subhead,
.has-clay-background-color .drt-subhead {
	color: var(--wp--preset--color--sage-pale);
}

.drt-lead {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	line-height: 1.42;
	color: var(--wp--preset--color--bronze);
}

.has-sage-background-color .drt-lead,
.has-olive-background-color .drt-lead,
.has-clay-background-color .drt-lead {
	color: var(--wp--preset--color--brass);
}

.drt-signature {
	font-family: var(--wp--preset--font-family--signature);
	font-weight: 400;
}

/* Headings and body invert on the dark surfaces. Setting this once here beats
   colouring every heading by hand in each pattern. */
.has-sage-background-color :where(h1, h2, h3, h4, h5),
.has-olive-background-color :where(h1, h2, h3, h4, h5),
.has-olive-soft-background-color :where(h1, h2, h3, h4, h5),
.has-clay-background-color :where(h1, h2, h3, h4, h5) {
	color: var(--wp--preset--color--sage-pale);
}

.has-sage-background-color,
.has-olive-background-color,
.has-olive-soft-background-color {
	color: var(--wp--preset--color--chalk);
}

/* Clay is a mid-tone: the mockups set near-white text on it. See the note in
   AGENTS.md — this pairing is below the WCAG threshold and needs a decision. */
.has-clay-background-color {
	color: var(--wp--preset--color--linen);
}

/* --------------------------------------------------------------- links */

/*
 * The global link colour is bronze, which is correct on mist and cream and
 * nearly invisible on sage or olive. Inside a dark section links switch to
 * brass, and the underline is what keeps them findable without relying on
 * colour alone.
 */
.has-sage-background-color a:where(:not(.wp-element-button):not(.drt-monogram):not(.wp-block-site-title a):not(.drt-social__link)),
.has-olive-background-color a:where(:not(.wp-element-button):not(.drt-monogram):not(.wp-block-site-title a):not(.drt-social__link)),
.has-olive-soft-background-color a:where(:not(.wp-element-button):not(.drt-monogram):not(.drt-social__link)) {
	color: var(--wp--preset--color--brass);
	text-decoration-color: rgba(199, 155, 111, .55);
	text-underline-offset: 3px;
}

.has-sage-background-color a:where(:not(.wp-element-button)):hover,
.has-olive-background-color a:where(:not(.wp-element-button)):hover,
.has-olive-soft-background-color a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--brass-pale);
	text-decoration-color: currentColor;
}

/* Light surfaces: keep bronze, just soften the rule under it. */
:where(.has-mist-background-color, .has-cream-background-color, .has-paper-background-color) a:where(:not(.wp-element-button)) {
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------- lists */

.drt-list {
	list-style: none;
	padding-inline-start: 0;
	margin-block: 0;
}

.drt-list li {
	position: relative;
	padding-inline-start: 26px;
	margin-block-end: 16px;
	line-height: 1.6;
}

.drt-list li::before {
	content: "•";
	position: absolute;
	inset-inline-start: 0;
	color: var(--wp--preset--color--bronze);
}

.has-sage-background-color .drt-list li::before,
.has-olive-background-color .drt-list li::before,
.has-clay-background-color .drt-list li::before {
	color: var(--wp--preset--color--brass);
}

/*
 * The quieter list style from the design system: a thin rule in place of a
 * bullet, with more air between items so each promise reads on its own.
 * Drawn as a border rather than an em dash — a real line keeps its weight and
 * length whatever the font does.
 */
.drt-list--dashed li {
	padding-inline-start: 46px;
	margin-block-end: 24px;
}

.drt-list--dashed li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .72em;
	inline-size: 26px;
	block-size: 1px;
	background-color: var(--wp--preset--color--bronze);
}

.has-sage-background-color .drt-list--dashed li::before,
.has-olive-background-color .drt-list--dashed li::before,
.has-clay-background-color .drt-list--dashed li::before {
	background-color: var(--wp--preset--color--brass);
}

/* -------------------------------------------------------- testimonials */

/*
 * Short pull-quotes are display type, not body copy: uppercase, in the
 * heading face, sized between H4 and H3. They sit beside the section title
 * rather than under it, which is what gives the block its rhythm.
 */
.drt-quote-list p {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.32;
	color: var(--wp--preset--color--sage-pale);
	max-inline-size: 46ch;
}

/* Full reviews keep body copy, with the attribution broken onto its own
   lines: name and source on one, the rating below it. Stars on the same line
   as the name read as decoration; on their own they read as a rating. */
.drt-review__quote {
	font-style: italic;
}

.drt-review__meta {
	margin-block-start: 14px !important;
	line-height: 1.5;
}

.drt-review__name {
	display: block;
	color: var(--wp--preset--color--chalk);
}

.drt-review__source {
	display: block;
	color: var(--wp--preset--color--sage-muted);
}

.drt-review__stars {
	display: block;
	margin-block-start: 4px;
	letter-spacing: 2px;
	font-size: 14px;
}

/* --------------------------------------------------------- price table */

.drt-fees {
	inline-size: 100%;
	border-collapse: collapse;
}

.drt-fees td {
	padding: 18px 0;
	border-block-end: 1px solid rgba(199, 155, 111, .28);
	vertical-align: baseline;
}

/* The service name carries the row; duration and price are supporting. */
.drt-fees td:first-child {
	font-size: var(--wp--preset--font-size--heading-5);
	padding-inline-end: 24px;
}

.drt-fees td:last-child {
	text-align: end;
	white-space: nowrap;
}

.drt-fees .drt-fees__price {
	font-family: var(--wp--preset--font-family--numeral);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--heading-4);
	color: var(--wp--preset--color--brass-pale);
}

.drt-fees .drt-fees__duration {
	color: var(--wp--preset--color--sage-muted);
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Note under the table: italic, and large enough to be read rather than
   skipped — it carries the one instruction the table cannot. */
.drt-fees-note {
	font-size: var(--wp--preset--font-size--intro) !important;
	font-style: italic;
	max-inline-size: 52ch;
}

/* -------------------------------------------------------- numbered steps */

.drt-step__number {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 52px;
	line-height: 1;
	letter-spacing: 2px;
	color: var(--wp--preset--color--brass);
	display: block;
	margin-block-end: 20px;
}

/* Number, heading and copy are one unit: tight between the heading and its
   paragraph, roomier above the number that starts the next step. */
.drt-step__title {
	margin-block-end: 12px !important;
}

.drt-step p:last-child {
	margin-block-end: 0;
	max-inline-size: 38ch;
}

.has-mist-background-color .drt-step__number,
.has-cream-background-color .drt-step__number,
.has-paper-background-color .drt-step__number {
	color: var(--wp--preset--color--bronze);
}

/* ------------------------------------------------------------- accordion */

.drt-faq__item {
	border-block-end: 1px solid rgba(47, 53, 42, .18);
}

.drt-faq__item summary {
	cursor: pointer;
	list-style: none;
	padding-block: 22px;
	/* H4 level: the text face has a real semibold, the display face does not. */
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--heading-4);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
}

.drt-faq__item summary::-webkit-details-marker {
	display: none;
}

/*
 * Questions stay open. An accordion hides answers behind a click, and this
 * page is short enough that the answers are worth reading straight through —
 * so there is no toggle marker and no pointer affordance.
 */
.drt-faq__item summary {
	cursor: default;
	pointer-events: none;
}

.drt-faq__answer {
	padding-block-end: 24px;
	max-inline-size: 78ch;
}

/* ------------------------------------------------------------- fees art */

/*
 * Portrait in the fees section.
 *
 * The original pairs the table with an oval portrait. An earlier attempt also
 * reproduced the monogram watermark behind it, but the source file is a JPEG
 * on a flat sage plate — with no alpha channel there is nothing to blend, so
 * it rendered as a grey rectangle across the table. Dropped: the watermark is
 * not worth a second asset and a blend mode to fake transparency.
 *
 * The ellipse is taller than it is wide, as on the old site — a circle reads
 * as an avatar, an oval as a portrait.
 */
/*
 * The old site masks this portrait with a *tilted* ellipse, not an upright
 * one. Rotating the frame and counter-rotating the image inside it keeps the
 * photograph level while the mask leans — the same trick the original uses.
 * The scale compensates for the corners the rotation would otherwise expose.
 */
.drt-fees-portrait figure {
	margin: 0;
	border-radius: 50%;
	overflow: hidden;
	/* Taller than wide, so the tilt reads as a leaning oval rather than a
	   rotated circle. */
	aspect-ratio: 1 / 1.42;
	transform: rotate(40deg);
	/* The rotated frame is wider than its box; pull it in so it does not
	   crowd the table beside it. The steeper the tilt, the more room it
	   needs. */
	inline-size: 72%;
	margin-inline: auto;
}

.drt-fees-portrait img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center 26%;
	/* Counter-rotation keeps the face level; the scale covers the corners the
	   rotation would otherwise leave empty (computed for 40°). */
	transform: rotate(-40deg) scale(1.73);
}

/* ------------------------------------------------------- partner logos */

/*
 * Six logos that arrive at six different aspect ratios and pixel sizes. A
 * shared max-height is what makes them read as one row; setting width instead
 * would make the wide wordmarks tower over the compact ones.
 */
.drt-logos {
	align-items: center;
	justify-items: center;
	gap: 44px 64px;
}

.drt-logos .wp-block-image {
	margin: 0;
	inline-size: 100%;
}

.drt-logos img {
	max-block-size: 58px;
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
	display: block;
	margin-inline: auto;
}

/* The Regenerus mark is a lighter, smaller drawing than the rest and reads as
   undersized at the shared height, so it gets a little more room. */
.drt-logos img[src*="regenerus"] {
	max-block-size: 44px;
}

@media (max-width: 781px) {
	.drt-logos {
		gap: 32px 32px;
	}

	.drt-logos img {
		max-block-size: 44px;
	}
}

/* ------------------------------------------------------------- contact */

/*
 * Sub-headings in the contact block carry a hairline beneath them, as in the
 * design system. Drawn with a border rather than a separate element so the
 * rule always matches the heading's width.
 */
.drt-underlined {
	padding-block-end: 18px;
	border-block-end: 1px solid rgba(228, 227, 221, .28);
}

:where(.has-mist-background-color, .has-cream-background-color) .drt-underlined {
	border-block-end-color: rgba(47, 53, 42, .2);
}

/* Address copy: slightly larger than body, and narrow enough to read in two
   or three comfortable lines. */
.drt-address {
	font-size: var(--wp--preset--font-size--intro);
	max-inline-size: 46ch;
}

.drt-address--lines {
	line-height: 1.75;
}

/* ------------------------------------------------------------ utilities */

/* Running copy caps at 68 characters, per the type scale in the theme guide. */
.drt-measure {
	max-inline-size: 68ch;
}

/* Centred running copy: same measure as .drt-measure, but centred in the
   column rather than flush left. */
.drt-measure-centre {
	max-inline-size: 68ch;
	margin-inline: auto;
}

/* A centred heading that should not run the full width of the section: long
   section titles read better broken over two lines than as one wide band. */
.drt-heading-narrow {
	max-inline-size: 22ch;
	margin-inline: auto;
}

/* Closing line of a section — italic, accent-coloured, centred. */
.drt-closing {
	font-style: italic;
	text-align: center;
	max-inline-size: 76ch;
	margin-inline: auto;
	color: var(--wp--preset--color--bronze);
}

.has-sage-background-color .drt-closing,
.has-olive-background-color .drt-closing,
.has-clay-background-color .drt-closing {
	color: var(--wp--preset--color--brass);
}

/* The design system says: no shadows anywhere. Focus is a brass ring. */
:where(a, button, summary, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--brass);
	outline-offset: 2px;
}

/* The map is heavy and always below the fold — never let it block paint. */
.drt-map iframe {
	inline-size: 100%;
	block-size: 300px;
	border: 0;
	display: block;
}

.drt-map__link {
	margin-block-start: 12px;
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 781px) {
	.drt-map iframe {
		block-size: 240px;
	}
}

/* ------------------------------------------------------ landing sections */

/*
 * Hero. A cover block with the photo behind it; the heading carries the
 * display treatment from the design system. The mockups set a short
 * decorative word here ("IBS") and moved the real title into the section
 * below — we keep the original page's H1 instead, so the page that ranks for
 * "IBS doctor London" still says so in its H1.
 */
.drt-hero .drt-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(38px, 6vw, 68px);
	line-height: 1.04;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--wp--preset--color--linen);
	text-shadow: 0 2px 14px rgba(0, 0, 0, .3);
	max-inline-size: 16em;
	margin-inline: auto;
}

.drt-hero .drt-hero__sub {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(19px, 2.2vw, 26px);
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--wp--preset--color--linen);
	margin-block-start: 22px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

/*
 * Lists that the original split across two blocks to fake columns. Merged back
 * into one list and flowed over two CSS columns, which keeps the reading order
 * and collapses to one column on a narrow screen without any extra markup.
 */
.drt-list--columns {
	columns: 2;
	column-gap: 64px;
}

.drt-list--columns li {
	break-inside: avoid;
}

@media (max-width: 781px) {
	.drt-list--columns {
		columns: 1;
	}
}

/* The intro photo beside the opening copy. */
.drt-portrait img {
	inline-size: 100%;
	block-size: 420px;
	object-fit: cover;
	border-radius: 16px;
}

@media (max-width: 781px) {
	.drt-portrait img {
		block-size: 280px;
	}
}

/* A hairline between two topics inside one section. */
.drt-rule {
	border: 0;
	block-size: 1px;
	background-color: currentColor;
	opacity: .22;
	margin-block: 52px;
}

/* Pull-quote inside a copy column. */
.drt-quote {
	border-inline-start: 2px solid var(--wp--preset--color--brass);
	padding-inline-start: 28px;
	margin-block: 8px;
}

.drt-quote__text {
	font-family: var(--wp--preset--font-family--display);
	font-size: 26px;
	line-height: 1.34;
}

.drt-quote__source {
	opacity: .78;
}

/* A patient review standing alone as its own band. */
.drt-testimonial__text {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(21px, 2.4vw, 28px);
	line-height: 1.46;
}

/*
 * Buttons on a light surface.
 *
 * The default button is pale — it was designed against the dark sage and olive
 * bands, which is all the home page has. The landing pages put the same button
 * on white, sand and mist, where a mist-coloured button all but disappears.
 * On those surfaces it takes the dark treatment from the mockups instead.
 */
.has-white-background-color .wp-block-button__link,
.has-paper-background-color .wp-block-button__link,
.has-linen-background-color .wp-block-button__link,
.has-cream-background-color .wp-block-button__link,
.has-sand-background-color .wp-block-button__link,
.has-mist-background-color .wp-block-button__link,
.has-sage-pale-background-color .wp-block-button__link {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--linen);
}

.has-white-background-color .wp-block-button__link:hover,
.has-paper-background-color .wp-block-button__link:hover,
.has-linen-background-color .wp-block-button__link:hover,
.has-cream-background-color .wp-block-button__link:hover,
.has-sand-background-color .wp-block-button__link:hover,
.has-mist-background-color .wp-block-button__link:hover,
.has-sage-pale-background-color .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--olive);
	border-color: var(--wp--preset--color--olive);
	color: var(--wp--preset--color--linen);
}

/*
 * The heading parked in the narrow left column of a split section.
 *
 * Core sets overflow-wrap: break-word on columns, which in a 320px column at
 * the full H2 size broke "TREATMENT" across two lines mid-word. The size now
 * scales with the viewport and words are never broken: a heading running a
 * little long is always better than a severed word.
 */
.drt-split__heading {
	font-size: clamp(28px, 3vw, 40px);
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
}

/*
 * Numbered steps, as used on the functional medicine page. Same parts as the
 * home page's three-step row, but there are five of them here, so they run in
 * a two-column grid rather than one row of narrow columns.
 */
.drt-steps {
	gap: 40px 64px;
	margin-block-start: 40px;
}

@media (max-width: 781px) {
	.drt-steps {
		grid-template-columns: 1fr;
	}
}

/*
 * A photo sitting in the flow of a full-width section. Left alone it fills the
 * 1080px content column, which for a portrait shot means a picture over a
 * thousand pixels tall.
 */
.drt-band-image {
	max-inline-size: 520px;
	margin-inline: auto;
	margin-block: 40px;
}

/* In the two-column step grid the columns are wide enough for full measure. */
.drt-steps .drt-step p:last-child {
	max-inline-size: none;
}

/*
 * Transparent header over a photo hero.
 *
 * On the landing pages the original let the hero photo run up behind the
 * header, with no band of colour between the two. `drt-has-hero` is set in
 * functions.php on pages whose content opens with a cover block.
 *
 * Only from 1024px up. Below that the header wraps onto two or three rows
 * (measured: 145px at 1024px and wider, 231px at 900px, 296px at 782px), so
 * there is no single height to reserve — and a header that tall over the
 * photo would swallow the hero anyway. Narrow screens keep the solid band.
 */
@media (min-width: 1024px) {
	.drt-has-hero {
		/* The header's own height, reserved as padding inside the hero so the
		   heading never slides underneath it. */
		--drt-header-h: 145px;
	}

	.drt-has-hero .wp-site-blocks {
		position: relative;
	}

	.drt-has-hero .drt-header {
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
		z-index: 5;
		/* Core declares .has-*-background-color with !important, so the only
		   way to drop the band without editing the header markup — which every
		   other template shares — is to match it. */
		background-color: transparent !important;
	}

	/* The cover block carries min-height inline, so the padding is added on
	   top of the 330px rather than eating into it. */
	.drt-has-hero .drt-hero {
		padding-block-start: var(--drt-header-h);
	}

	/* The rule under the navigation, a touch stronger than on the solid band:
	   over a photo the faint version disappears. */
	.drt-has-hero .drt-header .wp-block-separator {
		background-color: rgba(228, 227, 221, .3);
	}

	/* Keep the header legible wherever the photo happens to be light. */
	.drt-has-hero .drt-header .wp-block-site-title,
	.drt-has-hero .drt-header__brand-line,
	.drt-has-hero .drt-nav {
		text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
	}
}

/* ---------------------------------------------------------- contact form */

/*
 * Fluent Forms ships with its own look — white pill inputs and a bright blue
 * submit button — which belongs to no part of this design. The form sits on
 * sage, sand and mist surfaces depending on the page, so it is drawn with
 * currentColor and transparency rather than fixed colours, and inherits
 * whatever the surface sets.
 */
.fluentform .ff-el-group {
	margin-block-end: 24px;
}

.fluentform .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 400;
	opacity: .85;
	margin-block-end: 8px;
}

.fluentform .ff-el-form-control {
	font-family: var(--wp--preset--font-family--body);
	font-size: 22px;
	/* The plugin sets line-height: 1, which crowds the text against the box. */
	line-height: 1.4;
	color: inherit;
	background-color: rgba(255, 255, 255, .14);
	border: 1px solid currentColor;
	border-radius: 6px;
	padding: 14px 18px;
	box-shadow: none;
	transition: border-color .18s, background-color .18s;
}

/* The border at full strength is heavier than anything else on the page. */
.fluentform .ff-el-form-control {
	border-color: color-mix(in srgb, currentColor 38%, transparent);
}

/*
 * Focus. The plugin's own rule is
 *   .ff-el-form-control:focus { background: #fff; color: var(--fluentform-secondary) }
 * — a white box with dark text, which assumes the form sits on a white page.
 * Ours sits on sage and olive, so the background is overridden here; `color`
 * has to be restated too, otherwise the plugin's dark text wins on focus and
 * what you are typing turns nearly unreadable.
 */
.fluentform .ff-el-form-control:focus {
	color: inherit;
	border-color: var(--wp--preset--color--brass);
	background-color: rgba(255, 255, 255, .2);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.fluentform .ff-el-form-control::placeholder {
	color: inherit;
	opacity: .45;
}

.fluentform textarea.ff-el-form-control {
	min-block-size: 140px;
	resize: vertical;
}

/*
 * Submit button: the same object as every other button on the site.
 *
 * Fluent Forms prints its own rule inline, after this stylesheet:
 *   form.fluent_form_1 .ff-btn-submit:not(.ff_btn_no_style) { ... }
 * Equal specificity would lose on source order, so these selectors carry one
 * extra class to outrank it. Note that `.fluentform` is the wrapper div, not
 * the <form> — matching `form.fluentform` silently selects nothing. It also drives the colour through
 * --fluentform-primary, which is set here too for anything else that reads it.
 */
.fluentform {
	--fluentform-primary: var(--wp--preset--color--ink);
}

.wp-site-blocks .fluentform form .ff-btn-submit:not(.ff_btn_no_style) {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--heading-5);
	font-weight: 400;
	letter-spacing: .4px;
	background-color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 8px;
	color: var(--wp--preset--color--linen);
	padding: 13px 42px;
	transition: background-color .18s, border-color .18s;
}

.wp-site-blocks .fluentform form .ff-btn-submit:not(.ff_btn_no_style):hover,
.wp-site-blocks .fluentform form .ff-btn-submit:not(.ff_btn_no_style):focus-visible {
	background-color: var(--wp--preset--color--olive);
	border-color: var(--wp--preset--color--olive);
	color: var(--wp--preset--color--linen);
}

/* On the dark bands the ink button disappears into the background. */
.has-sage-background-color .fluentform form .ff-btn-submit:not(.ff_btn_no_style),
.has-olive-background-color .fluentform form .ff-btn-submit:not(.ff_btn_no_style) {
	background-color: var(--wp--preset--color--chalk);
	border-color: var(--wp--preset--color--chalk);
	color: var(--wp--preset--color--ink);
}

.has-sage-background-color .fluentform form .ff-btn-submit:not(.ff_btn_no_style):hover,
.has-olive-background-color .fluentform form .ff-btn-submit:not(.ff_btn_no_style):hover {
	background-color: var(--wp--preset--color--linen);
	border-color: var(--wp--preset--color--linen);
	color: var(--wp--preset--color--ink);
}

/* Required marker and validation messages. */
.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-is-required.asterisk-left label:before {
	color: var(--wp--preset--color--bronze);
}

.has-sage-background-color .fluentform .ff-el-is-required.asterisk-right label:after,
.has-olive-background-color .fluentform .ff-el-is-required.asterisk-right label:after {
	color: var(--wp--preset--color--brass);
}

.fluentform .error.text-danger,
.fluentform .ff-el-is-error .text-danger {
	font-size: 16px;
	color: var(--wp--preset--color--bronze);
}

.has-sage-background-color .fluentform .error.text-danger,
.has-olive-background-color .fluentform .error.text-danger {
	color: var(--wp--preset--color--brass-pale);
}

.ff-message-success {
	font-size: 19px;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 6px;
	padding: 20px 24px;
	background-color: rgba(255, 255, 255, .12);
	color: inherit;
}

/* ------------------------------------------------------- booking widget */

/*
 * Semble's booking widget, embedded on /book.
 *
 * The widget draws a white card on a #F5F4F2 field of its own, which is within
 * a point of the `paper` token — so on a paper section the seam between the
 * page and the embed disappears, and the card reads as part of the page rather
 * than as a pasted-in box. Keep this section on `paper`.
 *
 * Height is fixed because Semble sends no height with its messages: the
 * calendar step is short, the patient-details step that follows is much
 * taller, and 880px holds the taller one without leaving a field of empty
 * grey under the shorter one. Anything taller still scrolls inside the frame.
 */
.drt-booking__frame {
	inline-size: 100%;
	block-size: 600px;
	border: 0;
	display: block;
	background-color: var(--wp--preset--color--paper);
}

@media (max-width: 781px) {
	.drt-booking__frame {
		block-size: 560px;
	}
}

/* The way out of the frame: small and quiet while the widget is working. */
.drt-booking__escape {
	margin-block-start: 18px;
	text-align: center;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 72%, transparent);
}

/*
 * Ten seconds with no word from the widget and the same link becomes the
 * obvious thing to do. Semble serves the widget with a report-only CSP of
 * `frame-ancestors 'none'`; if that is ever enforced, this is what the patient
 * sees instead of a blank rectangle.
 */
.drt-booking--stalled .drt-booking__escape {
	margin-block-start: 28px;
	padding: 22px 26px;
	border: 1px solid var(--wp--preset--color--bronze);
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--intro);
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------- booking page header */

/*
 * /book runs a reduced header: monogram and name, no menu, no social icons,
 * no "Book an appointment" button — that button leads to the page the patient
 * is already on. The point is vertical space. The full header plus the dark
 * hero band pushed the calendar's lower half off a laptop screen; this gets
 * the widget to roughly 250px from the top instead of 440px.
 *
 * The wordmark still links home, so there is a way back, and the footer below
 * still carries the privacy policy — a page that collects a patient's name,
 * phone and reason for the appointment should not be anonymous.
 */
.drt-header--booking {
	padding-block-start: 20px;
}

.drt-header--booking .drt-brand {
	padding-block-end: 2px;
}

/* The brand sits alone on the row, so it needs no flex sizing of its own —
   but the monogram should not stretch to the row height. */
.drt-header--booking .drt-monogram {
	inline-size: 42px;
	block-size: 42px;
	font-size: 19px;
}

/*
 * On a phone the brand line wraps to three lines and the reduced header grows
 * to 163px — more than the calendar card it is supposed to make room for. The
 * name alone identifies the practice well enough at that width.
 */
@media (max-width: 781px) {
	.drt-header--booking .drt-header__brand-line {
		display: none;
	}
}

/* The heading that replaces the hero band. It sits on the same `paper`
   surface as the widget, so the page opens on the calendar rather than on a
   dark stripe the patient has to scroll past. */
.drt-booking-intro {
	text-align: center;
}

@media (max-width: 781px) {
	/*
	 * Pull the frame out to the edges of the screen.
	 *
	 * On a 390px screen Semble's card came out 261px wide. 80px of what it
	 * lost is this section's own horizontal padding, and the card keeps a
	 * further ~24px inset either side that we cannot reach from outside — so
	 * cancelling our padding is the whole of the available gain, and it takes
	 * the card to ~342px. The heading above keeps its padding; only the frame
	 * goes full width.
	 */
	.drt-landing .drt-booking {
		/* Core's constrained layout sets `margin-left/right: auto !important`
		   on every child of the section, so cancelling the padding has to
		   shout back. */
		margin-inline: -40px !important;
		max-inline-size: none;
	}

	.drt-booking__escape {
		padding-inline: 24px;
	}

	/*
	 * Here the H1 is a label above the calendar, not a hero line. At the full
	 * fluid size it runs to two display lines and pushes the widget down the
	 * screen it was meant to fit on, which is the whole point of this page's
	 * layout.
	 */
	.drt-booking-intro h1 {
		font-size: 30px;
		letter-spacing: 1.5px;
	}

	/* Inline styles from the block markup, so these have to shout. */
	.drt-booking-intro {
		margin-block-end: 24px !important;
	}

	#booking {
		padding-block-start: 28px !important;
	}
}