/* =====================================================
   Unilumin Bulgaria — design system
   ===================================================== */

:root {
	--ul-navy: #0a1228;
	--ul-navy-soft: #101b38;
	--ul-blue: #0b5fd9;
	--ul-cyan: #38bdf8;
	--ul-mist: #f3f6fb;
	--ul-line: #e3e9f2;
	--ul-muted: #5b6678;
	--ul-muted-light: #9fb0ce;
	--ul-radius: 14px;
	--ul-shadow: 0 10px 30px rgba(10, 18, 40, 0.08);
	--ul-shadow-lg: 0 24px 60px rgba(10, 18, 40, 0.16);
}

html {
	scroll-behavior: smooth;
}

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

/* page sections sit flush — no white slivers between full-width bands
   (each section carries its own padding) */
.wp-block-post-content > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

img {
	height: auto;
	max-width: 100%;
}

/* ---------- eyebrow label ---------- */
.ul-eyebrow {
	display: inline-block;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ul-blue);
	background: rgba(11, 95, 217, 0.08);
	border: 1px solid rgba(11, 95, 217, 0.18);
	border-radius: 999px;
	padding: 0.45rem 1.1rem;
}

.ul-dark .ul-eyebrow,
.ul-hero .ul-eyebrow {
	color: var(--ul-cyan);
	background: rgba(56, 189, 248, 0.1);
	border-color: rgba(56, 189, 248, 0.25);
}

/* ---------- hero ---------- */
.ul-hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(1100px 500px at 80% -10%, rgba(11, 95, 217, 0.55), transparent 60%),
		radial-gradient(800px 420px at 10% 110%, rgba(56, 189, 248, 0.18), transparent 60%),
		linear-gradient(160deg, #0a1228 10%, #0d1d44 90%);
}

