/* The live site's sections as block styles (styles/blocks/*.json registers each; the rules that theme.json can't say
   are here) and the few section classes the home page uses. Measured on the live home page (Elementor post 100) on
   2026-11-13: docs/live-design.md, log/agents/2026-11-13-theme-developer-home/notes.md. Loaded on every page and in
   the editor (functions.php). Sizes from theme.json's presets and custom radii; px only where the live design is a
   fixed measure (icons, card padding).
   Icons are CSS masks from assets/icons/, so they take a colour from here: doctor, location, warning, hours, patients
   and arrow-right are the live site's own files; pin, phone and mail are Material Symbols (Apache-2.0), in place of
   the live site's Font Awesome icons; chevron-down is drawn for this theme. */

/* ── Text styles ──────────────────────────────────────────────────────────────────────────────────────────────── */

/* Kicker (the hero's H1, "Neurologie & Psychiatrie in Rottweil"): the live kicker line, text-sized, near-black,
   with a short line after it. */
:is(h1, h2, h3, h4, p).is-style-ub-kicker {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 400;
	line-height: 1.3;
	color: var(--wp--preset--color--deep);
}
.is-style-ub-kicker::after { /* after the last word, wherever the line wraps (phones) */
	content: "";
	display: inline-block;
	inline-size: 48px;
	margin-inline-start: 10px;
	border-block-start: 1px solid currentColor;
	vertical-align: middle;
}

/* Display: the hero's big words as text, not headings (strings file §1). */
p.is-style-ub-display {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 400;
	line-height: 1.1;
	text-wrap: balance;
}
p.is-style-ub-display:not(.has-text-color) { color: var(--wp--preset--color--deep); }
p.is-style-ub-display + p.is-style-ub-display { margin-block-start: 0; } /* the lines stack as one slogan, as live */

/* Card title: the doctors' names, the contact lines' labels (Poppins 18, as live). */
:is(h2, h3, h4, h5, h6, p).is-style-ub-card-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 400;
	line-height: 1.3;
}
:is(h2, h3, h4, h5, h6, p).is-style-ub-card-title:not(.has-text-color) { color: var(--wp--preset--color--deep); }
.has-text-color :is(h2, h3, h4, h5, h6, p).is-style-ub-card-title:not(.has-text-color) { color: inherit; }

/* Small capitals: the help lines' names. Phone number: their numbers, near-black and semibold; a number is a link
   to call it, underlined on hover. */
p.is-style-ub-caps { font-size: var(--wp--preset--font-size--lead); line-height: 1.3; text-transform: uppercase; }
p.is-style-ub-caps:not(.has-text-color) { color: var(--wp--preset--color--deep); }
p.is-style-ub-number { font-size: var(--wp--preset--font-size--lead); font-weight: 600; line-height: 1.3; color: var(--wp--preset--color--deep); font-variant-numeric: tabular-nums; }
p.is-style-ub-number a { color: inherit; text-decoration: none; }
p.is-style-ub-number a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* ── Cards ────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* Card with icon: the live icon boxes (the doctors, the location). A 1 px gold border, 30 px corners, 20 px around,
   the icon (65 px) left and vertically centred, gold (or the card's text colour on a coloured card); under 768 px
   the icon above the text. The icon is a class on the card: ub-icon-doctor, ub-icon-location, ub-icon-warning … */
.wp-block-group:is(.is-style-ub-icon-card, .is-style-ub-info-card) {
	--ub-icon-size: 65px;
	--ub-icon-gap: 20px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-block-size: calc(var(--ub-icon-size) + 2 * var(--ub-icon-pad, 20px));
	padding: var(--ub-icon-pad, 20px) var(--ub-icon-pad, 20px) var(--ub-icon-pad, 20px) calc(var(--ub-icon-pad, 20px) + var(--ub-icon-size) + var(--ub-icon-gap));
}
.wp-block-group:is(.is-style-ub-icon-card, .is-style-ub-info-card) > * { margin-block: 0; }
.wp-block-group:is(.is-style-ub-icon-card, .is-style-ub-info-card) > * + * { margin-block-start: 10px; }
.wp-block-group:is(.is-style-ub-icon-card, .is-style-ub-info-card)::before {
	content: "";
	position: absolute;
	inset-inline-start: var(--ub-icon-pad, 20px);
	inset-block-start: 50%;
	inline-size: var(--ub-icon-size);
	block-size: var(--ub-icon-size);
	translate: 0 -50%;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--ub-icon, none) center / contain no-repeat;
	mask: var(--ub-icon, none) center / contain no-repeat;
}
.wp-block-group:is(.is-style-ub-icon-card, .is-style-ub-info-card).has-primary-background-color::before { background-color: currentColor; } /* white on the gold card */
@media (max-width: 767px) {
	.wp-block-group.is-style-ub-icon-card { padding: calc(var(--ub-icon-pad, 20px) + var(--ub-icon-size) + var(--ub-icon-gap)) var(--ub-icon-pad, 20px) var(--ub-icon-pad, 20px); }
	.wp-block-group.is-style-ub-icon-card::before { inset-block-start: var(--ub-icon-pad, 20px); translate: none; }
}

