/* Site CSS for what theme.json can't express. Keep it small: tokens and block styles belong in theme.json.
   The design is the live site's (docs/live-design.md, measured 2026-11-13). */

/* The keyboard's focus ring (UB Kit draws it, 3 px): near-black on the cream and the gold, white on the dark panel.
   The gold itself is 2.3:1 on the cream, under the 3:1 a focus ring needs.
   Gold text that is small (links, eyebrows, the menu's current and hovered item, small labels) is theme.json's
   "Gold for text" (primary-text, #886524: 4.7:1 on the cream, 5.3:1 on white, 4.5:1 on the soft beige); the gold
   itself stays for fills, borders, icons and large display text (Tomi, 2026-11-13, BRIEF §10). */
:root { --ub-focus: var(--wp--preset--color--deep); }

/* Full-width sections touch each other (no root block gap between them) */
.wp-site-blocks > main > .alignfull, .entry-content > .alignfull { margin-block-start: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Buttons never shrink under 48 px */
.wp-element-button, .wp-block-button__link { min-block-size: 48px; display: inline-flex; align-items: center; justify-content: center; }
/* Buttons answer the pointer (design checklist, "States"): the colour change on hover is theme.json's (filled: white
   with gold text; Outline: here, gold with white text), faded in over 200 ms on the site's curve
   (custom.motion.ease); pressed, a button sits 1 px lower; the keyboard's focus ring is UB Kit's. The fade runs on the
   way into hover only. Neither under reduced motion. */
:root :where(.wp-block-button.is-style-outline > .wp-block-button__link:hover, .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible) {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}
@media (prefers-reduced-motion: no-preference) {
	:is(.wp-element-button, .wp-block-button__link):hover {
		transition-property: background-color, color, border-color;
		transition-duration: 0.2s;
		transition-timing-function: var(--wp--custom--motion--ease, cubic-bezier(0.22, 1, 0.36, 1));
	}
	:is(.wp-element-button, .wp-block-button__link):active { transform: translateY(1px); }
	.wp-block-button.is-style-ub-link > .wp-block-button__link:active { transform: none; }
}
/* A button that reads as a text link (styles/blocks/button-link.json): what a page binds a link to (the e-mail and
   phone from ub/contact). In the text's flow, still a 44 px target. */
.wp-block-button.is-style-ub-link > .wp-block-button__link { min-block-size: 44px; justify-content: flex-start; border: 0; text-transform: none; }
.wp-block-button.is-style-ub-link > .wp-block-button__link:hover { background: transparent; text-decoration: none; }

/* Links are underlined (theme.json), near-black on hover: the darker gold for text is too close to the body text
   (1.7:1 against ink, WCAG 1.4.1 asks 3:1) to tell a link by its colour alone, as the live site's lighter gold did. A
   thin line clear of the letters. Menus, pills and buttons set their own. Zero specificity. */
:where(a:not(.wp-element-button)) { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* Text (design checklist, "Type"): headings balance their lines, body text keeps a word from sitting alone on its last
   line; figures line up in tables. Zero specificity: a block's own setting wins. */
:where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
:where(p, li, dd, blockquote, figcaption) { text-wrap: pretty; }
:where(table) { font-variant-numeric: tabular-nums; }

/* List items in a page's text keep a few px apart, so a list of links stays a list of separate 24 px targets (WCAG
   2.5.8; the cookie policy's contents list at 14 px failed it with lines touching). */
:where(.wp-block-post-content, .entry-content) :where(ul:not(.wp-block-navigation__container), ol) > :where(li + li) { margin-block-start: 0.375em; }

/* The live site's dividers are 1 px lines (core draws 2 px) */
.wp-block-separator { border-top-width: 1px; opacity: 1; }

/* Full-screen sections fit the screen a phone shows (100svh: the height with the browser's bars showing). */
@supports (min-height: 100svh) {
	:is([style*="min-height:100vh"], [style*="min-height: 100vh"]) { min-height: 100svh !important; }
}

/* ── Header ─────────────────────────────────────────────────────────────────────────────────────────────────────
   Not sticky, transparent on the cream; the logo left, the menu and the language switcher right. From
   theme.json custom.header.menuBreakpoint (1200 px) down the menu is a button opening a dark panel under the header
   (core's overlay, restyled: functions.php shows the button from 600 px up, where core's own rule stops at 600). The
   live site switched at 1024 px, where its menu then wrapped onto two lines (1025–1250 px): here it never wraps.
   --ub-logo-w: the logo's width (246 px as live, 200 px on phones, less at 360 px so the switcher and the button fit);
   --ub-bar-h: the row's height, the logo's (4096 × 1076) or the 44 px buttons', whichever is taller. */
.ub-header {
	--ub-logo-w: 246px;
	--ub-bar-h: max(44px, calc(var(--ub-logo-w) * 1076 / 4096));
	position: relative;
	z-index: 50;
	align-items: center;
}
@media (width < 768px) {
	/* the screen less its 2 × 20 px sides, the 20 px gap, and the switcher with a flag (about 80 px), 8 px, the 44 px button */
	.ub-header { --ub-logo-w: min(200px, calc(100vw - 196px)); }
	.ub-header .ub-lang-switcher .ub-lang-switcher__menu > summary { padding: 0 0.625rem 0 0.75rem; } /* beats the pill's own padding below */
}
.ub-header__logo { flex: 0 0 var(--ub-logo-w); inline-size: var(--ub-logo-w); }
.ub-header__logo :is(a, img) { display: block; inline-size: 100%; block-size: auto; }
.ub-header__end { flex: 0 1 auto; min-inline-size: 0; }

/* The menu in the bar: Poppins 300 15 px, capitals (theme.json), 13 px × up to 20 px around each item as live; the
   side padding narrows from 1440 px to 1200 px so the seven items keep to one line. Hover and the current page in the
   gold for text. */
.ub-nav .wp-block-navigation-item__content { text-decoration: none; }
.ub-nav .wp-block-navigation-item__content:hover,
.ub-nav .current-menu-item > .wp-block-navigation-item__content,
.ub-nav .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--preset--color--primary-text); }
@media (width >= 1200px) {
	.ub-nav .wp-block-navigation-item__content { padding: 13px clamp(10px, calc((100vw - 1040px) / 14), 20px); }
}