.ul-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(900px 480px at 70% 20%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(900px 480px at 70% 20%, #000 30%, transparent 75%);
}

.ul-hero > * {
	position: relative;
	z-index: 1;
}

.ul-hero h1,
.ul-hero h2,
.ul-hero h3 {
	color: #fff;
}

.ul-hero p {
	color: var(--ul-muted-light);
}

.ul-hero a:not(.wp-block-button__link) {
	color: var(--ul-cyan);
}

/* ---------- dark sections ---------- */
.ul-dark {
	background-color: var(--ul-navy);
	color: #e8eefb;
}

.ul-dark h1, .ul-dark h2, .ul-dark h3, .ul-dark h4 {
	color: #fff;
}

.ul-dark p {
	color: var(--ul-muted-light);
}

/* ---------- mist section ---------- */
.ul-mist-bg {
	background-color: var(--ul-mist);
}

/* ---------- gradient text ---------- */
.ul-gradient-text {
	background: linear-gradient(90deg, #5ea2ff 0%, #38bdf8 60%, #7dd3fc 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}

/* ---------- cards ---------- */
.ul-card {
	background: #fff;
	border: 1px solid var(--ul-line);
	border-radius: var(--ul-radius);
	padding: 1.8rem !important;
	box-shadow: var(--ul-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	height: 100%;
}

.ul-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ul-shadow-lg);
	border-color: rgba(11, 95, 217, 0.35);
}

.ul-card h3, .ul-card h4 {
	margin-top: 0.4rem;
}

.ul-card-dark {
	background: var(--ul-navy-soft);
	border: 1px solid rgba(159, 176, 206, 0.16);
	border-radius: var(--ul-radius);
	padding: 1.8rem !important;
	transition: transform 0.25s ease, border-color 0.25s ease;
	height: 100%;
}

.ul-card-dark:hover {
	transform: translateY(-4px);
	border-color: rgba(56, 189, 248, 0.45);
}

.ul-card-dark h3, .ul-card-dark h4 {
	color: #fff;
	margin-top: 0.4rem;
}

.ul-card-dark p {
	color: var(--ul-muted-light);
}

/* product card image area */
.ul-card-figure {
	background: radial-gradient(420px 200px at 50% 0%, rgba(11, 95, 217, 0.16), transparent 70%), var(--ul-mist);
	border-radius: 10px;
	padding: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	margin-bottom: 1rem;
}

.ul-card-figure img {
	max-height: 190px;
	width: auto;
	object-fit: contain;
}

/* ---------- stats strip ---------- */
.ul-stats {
	text-align: center;
	row-gap: 1.5rem;
}

.ul-stats > .wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

@media (max-width: 781px) {
	.ul-stats {
		flex-direction: row !important;
		flex-wrap: wrap !important;
	}
	.ul-stats > .wp-block-column {
		flex-basis: 45% !important;
		flex-grow: 1;
	}
}

/* ---------- stat numbers ---------- */
.ul-stat-number {
	font-size: clamp(2.2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	background: linear-gradient(90deg, #5ea2ff, #38bdf8);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin: 0;
}

.ul-stat-label {
	font-size: 0.92rem;
	color: var(--ul-muted-light);
	margin-top: 0.3rem !important;
}

/* ---------- product render glow on dark ---------- */
.ul-img-glow img {
	filter: drop-shadow(0 30px 60px rgba(56, 189, 248, 0.25));
}

/* ---------- check / feature lists ---------- */
.ul-check-list {
	list-style: none;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

.ul-check-list li {
	position: relative;
	padding-left: 1.9em;
	margin-bottom: 0.55em;
}

.ul-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1.15em;
	height: 1.15em;
	border-radius: 50%;
	background: linear-gradient(135deg, #0b5fd9, #38bdf8);
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round" d="M4 12.5l5.2 5.2L20 6.5"/></svg>') center / 70% no-repeat,
		linear-gradient(#000, #000);
	mask-composite: exclude;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round" d="M4 12.5l5.2 5.2L20 6.5"/></svg>') center / 70% no-repeat;
	background: linear-gradient(135deg, #0b5fd9, #38bdf8);
}

.ul-dark .ul-check-list li::before,
.ul-hero .ul-check-list li::before {
	background: linear-gradient(135deg, #38bdf8, #7dd3fc);
}

/* ---------- spec tables ---------- */
.ul-specs table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	border: 1px solid var(--ul-line);
	border-radius: var(--ul-radius);
	overflow: hidden;
}

.ul-specs th,
.ul-specs td {
	border: 1px solid var(--ul-line);
	padding: 0.65rem 0.9rem;
	text-align: left;
	vertical-align: top;
}

.ul-specs tr > *:first-child {
	font-weight: 600;
	background: var(--ul-mist);
	white-space: nowrap;
}

.ul-specs thead th,
.ul-specs tr:first-child th {
	background: var(--ul-navy);
	color: #fff;
	font-weight: 700;
	border-color: rgba(255, 255, 255, 0.12);
}

.ul-specs figcaption {
	font-size: 0.85rem;
	color: var(--ul-muted);
}

@media (max-width: 781px) {
	.ul-specs {
		overflow-x: auto;
	}
	.ul-specs table {
		min-width: 640px;
	}
}

/* ---------- CTA band ---------- */
.ul-cta {
	background:
		radial-gradient(700px 320px at 85% 0%, rgba(56, 189, 248, 0.25), transparent 65%),
		linear-gradient(135deg, #0b3f9e 0%, #0b5fd9 70%);
	border-radius: var(--ul-radius);
	color: #fff;
	box-shadow: var(--ul-shadow-lg);
}

.ul-cta h2, .ul-cta h3 {
	color: #fff;
}

.ul-cta p {
	color: rgba(235, 243, 255, 0.85);
}

.ul-cta .wp-block-button__link {
	background: #fff;
	color: var(--ul-blue);
}

.ul-cta .wp-block-button__link:hover {
	background: var(--ul-mist);
	color: #0a4fb5;
}

/* ---------- header ---------- */
.ul-header {
	background: transparent;
}

/*
 * IMPORTANT: backdrop-filter turns .ul-header into the containing block for
 * position:fixed descendants, which would shrink the open mobile menu to the
 * height of the header bar. Remove it while the menu is open so the overlay
 * fills the whole viewport. (.has-modal-open is added by core on open; the
 * :has() rule is a fallback that needs no JS.)
 */
.has-modal-open .ul-header,
.ul-header:has(.wp-block-navigation__responsive-container.is-menu-open),
.has-modal-open header.wp-block-template-part,
header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	animation: none !important;
}

/* logo left, menu centered, actions right */
.ul-header-menu {
	flex-grow: 1;
	justify-content: center;
	min-width: 0;
}

.ul-header-actions {
	flex-shrink: 0;
}

/*
 * Navigation. The block uses overlayMenu="always", so WordPress core marks the
 * menu ".hidden-by-default" and the hamburger ".always-shown" at every width.
 *
 * DESKTOP / LAPTOP (>1024px): override that back into an inline horizontal bar
 * and hide the hamburger.
 */
@media (min-width: 1025px) {
	.ul-header .wp-block-navigation__responsive-container-open,
	.ul-header .wp-block-navigation__responsive-container-close {
		display: none !important;
	}

	.ul-header .wp-block-navigation__responsive-container,
	.ul-header .wp-block-navigation__responsive-container.hidden-by-default {
		display: block !important;
		position: static !important;
		inset: auto !important;
		width: auto !important;
		height: auto !important;
		padding: 0 !important;
		background-color: transparent !important;
		overflow: visible !important;
		z-index: auto !important;
	}

	.ul-header .wp-block-navigation__responsive-container-content {
		display: block !important;
		padding-top: 0 !important;
	}

	.ul-header .wp-block-navigation__responsive-container .wp-block-navigation__container {
		flex-direction: row !important;
		gap: 1.6rem;
	}
}

/*
 * PHONE / TABLET (≤1024px): the hamburger opens a full-screen VERTICAL overlay.
 * Core already does this, but we restate it so it works even if core's block
 * stylesheet is stripped by a cache/optimization plugin. Keep the hamburger
 * grouped to the right of the actions.
 */
@media (max-width: 1024px) {
	/* logo hugs the left; burger + CTA cluster on the right */
	.ul-header .ul-logo {
		margin-right: auto;
	}
	.ul-header-menu {
		flex-grow: 0;
		justify-content: flex-end;
	}

	.ul-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
		position: fixed !important;
		inset: 0 !important;
		flex-direction: column !important;
		background-color: #ffffff !important;
		z-index: 100000 !important;
		overflow: auto !important;
		padding: 1.5rem !important;
		/* guarantee the overlay is visible (some contexts leave the
		   core fade-in animation stuck at opacity:0) */
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.ul-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.ul-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.ul-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		width: 100% !important;
		gap: 0 !important;
	}

	/* each row is a flex line that core centres for the desktop bar; inside the
	   sheet the label has to start at the left edge and fill the row */
	.ul-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		justify-content: flex-start !important;
		border-bottom: 1px solid var(--ul-line);
	}

	.ul-header .is-menu-open .wp-block-navigation-item > a {
		width: 100%;
	}

	/* core centres the bar on desktop; inside the sheet everything reads left */
	.ul-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
		display: block;
		text-align: left;
		color: var(--ul-navy) !important;
		font-size: 1.1rem !important;
		font-weight: 600;
		padding: 0.85rem 0 !important;
		text-transform: none;
		letter-spacing: 0;
	}

	.ul-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: 0;
	}

	/* the open overlay is a white sheet — its chevrons must be dark too */
	.ul-header .is-menu-open .wp-block-navigation__submenu-icon {
		color: var(--ul-navy);
	}

	/* close button: dark on the white sheet, and big enough to hit */
	.ul-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: flex !important;
		position: absolute;
		top: 1.1rem;
		right: 1.1rem;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: var(--ul-mist);
		color: var(--ul-navy) !important;
		z-index: 2;
	}

	.ul-header .is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: 22px;
		height: 22px;
		fill: currentColor;
	}

	/* leave room for the close button above the first item */
	.ul-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 3.4rem !important;
	}

	/*
	 * Submenus behave like the desktop dropdowns: collapsed until the chevron
	 * is tapped. Core binds aria-expanded on that button, so the open state is
	 * read straight off it rather than duplicated in JS.
	 */
	.ul-header .is-menu-open .wp-block-navigation__submenu-container {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		border: none !important;
		box-shadow: none !important;
		min-width: 0 !important;
		padding: 0 0 0.4rem 1rem !important;
		display: none !important;
	}

	.ul-header .is-menu-open .wp-block-navigation-submenu:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"]) > .wp-block-navigation__submenu-container {
		display: flex !important;
		flex-direction: column;
	}

	.ul-header .is-menu-open .wp-block-navigation__submenu-container a {
		font-size: 0.98rem !important;
		font-weight: 500;
		padding: 0.5rem 0 !important;
		opacity: 0.8;
	}

	/* put the chevron on the same row as its label and make it tappable */
	.ul-header .is-menu-open .wp-block-navigation-item.has-child {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.ul-header .is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
		grid-column: 1 / -1;
	}

	/*
	 * Core hides the chevron inside the overlay — it normally expands every
	 * submenu there — and collapses its <svg> to zero width. Rather than fight
	 * that, keep core's button (it owns the toggle behaviour) and paint the
	 * chevron as a background, the same masking approach used by .ul-check-list.
	 */
	.ul-header .is-menu-open .wp-block-navigation-submenu__toggle {
		display: block !important;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		padding: 0 !important;
		border: 0;
		cursor: pointer;
		background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none"><path d="M1.5 4L6 8L10.5 4" stroke="%230a1228" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 18px 18px no-repeat;
		transition: transform 0.2s ease;
	}

	.ul-header .is-menu-open .wp-block-navigation-submenu__toggle svg {
		display: none;
	}

	.ul-header .is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
		transform: rotate(180deg);
	}
}

/*
 * Menu sits on the hero photo, so it has to be white. The generated global
 * styles carry a link-colour rule of the same specificity that loads after
 * this file, so the class on the anchor itself is needed to win the cascade.
 */
.ul-header .wp-block-navigation a.wp-block-navigation-item__content {
	font-weight: 600;
	font-size: 0.88rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.ul-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: var(--ul-cyan);
}

/* chevrons next to the parent items follow the link colour */
.ul-header .wp-block-navigation__submenu-icon {
	color: #fff;
}

/* the dropdown is a light panel, so its links stay dark */
.ul-header .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
	color: var(--ul-navy);
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.92rem;
}