/* Info line with icon: the contact section's rows (address, phone, e-mail …): 10 px corners, a 34 px icon left. A
   phone number or e-mail in it (a "Text link" button bound to the practice's facts) reads as the row's text, as live,
   underlined on hover. */
.wp-block-group.is-style-ub-info-card { --ub-icon-size: 34px; --ub-icon-gap: 14px; --ub-icon-pad: 12px; padding-block: 14px; }
.wp-block-group.is-style-ub-info-card > * + * { margin-block-start: 4px; }
.wp-block-group.is-style-ub-info-card .wp-block-button.is-style-ub-link > .wp-block-button__link { min-block-size: 24px; color: inherit; text-decoration: none; }
.wp-block-group.is-style-ub-info-card .wp-block-button.is-style-ub-link > .wp-block-button__link:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.ub-icon-doctor { --ub-icon: url("icons/doctor.svg"); }
.ub-icon-location { --ub-icon: url("icons/location.svg"); }
.ub-icon-warning { --ub-icon: url("icons/warning.svg"); }
.ub-icon-hours { --ub-icon: url("icons/hours.svg"); }
.ub-icon-patients { --ub-icon: url("icons/patients.svg"); }
.ub-icon-pin { --ub-icon: url("icons/pin.svg"); }
.ub-icon-phone { --ub-icon: url("icons/phone.svg"); }
.ub-icon-mail { --ub-icon: url("icons/mail.svg"); }

/* The Swiss section's note ("Praktische Hinweise"): a cream box, the warning icon (45 px) left, small text. */
.wp-block-group.is-style-ub-icon-card.ub-icon-warning { --ub-icon-size: 45px; --ub-icon-pad: 15px; }

/* Photo card: the Supervision and Swiss cards. The photo on top, as wide as the card, 30 px corners like the card;
   the text below with 25 px around it (20 px on phones). In a column with several cards (ub-stack-fill) the cards
   share its height, as live. */
.wp-block-group.is-style-ub-photo-card { display: flex; flex-direction: column; overflow: hidden; }
.wp-block-group.is-style-ub-photo-card > * { margin-block: 0; }
.wp-block-group.is-style-ub-photo-card > .wp-block-image { flex: none; }
.wp-block-group.is-style-ub-photo-card > .wp-block-image img { display: block; inline-size: 100%; border-radius: var(--wp--custom--radius--card, 30px); }
.wp-block-group.is-style-ub-photo-card > .wp-block-group { flex: 1 1 auto; padding: 25px; }
@media (max-width: 767px) {
	.wp-block-group.is-style-ub-photo-card > .wp-block-group { padding: 20px; }
}
.wp-block-column > .wp-block-group.is-style-ub-photo-card:only-child { block-size: 100%; box-sizing: border-box; } /* cards in a row line up */
.ub-stack-fill { display: flex; flex-direction: column; gap: 20px; }
.ub-stack-fill > * { flex: 1 1 auto; margin-block: 0 !important; }

/* Phone line card (Hilfe & Notfallkontakte): 5 px corners, 25 px around (15 on phones), 10 px between the lines. */
.wp-block-group.is-style-ub-hotline { display: flex; flex-direction: column; gap: 10px; }
.wp-block-group.is-style-ub-hotline > * { margin-block: 0; }
@media (max-width: 767px) {
	.wp-block-group.is-style-ub-hotline { padding: 15px; }
}

/* ── Lists ────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* Numbered circles: "Wo suche ich zuerst Hilfe?" (the live site's number icons, as a real ordered list). */
ol.is-style-ub-steps { display: flex; flex-direction: column; gap: 10px; margin-inline: 0; padding: 0; list-style: none; counter-reset: ub-step; }
ol.is-style-ub-steps > li { position: relative; margin: 0; padding-inline-start: 36px; counter-increment: ub-step; }
ol.is-style-ub-steps > li::before {
	content: counter(ub-step);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	inline-size: 25px;
	block-size: 25px;
	border-radius: 50%;
	background: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--on-deep);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 25px;
	text-align: center;
}

/* Tags: the small pills under the cards' text (live: buttons that go nowhere, here a list). A gold border, the text in
   the gold for text (15 px: small text), on cream in a white card; dark on white on the gold band. */
