/*
Theme Name: Betania
Theme URI: https://www.bisericabetania.ro/
Author: Adelin Sofrag
Description: Temă bloc pentru Biserica Penticostală Betania Arad. Culorile, fonturile și spațierile sunt în theme.json; aici e doar ce theme.json nu poate exprima.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.3.0
License: GPL-2.0-or-later
Text Domain: betania
*/

/* Icons (Lucide, ISC licence): masks, so they take the colour of the text around them. */
:root {
	--betania-ico-house: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
	--betania-ico-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
	--betania-ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
	--betania-ico-radio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 19.1C1 15.2 1 8.8 4.9 4.9'/%3E%3Cpath d='M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5'/%3E%3Cpath d='M19.1 4.9C23 8.8 23 15.1 19.1 19'/%3E%3C/svg%3E");
	--betania-ico-hand-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16'/%3E%3Cpath d='m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9'/%3E%3Cpath d='m2 15 6 6'/%3E%3Cpath d='M19.5 8.5c.7-.7 1.5-1.6 1.5-2.7A2.73 2.73 0 0 0 16 4a2.78 2.78 0 0 0-5 1.8c0 1.2.8 2 1.5 2.8L16 12Z'/%3E%3C/svg%3E");
	--betania-ico-map-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--betania-ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
	--betania-ico-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
	--betania-ico-book-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
	--betania-ico-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17'/%3E%3Cpath d='m10 15 5-3-5-3z'/%3E%3C/svg%3E");
	--betania-ico-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E");
	--betania-ico-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='20' x='2' y='2' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' x2='17.51' y1='6.5' y2='6.5'/%3E%3C/svg%3E");
	--betania-ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	--betania-ico-arrow-up-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
	--betania-ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
	--betania-ico-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
	--betania-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--betania-ico-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='black'/%3E%3C/svg%3E");
	--betania-ico-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}

.betania-ico--house { --ico: var(--betania-ico-house); }
.betania-ico--users { --ico: var(--betania-ico-users); }
.betania-ico--mail { --ico: var(--betania-ico-mail); }
.betania-ico--radio { --ico: var(--betania-ico-radio); }
.betania-ico--hand-heart { --ico: var(--betania-ico-hand-heart); }
.betania-ico--map-pin { --ico: var(--betania-ico-map-pin); }
.betania-ico--clock { --ico: var(--betania-ico-clock); }
.betania-ico--calendar { --ico: var(--betania-ico-calendar); }
.betania-ico--book-open { --ico: var(--betania-ico-book-open); }
.betania-ico--youtube { --ico: var(--betania-ico-youtube); }
.betania-ico--facebook { --ico: var(--betania-ico-facebook); }
.betania-ico--instagram { --ico: var(--betania-ico-instagram); }
.betania-ico--user { --ico: var(--betania-ico-user); }

/* The pencil sketch of the church hall: the site's one decorative motif (from the Mocheta page). */
:root {
	--betania-sketch: url("assets/img/betania-schita-sala.webp");
	--betania-hairline: 1px solid var(--wp--preset--color--line);
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */

html {
	/* Anchors (#program, #marturisire, #live, #mocheta-doneaza) land below the sticky header. */
	scroll-padding-top: 6rem;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Sections touch each other; spacing comes from each section's own padding. */
.wp-site-blocks > * {
	margin-block: 0;
}

/*
 * The text column of the live site (Bootstrap container minus its column padding, measured 26.10.2026,
 * breakpoints re-measured 28.10 on every page): 1096px from 1200px up, 920px from 961px (live's theme
 * switches at 961, not Bootstrap's 992), 708px from 768px, then 16px margins on phones.
 * Expressed as the root padding of the page body and footer, so full-width bands still reach the edges
 * (core pulls .alignfull out by the same variable) and every 1200px layout inside is capped by it.
 * The header keeps its own box (NEXT-01), so it is left out.
 */
:root {
	--betania-gutter: 16px;
}

@media (min-width: 768px) {
	:root {
		--betania-gutter: calc((100vw - 708px) / 2);
	}
}

@media (min-width: 961px) {
	:root {
		--betania-gutter: calc((100vw - 920px) / 2);
	}
}

@media (min-width: 1200px) {
	:root {
		--betania-gutter: calc((100vw - 1096px) / 2);
	}
}

.wp-site-blocks > :is(main, .site-footer) {
	--wp--style--root--padding-left: var(--betania-gutter);
	--wp--style--root--padding-right: var(--betania-gutter);
}

/* UI-68: main already ends with 96px (48px on phones) before the footer; a last section that adds its own
   bottom padding doubled it (Istoric ≈150px, Mocheta ≈140px of white). One gap on every page instead.
   Only where main has that padding (page templates); Acasă's main has none and ends on a dark band. */
main[style*="padding-bottom"] .betania-content > .alignfull:last-child:not(.has-background) {
	padding-block-end: 0;
}

/* Body text is Roboto 300 (theme.json), as on live; "bolder" from 300 would only reach 400. */
:where(strong, b) {
	font-weight: 700;
}

/* UI-46: Roboto 300 only holds up at body size on white. Small print and every tinted surface (block
   backgrounds, the navy/peach cards and boxes) get 400, once here instead of one exception per page.
   :where() keeps it at zero specificity, so any rule that names its own weight still wins. */
:where(
	small, figcaption, .wp-element-caption,
	.has-small-font-size, .has-note-font-size, .has-background,
	.home-card, .home-mission__card, .home-names__list,
	.about-schedule__events, .about-history__box, .about-pastor__quote, .about-groups__people,
	.betania-next-step, .betania-program-box, .betania-timeline__houses,
	.contact-details__socials
) {
	font-weight: 400;
}

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

/* UI-26: the gold belongs to the Mocheta campaign, so content and footer links share a faded navy underline;
   the link still reads as a link without a second text colour. */
.betania-content a:not(.wp-element-button),
.site-footer__main a {
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--navy) 40%, transparent);
}

/* Navy, not currentColor: the global link hover turns content text gold-text, and the underline should not follow it. */
.betania-content a:not(.wp-element-button):hover,
.site-footer__main a:hover {
	text-decoration-color: var(--wp--preset--color--navy);
}