/* hamburger + close icons inherit the header's white */
.ul-header .wp-block-navigation__responsive-container-open,
.ul-header .wp-block-navigation__responsive-container-close {
	color: #fff;
}

/* CTA: outlined white, as in the mockup */
.ul-header-actions .wp-block-button__link {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.75);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.85rem 1.7rem;
	border-radius: 4px;
	white-space: nowrap;
}

.ul-header-actions .wp-block-button__link:hover {
	background: #fff;
	color: var(--ul-navy);
	border-color: #fff;
}

.ul-logo-tag {
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 0.35rem !important;
	line-height: 1.2;
}

.ul-logo figure {
	margin: 0;
	line-height: 0;
}

/* size the wordmark by height only — pinning both axes distorts it */
.ul-logo img {
	height: 38px;
	width: auto;
	max-width: none;
}

/* dropdown polish */
.ul-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--ul-line) !important;
	border-radius: 10px;
	box-shadow: var(--ul-shadow-lg);
	padding: 0.4rem !important;
	min-width: 230px !important;
}

.ul-header .wp-block-navigation__submenu-container a {
	border-radius: 7px;
	padding: 0.55rem 0.8rem !important;
}

.ul-header .wp-block-navigation__submenu-container a:hover {
	background: var(--ul-mist);
}

/* ---------- footer ---------- */
.ul-footer {
	background: var(--ul-navy);
	color: var(--ul-muted-light);
}

.ul-footer h4 {
	color: #fff;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ul-footer a {
	color: var(--ul-muted-light);
}

.ul-footer a:hover {
	color: var(--ul-cyan);
}

.ul-footer .ul-footer-bottom {
	border-top: 1px solid rgba(159, 176, 206, 0.18);
	font-size: 0.88rem;
}

.ul-footer-logo {
	background: #fff;
	border-radius: 10px;
	padding: 0.7rem 1rem;
	display: inline-block;
}

.ul-footer-logo img {
	max-height: 40px;
	width: auto;
	display: block;
}

/* ---------- industry chips ---------- */
.ul-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	max-width: 860px;
	margin: 1.5rem auto;
}

.ul-chip {
	display: inline-block;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--ul-navy);
	background: #fff;
	border: 1px solid var(--ul-line);
	border-radius: 999px;
	padding: 0.55rem 1.1rem;
	transition: all 0.2s ease;
}

.ul-chip:hover {
	color: #fff;
	background: var(--ul-blue);
	border-color: var(--ul-blue);
	transform: translateY(-2px);
}

/* ---------- full-bleed photo (industry hero) ---------- */
.ul-hero-photo img {
	width: 100%;
	height: clamp(280px, 40vw, 500px);
	object-fit: cover;
	border-radius: var(--ul-radius);
	box-shadow: var(--ul-shadow-lg);
}

/* ---------- photo cards (industries) ---------- */
.ul-card-photo {
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 1rem;
}

.ul-card-photo img {
	width: 100%;
	height: 210px;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.ul-card:hover .ul-card-photo img {
	transform: scale(1.04);
}

/* hide header CTA on small screens (burger menu takes over) */
@media (max-width: 860px) {
	.ul-header .wp-block-buttons {
		display: none;
	}
	.ul-logo-tag {
		font-size: 0.62rem;
		margin-bottom: 0.2rem !important;
	}
	.ul-logo img {
		height: 28px;
	}
}

/* ---------- misc ---------- */
.ul-rounded img {
	border-radius: var(--ul-radius);
	box-shadow: var(--ul-shadow-lg);
}

.ul-divider {
	border: none !important;
	height: 1px !important;
	background: var(--ul-line) !important;
	opacity: 1;
}

.ul-kicker-line {
	width: 64px;
	height: 4px !important;
	border: none !important;
	border-radius: 4px;
	background: linear-gradient(90deg, #0b5fd9, #38bdf8) !important;
	opacity: 1;
}

/* breadcrumb-ish back link */
.ul-backlink a {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ul-cyan);
}

/* tighten figure margins inside cards */
.ul-card figure,
.ul-card-dark figure {
	margin: 0 0 1rem;
}

/* =====================================================
   2026-08 redesign
   ===================================================== */

/*
 * The header is lifted out of the flow and painted over the hero (see
 * "transparent header" below), so every hero band reserves room for it on top.
 * The 5–6rem paddings live as inline styles in each page's block markup, so
 * these overrides must be !important.
 */
.wp-block-post-content .ul-hero {
	padding-top: 11rem !important;
	padding-bottom: 3.4rem !important;
}

/* larger, more distinct section headings */
.wp-block-post-content h2.wp-block-heading {
	font-size: clamp(1.9rem, 1.35rem + 2vw, 2.7rem);
	letter-spacing: -0.02em;
}

/* ---------- homepage photo hero ---------- */
.wp-block-post-content .ul-hero-home {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding-top: 9.5rem !important;
	padding-bottom: 0 !important;
}

.ul-hero-home .ul-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none !important; /* escape the constrained-layout width cap */
	margin: 0 !important;
	object-fit: cover;
	object-position: 72% center;
	z-index: 0;
}

/* navy wash so the left-hand copy stays readable over the photo */
.ul-hero-home::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(8, 15, 36, 0.9) 0%, rgba(8, 15, 36, 0.66) 40%, rgba(8, 15, 36, 0.12) 100%),
		linear-gradient(180deg, rgba(8, 15, 36, 0.75) 0%, transparent 32%);
}

.ul-hero-home p {
	color: #d9e3f6;
}

/* the grid overlay would sit on top of the photo — hero image only */
.ul-hero-home::after {
	display: none;
}

/* headline: big, uppercase, tight — as in the approved mockup */
.ul-hero-home h1 {
	font-size: clamp(2rem, 1rem + 2.6vw, 3.4rem);
	line-height: 1.06;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	font-weight: 800;
	margin-bottom: 1.3rem !important;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.ul-hero-home h1 .ul-gradient-text {
	font-weight: 300;
}

.ul-hero-home .has-large-font-size {
	max-width: 33em;
	line-height: 1.5;
}

/* first button solid blue with an arrow, the rest outlined */
.ul-hero-home .wp-block-button__link {
	padding: 1rem 1.9rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.92rem;
	border-radius: 4px;
}

.ul-hero-home .wp-block-button:first-child .wp-block-button__link::after {
	content: "→";
	margin-left: 2.6rem;
	font-weight: 400;
}

.ul-hero-home .wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1px;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}

.ul-hero-home .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
}

@media (max-width: 781px) {
	.wp-block-post-content .ul-hero {
		padding-top: 9.5rem !important;
	}
	.wp-block-post-content .ul-hero-home {
		min-height: 0;
		padding-top: 9.5rem !important;
		padding-bottom: 0 !important;
	}
	.ul-hero-home::before {
		background: linear-gradient(180deg, rgba(8, 15, 36, 0.93) 0%, rgba(8, 15, 36, 0.84) 100%);
	}

	/* ease the type down a notch on phones — the desktop scale is too loud */
	.ul-hero-home h1 {
		font-size: clamp(1.6rem, 1rem + 3vw, 2rem);
	}
	.ul-hero-home .has-large-font-size {
		font-size: 1rem !important;
		line-height: 1.55;
	}
	.ul-hero-home .wp-block-button__link {
		font-size: 0.82rem;
		padding: 0.85rem 1.4rem;
	}
	.wp-block-post-content h1.wp-block-heading {
		font-size: clamp(1.7rem, 1.1rem + 3vw, 2.2rem);
	}
	.wp-block-post-content h2.wp-block-heading {
		font-size: clamp(1.5rem, 1rem + 2.6vw, 1.9rem);
	}
	.wp-block-post-content h3.wp-block-heading {
		font-size: 1.15rem;
	}
}