ul.is-style-ub-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-inline: 0; padding: 0; list-style: none; }
ul.is-style-ub-tags > li {
	margin: 0;
	padding: 7px 20px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--button, 50px);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-text);
	font-size: var(--wp--custom--font--ui);
	font-weight: 300;
	line-height: 1.3;
	text-transform: uppercase;
}
.ub-band-swiss ul.is-style-ub-tags > li { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); }

/* ── Foldable parts (core Details: readable and usable without JavaScript) ────────────────────────────────────── */

details:is(.is-style-ub-bar, .is-style-ub-faq) > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	list-style: none;
	cursor: pointer;
}
details:is(.is-style-ub-bar, .is-style-ub-faq) > summary::-webkit-details-marker { display: none; }
details:is(.is-style-ub-bar, .is-style-ub-faq) > summary::after {
	content: "";
	flex: none;
	inline-size: 20px;
	block-size: 20px;
	background-color: currentColor;
	-webkit-mask: url("icons/chevron-down.svg") center / contain no-repeat;
	mask: url("icons/chevron-down.svg") center / contain no-repeat;
}
details:is(.is-style-ub-bar, .is-style-ub-faq)[open] > summary::after { rotate: 180deg; }
@media (prefers-reduced-motion: no-preference) {
	html:not([data-ub-motion="off"]) details:is(.is-style-ub-bar, .is-style-ub-faq) > summary::after {
		transition: rotate 0.2s var(--wp--custom--motion--ease, cubic-bezier(0.22, 1, 0.36, 1));
	}
	html:not([data-ub-motion="off"]) details:is(.is-style-ub-bar, .is-style-ub-faq) > summary {
		transition: background-color 0.2s var(--wp--custom--motion--ease, cubic-bezier(0.22, 1, 0.36, 1)), color 0.2s var(--wp--custom--motion--ease, cubic-bezier(0.22, 1, 0.36, 1));
	}
}

/* Bar: "Telefonnummern", "Für Fachkräfte", "Leistungen für die Schweiz": a white bar, 1 px gold border, 10 px
   corners, the title in the heading face (28 px), a chevron right; its content 20 px below. */
details.is-style-ub-bar > summary {
	padding: 15px 20px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--input, 10px);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--deep);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.3;
}
details.is-style-ub-bar > summary:hover { background: color-mix(in srgb, var(--wp--preset--color--primary) 7%, var(--wp--preset--color--surface)); }
details.is-style-ub-bar > :not(summary) { margin-block-start: 20px; }

/* Question (Häufige Fragen): a soft beige bar (10 px corners), the question in the heading face (24 px); open or
   hovered, the bar turns gold with white text; the answer on the same beige, a gold line under it. */
details.is-style-ub-faq { border-radius: var(--wp--custom--radius--input, 10px); background: var(--wp--preset--color--surface-alt); }
details.is-style-ub-faq > summary {
	padding: 15px 20px;
	border-radius: var(--wp--custom--radius--input, 10px);
	color: var(--wp--preset--color--deep);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}
details.is-style-ub-faq > summary::after { color: var(--wp--preset--color--primary); }
details.is-style-ub-faq > summary:hover,
details.is-style-ub-faq[open] > summary { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); }
details.is-style-ub-faq > summary:hover::after,
details.is-style-ub-faq[open] > summary::after { color: inherit; }
details.is-style-ub-faq[open] { padding-block-end: 20px; border-block-end: 1px solid var(--wp--preset--color--primary); }
details.is-style-ub-faq[open] > summary { border-end-start-radius: 0; border-end-end-radius: 0; }
details.is-style-ub-faq > :not(summary) { margin-block: 20px 0; padding-inline: 20px; }

/* ── Buttons ──────────────────────────────────────────────────────────────────────────────────────────────────── */