:where(h1, h2, h3, .wp-block-post-title) {
	text-wrap: balance;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Focus visible on every interactive element (keyboard navigation). */
:where(a, button, input, select, textarea, summary, iframe, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
}

:where(.has-navy-background-color, .has-navy-dark-background-color, .betania-live__player) :where(a, button, input, iframe):focus-visible {
	outline-color: var(--wp--preset--color--gold);
}

/* Core injects .skip-link for block themes; make it clearly visible when focused. */
.skip-link.screen-reader-text:focus {
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	padding: 0.75rem 1rem;
}

/* One icon system (Lucide, ISC): an icon is a mask filled with the text colour. */
:where(.betania-ico) {
	--ico-size: 1.1em;
}

.betania-nav .betania-ico > a::before,
p.betania-ico::before,
.site-footer__links > li.betania-ico::before,
.is-style-betania-tags li.betania-ico > a::before,
.is-style-betania-people li::before,
.betania-info__btn::before,
.wp-block-button.betania-ico .wp-block-button__link::before,
.betania-copy .wp-block-button__link::before {
	content: "";
	display: inline-block;
	flex: none;
	width: var(--ico-size, 1.1em);
	height: var(--ico-size, 1.1em);
	background: currentColor;
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
}

/* ↗ after links that open a new tab (the screen-reader note comes from functions.php). */
a[target="_blank"]:not(.betania-card__title a)::after {
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-inline-start: 0.3em;
	vertical-align: -0.05em;
	background: currentColor;
	-webkit-mask: var(--betania-ico-arrow-up-right) center / contain no-repeat;
	mask: var(--betania-ico-arrow-up-right) center / contain no-repeat;
}

/* ---------------------------------------------------------------------
   Header and menu
   --------------------------------------------------------------------- */

/* Measured on the live site (26.10.2026): desktop bar 100px with a 100px logo, docked strip 64px with a
   60px logo; on interior pages the bar is a white box in the 1170px column, 35px down, over the hero photo;
   phone and tablet: an 82px white bar that always stays on top. */
.site-header {
	--betania-header-h: 100px;
	position: relative;
	z-index: 50;
}

.site-header__bar {
	box-sizing: border-box;
}

.site-header__bar > .wp-block-group {
	min-height: var(--betania-header-h);
}

.site-header__brand .wp-block-site-logo img {
	width: 100px;
	height: auto;
}

@media (min-width: 1024px) {
	/* Holds the bar's place in the page, so content does not jump when the bar docks. */
	.site-header {
		min-height: var(--betania-header-h);
	}

	.has-page-hero .site-header {
		position: absolute;
		top: 35px;
		left: 0;
		right: 0;
	}

	.has-page-hero .site-header__bar {
		width: min(1170px, 100% - 3.5rem);
		margin-inline: auto;
		box-shadow: 0 1px 7px rgb(0 0 0 / 4%);
	}

	/* Docked: html.betania--sticky comes from betania.js past 330px of scroll. */
	.betania--sticky .site-header__bar {
		--betania-header-h: 64px;
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0px);
		left: 0;
		right: 0;
		width: auto;
		margin: 0;
		box-shadow: 0 0 3px rgb(0 0 0 / 21%);
	}

	.betania--sticky .site-header__brand .wp-block-site-logo img {
		width: 60px;
	}
}

@media (max-width: 1023px) {
	.site-header {
		/* 80px + the 2px line = 82px, the height the phone menu panel drops from. */
		--betania-header-h: 80px;
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		background: var(--wp--preset--color--white);
		/* UI-29: the palette hairline; #e9e9e9 and #eef0f4 were two more near-twins of it. */
		border-bottom: 2px solid var(--wp--preset--color--line);
		box-shadow: 0 1px 0 var(--wp--preset--color--line), 0 4px 14px rgb(21 42 63 / 6%);
	}

	.site-header__brand .wp-block-site-logo img {
		width: 48px;
	}
}

/* Below 600px the admin bar scrolls away, so a sticky offset would leave a gap. */
@media (max-width: 600px) {
	.site-header {
		top: 0;
	}
}

/* With a logo, the title would repeat the name the logo already shows (its alt carries it). */
.site-header__brand:has(.wp-block-site-logo img) .wp-block-site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Desktop menu as on the live site: Dosis 14px/600, letters spaced 2px, 15px each side, the full bar height. */
.betania-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: max(44px, var(--betania-header-h, 44px));
	padding: 0 15px;
	position: relative;
	font-weight: 600;
	letter-spacing: 2px;
}

.betania-nav .wp-block-navigation-item__content:hover {
	color: #2b4a6b;
}

/* UI-23: the peach bar is 1.5:1 on white, so the bar alone does not say where you are or what is under the
   pointer. A navy underline on the label does (14:1): 2px for the current page, 1px while hovering. */
@media (min-width: 1024px) {
	.betania-nav .wp-block-navigation-item__label {
		text-decoration: underline 1px transparent;
		text-underline-offset: 0.45em;
	}

	.betania-nav .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
		text-decoration-color: currentColor;
	}

	.betania-nav .current-menu-item > a .wp-block-navigation-item__label {
		text-decoration-thickness: 2px;
		text-decoration-color: var(--wp--preset--color--navy);
	}
}

.betania-nav .betania-ico > a::before {
	--ico-size: 15px;
}

/* Current page: a 4px peach bar along the top edge of the item. */
.betania-nav .current-menu-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	background: var(--wp--preset--color--gold);
	-webkit-mask: none;
	mask: none;
}

/* Search results live at /?s=…, so core takes them for the home page and marks "Acasă" as current;
   on the live site no item is marked there. The aria-current="page" core adds stays (needs PHP). */
body.search .betania-nav .current-menu-item > a::after {
	content: none;
}

body.search .betania-nav .current-menu-item > a:not(:hover) .wp-block-navigation-item__label {
	text-decoration-color: transparent;
}

body.search .betania-nav .is-menu-open .current-menu-item > a {
	background: none;
}

/* "Unde ne găsești?" lives only in the phone menu. */
.betania-nav .betania-nav__cta {
	display: none;
}

/* Live dot after "Live" while the channel is streaming (class set by betania.js). */
.betania--live .betania-nav__live > a .wp-block-navigation-item__label::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-inline-start: 0.375rem;
	vertical-align: 2px;
	border-radius: 50%;
	background: #d32f2f;
}

/* The same signal on the phone menu button, where "Live" is hidden behind the hamburger.
   Placed against the bars as on the live site (#menu-icon:after): right after them, level with them;
   the white ring keeps it apart from the bars. */
.betania--live .betania-nav .wp-block-navigation__responsive-container-open {
	position: relative;
}

.betania--live .betania-nav .wp-block-navigation__responsive-container-open::after {
	content: "";
	position: absolute;
	top: 16px;
	right: -4px;
	width: 10px;
	height: 10px;
	border: 2px solid var(--wp--preset--color--white);
	border-radius: 50%;
	background: #d32f2f;
}

/* Five items with icons need ~800px; until 1024px the hamburger stays, so nothing wraps or scrolls sideways. */
@media (min-width: 600px) and (max-width: 1023px) {
	.betania-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.betania-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

.betania-nav .wp-block-navigation__responsive-container-open,
.betania-nav .wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--navy);
}

.betania-nav .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* Hamburger as on the live site: three 24×3px bars, 3px apart. */
.betania-nav .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.betania-nav .wp-block-navigation__responsive-container-open::before {
	content: "";
	width: 24px;
	height: 15px;
	background:
		linear-gradient(currentColor, currentColor) top / 100% 3px no-repeat,
		linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat,
		linear-gradient(currentColor, currentColor) bottom / 100% 3px no-repeat;
}

/* While the panel is open the ✕ takes the hamburger's place. */
/* Not visibility: core hands focus back to this button on Esc, and a hidden button cannot take it. */
.betania-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
	opacity: 0;
}

/* Phone menu as on the live site: a white panel that drops from under the 82px bar, not a full-screen overlay. */
.betania-nav .wp-block-navigation__responsive-container.is-menu-open {
	top: calc(82px + var(--wp-admin--admin-bar--height, 0px));
	bottom: auto;
	max-height: calc(100vh - 82px - var(--wp-admin--admin-bar--height, 0px));
	padding: 6px 0 18px;
	border-top: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 14px 28px rgb(21 42 63 / 18%);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	/* Core's slide-in uses a transform, which would pin the close button to the panel instead of the bar. */
	animation-name: betania-menu-fade;
}