/* ---------- USP strip: sits along the bottom edge of the hero photo ---------- */
/*
 * The mockup runs nearly full-bleed, so the header row and the hero copy share
 * one wide container instead of the theme's 1200px wideSize. The header bar
 * carries its own 1.5rem side padding, hence the wider cap on it — that way the
 * logo and the headline land on the same left edge.
 */
.ul-header-bar,
.ul-topbar > .wp-block-group {
	max-width: calc(1500px + 3rem);
	margin-inline: auto;
}

.ul-hero-home > .wp-block-columns {
	/* the hero is a flex column: without an explicit width the auto side
	   margins below would collapse the row to its content width */
	width: 100%;
	max-width: 1500px !important;
	margin-top: auto !important;
	margin-bottom: auto !important;
	margin-inline: auto !important;
}

.ul-usp-bar {
	/* cancel the hero's own side padding so the bar runs edge to edge */
	margin-left: -1.5rem !important;
	margin-right: -1.5rem !important;
	background: rgba(8, 15, 36, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ul-usp {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	max-width: 1500px;
	margin: 0 auto;
}

.ul-usp-item {
	text-align: center;
	padding: 1.35rem 1rem;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.ul-usp-item:first-child {
	border-left: none;
}

.ul-usp-item svg {
	width: 46px;
	height: 46px;
	margin: 0 auto 0.85rem;
	display: block;
}

.ul-usp-item h3 {
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 0.45rem;
}

.ul-usp-item p {
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--ul-muted-light);
	margin: 0;
}

@media (max-width: 1024px) {
	.ul-usp {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 0.5rem;
	}
	.ul-usp-item:nth-child(4) {
		border-left: none;
	}
}

@media (max-width: 781px) {
	.ul-usp-bar {
		background: rgba(8, 15, 36, 0.8);
		margin-top: 2.2rem;
	}
}

@media (max-width: 640px) {
	.ul-usp {
		grid-template-columns: repeat(2, 1fr);
	}
	.ul-usp-item {
		padding: 1.2rem 0.75rem;
	}
	.ul-usp-item:nth-child(4) {
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}
	.ul-usp-item:nth-child(odd) {
		border-left: none;
	}
}

/* =====================================================
   Transparent header painted over the hero
   -----------------------------------------------------
   Every published page opens with a dark .ul-hero band, so the header is
   lifted out of the flow and laid over it (the heroes reserve top padding
   for it). Once the page scrolls past the hero the header re-attaches as a
   solid fixed bar — see assets/js/header.js, which toggles .is-stuck.
   ===================================================== */
header.wp-block-template-part {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
}

/* the hero has to start at y=0 for the header to sit on it — core's block gap
   would otherwise leave a strip of page background above it */
.wp-site-blocks > main {
	margin-top: 0 !important;
}

header.wp-block-template-part.is-stuck {
	position: fixed;
	background: rgba(8, 15, 36, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
	animation: ul-header-drop 0.25s ease;
}

/* the contact strip and the logo caption are decoration — reclaim their
   height once the bar is stuck so it stays compact */
header.wp-block-template-part.is-stuck .ul-topbar,
header.wp-block-template-part.is-stuck .ul-logo-tag {
	display: none;
}

header.wp-block-template-part.is-stuck .ul-header-bar {
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
}

@keyframes ul-header-drop {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}

/* ---------- top contact bar ---------- */
.ul-topbar {
	background: transparent;
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.85rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ul-topbar a {
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none;
}

.ul-topbar a:hover {
	color: var(--ul-cyan);
}

.ul-topbar-contacts {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.4rem;
}

.ul-topbar-contacts svg {
	width: 14px;
	height: 14px;
	vertical-align: -2px;
	margin-right: 0.4rem;
	fill: currentColor;
}

.ul-topbar-social {
	display: flex;
	align-items: center;
	gap: 0.95rem;
}

.ul-topbar-social a {
	display: block;
	line-height: 0;
}

.ul-topbar-social svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.ul-lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.ul-lang-switcher a {
	color: rgba(255, 255, 255, 0.6);
}

.ul-lang-switcher a.is-active {
	color: #fff;
}

.ul-lang-switcher .ul-lang-sep {
	color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 700px) {
	.ul-topbar {
		font-size: 0.76rem;
	}
	.ul-topbar-email {
		display: none;
	}
	.ul-topbar-contacts a {
		white-space: nowrap;
	}
	.ul-topbar-social {
		gap: 0.7rem;
	}
}

/* ---------- video embeds ---------- */
.ul-video-frame .wp-block-embed__wrapper {
	border-radius: var(--ul-radius);
	overflow: hidden;
	box-shadow: var(--ul-shadow-lg);
}

/* ---------- map embed ----------
   An iframe is inline-level, so the constrained layout's auto margins do not
   centre it — make it a block and give it the wide content width. */
.ul-map {
	display: block;
	width: 100%;
	max-width: 1200px !important;
	margin-inline: auto;
	border: 0;
	border-radius: var(--ul-radius);
	box-shadow: var(--ul-shadow);
}

/* ---------- компактна форма (колоната „мобилен шоурум“) ----------
   Тясна колона до видеото, затова всяко поле е на цял ред. */
.ul-form-compact {
	padding: 1.4rem !important;
}

.ul-form-compact h3 {
	margin-top: 0 !important;
	margin-bottom: 0.4rem !important;
}

.ul-form-compact .forminator-row {
	margin-bottom: 0.85rem !important;
}

.ul-form-compact .forminator-label {
	margin-bottom: 0.3rem !important;
	font-size: 0.88rem !important;
}

.ul-form-compact .forminator-input {
	min-height: 46px !important;
}

.ul-form-compact .forminator-button-submit {
	width: 100% !important;
	min-width: 0 !important;
}

/* ==========================================================================
   Промени 08/2026 — ЧЗВ акордеон, форма „Заявете оферта“, футър, интро секции
   Mobile-first: базовите правила са за телефон, брейкпойнтовете надграждат.
   ========================================================================== */

/* ---------- 1. светлосините надписи отпадат навсякъде ----------
   Блоковете са премахнати и от съдържанието; това е застраховка за
   страници/преводи, които все още носят стария маркъп.                     */
.ul-eyebrow {
	display: none !important;
}

/* ---------- 2. интро секция (замества премахнатите сини хедъри) ---------- */
.ul-section-intro > h1,
.ul-section-intro > h2 {
	margin-top: 0;
	margin-bottom: 0.75rem;
	line-height: 1.15;
	overflow-wrap: break-word;
}

.ul-section-intro > p {
	margin-top: 0;
	margin-bottom: 0.9rem;
	max-width: 62ch;
	color: var(--ul-muted);
}

.ul-section-intro > p:last-child {
	margin-bottom: 0;
}

/* ---------- 3. ЧЗВ акордеон ---------- */
.ul-faq {
	--ul-faq-gap: 0.7rem;
}

.ul-faq-section {
	margin: 2.5rem 0 1rem;
	font-size: clamp(1rem, 2.6vw, 1.15rem);
	letter-spacing: 0.08em;
	line-height: 1.4;
	color: var(--ul-blue);
	text-transform: uppercase;
}

.ul-faq-section:first-of-type {
	margin-top: 1rem;
}

.ul-faq-item {
	margin: 0 0 var(--ul-faq-gap);
	background: #fff;
	border: 1px solid var(--ul-line);
	border-radius: var(--ul-radius);
	box-shadow: var(--ul-shadow);
	overflow: hidden;
}

.ul-faq-item > summary {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	/* 56px минимална височина за удобен tap target на телефон */
	min-height: 56px;
	padding: 1rem 1.1rem;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--ul-navy);
	cursor: pointer;
	list-style: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.ul-faq-item > summary::-webkit-details-marker {
	display: none;
}

/* собствен маркер, за да е еднакъв във всички браузъри */
.ul-faq-item > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-top: 0.42em;
	margin-left: auto;
	border-right: 2px solid var(--ul-blue);
	border-bottom: 2px solid var(--ul-blue);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.25s ease;
}

.ul-faq-item[open] > summary::after {
	transform: rotate(-135deg);
}

.ul-faq-item[open] > summary {
	color: var(--ul-blue);
}

.ul-faq-item > summary:hover,
.ul-faq-item > summary:focus-visible {
	background: var(--ul-mist);
}

.ul-faq-item > summary:focus-visible {
	outline: 2px solid var(--ul-blue);
	outline-offset: -2px;
}

.ul-faq-item > :not(summary) {
	margin: 0 1.1rem;
}

.ul-faq-item > :not(summary):first-of-type {
	margin-top: 0.25rem;
}

.ul-faq-item > :not(summary):last-child {
	margin-bottom: 1.15rem;
}

.ul-faq-item p {
	color: var(--ul-muted);
	line-height: 1.7;
	overflow-wrap: break-word;
}

.ul-faq-note {
	color: var(--ul-muted);
	font-style: italic;
	opacity: 0.85;
}

.ul-faq-cta-line a,
.ul-faq-item .ul-faq-cta {
	margin-top: 0.4rem;
}

/* ---------- 4. форма „Заявете оферта“ (Forminator) ---------- */
.ul-quote-intro > h1 {
	font-size: clamp(1.9rem, 7vw, 3rem);
	letter-spacing: -0.01em;
}

.ul-quote-intro > p {
	margin-left: auto;
	margin-right: auto;
	max-width: 60ch;
}

.ul-form-wrap > .ul-form-card {
	width: 100%;
	max-width: 960px !important;
}

.ul-form-card {
	padding: 1.15rem !important;
}

/* равномерен ритъм между редовете на формата */
.ul-form-wrap .forminator-row {
	margin-bottom: 1.05rem !important;
}

.ul-form-wrap .forminator-row:last-child {
	margin-bottom: 0 !important;
}

/* секционните заглавия „1. Данни за контакт“ бяха h2 в пълен размер и
   разкъсваха формата — свеждаме ги до подзаглавия                          */
.ul-form-wrap .forminator-title {
	margin: 0 0 0.35rem !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: var(--ul-navy) !important;
}

.ul-form-wrap .forminator-field-section {
	margin-top: 1.9rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--ul-line);
}

.ul-form-wrap .forminator-row:first-child .forminator-field-section {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Forminator рисува собствен <hr> с невалиден inline стил */
.ul-form-wrap .forminator-border {
	display: none !important;
}

.ul-form-wrap .forminator-label {
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	color: var(--ul-navy) !important;
}

.ul-form-wrap .forminator-description {
	color: var(--ul-muted) !important;
	font-size: 0.85rem !important;
}

/* 16px спира автоматичния zoom на iOS Safari при фокус */
.ul-form-wrap .forminator-input,
.ul-form-wrap .forminator-textarea,
.ul-form-wrap .select2-container .select2-selection--single {
	min-height: 48px !important;
	padding: 0.7rem 0.9rem !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	color: var(--ul-navy) !important;
	background: #fff !important;
	border: 1px solid var(--ul-line) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

.ul-form-wrap .forminator-textarea {
	min-height: 130px !important;
	resize: vertical;
}

.ul-form-wrap .forminator-input:focus,
.ul-form-wrap .forminator-textarea:focus {
	border-color: var(--ul-blue) !important;
	box-shadow: 0 0 0 3px rgba(11, 95, 217, 0.15) !important;
	outline: none !important;
}

/* Select2 подменя <select> със собствен контрол */
.ul-form-wrap .select2-container .select2-selection--single {
	display: flex !important;
	align-items: center !important;
}

.ul-form-wrap .select2-container .select2-selection__rendered {
	padding: 0 !important;
	line-height: 1.4 !important;
	color: var(--ul-navy) !important;
}

.ul-form-wrap .select2-container .select2-selection__arrow {
	height: 46px !important;
}

/* radio и checkbox като карти — цялата площ е кликаема */
.ul-form-wrap .forminator-radio,
.ul-form-wrap .forminator-checkbox {
	display: flex !important;
	align-items: center;
	gap: 0.7rem;
	min-height: 52px;
	margin: 0 0 0.6rem !important;
	padding: 0.65rem 0.95rem;
	font-size: 0.98rem;
	line-height: 1.35;
	border: 1px solid var(--ul-line);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.ul-form-wrap .forminator-radio:hover,
.ul-form-wrap .forminator-checkbox:hover {
	border-color: var(--ul-blue);
	background: var(--ul-mist);
}

.ul-form-wrap .forminator-radio input,
.ul-form-wrap .forminator-checkbox input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	accent-color: var(--ul-blue);
}

/* зоната за качване на файл */
.ul-form-wrap .forminator-multi-upload,
.ul-form-wrap .forminator-uploader {
	padding: 1.4rem 1rem !important;
	text-align: center;
	background: var(--ul-mist) !important;
	border: 1px dashed rgba(11, 95, 217, 0.45) !important;
	border-radius: 12px !important;
}

.ul-form-wrap .forminator-button-upload,
.ul-form-wrap .forminator-multi-upload button {
	min-height: 44px;
}

/* съгласие за лични данни */
.ul-form-wrap .forminator-field-consent .forminator-checkbox {
	align-items: flex-start;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--ul-muted);
}

.ul-form-wrap .forminator-button-submit {
	width: 100%;
	min-height: 52px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	border-radius: 10px !important;
}

@media (max-width: 781px) {
	.ul-form-wrap .forminator-col {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

/* ---------- 5. футър ---------- */
.ul-footer-company {
	margin-bottom: 1rem;
	font-size: 1rem;
	line-height: 1.55;
	color: #fff;
}

.ul-footer-company strong {
	color: #fff;
}

.ul-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.1rem;
}

.ul-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44x44 — минималният препоръчителен tap target */
	width: 44px;
	height: 44px;
	color: var(--ul-muted-light);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.ul-footer-social a:hover,
.ul-footer-social a:focus-visible {
	color: #fff;
	background: rgba(56, 189, 248, 0.18);
	border-color: rgba(56, 189, 248, 0.4);
}

.ul-footer-social svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* ---------- 6. брейкпойнти ---------- */
@media (max-width: 781px) {
	/* заглавната снимка на индустриите не бива да заема целия екран */
	.ul-hero-photo img {
		height: clamp(190px, 46vw, 280px);
	}

	.ul-section-intro > h1 {
		font-size: clamp(1.65rem, 7.5vw, 2.1rem);
	}

	.ul-faq-item > summary {
		padding: 0.9rem 1rem;
		font-size: 0.97rem;
	}

	.ul-faq-item > :not(summary) {
		margin-left: 1rem;
		margin-right: 1rem;
	}

	.ul-form-card {
		padding: 1rem !important;
	}

	/* Forminator държи двуколонните полета и на телефон — изправяме ги */
	.ul-form-wrap .forminator-col-6 {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

@media (min-width: 782px) {
	.ul-form-card {
		padding: 2.2rem !important;
	}

	/* два избора в ред на таблет и нагоре */
	.ul-form-wrap .forminator-field-radio .forminator-field,
	.ul-form-wrap .forminator-field-checkbox .forminator-field {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.65rem;
		align-items: stretch;
	}

	/* въпросът е заглавие на цялата група, а не първи отговор */
	.ul-form-wrap .forminator-field-radio .forminator-field > .forminator-label,
	.ul-form-wrap .forminator-field-checkbox .forminator-field > .forminator-label {
		grid-column: 1 / -1;
	}

	/* последният нечетен отговор не се разтяга през двете колони */
	.ul-form-wrap .forminator-field-radio .forminator-radio,
	.ul-form-wrap .forminator-field-checkbox .forminator-checkbox {
		margin-bottom: 0 !important;
		height: 100%;
	}

	.ul-faq {
		--ul-faq-gap: 0.85rem;
	}

	.ul-faq-item > summary {
		padding: 1.15rem 1.4rem;
		font-size: 1.05rem;
	}

	.ul-faq-item > :not(summary) {
		margin-left: 1.4rem;
		margin-right: 1.4rem;
	}
}

@media (min-width: 1024px) {
	.ul-form-card {
		padding: 2.75rem !important;
	}
}

/* уважава системната настройка за намалено движение */
@media (prefers-reduced-motion: reduce) {
	.ul-faq-item > summary,
	.ul-faq-item > summary::after,
	.ul-footer-social a,
	.ul-form-wrap .forminator-input,
	.ul-form-wrap .forminator-radio {
		transition: none;
	}
}

/* ==========================================================================
   7. Корекции след тестване на реални мобилни ширини (320 / 390 / 768 px)
   ========================================================================== */

/* ---------- 7.1 топбарът преливаше хоризонтално под ~360px ----------
   Редът беше flex-nowrap и при 320px даваше scrollWidth 335px, т.е. целият
   сайт се плъзгаше настрани. Позволяваме пренасяне на нов ред.            */
.ul-topbar > .wp-block-group {
	flex-wrap: wrap !important;
	row-gap: 0.35rem;
}

.ul-topbar-contacts {
	min-width: 0;
}

.ul-topbar-contacts a {
	overflow-wrap: anywhere;
}

/* ---------- 7.2 тап-таргети в топбара ----------
   Слим лента — 44px би я направил непропорционално висока, затова целим
   минимума по WCAG 2.2 AA „Target Size (Minimum)“ = 24x24 CSS px.         */
.ul-topbar-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: -4px 0;
	border-radius: 6px;
	line-height: 0;
}

.ul-topbar-social a:hover,
.ul-topbar-social a:focus-visible {
	background: rgba(255, 255, 255, 0.1);
}

.ul-topbar-social {
	gap: 0.35rem;
}

.ul-lang-switcher a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	min-height: 28px;
	padding: 0 0.2rem;
	border-radius: 6px;
}

.ul-lang-switcher a:focus-visible {
	outline: 2px solid var(--ul-cyan);
	outline-offset: 1px;
}

/* ---------- 7.3 бутонът за мобилното меню беше 24x24 ---------- */
.ul-header .wp-block-navigation__responsive-container-open {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -0.4rem;   /* оптично подравняване към ръба */
	border-radius: 8px;
}

.ul-header .wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid var(--ul-cyan);
	outline-offset: 2px;
}

.wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
}

/* ---------- 7.4 връзките в мобилното меню ---------- */
@media (max-width: 781px) {
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		display: block;
		padding-block: 0.55rem;   /* ~44px общо с line-height */
	}
}

/* ---------- 7.5 нищо не бива да пробива хоризонтално ---------- */
html,
body {
	overflow-x: clip;
}

/* Само ограничаване по ширина. По-рано тук имаше и `height: auto` върху
   `figure.wp-block-image img`, което с по-високата си специфичност изяждаше
   `.ul-logo img { height: 38px }` и логото падаше на естествените си 613x114. */
.wp-block-image img {
	max-width: 100%;
}

/* ---------- 7.6 хоризонталното меню на десктоп беше 23px високо ----------
   WCAG 2.2 AA „Target Size (Minimum)“ иска поне 24x24 CSS px.             */
.ul-header .wp-block-navigation-item__content {
	padding-block: 0.45rem;
}

/* стрелките на подменютата бяха 10x10 */
.ul-header .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	margin-inline: -0.15rem;
}