/* The menu button: the live site's three lines (a short one, a long one, a half one, right-aligned), 22 px in a 44 px
   target; near-black, the gold for text on hover (as the items beside it). */
.ub-nav .wp-block-navigation__responsive-container-open {
	inline-size: 44px; block-size: 44px; align-items: center; justify-content: center; color: var(--wp--preset--color--deep);
}
.ub-nav .wp-block-navigation__responsive-container-open:hover { color: var(--wp--preset--color--primary-text); }
.ub-nav .wp-block-navigation__responsive-container-open svg { display: none; }
.ub-nav .wp-block-navigation__responsive-container-open::before {
	content: ""; inline-size: 22px; block-size: 22px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M128 102.4c0-14.1 11.5-25.6 25.6-25.6h332.8a25.6 25.6 0 0 1 0 51.2H153.6c-14.1 0-25.6-11.5-25.6-25.6zm358.4 128H25.6a25.6 25.6 0 0 0 0 51.2h460.8a25.6 25.6 0 0 0 0-51.2zm0 153.6H256a25.6 25.6 0 0 0 0 51.2h230.4a25.6 25.6 0 0 0 0-51.2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M128 102.4c0-14.1 11.5-25.6 25.6-25.6h332.8a25.6 25.6 0 0 1 0 51.2H153.6c-14.1 0-25.6-11.5-25.6-25.6zm358.4 128H25.6a25.6 25.6 0 0 0 0 51.2h460.8a25.6 25.6 0 0 0 0-51.2zm0 153.6H256a25.6 25.6 0 0 0 0 51.2h230.4a25.6 25.6 0 0 0 0-51.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The phone and tablet menu: a dark panel the width of the screen, right under the header (as live: Elementor's
   dropdown, not a full-screen layer). White capitals, a thin white line between items, gold behind the current or
   hovered one. The panel's own close button sits exactly where the menu button is, so the button seems to turn into
   a cross. The list scrolls inside the panel when the screen is short (the page behind is locked by core). */
@media (width < 1200px) {
	.ub-header .ub-nav { position: static; }
	.ub-header .ub-nav .wp-block-navigation__responsive-container.is-menu-open {
		--ub-focus: var(--wp--preset--color--on-deep);
		position: absolute;
		inset: 100% 0 auto 0;
		padding: 0;
		overflow: visible;
		z-index: 100;
	}
	.ub-header .ub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding: 0;
		max-block-size: calc(100svh - var(--ub-bar-h) - 20px);
		overflow-y: auto;
		overscroll-behavior: contain;
		align-items: stretch;
	}
	.ub-header .ub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 0; inline-size: 100%; align-items: stretch;
	}
	.ub-header .ub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		align-items: stretch; border-block-end: 1px solid var(--wp--preset--color--on-deep);
	}
	.ub-header .ub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child { border-block-end: 0; }
	.ub-header .ub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: flex; align-items: center; box-sizing: border-box; min-block-size: 44px; padding: 12px 20px; color: var(--wp--preset--color--on-deep);
	}
	.ub-header .ub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:is(:hover, [aria-current="page"]),
	.ub-header .ub-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
		background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary);
	}
	.ub-header .ub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: calc(-1 * (var(--wp--preset--spacing--20) + var(--ub-bar-h) / 2 + 22px));
		right: var(--wp--preset--spacing--30);
		display: flex; align-items: center; justify-content: center;
		inline-size: 44px; block-size: 44px;
		color: var(--wp--preset--color--deep);
		--ub-focus: var(--wp--preset--color--deep);
	}
	.ub-header .ub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover { color: var(--wp--preset--color--primary-text); }
	/* The menu button under the cross: transparent, not hidden, so core can give it the focus back on closing. */
	.ub-header .ub-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open { opacity: 0; }
	/* Signed in, core pushes the panel down by the admin bar's height: not needed under the header. */
	.has-modal-open .admin-bar .ub-header .is-menu-open .wp-block-navigation__responsive-dialog { margin-block-start: 0; }
	/* On phones the language switcher sits left of the menu button, which keeps the screen's edge as live. */
	.ub-header__lang { order: -1; }
}