@keyframes betania-menu-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (max-width: 600px) {
	.betania-nav .wp-block-navigation__responsive-container.is-menu-open {
		top: 82px;
		max-height: calc(100vh - 82px);
	}
}

/* The ✕ sits where the hamburger was, in the bar above the panel. */
.betania-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: calc(19px + var(--wp-admin--admin-bar--height, 0px));
	right: var(--wp--style--root--padding-right, 1rem);
}

@media (max-width: 600px) {
	.betania-nav .is-menu-open .wp-block-navigation__responsive-container-close {
		top: 19px;
	}
}

.betania-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 0;
}

/* Core aligns the open menu with the desktop justification (right); on a phone the rows span the width. */
.betania-nav .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: stretch;
	--navigation-layout-justify: flex-start;
}

.betania-nav .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container, .wp-block-navigation-item) {
	align-items: stretch;
}

.betania-nav .is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0;
}

.betania-nav .is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.betania-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	width: 100%;
	min-height: 52px;
	padding: 0 24px;
	font-size: var(--wp--preset--font-size--medium);
	gap: 12px;
	color: var(--wp--preset--color--navy);
}

/* On the link: core forces the items' own background to transparent in the open menu. */
.betania-nav .is-menu-open .current-menu-item > a {
	background: var(--wp--preset--color--peach-light);
}

.betania-nav .is-menu-open .current-menu-item > a::after {
	height: 1px;
}

.betania-nav .is-menu-open .betania-nav__cta {
	display: block;
	border-bottom: 0;
	padding: 16px 24px 0;
}

.betania-nav .wp-block-navigation__responsive-container.is-menu-open .betania-nav__cta > a {
	justify-content: center;
	width: auto;
	min-height: 48px;
	border-radius: 5px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------------------------------------------------------------------
   Buttons, as on the site today: white with a navy line (default, theme.json) and peach for the
   one main action ("Plin"). "Secundar" is kept for existing content and looks like the default.
   An icon goes in through the betania-ico betania-ico--<name> classes on the button block.
   --------------------------------------------------------------------- */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	box-sizing: border-box;
	text-align: center;
}

/* "Plin": the one strongest action on a screen. */
.wp-block-button.is-style-betania-solid .wp-block-button__link {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-betania-solid .wp-block-button__link:is(:hover, :focus) {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* NEXT-34: brass on light surfaces (the hall's rings), but on navy the solid button keeps the logo's peach. */
:is(.is-dark-surface, .wp-block-cover:not(.is-light), .has-navy-background-color, .has-navy-dark-background-color, .home-welcome, .home-names) .wp-block-button.is-style-betania-solid .wp-block-button__link {
	background: var(--wp--preset--color--peach);
	border-color: var(--wp--preset--color--peach);
}

/* UI-06: the navy hover/focus above vanishes on a dark band (1.2:1), so there the button lightens instead
   and the ring turns peach, as on live. A new dark band joins with the is-dark-surface class. */
:is(.is-dark-surface, .wp-block-cover:not(.is-light), .has-navy-background-color, .has-navy-dark-background-color, .home-welcome, .home-names) .wp-block-button .wp-block-button__link:is(:hover, :focus) {
	background: var(--wp--preset--color--peach);
	border-color: var(--wp--preset--color--peach);
	color: var(--wp--preset--color--navy);
}

:is(.is-dark-surface, .wp-block-cover:not(.is-light), .has-navy-background-color, .has-navy-dark-background-color, .home-welcome, .home-names) .wp-block-button.is-style-betania-solid .wp-block-button__link:is(:hover, :focus) {
	background: var(--wp--preset--color--peach-light);
	border-color: var(--wp--preset--color--peach-light);
}

:is(.is-dark-surface, .wp-block-cover:not(.is-light), .has-navy-background-color, .has-navy-dark-background-color, .home-welcome, .home-names) .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--peach);
	outline-offset: 3px;
}

/* Live keeps the 3px tracking on phones; a long label wraps onto two lines with air above and below. */
@media (max-width: 767px) {
	.wp-block-button__link {
		padding-block: 10px;
		line-height: 1.35;
		white-space: normal;
	}
}

/* ---------------------------------------------------------------------
   Headings and text styles
   --------------------------------------------------------------------- */

/* Section title: big Dosis capitals, centred, with the short gold rule under it. */
.is-style-betania-section-title {
	text-align: center;
	padding-bottom: 1.125rem;
	background: linear-gradient(var(--wp--preset--color--gold), var(--wp--preset--color--gold)) center bottom / 3rem 2px no-repeat;
}

/* Small subtitle: casete, footer columns. */
.is-style-betania-subtitle {
	font-size: var(--wp--preset--font-size--note);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
}

/* The handwritten word (Great Vibes): never uppercase, never tracked, always navy. */
.betania-script,
.is-style-betania-script {
	font-family: var(--wp--preset--font-family--script);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--navy);
}

:is(h1, h2) .betania-script {
	display: block;
	font-size: 0.8em;
	line-height: 1.05;
}

p.is-style-betania-script {
	margin-block: 0;
	font-size: clamp(2.125rem, 1.5rem + 2.8vw, 3.5rem);
	line-height: 1.15;
}

h2.is-style-betania-script {
	font-size: clamp(2.75rem, 2rem + 3.5vw, 4.25rem);
	line-height: 1.1;
}

.is-style-betania-text-large {
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
}