/* ==========================================================================
   8. Плътен хедър за страниците, които не започват с тъмния .ul-hero
   Хедърът е прозрачен и извън потока, за да ляга върху героя. Страниците в
   „Индустрии“ вече нямат такъв герой, а ЧЗВ и „Заявете оферта“ никога не са
   имали — там белият логотип и навигацията се губеха върху бял фон.
   Класът ul-solid-header се добавя от functions.php.
   ========================================================================== */
body.ul-solid-header header.wp-block-template-part {
	position: relative;
	background: var(--ul-navy);
}

/* героите резервираха горен отстъп за наслагания хедър; тук той е в потока,
   така че първата секция започва плътно под него */
body.ul-solid-header main .entry-content > :first-child {
	padding-top: 2.25rem;
}

@media (max-width: 781px) {
	body.ul-solid-header main .entry-content > :first-child {
		padding-top: 1.5rem;
	}
}

/* при скрол лентата се фиксира — да не подскача съдържанието под нея */
body.ul-solid-header header.wp-block-template-part.is-stuck {
	position: fixed;
}

/* ==========================================================================
   9. Героят резервира точно толкова място, колкото заема хедърът
   Инлайн стилът заделяше фиксирани 5–6rem, но хедърът е 157–212px на телефон
   и таблет (контактната лента се пренася на нов ред), затова логото лягаше
   върху заглавието на героя при всяка ширина до 1024px.
   --ul-header-h се задава от assets/js/header.js.
   ========================================================================== */