/* A submenu, should the menu get one: in the panel it folds behind its own button (assets/nav.js; core keeps every
   submenu open there: upperbiz-ro H27). Without JavaScript there are no buttons and every submenu stays open. */
.ub-nav__fold { display: none; }
.ub-nav .wp-block-navigation__responsive-container.is-menu-open li.has-child.ub-nav__folds { flex-direction: row; flex-wrap: wrap; align-items: center; }
.ub-nav .wp-block-navigation__responsive-container.is-menu-open li.ub-nav__folds > .wp-block-navigation-item__content { flex: 1; }
.ub-nav .wp-block-navigation__responsive-container.is-menu-open li.ub-nav__folds > .wp-block-navigation__submenu-container { flex-basis: 100%; padding: 0 0 0 1.25rem; }
.ub-nav .wp-block-navigation__responsive-container.is-menu-open li.ub-nav__folds:not(.ub-nav__open) > ul.wp-block-navigation__submenu-container { display: none; }
.ub-nav .wp-block-navigation__responsive-container.is-menu-open li.ub-nav__folds > button.wp-block-navigation-item__content.wp-block-navigation-submenu__toggle { display: none; }
.ub-nav .is-menu-open .ub-nav__fold {
	display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px;
	margin: 0; padding: 0 0.75rem; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.ub-nav .is-menu-open .ub-nav__fold::after {
	content: ""; inline-size: 0.5rem; block-size: 0.5rem; border: solid currentColor; border-width: 0 1px 1px 0;
	transform: translateY(-25%) rotate(45deg);
}
.ub-nav .is-menu-open .ub-nav__open > .ub-nav__fold::after { transform: translateY(25%) rotate(-135deg); }
.ub-nav .is-menu-open .ub-nav__fold:hover { color: var(--wp--preset--color--primary); }

/* ── The language switcher (UB Kit Lang's ub/language-switcher, as a menu) ─────────────────────────────────────
   Styled from here only. The current language as a small pill with a 1 px gold border, like the site's pills (44 px
   tall: the tap target); its list a white card with a 1 px gold border, each row the language's code and its name
   (the name is the screen-reader text the block prints, shown here). The current language in near-black, like the
   active pill of the services.
   Flags (UB Kit Lang 2.1.0's "Show: flags with codes", the live GTranslate box's look): the flag image sits before the
   code inside the label span, in the pill and in each row, centred on the text, 1.25em wide at 4:3; its size is set
   here and by the image's own width and height, so nothing moves when it loads. With codes only (2.0.0's markup: a
   bare aria-hidden span) the same rules apply without the image. */
.ub-header .ub-lang-switcher { font-size: var(--wp--preset--font-size--small); line-height: 1; }
.ub-header .ub-lang-switcher :is(summary, a) > [aria-hidden="true"] { display: inline-flex; align-items: center; gap: 0.4em; }
.ub-header .ub-lang-switcher :is(.ub-lang-switcher__flag, [aria-hidden="true"] > img, [aria-hidden="true"] > svg) {
	display: block; flex: none; inline-size: 1.25em; block-size: 0.9375em; object-fit: cover; border-radius: 2px;
	box-shadow: 0 0 0 1px rgb(19 19 19 / 0.15);
}
.ub-header .ub-lang-switcher summary {
	gap: 0.5rem;
	box-sizing: border-box;
	min-block-size: 44px;
	padding: 0 0.875rem 0 1rem;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--deep);
	font-weight: 400;
	letter-spacing: 0.06em;
}
/* The arrow is a turned square: its tip reaches past its box, so it gets room of its own beside the code (User,
   2026-11-13: "the E is just a few pixels too close"). */