/* Gold label: small tracked capitals, the Mocheta "REPARĂM. RENOVĂM." line. */
p.is-style-betania-label,
.betania-label,
.betania-campaign__label,
.betania-intro__label {
	/* UI-30: brown, the one colour for small labels on light grounds (7.5:1); gold-text stays the campaign's. */
	color: var(--wp--preset--color--brown);
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.betania-campaign__label,
.betania-intro__label {
	color: var(--wp--preset--color--gold-text);
}

/* Event date, time, place: hairline label with a gold icon. */
.betania-label-light {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.5rem 0.875rem;
	border: var(--betania-hairline);
}

.betania-label-light::before {
	color: var(--wp--preset--color--brown);
}

.betania-label-light:empty {
	display: none;
}

/* Tag links (networks on Contact) and people (choir coordinators). */
.is-style-betania-tags,
.is-style-betania-people {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.is-style-betania-tags {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 0 1.5rem;
}

.is-style-betania-tags li > a {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 48px;
	box-sizing: border-box;
	padding: 0.5rem 0;
	border-bottom: var(--betania-hairline);
	color: var(--wp--preset--color--grey-text);
	text-decoration: none;
	line-height: 1.3;
}

.is-style-betania-tags li > a::before {
	color: var(--wp--preset--color--brown);
}

.is-style-betania-tags li > a strong {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

.is-style-betania-tags li > a::after {
	margin-inline-start: auto;
}

.is-style-betania-tags li > a:hover {
	border-bottom-color: var(--wp--preset--color--gold);
}

.is-style-betania-people li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.875rem;
	border: var(--betania-hairline);
	line-height: 1.4;
	--ico: var(--betania-ico-user);
}

.is-style-betania-people li::before {
	color: var(--wp--preset--color--brown);
}

/* Lists in page content: small gold dots, numbers in a gold hairline circle. */
.betania-content :where(ul.wp-block-list:not([class*="is-style-"]):not(.betania-timeline__houses)) {
	list-style: none;
	padding-inline-start: 0;
}

.betania-content :where(ul.wp-block-list:not([class*="is-style-"]):not(.betania-timeline__houses)) > li {
	position: relative;
	padding-inline-start: 1.5rem;
	margin-block: 0.375rem;
}

.betania-content :where(ul.wp-block-list:not([class*="is-style-"]):not(.betania-timeline__houses)) > li::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: 0.65em;
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
}

.betania-content :where(ol.wp-block-list) {
	list-style: none;
	counter-reset: betania;
	padding-inline-start: 0;
}

.betania-content :where(ol.wp-block-list) > li {
	counter-increment: betania;
	position: relative;
	padding-inline-start: 2.75rem;
	margin-block: 0.875rem;
}

.betania-content :where(ol.wp-block-list) > li::before {
	content: counter(betania);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.875rem;
	height: 1.875rem;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* Separators: short and centred by default (between sections), full width with "Lat". */
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	width: 3rem;
	margin-inline: auto;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	opacity: 1;
}

.wp-block-separator.is-style-wide {
	border: 0;
	border-top: var(--betania-hairline);
	opacity: 1;
}

/* Photos of people get a thin passe-partout; pencil drawings stay unframed. */
.betania-content .wp-block-image:not(.is-style-betania-sketch) img {
	box-sizing: border-box;
	padding: 0.375rem;
	border: var(--betania-hairline);
	background: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------------
   Page openings: white, centred, over the pencil sketch
   --------------------------------------------------------------------- */

/* Front page and campaign pages: the sketch behind the top of the page, as on Mocheta. */
.betania-sketch {
	background:
		linear-gradient(rgb(255 255 255 / 35%), rgb(255 255 255 / 35%)),
		var(--betania-sketch) center top / min(70rem, 100%) auto no-repeat;
}

@media (max-width: 640px) {
	.betania-sketch {
		background-size: auto, 175% auto;
		background-position: center, center 1.25rem;
	}
}

.betania-intro {
	padding-block: clamp(3rem, 2rem + 5vw, 5.5rem) clamp(2.5rem, 1.75rem + 3vw, 4rem);
	text-align: center;
}

.betania-intro > * {
	margin-inline: auto;
}

/*
 * Interior pages: the Bible photo with the old site's left-to-right veil and the title in white,
 * left-aligned. Sizes and the photo crop are measured on the live site (parallax-sec, scrolled to top).
 */
.betania-intro--page {
	--betania-page-veil: linear-gradient(90deg, rgb(15 22 38 / 75%) 0%, rgb(15 22 38 / 45%) 40%, rgb(15 22 38 / 10%) 75%, rgb(15 22 38 / 0%) 90%);
	display: block;
	box-sizing: border-box;
	min-height: 424px;
	padding: 136px 0 0;
	text-align: start;
	background:
		var(--betania-page-veil),
		url("assets/img/betania-hero-bible.jpg") 50% -66.8px / cover no-repeat;
	/* WebP is about half the bytes; browsers without image-set() keep the JPG above. */
	background-image:
		var(--betania-page-veil),
		image-set(url("assets/img/betania-hero-bible.webp") type("image/webp"), url("assets/img/betania-hero-bible.jpg") type("image/jpeg"));
}

.betania-intro--page :is(h1, .wp-block-post-title, .wp-block-query-title) {
	box-sizing: border-box;
	width: min(708px, 100% - 60px);
	max-width: none;
	margin: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.5px;
	text-align: start;
	text-transform: none;
	text-shadow: 0 2px 8px rgb(0 0 0 / 45%);
}

/* Phone: the photo only as tall as the title needs, as the old site trimmed it. */
@media (max-width: 767px) {
	.betania-intro--page {
		min-height: 0;
		padding: 76px 0 60px;
	}

	.betania-intro--page :is(h1, .wp-block-post-title, .wp-block-query-title) {
		width: calc(100% - 72px);
		font-size: var(--wp--preset--font-size--xx-large);
	}
}

@media (min-width: 1024px) {
	/* Under the full-width bar (no has-page-hero): the title keeps its page position, the photo ends at 424px. */
	.betania-intro--page {
		min-height: 324px;
		padding-top: 120px;
		background-position: 0 0, 50% -34px;
	}

	/* The header box floats 35px from the top, so the photo starts at the very top of the page. */
	.has-page-hero .betania-intro--page {
		min-height: 424px;
		padding-top: 220px;
	}

	.betania-intro--page :is(h1, .wp-block-post-title, .wp-block-query-title) {
		width: min(1096px, 100% - 104px);
	}
}

.betania-intro__large {
	max-width: 44rem;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.22;
	text-transform: uppercase;
	text-wrap: balance;
}

.betania-intro__text {
	max-width: 40rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
}

.betania-intro:not(.betania-intro--page) .wp-block-heading:where(h1) {
	margin-block: 1.25rem 1.5rem;
}

/* Front page: the church photo under the live site's veil (a fine dot screen plus a dark wash from the
   left), the text block on the left of the 1126px column, as on the live site (measured 26.10.2026). */
.betania-hero {
	--betania-hero-veil: linear-gradient(90deg, rgb(15 22 38 / 80%) 0%, rgb(15 22 38 / 55%) 38%, rgb(15 22 38 / 15%) 68%, rgb(15 22 38 / 0%) 85%);
	align-items: flex-start;
	/* Live puts the text at 38% of the window minus a fixed lift; the hero is one window tall. */
	padding: calc(38vh - 70px) 36px 6rem;
	color: var(--wp--preset--color--white);
}

/* The dot screen is the old theme's 2×2 spattern.png, inlined; !important beats the cover's colour/dim classes. */
.betania-hero > .wp-block-cover__background {
	background: var(--betania-hero-veil), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABdJREFUeNpiZmBgmAPE35lBBBAzAAQYABdkApHDWFY2AAAAAElFTkSuQmCC") !important;
	opacity: 1 !important;
}

.betania-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1126px;
	text-shadow: 0 1px 3px rgb(0 0 0 / 35%);
}

.betania-hero .wp-block-cover__inner-container > * {
	max-width: 560px;
}

.betania-hero__kicker {
	margin: 0 0 10px;
	color: var(--wp--preset--color--peach);
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 26px;
	letter-spacing: 3px;
	text-transform: uppercase;
}

/* The H1 is only as wide as its longer line, so "Betania" and the full name share one left edge. */
.betania-hero .betania-wordmark {
	display: inline-grid;
	justify-items: start;
	margin: 0 0 22px;
	font-family: var(--wp--preset--font-family--jost);
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-shadow: 1px 1px 2px rgb(0 0 0 / 20%);
}

.betania-wordmark__name {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--jost);
	font-size: 6.5rem;
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -3px;
	text-transform: none;
}

.betania-wordmark__full {
	margin-top: 10px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--jost);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	white-space: nowrap;
}

.betania-hero__address {
	margin: 0 0 26px;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	line-height: 26px;
}