body:not(.ul-solid-header) main .ul-hero:first-child {
	padding-top: max(5rem, calc(var(--ul-header-h, 170px) + 1.75rem)) !important;
}

/* без JavaScript пак да няма застъпване */
@media (max-width: 1024px) {
	body:not(.ul-solid-header) main .ul-hero:first-child {
		padding-top: max(13.5rem, calc(var(--ul-header-h, 170px) + 1.75rem)) !important;
	}
}

/* ==========================================================================
   10. Каретата в „Индустрии“ като решетка + подравняване на интро секциите
   ========================================================================== */

/* Каретата бяха в фиксирани редове по две колони. След премахването на
   „Култура, свободно време и туризъм“ един ред остана с една колона и онова
   каре се разпъна на цялата ширина (снимка 1140px срещу 530px при другите).
   Решетката се пренарежда сама и пази еднакъв размер при всеки брой карета. */
.ul-industry-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem;
}

.ul-industry-grid > .wp-block-group {
	margin: 0 !important;
	height: 100%;
}

@media (max-width: 781px) {
	.ul-industry-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

/* Constrained layout центрира всяко дете с margin-inline:auto !important.
   С различни max-width стойности абзаците се получаваха стъпаловидно
   отместени спрямо заглавието. Подравняваме ги вляво.                      */
.ul-section-intro:not(.ul-quote-intro):not(.ul-hero) > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* номерираните въпроси се четат като подзаглавия на секции */
.ul-form-wrap #select-1 .forminator-label,
.ul-form-wrap #select-2 .forminator-label,
.ul-form-wrap #text-3 .forminator-label,
.ul-form-wrap #textarea-1 .forminator-label,
.ul-form-wrap #upload-1 .forminator-label,
.ul-form-wrap #radio-1 .forminator-label,
.ul-form-wrap #radio-2 .forminator-label,
.ul-form-wrap #radio-3 .forminator-label,
.ul-form-wrap #radio-4 .forminator-label {
	display: block;
	margin-bottom: 0.7rem !important;
	font-size: 1.05rem !important;
	line-height: 1.35;
}