.ub-header .ub-lang-switcher summary::after { border-color: var(--wp--preset--color--primary); margin-inline-start: 0.25rem; }
.ub-header .ub-lang-switcher summary:hover { background: rgb(193 156 93 / 0.1); }
.ub-header .ub-lang-switcher__menu[open] > summary { background: var(--wp--preset--color--surface); }
.ub-header .ub-lang-switcher__menu .ub-lang-switcher__list {
	top: calc(100% + 0.5rem);
	inset-inline-end: 0;
	gap: 2px;
	min-inline-size: 11.5rem;
	padding: 6px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--panel);
	box-shadow: var(--wp--preset--shadow--soft);
}
.ub-header .ub-lang-switcher__menu .ub-lang-switcher__list a {
	box-sizing: border-box; /* UB Kit Lang gives the row width 100 %: with our padding it ran 17 px out of the list */
	gap: 0.75rem;
	min-block-size: 44px;
	padding: 0 0.75rem;
	border-radius: 6px; /* the card's 12 px less its 6 px inset */
	color: var(--wp--preset--color--ink);
	font-weight: 400;
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
}
.ub-header .ub-lang-switcher__menu .ub-lang-switcher__list a > [aria-hidden="true"] {
	color: var(--wp--preset--color--deep); font-weight: 500; letter-spacing: 0.06em;
}
/* The codes take the same width, so the names line up in the list. */
.ub-header .ub-lang-switcher__menu .ub-lang-switcher__list :is(.ub-lang-switcher__code, a > [aria-hidden="true"]:not(.ub-lang-switcher__label)) { min-inline-size: 1.75em; }
.ub-header .ub-lang-switcher__menu .ub-lang-switcher__list .screen-reader-text {
	position: static !important; inline-size: auto; block-size: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: nowrap;
}
.ub-header .ub-lang-switcher__menu .ub-lang-switcher__list a:hover { background: rgb(193 156 93 / 0.12); text-decoration: none; }
.ub-header .ub-lang-switcher__menu .ub-lang-switcher__list a[aria-current] {
	background: var(--wp--preset--color--deep); color: var(--wp--preset--color--on-deep); font-weight: 600; text-decoration: none;
	--ub-focus: var(--wp--preset--color--primary);
}
.ub-header .ub-lang-switcher__menu .ub-lang-switcher__list a[aria-current] > [aria-hidden="true"] { color: inherit; font-weight: 600; }

/* ── Footer (patterns/footer.php) ───────────────────────────────────────────────────────────────────────────────
   A 1 px line, then a row: the logo (18 %), the names and the address centred (50 %), the footer menu centred in the
   last column (28 %), as live; from 1024 px down one column, centred. Then the gold bar. */
.ub-footer__main { display: flex; flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--30); text-align: center; }
.ub-footer__main > * { margin-block: 0; }
.ub-footer__logo { inline-size: min(249px, 100%); }
.ub-footer__logo :is(a, img) { display: block; inline-size: 100%; block-size: auto; }
@media (width < 768px) {
	.ub-footer__logo { inline-size: min(312px, 90%); } /* as live: 90 % of the column on phones */
}
@media (width > 1024px) {
	.ub-footer__main { display: grid; grid-template-columns: minmax(0, 18fr) minmax(0, 50fr) minmax(0, 28fr); column-gap: var(--wp--preset--spacing--30); }
	.ub-footer__logo { justify-self: start; }
}
.ub-footer__address p { margin: 0; }