/* Same peach and white buttons as everywhere; only the live hero's size and spacing. */
.betania-hero .wp-block-buttons {
	margin: 0;
	/* Live: 10px margin plus the space between two inline buttons. */
	gap: 14px;
}

.betania-hero .wp-block-button__link {
	min-height: 44px;
	padding: 0 22px;
	border-radius: 5px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.15em;
	text-shadow: none;
}

/* Live shows no ↗ on "Unde ne găsești?"; the screen-reader note about the new tab stays. */
.betania-hero .wp-block-button__link[target="_blank"]::after {
	display: none;
}

@media (min-width: 1024px) {
	/* Live pins the photo to the window, 50px down, under the 100px bar: the photo starts 50px above the hero. */
	.betania-hero > .wp-block-cover__image-background {
		top: -50px;
		height: calc(100% + 50px);
		object-position: 50% 0;
	}
}

/*
 * Hero parallax, as on live (UI-54): assets/js/parallax.js sets --betania-parallax-y to 0.4× how far the
 * hero has scrolled out of view, and the photo follows with a transform, so scrolling never repaints a
 * background. Desktop only and never under reduced motion; elsewhere the photo stays as it was.
 */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.betania-hero > .wp-block-cover__image-background {
		transform: translate3d(0, var(--betania-parallax-y, 0px), 0);
		will-change: transform;
	}

	/* The photo has to live on its own layer to move; the veil goes with it (it only varies sideways, and
	   the strip it uncovers at the top is always already out of view). */
	.betania-intro--page {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		background: none;
	}

	.betania-intro--page::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			var(--betania-page-veil),
			url("assets/img/betania-hero-bible.jpg") 50% -34px / cover no-repeat;
		background-image:
			var(--betania-page-veil),
			image-set(url("assets/img/betania-hero-bible.webp") type("image/webp"), url("assets/img/betania-hero-bible.jpg") type("image/jpeg"));
		transform: translate3d(0, var(--betania-parallax-y, 0px), 0);
		will-change: transform;
	}
}

@media (max-width: 1023px) {
	.betania-hero {
		padding-top: calc(38vh - 100px);
	}

	/* NEXT-21: phones and tablets get a 1200px copy of the photo (75 KB instead of 172 KB); it is the
	   largest element on these pages, so it decides how soon they look loaded. The crop is unchanged. */
	.betania-intro--page {
		background-image:
			var(--betania-page-veil),
			image-set(url("assets/img/betania-hero-bible-1200.webp") type("image/webp"), url("assets/img/betania-hero-bible.jpg") type("image/jpeg"));
	}
}

@media (max-width: 767px) {
	.betania-hero {
		--betania-hero-veil: linear-gradient(0deg, rgb(15 22 38 / 85%) 0%, rgb(15 22 38 / 55%) 55%, rgb(15 22 38 / 15%) 100%);
		padding-top: calc(38vh - 110px);
	}

	.betania-wordmark__name {
		font-size: 4.25rem;
		letter-spacing: -1.6px;
	}

	.betania-wordmark__full {
		margin-top: 7px;
		font-size: 0.975rem;
	}

	.betania-hero__address {
		font-size: var(--wp--preset--font-size--medium);
	}

	.betania-hero .wp-block-buttons {
		gap: 8px;
	}

	.betania-hero .wp-block-button__link {
		padding: 10px 22px;
		line-height: 1.35;
		letter-spacing: 0.15em;
	}
}

/* "Suntem live acum" (betania.js puts it first in the hero): red, 5px corners and a soft shadow, as on live. */
.betania-live-pill__wrap {
	margin: 0 0 22px;
}

.betania-live-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	box-sizing: border-box;
	padding: 12px 26px;
	border-radius: 5px;
	background: #d32f2f;
	box-shadow: 0 4px 18px rgb(0 0 0 / 25%);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-decoration: none;
}

.betania-live-pill:is(:hover, :focus-visible) {
	background: #b71c1c;
	color: var(--wp--preset--color--white);
}

.betania-live-pill::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------------
   Page content rhythm
   --------------------------------------------------------------------- */

.betania-content > * + :is(.wp-block-group, .wp-block-columns, .wp-block-heading.is-style-betania-section-title) {
	margin-block-start: var(--wp--preset--spacing--50);
}

.betania-content > .wp-block-separator {
	margin-block: var(--wp--preset--spacing--50);
}

/* A centred section, as on Mocheta (title, short text, then the component). */
.betania-section {
	text-align: center;
}

.betania-section > :is(p, .wp-block-heading) {
	max-width: 42rem;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------
   Casetă evidențiată: text between two hairlines
   --------------------------------------------------------------------- */

.betania-box {
	border-block: var(--betania-hairline);
	text-align: center;
}

.betania-box > .is-style-betania-subtitle {
	color: var(--wp--preset--color--brown);
}

.betania-box .wp-block-buttons {
	justify-content: center;
}

/* ---------------------------------------------------------------------
   Program (markup from the betania-core shortcode)
   --------------------------------------------------------------------- */

/* UI-24: one schedule everywhere, as on live: the church photo under a 90% peach veil, navy text, left-aligned
   in up to four columns. Acasă had a second treatment (brown times, hairlines, white card) and Contact copied
   this one in its own CSS; the !important beats the pattern's inline padding. */
.betania-program-box {
	padding: 22px 18px !important;
	border: 0;
	border-radius: 6px;
	background:
		linear-gradient(color-mix(in srgb, var(--wp--preset--color--peach-light) 90%, transparent), color-mix(in srgb, var(--wp--preset--color--peach-light) 90%, transparent)),
		url("assets/img/betania-church-building.jpg") center 35% / cover no-repeat;
	/* WebP is about a third of the bytes; browsers without image-set() keep the JPG above. */
	background-image:
		linear-gradient(color-mix(in srgb, var(--wp--preset--color--peach-light) 90%, transparent), color-mix(in srgb, var(--wp--preset--color--peach-light) 90%, transparent)),
		image-set(url("assets/img/betania-church-building.webp") type("image/webp"), url("assets/img/betania-church-building.jpg") type("image/jpeg"));
	box-shadow: none;
	color: var(--wp--preset--color--navy);
	text-align: left;
}

@media (min-width: 768px) {
	.betania-program-box {
		padding: 30px 36px 28px !important;
	}
}

.betania-program-box > .is-style-betania-subtitle {
	margin: 0 0 18px;
	color: var(--wp--preset--color--navy);
	/* UI-49: the one section-title style (theme.json h2): size "large", tracked caps. */
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: 0.12em;
}

.betania-program {
	margin: 0;
	padding: 0;
	list-style: none;
}

.betania-program--grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	border: 0;
}

@media (min-width: 768px) {
	.betania-program--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 32px;
	}
}