/* Outline with arrow ("Unsere Leistungen →"): the Outline look and the live site's long arrow after the text. */
.wp-block-button.is-style-ub-outline-arrow > .wp-block-button__link { gap: 10px; }
.wp-block-button.is-style-ub-outline-arrow > .wp-block-button__link::after {
	content: "";
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	background-color: currentColor;
	-webkit-mask: url("icons/arrow-right.svg") center / contain no-repeat;
	mask: url("icons/arrow-right.svg") center / contain no-repeat;
}
:root :where(.wp-block-button.is-style-ub-outline-arrow > .wp-block-button__link:hover, .wp-block-button.is-style-ub-outline-arrow > .wp-block-button__link:focus-visible) {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

/* Document (the five forms to download): 10 px corners, the text centred on one or two lines; on phones each button
   takes the full width, as live. */
.wp-block-button.is-style-ub-document > .wp-block-button__link { text-align: center; }
@media (max-width: 767px) {
	.wp-block-buttons > .wp-block-button.is-style-ub-document { flex: 1 1 100%; }
	.wp-block-buttons > .wp-block-button.is-style-ub-document > .wp-block-button__link { inline-size: 100%; }
}

/* ── Tabs (core Tabs; inc/tabs.php makes them readable without JavaScript) ─────────────────────────────────────── */

/* Every Tabs block: the tabs as the services' pills: a 1 px gold border, near-black text; the selected one near-black
   with white text (as the live site's active pill), the others a light gold on hover. The block's own border, colour
   and padding settings stay. */
.wp-block-tab-list button[role="tab"] {
	min-block-size: 40px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: transparent;
	color: var(--wp--preset--color--deep);
}
.wp-block-tab-list button[role="tab"]:not([aria-selected="true"]):hover { background: color-mix(in srgb, var(--wp--preset--color--primary) 7%, transparent); }
.wp-block-tab-list button[role="tab"][aria-selected="true"] {
	border-color: var(--wp--preset--color--deep) !important; /* over a border colour setting, which core prints !important */
	background: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--on-deep);
	font-weight: 600;
}
.wp-block-tab-list button[role="tab"]::before { content: none; } /* core's underline under the selected tab */
@media (prefers-reduced-motion: no-preference) {
	html:not([data-ub-motion="off"]) .wp-block-tab-list button[role="tab"] { transition: background-color 0.2s var(--wp--custom--motion--ease, ease-out), color 0.2s var(--wp--custom--motion--ease, ease-out); }
}
.wp-block-tabs > .wp-block-tab-panels { margin-block-start: var(--wp--preset--spacing--30); }

/* Gold buttons (the FAQ's "Deutschland / Schweiz", as live): gold with white capitals, 10 px corners; the selected
   one, and a hovered one, white with the gold for text (15 px capitals: small text). */
.wp-block-tabs.is-style-ub-buttons .wp-block-tab-list { gap: 10px; }
.wp-block-tabs.is-style-ub-buttons .wp-block-tab-list button[role="tab"] {
	min-block-size: 50px;
	padding: 15px 35px;
	border-color: var(--wp--preset--color--primary) !important;
	border-radius: var(--wp--custom--radius--input, 10px);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-size: var(--wp--custom--font--ui);
	font-weight: 300;
	line-height: 1.3;
	text-transform: uppercase;
}
.wp-block-tabs.is-style-ub-buttons .wp-block-tab-list button[role="tab"]:is([aria-selected="true"], :hover) {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-text);
}

/* ── Columns ──────────────────────────────────────────────────────────────────────────────────────────────────── */

/* Reversed on phones: where columns stack (under 782 px) the last comes first (Team's photo before its text). */
@media (max-width: 781px) {
	.wp-block-columns.is-style-ub-reverse-mobile { flex-direction: column-reverse; }
}

/* ── Home page sections ───────────────────────────────────────────────────────────────────────────────────────── */

/* Text the live site centres once its sections stack (section headings and intros, Team's text): here from 781 px
   down, where core's columns stack (live stacked from 1024 px). */
@media (max-width: 781px) {
	.ub-center-mobile, .ub-center-mobile :is(h2, p) { text-align: center; }
}

/* The Swiss band: gold, 50 px corners (the block's settings), the flag top right as its background image (20 %
   strong, baked into the file); its cards' parts never overflow the corners. The intro text takes 65 % of the width
   on wide screens, as live. */
.ub-band-swiss { overflow: hidden; }
@media (min-width: 1025px) {
	.ub-band-swiss__intro > * { max-inline-size: 65%; }
}

/* A link inside a card's running text is underlined: on a coloured card it has the text's colour (the Gutachten card's
   "Rufen Sie uns an."), and the gold of a link in a phone line card's text is too close to the text colour alone. */
.wp-block-group:is(.has-background, .is-style-ub-hotline):not(.ub-form-card) p:not(.is-style-ub-number) a { text-decoration: underline; text-underline-offset: 0.2em; }

/* The contact form on its gold card: white fields without a border, white labels, the button white with dark text
   (as live); the privacy note in the card's text colour. */
.ub-form-card .ub-form__label { font-weight: 400; }
.ub-form-card .wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	border-color: var(--wp--preset--color--surface);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}
.ub-form-card .wpcf7 .wpcf7-submit {
	border-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--input, 10px);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--deep);
}
.ub-form-card .wpcf7 .wpcf7-submit:hover { border-color: var(--wp--preset--color--deep); background: var(--wp--preset--color--deep); color: var(--wp--preset--color--on-deep); }
.ub-form-card .ub-form__privacy { opacity: 1; }