/* The footer menu: text-coloured links in Poppins 400 (not the header's capitals), thin lines between them, the gold
   for text on hover. Where the three don't fit on one line (the last column at 1440 px, phones) they go two and one, as live,
   so no line starts a row. */
.ub-footer__links { container: ub-footer-links / inline-size; inline-size: 100%; }
.ub-footer__nav {
	font-size: var(--wp--preset--font-size--medium); font-weight: 400; line-height: 1.5; text-transform: none; color: var(--wp--preset--color--ink);
}
.ub-footer__nav .wp-block-navigation__container { justify-content: center; row-gap: 0.25rem; }
.ub-footer__nav .wp-block-navigation-item + .wp-block-navigation-item { border-inline-start: 1px solid var(--wp--preset--color--line); }
@container ub-footer-links (width < 450px) {
	.ub-footer__nav .wp-block-navigation-item:nth-child(3) { flex-basis: 100%; justify-content: center; border-inline-start: 0; }
}
.ub-footer__nav .wp-block-navigation-item__content { display: flex; align-items: center; min-block-size: 24px; padding: 0 10px; }
.ub-footer__nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary-text); text-decoration: underline; text-underline-offset: 0.2em; }
.ub-footer__nav .wp-block-navigation-item__content[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; }
.ub-footer__tools { color: var(--wp--preset--color--ink); }
.ub-footer__tools :is(.ub-consent-link, .ub-motion-toggle) { min-block-size: 24px; }
.ub-footer__tools :is(.ub-consent-link, .ub-motion-toggle):hover { color: var(--wp--preset--color--primary-text); }

/* The gold bar: white text and the Upper Biz mark (20 px), centred; 10 px around it on phones as live. */
.ub-footer__copy { margin: 0; }
.ub-footer__mark { display: inline-flex; vertical-align: middle; margin-inline-start: 0.375rem; padding: 2px; }
.ub-footer__mark img { display: block; inline-size: 20px; block-size: auto; }
@media (width < 768px) {
	.ub-footer__bar { padding: 10px !important; }
}

/* The two round buttons fixed to the screen's bottom corners, as live: 56 px (48 on phones), cream with a 3 px gold
   border, a gold icon; left the appointment, right back to the top. No entrance animation (nothing in the first
   screen moves on load); the jump to the top glides only for people who allow motion (UB Kit's smooth scrolling). */
.ub-float { position: fixed; inset: auto 0 0 0; z-index: 40; pointer-events: none; }
.ub-float__button {
	position: absolute;
	bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 56px;
	block-size: 56px;
	box-sizing: border-box;
	border: 3px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	pointer-events: auto;
}
.ub-float__button svg { inline-size: 25px; block-size: 25px; }
.ub-float__button--book { left: 20px; }
.ub-float__button--top { right: 20px; }
/* WP Chat App's button (the standard plugin set; the live site has none) takes the bottom right corner, 56 px at
   16 px: "back to top" moves left of it, on its line (above it, it would cover the footer's last links on phones). */
body:has(.wa__btn_popup) .ub-float__button--top { right: 84px; bottom: 16px; }
.ub-float__button:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); }
@media (width < 768px) {
	.ub-float__button { bottom: 15px; inline-size: 48px; block-size: 48px; }
	.ub-float__button svg { inline-size: 21px; block-size: 21px; }
	.ub-float__button--book { left: 10px; }
	.ub-float__button--top { right: 10px; }
	body:has(.wa__btn_popup) .ub-float__button--top { right: 84px; bottom: 20px; }
}
/* In the site editor the two buttons sit in the footer's flow instead of floating over the canvas. */
.editor-styles-wrapper .ub-float { position: relative; display: flex; justify-content: space-between; padding: 10px 20px; pointer-events: auto; }
.editor-styles-wrapper .ub-float__button { position: static; }

/* Long German compounds ("Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung") are wider than a phone's line: below 600 px
   text in the content hyphenates (the page is lang="de", and each language page its own) and a word that still can't
   fit breaks, instead of running off the screen (/leistungen/neuropsychiatrie/ ran 44 px over at 360 px). */
@media (max-width: 599px) {
	:where(.wp-block-post-content, .entry-content) :where(p, li, h1, h2, h3, h4) { overflow-wrap: break-word; hyphens: auto; }
}