@media (min-width: 992px) {
	.betania-program--grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.betania-program__group {
	padding: 0;
}

.betania-program--grid .betania-program__day {
	margin: 0 0 10px;
	font-size: var(--wp--preset--font-size--medium);
	/* UI-49: days written as typed ("Duminică"), as on live and on Despre noi / Contact (NEXT-04). */
	letter-spacing: 0.03em;
	text-transform: none;
}

.betania-program__sessions {
	display: grid;
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* UI-10: navy, not grey: grey-text is only about 4:1 on the peach veil. */
.betania-program--grid .betania-program__sessions {
	gap: 12px;
	color: var(--wp--preset--color--navy);
}

/* UI-24: navy as on live; brown times on Acasă only made the same schedule look like a second one. */
.betania-program--grid .betania-program__time {
	display: block;
	color: var(--wp--preset--color--navy);
	/* UI-49: Roboto 500 as on live and on Contact / Despre noi, so the hours read as one schedule. */
	font-family: var(--wp--preset--font-family--roboto, inherit);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.betania-program--grid .betania-program__note {
	grid-column: 1 / -1;
	max-width: none;
	margin: 2px 0 0;
	padding: 14px 0 0;
	/* The grey hairline is made for white; on the peach veil a faded navy shows. */
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 15%, transparent);
	text-align: left;
	/* UI-13: navy at 400; grey Roboto 300 at 14px was the hardest line to read on Acasă. */
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.55;
}

.betania-program--box {
	display: grid;
	gap: 0;
	border-top: var(--betania-hairline);
}

.betania-program--box > li {
	padding: 0.875rem 0;
	border-bottom: var(--betania-hairline);
}

.betania-program--box .betania-program__day {
	font-family: var(--wp--preset--font-family--dosis);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-inline-end: 0.5rem;
}

.betania-program--box .betania-program__time {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

.betania-program--box .betania-program__note {
	display: inline-block;
	margin-top: 0.25rem;
	color: var(--wp--preset--color--grey-text);
	font-size: var(--wp--preset--font-size--small);
}

.betania-program--short {
	display: grid;
	gap: 1rem;
}

/* UI-50: 15px/700, as the footer days on live; 13px was hard to scan on a phone. */
.betania-program--short dt {
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--note);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.betania-program--short dd {
	margin: 0.125rem 0 0;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   ⓘ note (footer schedule); on phones the note is a banner at the bottom
   --------------------------------------------------------------------- */

.betania-info {
	position: relative;
	display: inline-block;
	vertical-align: -0.3em;
}

.betania-info__btn {
	--ico: var(--betania-ico-info);
	--ico-size: 1.125rem;
	position: relative;
	display: inline-grid;
	place-items: center;
	/* UI-63: the button itself is 44×44, so it measures as a full target; the -8px margins keep the
	   line it sits in exactly as tall and as wide as with the old 28px button. */
	width: 44px;
	height: 44px;
	margin: -8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	/* UI-26: brown, like the other warm labels; gold-text was a third warm shade in the same column. */
	color: var(--wp--preset--color--brown);
	cursor: pointer;
}

/* The button is already 44px; the overlay no longer reaches past it into the neighbouring text. */
.betania-info__btn::after {
	content: "";
	position: absolute;
	inset: 0;
}

.betania-info__text {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 0.5rem);
	z-index: 30;
	width: 16.25rem;
	max-width: 78vw;
	padding: 0.875rem 1rem;
	border: var(--betania-hairline);
	/* UI-26: peach, not the Mocheta gold. */
	border-top: 2px solid var(--wp--preset--color--gold);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	box-shadow: 0 8px 24px rgb(21 42 63 / 12%);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.45;
	text-transform: none;
	text-align: left;
	transform: translateX(-50%);
	visibility: hidden;
	opacity: 0;
}

.betania-info:is(:hover, :focus-within, .betania-info--open) .betania-info__text {
	visibility: visible;
	opacity: 1;
}

@media (max-width: 600px) {
	.betania-info__text {
		position: fixed;
		left: 1rem;
		right: 1rem;
		bottom: 1rem;
		width: auto;
		max-width: none;
		transform: none;
		font-size: var(--wp--preset--font-size--note);
	}
}

/* ---------------------------------------------------------------------
   Bank details (pattern betania/date-bancare), as on the live site: holder, bank, then one row per
   account with label / value / "Copiază" (copiaza.js). Stacked on phones, three columns from 768px.
   --------------------------------------------------------------------- */

/* UI-24: the same white box with a hairline on Acasă and Donează (it was Acasă's own rule, so Donează showed
   the bare list); 45rem is the Acasă text column. */
.betania-bank-details {
	box-sizing: border-box;
	max-width: 45rem;
	padding: 2rem;
	border: var(--betania-hairline);
	border-radius: 6px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 4px 16px color-mix(in srgb, var(--wp--preset--color--navy) 6%, transparent);
	text-align: left;
}

.betania-bank-details > * {
	margin-block: 0;
}

.betania-bank-details__holder,
.betania-bank-details__bank {
	margin-block-end: 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.06em;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

/* Live: the bank line in plain Dosis 400, not capitals. */
.betania-bank-details__bank {
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.betania-bank-details__list {
	max-width: 620px;
	margin-block: 0.875rem 0.375rem;
	margin-inline: 0;
	text-align: left;
}

.betania-account {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.375rem;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: var(--betania-hairline);
}

.betania-account > *,
.betania-account .wp-block-buttons {
	margin: 0;
}

/* UI-64: the palette's secondary grey (5.9:1); the old #6b7488 passed AA only just (4.7:1) at 13px. */
.betania-account__label strong {
	color: var(--wp--preset--color--grey-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.betania-iban {
	color: var(--wp--preset--color--navy);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--wp--preset--font-size--note);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	user-select: all;
	white-space: nowrap;
}

.betania-copy,
.betania-copy .wp-block-button__link {
	width: 100%;
}

.betania-copy .wp-block-button__link {
	--ico: var(--betania-ico-copy);
	--ico-size: 1.15em;
	gap: 6px;
	padding: 8px 14px;
	line-height: 1;
	white-space: nowrap;
}

.betania-copy .wp-block-button__link.is-copied {
	--ico: var(--betania-ico-check);
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

@media (min-width: 768px) {
	.betania-account {
		grid-template-columns: 120px minmax(0, 1fr) auto;
		gap: 0.875rem;
		padding: 0.6875rem 0;
	}

	.betania-iban {
		font-size: var(--wp--preset--font-size--medium);
		letter-spacing: 0.02em;
	}

	.betania-copy,
	.betania-copy .wp-block-button__link {
		width: auto;
	}
}

/* ---------------------------------------------------------------------
   Cards: link cards (whole card clickable) and list cards (events), in hairlines
   --------------------------------------------------------------------- */

.betania-card {
	position: relative;
	height: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--white);
}

.betania-card > * {
	margin: 0;
}

.betania-card--youtube { --ico: var(--betania-ico-youtube); }
.betania-card--facebook { --ico: var(--betania-ico-facebook); }
.betania-card--instagram { --ico: var(--betania-ico-instagram); }
.betania-card--map-pin { --ico: var(--betania-ico-map-pin); }

/* Link cards: white boxes, navy icons on a light circle. */
.betania-cards.wp-block-group {
	gap: 1.25rem;
}

.betania-card--link {
	align-items: center;
	padding: 4.5rem 1rem 1.5rem;
	border: var(--betania-hairline);
	border-radius: 6px;
	text-align: center;
}

.betania-card--link::before {
	content: "";
	position: absolute;
	top: 1.5rem;
	left: 50%;
	width: 1.75rem;
	height: 1.75rem;
	transform: translateX(-50%);
	z-index: 1;
	pointer-events: none;
	background: var(--wp--preset--color--navy);
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
}

/* Platform colours were dropped (UI-09): every icon is navy on a light circle, as on live.
   The mask clips the icon's own box, so the circle has to be a separate pseudo-element. */
.betania-card--link::after {
	content: "";
	position: absolute;
	top: 0.75rem;
	left: 50%;
	width: 3.25rem;
	height: 3.25rem;
	transform: translateX(-50%);
	border-radius: 50%;
	pointer-events: none;
	background: var(--wp--preset--color--grey-light);
}

.betania-card--link:is(:hover, :focus-within)::after {
	background: var(--wp--preset--color--white);
}

.betania-card--link .betania-card__title {
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.08em;
}

.betania-card .betania-card__title a,
.betania-card .wp-block-post-title a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

/* The heading link stretches over the whole card. */
.betania-card :is(.betania-card__title, .wp-block-post-title) a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* UI-13: navy, and 400 because Roboto 300 is too thin at 15px. */
.betania-card--link p:not(.betania-card__action) {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--note);
	font-weight: 400;
	line-height: 1.6;
}

.betania-card__action {
	margin-top: auto;
	padding-top: 0.25rem;
	color: var(--wp--preset--color--brown);
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--navy) 40%, transparent);
	text-underline-offset: 0.4em;
}

.betania-card__action::after {
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-inline-start: 0.35em;
	background: currentColor;
	-webkit-mask: var(--betania-ico-arrow-up-right) center / contain no-repeat;
	mask: var(--betania-ico-arrow-up-right) center / contain no-repeat;
}

.betania-card--link:is(:hover, :focus-within) {
	border-top-color: var(--wp--preset--color--gold-heading);
}

.betania-card--link:is(:hover, :focus-within) .betania-card__action {
	color: var(--wp--preset--color--gold-text);
	/* UI-26: navy, not currentColor, so the hover underline does not turn warm like the label. */
	text-decoration-color: var(--wp--preset--color--navy);
}

/* The stretched link draws the focus ring around the whole card. */
.betania-card :is(.betania-card__title, .wp-block-post-title) a:focus-visible {
	outline: none;
}

.betania-card :is(.betania-card__title, .wp-block-post-title) a:focus-visible::after {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

/* Event cards keep a frame: it helps scanning a list. */
.betania-card--article {
	padding: 0 0 1.25rem;
	border: var(--betania-hairline);
	overflow: hidden;
}

.betania-card--article:is(:hover, :focus-within) {
	border-color: var(--wp--preset--color--gold);
}

.betania-card--article > :not(.betania-card__photo) {
	padding-inline: 1.25rem;
}

.betania-card--article > .betania-card__photo + *,
.betania-card--article > :first-child:not(.betania-card__photo) {
	margin-top: 1.25rem;
}

.betania-card--article .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--grey-text);
	margin: 0;
}

.betania-card--article .wp-block-post-excerpt__more-text {
	display: none;
}

.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--40);
}