.ul-form-wrap #select-1,
.ul-form-wrap #select-2,
.ul-form-wrap #text-3,
.ul-form-wrap #textarea-1,
.ul-form-wrap #upload-1,
.ul-form-wrap #radio-1,
.ul-form-wrap #radio-2,
.ul-form-wrap #radio-3,
.ul-form-wrap #radio-4 {
	margin-top: 1.9rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--ul-line);
}

/* бутонът наследяваше сивия дизайн по подразбиране на Forminator */
.ul-form-wrap .forminator-button-submit {
	color: #fff !important;
	background: var(--ul-blue) !important;
	border: 0 !important;
	text-transform: uppercase;
}

.ul-form-wrap .forminator-button-submit:hover,
.ul-form-wrap .forminator-button-submit:focus-visible {
	background: #094db1 !important;
}

.ul-form-wrap .forminator-button-submit:focus-visible {
	outline: 2px solid var(--ul-cyan);
	outline-offset: 2px;
}

/* ==========================================================================
   11. Корекции по обратна връзка (09/2026)
   ========================================================================== */

/* ---------- 11.1 логотипът беше непропорционално голям ----------
   38px височина до 14px навигация доминираше лентата.                      */
.ul-header .ul-logo img {
	height: 28px;
	width: auto;
	max-width: 100%;
}

@media (max-width: 1024px) {
	.ul-header .ul-logo img {
		height: 24px;
	}
}

@media (max-width: 860px) {
	.ul-header .ul-logo img {
		height: 22px;
	}
}

/* ---------- 11.2 интрото на „Индустрии“ вече е на тъмния фон ---------- */
.ul-hero.ul-section-intro > p {
	color: var(--ul-muted-light);
}

.ul-hero.ul-section-intro > p strong {
	color: #fff;
}

/* ---------- 11.3 подменютата в мобилното меню ----------
   Core рендира overlay менюто с разгънати подменюта и не реагира на
   стрелката (aria-expanded остава "true"). assets/js/header.js поема
   превключването; тук е само визуалната част.                              */
.ul-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu.ul-submenu-collapsed
	> .wp-block-navigation__submenu-container {
	display: none !important;
}

/* стрелката сочи надолу, докато подменюто е свито */
.ul-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu
	> .wp-block-navigation-submenu__toggle
	> .wp-block-navigation__submenu-icon {
	transition: transform 0.2s ease;
}

.ul-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu.ul-submenu-collapsed
	> .wp-block-navigation-submenu__toggle
	> .wp-block-navigation__submenu-icon {
	transform: rotate(180deg);
}

/* стрелката е самостоятелен тап-таргет до самата връзка */
.ul-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
	.ul-header .wp-block-navigation__submenu-icon {
		transition: none;
	}
}

/* ==========================================================================
   12. „Индустрии“ — центрирано интро и скрити заглавия по подстраници
   ========================================================================== */

/* ---------- 12.1 заглавието и подтекста в синята лента са центрирани ---------- */
.ul-hero.ul-section-intro {
	text-align: center;
}

.ul-hero.ul-section-intro > * {
	margin-left: auto !important;
	margin-right: auto !important;
}

.ul-hero.ul-section-intro > h1 {
	max-width: 22ch;
}

.ul-hero.ul-section-intro > p {
	max-width: 60ch;
}

/* ---------- 12.2 заглавието под снимката в подстраниците ----------
   Скрито е визуално, но остава в маркъпа: page.html не рендира заглавие на
   страницата, така че без този H1 подстраниците щяха да останат съвсем без
   заглавие от първо ниво — за екранни четци и за търсачките.               */
.ul-page-title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0 !important;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* снимката вече опира до следващата секция — връщаме дъха между тях */
.ul-page-title + .wp-block-group {
	padding-top: 2.5rem;
}

@media (max-width: 781px) {
	.ul-page-title + .wp-block-group {
		padding-top: 1.75rem;
	}
}

/* ==========================================================================
   13. Форми: падащо меню, пропорции, страница „Контакти“ (09/2026)
   ========================================================================== */

/* ---------- 13.1 падащото меню на избора ----------
   Forminator подменя <select> със Select2 и закача списъка за <body> —
   извън .ul-form-wrap. Затова правилата тук не са вложени в класа на
   формата: иначе менюто оставаше без фон и се виждаха само буквите.
   Панелът носи собствения клас .forminator-select-dropdown.               */
.forminator-select-dropdown,
.select2-container .select2-dropdown {
	padding: 0.35rem !important;
	overflow: hidden;
	background: #fff !important;
	border: 1px solid var(--ul-line) !important;
	border-radius: 10px !important;
	box-shadow: 0 18px 40px rgba(15, 32, 61, 0.18) !important;
}

.forminator-select-dropdown .select2-results,
.forminator-select-dropdown .select2-results__options,
.select2-container .select2-results__options {
	background: #fff !important;
}

.forminator-select-dropdown .select2-results__options {
	max-height: 17rem !important;
}

.forminator-select-dropdown .select2-search--dropdown,
.select2-container .select2-search--dropdown {
	padding: 0.35rem 0.35rem 0.5rem !important;
	background: #fff !important;
}

.forminator-select-dropdown .select2-search__field,
.select2-container .select2-search--dropdown .select2-search__field {
	width: 100% !important;
	min-height: 42px !important;
	padding: 0.5rem 0.7rem !important;
	/* 16px спира автоматичния zoom на iOS Safari при фокус */
	font-size: 16px !important;
	color: var(--ul-navy) !important;
	background: #fff !important;
	border: 1px solid var(--ul-line) !important;
	border-radius: 8px !important;
}