/* ---------------------------------------------------------------------
   Timeline (Istoric)
   --------------------------------------------------------------------- */

.betania-timeline {
	position: relative;
}

.betania-timeline::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 0.75rem;
	bottom: 0.75rem;
	width: 1px;
	background: var(--wp--preset--color--gold);
}

.betania-timeline > .betania-timeline__stage {
	position: relative;
	margin: 0;
	padding: 0 0 2.5rem 2.75rem;
}

.betania-timeline > .betania-timeline__stage:last-child {
	padding-bottom: 0;
}

.betania-timeline__stage::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3rem;
	width: 15px;
	height: 15px;
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--gold-heading);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
}

.betania-timeline__stage:first-child::before,
.betania-timeline__stage--today::before {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
}

.betania-timeline__stage > * + * {
	margin-block-start: 0.75rem;
}

.betania-timeline__houses {
	list-style: none;
	padding: 0.875rem 0;
	border-block: var(--betania-hairline);
}

.betania-timeline__houses > li {
	position: relative;
	margin-block: 0.375rem;
	padding-inline-start: 1.75rem;
}

.betania-timeline__houses > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.125rem;
	height: 1.125rem;
	background: var(--wp--preset--color--brown);
	-webkit-mask: var(--betania-ico-house) center / contain no-repeat;
	mask: var(--betania-ico-house) center / contain no-repeat;
}

.betania-timeline__step {
	position: relative;
	padding-inline-start: 1.5rem;
	border-inline-start: var(--betania-hairline);
}

.betania-timeline__step::before {
	content: "";
	position: absolute;
	left: -4px;
	top: 0.45rem;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
}

.betania-timeline__step > * {
	margin: 0;
}

.betania-timeline__step-label {
	color: var(--wp--preset--color--brown);
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.betania-timeline > .betania-timeline__stage {
		padding-left: 2.25rem;
	}
}

/* ---------------------------------------------------------------------
   Pasul următor: the handwritten invitation that closes a page
   --------------------------------------------------------------------- */

.betania-next-step {
	border-top: var(--betania-hairline);
	text-align: center;
}