.forminator-select-dropdown .select2-results__option,
.select2-container .select2-results__option {
	display: flex !important;
	align-items: center !important;
	/* 44px — удобен tap target на телефон */
	min-height: 44px !important;
	margin: 0 !important;
	padding: 0.6rem 0.75rem !important;
	font-size: 0.97rem !important;
	line-height: 1.4 !important;
	color: var(--ul-navy) !important;
	background: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
}

.forminator-select-dropdown .select2-results__option--highlighted,
.forminator-select-dropdown .select2-results__option[aria-selected="true"],
.forminator-select-dropdown .select2-results__option[data-selected="true"],
.select2-container .select2-results__option--highlighted,
.select2-container .select2-results__option[aria-selected="true"] {
	color: #fff !important;
	background: var(--ul-blue) !important;
}

.forminator-select-dropdown .select2-results__message,
.select2-container .select2-results__message {
	color: var(--ul-muted) !important;
	background: #fff !important;
}

/* ---------- 13.2 пропорции на дългата форма ---------- */
.ul-form-wrap .select2-container {
	width: 100% !important;
}

/* Forminator оцветява бутона в сиво и го оставя тесен */
.ul-form-wrap .forminator-button-submit {
	width: 100%;
	min-height: 52px !important;
	padding-inline: 1.75rem !important;
}

.ul-form-wrap .forminator-response-message {
	margin-bottom: 1.25rem !important;
	padding: 0.9rem 1.1rem !important;
	font-size: 0.95rem;
	line-height: 1.5;
	border-radius: 10px !important;
}

@media (min-width: 600px) {
	.ul-form-wrap:not(.ul-form-compact) .forminator-button-submit {
		width: auto;
		min-width: 16rem;
	}
}

/* на телефон групите отговори падат в една колона */
@media (max-width: 599px) {
	.ul-form-wrap .forminator-field-radio .forminator-field,
	.ul-form-wrap .forminator-field-checkbox .forminator-field {
		grid-template-columns: 1fr !important;
	}
}

/* съгласието: чекбоксът и текстът до него са една карта */
.ul-form-wrap .forminator-checkbox__wrapper {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	padding: 0.95rem 1.05rem;
	border: 1px solid var(--ul-line);
	border-radius: 10px;
}

.ul-form-wrap .forminator-consent {
	flex: 0 0 auto;
	min-height: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.ul-form-wrap .forminator-consent__label {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--ul-muted);
}

.ul-form-wrap .forminator-consent__label a {
	color: var(--ul-blue);
	text-decoration: underline;
}

/* ---------- 13.3 „Контакти“: карти с данните за фирмата ---------- */
/* редът с данните на фирмата върви по ширината на картата с формата,
   а не по тясното contentSize от темата */
.ul-contact-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	width: 100%;
	max-width: 960px !important;
	margin-inline: auto;
}

.ul-contact-card {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1.35rem 1.4rem;
	background: #fff;
	border: 1px solid var(--ul-line);
	border-radius: var(--ul-radius);
	box-shadow: var(--ul-shadow);
}

.ul-contact-card .ul-contact-label {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ul-blue);
}

.ul-contact-card p {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.5;
	color: var(--ul-navy);
}

.ul-contact-card a {
	color: var(--ul-navy);
	text-decoration: none;
	/* редът е и tap target — държим го достатъчно висок */
	display: inline-block;
	padding-block: 0.15rem;
}

.ul-contact-card a:hover,
.ul-contact-card a:focus-visible {
	color: var(--ul-blue);
	text-decoration: underline;
}

.ul-map-caption {
	margin: 0.85rem 0 0;
	font-size: 0.88rem;
	color: var(--ul-muted);
	text-align: center;
}

@media (min-width: 782px) {
	.ul-contact-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

/* ==========================================================================
   14. Обратна връзка към потребителя (09/2026)
   Избраният отговор изглеждаше точно като неизбраните, а потвърждението
   при изпращане се появяваше извън видимата част на екрана.
   ========================================================================== */

/* ---------- 14.1 видимо състояние „избрано“ ----------
   Картите реагираха само на :hover. На телефон hover няма изобщо, така че
   след натискане не оставаше никаква индикация освен 10px точка.
   Forminator слага клас .forminator-is_checked чрез JavaScript;
   :has(input:checked) е застраховка, ако скриптът не се зареди.          */
.ul-form-wrap .forminator-radio.forminator-is_checked,
.ul-form-wrap .forminator-checkbox.forminator-is_checked:not(.forminator-consent),
.ul-form-wrap .forminator-radio:has(input:checked),
.ul-form-wrap .forminator-checkbox:not(.forminator-consent):has(input:checked) {
	/* Forminator задава font-weight през собствения си генериран CSS */
	font-weight: 600 !important;
	color: var(--ul-navy);
	background: var(--ul-mist);
	border-color: var(--ul-blue);
	/* вътрешна сянка вместо по-дебела рамка — не размества съседните карти */
	box-shadow: inset 0 0 0 1px var(--ul-blue);
}

/* точката/отметката в брандовото синьо, вместо синьо-зеленото по подразбиране */
.ul-form-wrap .forminator-radio-bullet::before,
.ul-form-wrap .forminator-checkbox-box::before {
	background-color: var(--ul-blue) !important;
	border-color: var(--ul-blue) !important;
}

.ul-form-wrap .forminator-is_checked .forminator-radio-bullet,
.ul-form-wrap .forminator-is_checked .forminator-checkbox-box {
	border-color: var(--ul-blue) !important;
}

/* съгласието е една карта — маркира се само рамката на обвивката */
.ul-form-wrap .forminator-checkbox__wrapper:has(input:checked) {
	background: var(--ul-mist);
	border-color: var(--ul-blue);
}

/* ---------- 14.2 съобщението след изпращане ----------
   Появява се най-горе във формата. При дългия въпросник бутонът е на
   ~2000px под него, затова потвърждението оставаше извън екрана —
   scroll-ът се дърпа от header.js.                                        */
.ul-form-wrap .forminator-response-message {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0 0 1.5rem !important;
	padding: 1rem 1.15rem !important;
	font-size: 1rem !important;
	line-height: 1.55;
	border-radius: 10px !important;
	border-left: 4px solid transparent !important;
	scroll-margin-top: calc(var(--ul-header-h, 170px) + 1rem);
}

.ul-form-wrap .forminator-response-message p {
	margin: 0 !important;
}

.ul-form-wrap .forminator-response-message::before {
	flex: 0 0 auto;
	font-size: 1.1rem;
	line-height: 1.45;
}

.ul-form-wrap .forminator-response-message.forminator-success {
	color: #0f5132 !important;
	background: #e6f6ef !important;
	border-color: #198754 !important;
}

.ul-form-wrap .forminator-response-message.forminator-success::before {
	content: "✓";
	font-weight: 700;
	color: #198754;
}

.ul-form-wrap .forminator-response-message.forminator-error {
	color: #842029 !important;
	background: #fdeaec !important;
	border-color: #dc3545 !important;
}

.ul-form-wrap .forminator-response-message.forminator-error::before {
	content: "!";
	font-weight: 700;
	color: #dc3545;
}

/* фокусът се мести върху съобщението, за да го прочетат екранните четци —
   контурът по подразбиране е излишен там                                   */
.ul-form-wrap .forminator-response-message:focus {
	outline: none;
}