.betania-next-step > p {
	max-width: 38rem;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------
   Live: player poster, info band, archive
   --------------------------------------------------------------------- */

.betania-live > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.betania-live__player {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.betania-live__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.betania-live__band {
	gap: var(--wp--preset--spacing--20);
	padding-inline: 0;
	border-block: var(--betania-hairline);
}

.betania-live__text {
	flex: 1 1 22rem;
}

.betania-live__text p {
	margin: 0;
}

.betania-live__title {
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.betania-live__title strong {
	font-weight: 800;
}

.betania-archive > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.betania-archive__grid {
	gap: 1.25rem 1.75rem;
}

/* ---------------------------------------------------------------------
   Campaign: card, progress (big gold number + navy bar), suggested amounts
   --------------------------------------------------------------------- */

.betania-campaign {
	border: var(--betania-hairline);
	text-align: center;
}

.betania-campaign h2 {
	margin-block: 0.25rem 0;
}

.betania-campaign .wp-block-buttons {
	justify-content: center;
}

.betania-campaign__progress {
	max-width: 47.5rem;
	margin-inline: auto;
}

.betania-campaign__progress:empty {
	display: none;
}

.betania-progress {
	display: grid;
	gap: 1rem;
	margin-top: 0.5rem;
}

.betania-progress p {
	margin: 0;
}

.betania-progress__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 0.5rem 1.25rem;
	text-align: left;
}

.betania-progress__amount strong {
	display: block;
	color: var(--wp--preset--color--gold-heading);
	font-family: var(--wp--preset--font-family--dosis);
	font-size: clamp(2.5rem, 1.75rem + 3.2vw, 3.625rem);
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.betania-progress__amount span,
.betania-progress__goal,
.betania-progress__percent {
	color: var(--wp--preset--color--grey-text);
}

.betania-progress__bar {
	height: 14px;
	border-radius: 999px;
	overflow: hidden;
	background: rgb(21 42 63 / 12%);
}

.betania-progress__bar > span {
	display: block;
	/* UI-56: the fill is the full bar scaled to --p (0-1, set by betania.js), so a change of value
	   eases on the compositor instead of re-laying out the bar every frame. */
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--wp--preset--color--navy);
	transform: scaleX(var(--p, 0));
	transform-origin: left center;
}

.betania-progress__percent {
	text-align: center;
}

.betania-campaign__note {
	max-width: 44rem;
	margin-inline: auto;
	color: var(--wp--preset--color--grey-text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

@media (max-width: 640px) {
	.betania-progress__top {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

.betania-amounts.is-layout-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	max-width: 45rem;
	margin-inline: auto;
	border-block: var(--betania-hairline);
	text-align: center;
}

.betania-amount {
	padding: 1.25rem 0.875rem;
}

.betania-amount + .betania-amount {
	border-inline-start: var(--betania-hairline);
}

.betania-amount > p {
	margin: 0;
}

.betania-amount__value {
	color: var(--wp--preset--color--gold-heading);
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.betania-amount__what {
	margin-top: 0.375rem;
	font-size: var(--wp--preset--font-size--note);
	line-height: 1.45;
}

@media (max-width: 640px) {
	.betania-amounts.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.betania-amount + .betania-amount {
		border-inline-start: 0;
		border-top: var(--betania-hairline);
	}
}

/* The closing thank-you line of a campaign page. */
.betania-thanks {
	max-width: 44rem;
	margin-inline: auto;
	padding-top: 2rem;
	border-top: var(--betania-hairline);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.65;
	text-align: center;
}

/* ---------------------------------------------------------------------
   Footer: white columns with peach rules, navy bar with the logo
   --------------------------------------------------------------------- */

.site-footer__main {
	border-top: var(--betania-hairline);
}

/* UI-25: a grey hairline, as on live; peach stays for the main action and the current page. */
.site-footer__main .is-style-betania-subtitle {
	margin-bottom: 1.125rem;
	padding-bottom: 0.75rem;
	border-bottom: var(--betania-hairline);
}

/* UI-13: navy as on live; the hours are back at 18px, where Roboto 300 still reads well. */
.site-footer__main dd,
.site-footer__links li {
	color: var(--wp--preset--color--navy);
}

.site-footer__main dd {
	font-size: var(--wp--preset--font-size--medium);
}

/* UI-13: Roboto 300 is too thin below 18px. */
.site-footer__links li {
	font-weight: 400;
}

.site-footer__main a {
	color: var(--wp--preset--color--navy);
}

.site-footer__main p.betania-ico,
.site-footer__links li {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

/* UI-13: the icons take the text colour (identity profile), not brown. */
.site-footer__main :is(p.betania-ico, li.betania-ico)::before {
	align-self: center;
	color: currentColor;
}

.site-footer__links {
	display: grid;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__links li {
	min-height: 2rem;
}

.site-footer__bottom p {
	margin: 0;
	color: #c9d2de;
}

/* The logo is navy on transparent; in the dark bar it shows white. */
.site-footer__logo img {
	filter: brightness(0) invert(1);
}

@media (max-width: 781px) {
	/* UI-60: the columns stack here; 48px between groups against 18px under each title, so the
	   three groups read as three, not as one long list. */
	.site-footer__main .wp-block-columns {
		row-gap: 3rem;
	}

	/* UI-61: 44px tall, and the link reaches back over its icon (padding + equal negative margin), so the
	   icon is part of the tap target without moving it or changing the markup. */
	.site-footer__main :is(p.betania-ico, li.betania-ico) > a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin-inline-start: calc(-1 * (var(--ico-size, 1.1em) + 0.5rem));
		padding-inline-start: calc(var(--ico-size, 1.1em) + 0.5rem);
	}
}

/* ---------------------------------------------------------------------
   404 and search
   --------------------------------------------------------------------- */

/* NEXT-04: the 404 text kept the narrow column but centred it, ~170px right of the hero title; on live it
   starts at the left edge of the text column, like every other page. Same width, aligned left. */
body.error404 main.is-layout-constrained > :not(.alignfull) {
	margin-left: 0 !important;
}

.betania-search .wp-block-search__input {
	min-height: 44px;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--wp--preset--color--grey-text);
	border-radius: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.betania-search .wp-block-search__label {
	font-family: var(--wp--preset--font-family--dosis);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   Motion: only for visitors who have not asked to reduce it
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	.betania-card,
	.betania-card--link::after,
	.betania-card__action,
	.wp-block-button__link,
	.is-style-betania-tags li > a {
		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	}

	/* UI-55: the menu fades like the buttons do (it was instant). */
	.betania-nav .wp-block-navigation-item__content {
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.betania-nav .wp-block-navigation-item__label {
		transition: text-decoration-color 0.15s ease;
	}

	/* UI-53: the docked bar slides in from above instead of appearing in one frame; only transform and
	   opacity move, so nothing below reflows. Desktop only, where the bar docks. */
	@media (min-width: 1024px) {
		.betania--sticky .site-header__bar {
			animation: betania-dock 0.2s ease-out;
		}
	}

	.betania-progress__bar > span {
		transition: transform 0.8s ease-out;
	}

	.betania-info__text {
		transition: opacity 0.15s ease, visibility 0s linear 0.15s;
	}

	.betania-info:is(:hover, :focus-within, .betania-info--open) .betania-info__text {
		transition: opacity 0.15s ease;
	}

	/* The only ambient motion on the site: the live dot pulses while the channel is live. */
	.betania--live .betania-nav__live > a .wp-block-navigation-item__label::after,
	.betania--live .betania-nav .wp-block-navigation__responsive-container-open::after,
	.betania-live-pill::before {
		animation: betania-puls 1.4s ease-in-out infinite;
	}
}

@keyframes betania-puls {
	50% {
		opacity: 0.3;
	}
}

@keyframes betania-dock {
	from {
		transform: translateY(-100%);
		opacity: 0.6;
	}
}

/* ---------------------------------------------------------------------
   Back to top ("Înapoi sus", inc/back-to-top.php), as on the live site (#scroll-top .scrollup, measured
   26.10.2026): a 44px navy circle, 32px from the right and 48px from the bottom, white 20px chevron, no border.
   It shows only with html.betania--scrolled (betania.js, past 100px).
   --------------------------------------------------------------------- */

.betania-to-top {
	position: fixed;
	right: 32px;
	bottom: 48px;
	z-index: 40;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.betania-to-top::before {
	content: "";
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--betania-ico-chevron-up) center / contain no-repeat;
	mask: var(--betania-ico-chevron-up) center / contain no-repeat;
}

.betania--scrolled .betania-to-top {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* The white ring fills the outline gap, so the focus stays visible over the navy footer strip too. */
.betania-to-top:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--white);
}

/* The click moves focus to the header (betania.js) only so Tab continues from the top; it needs no ring there. */
.site-header[tabindex="-1"]:focus {
	outline: none;
}

/* Phones: out of the way while a "Copiază" button passes under it (betania.js) or the ⓘ banner is open. */
.betania-to-top.betania-to-top--yield {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 600px) {
	body:has(.betania-info:is(:hover, :focus-within, .betania-info--open)) .betania-to-top {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.betania-to-top {
		transition: opacity 0.2s ease, visibility 0s linear 0.2s;
	}

	.betania--scrolled .betania-to-top:not(.betania-to-top--yield) {
		transition: opacity 0.2s ease;
	}
}