/* ==========================================================================
   Sunny View — base, tokens, header, footer, fixed UI
   Design canvas: 2560 px wide (Figma). 1 design px = var(--u).
   ========================================================================== */

/* Fonts: Montserrat variable (300–700), self-hosted, Cyrillic + Latin.
   The Cyrillic file has no Bulgarian (BGR) locl forms, so the letters match Figma with lang="bg".
   ?v= busts the cache when a font file changes; keep it in sync with SV_FONT_VER (inc/assets.php). */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/montserrat-cyrillic-var.woff2?v=2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/montserrat-latin-var.woff2?v=2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallbacks sized like Montserrat (size-adjust and line metrics), so the text does not reflow and shift
   the page when the web font arrives. Arial-compatible faces first (Windows, macOS/iOS via Helvetica,
   Linux/ChromeOS via Liberation Sans/Arimo), then Roboto (Android). */
@font-face {
	font-family: "Montserrat Fallback";
	src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
	size-adjust: 112.83%;
	ascent-override: 85.79%;
	descent-override: 22.25%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Montserrat Fallback Roboto";
	src: local("Roboto"), local("Roboto-Regular");
	size-adjust: 112.5%;
	ascent-override: 86%;
	descent-override: 22.3%;
	line-gap-override: 0%;
}

:root {
	/* Colours (style guide) — same names as the Elementor design-system variables. */
	--sv-navy: #08153A;
	--sv-terracotta: #BE6346;
	--sv-white: #FFFFFF;
	--sv-terracotta-dark: #a8533a;

	--sv-font: "Montserrat", "Montserrat Fallback", "Montserrat Fallback Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* 1 design px, capped at 1 real px above 2560 viewports. */
	--u: min(calc(100vw / 2560), 1px);

	/* Type scale (design px → fluid, with readable floors). */
	--sv-fs-hero: max(28px, calc(53 * var(--u)));
	--sv-fs-title: max(24px, calc(46 * var(--u)));
	--sv-fs-subtitle: max(21px, calc(33 * var(--u)));
	--sv-fs-text: max(16px, calc(33 * var(--u)));
	--sv-fs-small: max(15px, calc(22 * var(--u)));
	--sv-fs-label: max(14px, calc(22 * var(--u)));
	--sv-fs-nav: max(13px, calc(13 * var(--u)));

	--sv-lh-text: 1.4545;   /* 48 / 33 */
	--sv-lh-title: 1.05;    /* 48 / 46 */

	/* Layout */
	--sv-gutter: max(20px, calc(120 * var(--u)));
	--sv-container: min(calc(100% - 2 * var(--sv-gutter)), calc(1987 * var(--u)), 1987px);
	--sv-container-wide: min(calc(100% - 2 * var(--sv-gutter)), calc(2113 * var(--u)), 2113px);
	--sv-header-h: max(64px, calc(104 * var(--u)));
	--sv-section-gap: max(64px, calc(160 * var(--u)));

	--sv-ease: cubic-bezier(.2, .7, .2, 1);
}

/* --- Reset / base --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: var(--sv-header-h);
	background: var(--sv-navy); /* what an overscroll shows above the header and below the footer (agency 09.10) */
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	font-family: var(--sv-font);
	font-size: var(--sv-fs-text);
	font-weight: 400;
	line-height: var(--sv-lh-text);
	color: var(--sv-navy);
	background: var(--sv-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--sv-terracotta); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; line-height: var(--sv-lh-title); }
/* An explicit size: browsers drop the smaller default for an h1 inside <section>/<article> (Firefox warns). */
h1 { font-size: 2em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 2px solid var(--sv-terracotta); outline-offset: 3px; }

/* .screen-reader-text: WordPress's own class, which plugins use too (Complianz's category toggles). */
.sv-visually-hidden,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.sv-skip {
	position: absolute;
	left: 8px; top: -100px;
	z-index: 1000;
	padding: 10px 16px;
	background: var(--sv-white);
	color: var(--sv-navy);
}
.sv-skip:focus { top: 8px; }

/* The footer stays at the bottom on short pages (thank-you, 404). */
body { display: flex; flex-direction: column; min-height: 100vh; }
.sv-main { flex: 1 0 auto; padding-top: var(--sv-header-h); }

/* --- Utilities shared with Elementor classes ------------------------------ */
.sv-container { width: var(--sv-container); margin-inline: auto; }
.sv-container--wide { width: var(--sv-container-wide); margin-inline: auto; }

.sv-title {
	font-size: var(--sv-fs-title);
	font-weight: 500;
	line-height: var(--sv-lh-title);
	text-transform: uppercase;
}
.sv-subtitle { font-size: var(--sv-fs-subtitle); font-weight: 500; }
.sv-text { font-size: var(--sv-fs-text); line-height: var(--sv-lh-text); }
.sv-small { font-size: var(--sv-fs-small); font-weight: 300; }
.sv-label {
	font-size: var(--sv-fs-label);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Buttons */
.sv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: max(36px, calc(43 * var(--u)));
	padding: 0 max(16px, calc(25 * var(--u)));
	/* Figma: 2 px on the 2560 canvas, so it thins with the layout (1.5 px at 1920) like every other line. */
	border: max(1px, calc(2 * var(--u))) solid var(--sv-terracotta);
	font-family: inherit;
	font-size: var(--sv-fs-nav);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s var(--sv-ease), color .2s var(--sv-ease), border-color .2s var(--sv-ease);
}
.sv-btn--outline { background: transparent; color: var(--sv-white); }
.sv-btn--outline:hover,
.sv-btn--outline:focus-visible { background: var(--sv-terracotta); color: var(--sv-white); }
.sv-btn--solid {
	background: var(--sv-terracotta);
	color: var(--sv-white);
	font-size: var(--sv-fs-label);
	min-height: max(48px, calc(67 * var(--u)));
}
.sv-btn--solid:hover,
.sv-btn--solid:focus-visible { background: var(--sv-terracotta-dark); border-color: var(--sv-terracotta-dark); color: var(--sv-white); }

/* --- Header --------------------------------------------------------------- */
.sv-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	height: var(--sv-header-h);
	background: var(--sv-navy);
	color: var(--sv-white);
}
.admin-bar .sv-header { top: var(--wp-admin--admin-bar--height, 32px); }

.sv-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding-inline: max(20px, calc(51 * var(--u)));
}

.sv-header__logo { display: block; flex: none; }
.sv-header__logo img {
	width: auto;
	height: max(28px, calc(40 * var(--u)));
}

.sv-header__panel {
	display: flex;
	align-items: center;
	gap: max(32px, calc(77 * var(--u)));
}

.sv-nav__list {
	display: flex;
	align-items: center;
	gap: max(24px, calc(49 * var(--u)));
	margin: 0;
	padding: 0;
	list-style: none;
}
.sv-nav__list a {
	position: relative;
	display: block;
	padding: 8px 0;
	font-size: var(--sv-fs-nav);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sv-white);
}
.sv-nav__list a::after {
	content: "";
	position: absolute;
	left: calc(1 * var(--u)); right: calc(1 * var(--u));
	bottom: 0;
	height: max(1px, calc(2 * var(--u)));
	background: var(--sv-terracotta);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s var(--sv-ease);
}
.sv-nav__list a:hover::after,
.sv-nav__list a:focus-visible::after,
.sv-nav__list .current-menu-item > a::after,
.sv-nav__list .current-menu-ancestor > a::after,
.sv-nav__list .current_page_item > a::after { transform: scaleX(1); }

.sv-header__actions {
	display: flex;
	gap: max(12px, calc(28 * var(--u)));
}
/* Figma: both buttons 205 × 43 with the text centred (they grow only when the 13 px floor needs it). */
.sv-header__actions .sv-btn {
	min-width: calc(205 * var(--u));
	padding-inline: max(10px, calc(12 * var(--u))); /* 14 to the text in Figma, the 2 px border included */
}

.sv-header__toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sv-white);
	cursor: pointer;
}
.sv-header__toggle-bars,
.sv-header__toggle-bars::before,
.sv-header__toggle-bars::after {
	position: absolute;
	left: 10px;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform .25s var(--sv-ease), opacity .2s;
}
.sv-header__toggle-bars { top: 21px; }
.sv-header__toggle-bars::before,
.sv-header__toggle-bars::after { content: ""; left: 0; }
.sv-header__toggle-bars::before { top: -7px; }
.sv-header__toggle-bars::after { top: 7px; }
.sv-header__toggle[aria-expanded="true"] .sv-header__toggle-bars { background: transparent; }
.sv-header__toggle[aria-expanded="true"] .sv-header__toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.sv-header__toggle[aria-expanded="true"] .sv-header__toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1099px) {
	.sv-header__toggle { display: block; }

	.sv-header__panel {
		position: fixed;
		inset: var(--sv-header-h) 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		max-height: calc(100dvh - var(--sv-header-h));
		overflow-y: auto;
		padding: 16px 20px 32px;
		background: var(--sv-navy);
		border-top: 1px solid rgb(255 255 255 / .12);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity .2s var(--sv-ease), transform .2s var(--sv-ease), visibility 0s .2s;
	}
	.admin-bar .sv-header__panel { top: calc(var(--sv-header-h) + var(--wp-admin--admin-bar--height, 46px)); }
	.sv-header.is-open .sv-header__panel {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity .2s var(--sv-ease), transform .2s var(--sv-ease);
	}

	.sv-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.sv-nav__list a { padding: 16px 0; font-size: 15px; border-bottom: 1px solid rgb(255 255 255 / .12); }
	.sv-nav__list a::after { bottom: -1px; }

	.sv-header__actions { flex-direction: column; gap: 12px; }
	.sv-header__actions .sv-btn { min-height: 48px; font-size: 14px; }

	body.sv-nav-open { overflow: hidden; }
}

/* --- Footer --------------------------------------------------------------- */
.sv-footer {
	position: relative;
	background: var(--sv-navy);
	color: var(--sv-white);
	padding: max(48px, calc(82 * var(--u))) 0 max(32px, calc(76 * var(--u)));
	font-size: var(--sv-fs-small);
	font-weight: 300;
	line-height: 1.5;
}
/* Home: the footer continues the navy band behind the last carousel, so its text starts lower (Figma). */
.home .sv-footer { padding-top: max(56px, calc(154 * var(--u))); }

.sv-footer__inner {
	display: grid;
	grid-template-columns: 749fr 727fr 492fr;
	align-items: start;
	width: min(calc(100% - 2 * var(--sv-gutter)), calc(1968 * var(--u)), 1968px);
	margin-inline: auto;
}

.sv-footer__title {
	display: block;
	width: fit-content;
	position: relative;
	padding-bottom: max(10px, calc(10 * var(--u)));
	margin-bottom: max(28px, calc(48 * var(--u)));
	font-size: var(--sv-fs-label);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.sv-footer__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: max(72px, calc(132 * var(--u)));
	height: 3px;
	border-radius: 1px;
	background: var(--sv-terracotta);
}

.sv-footer__text { line-height: 1.64; }
/* Figma: the texts start a little left of their titles (address 6.2, contacts 2.5). */
@media (min-width: 900px) {
	.sv-footer__text { margin-left: calc(-6.2 * var(--u)); }
	.sv-footer__contacts { margin-left: calc(-2.5 * var(--u)); }
}
.sv-footer__text a { text-decoration: none; }
.sv-footer__text a:hover { color: var(--sv-terracotta); }
/* Figma: phone and e-mail on 33 px lines with a 17.76 px empty line between (the address keeps its 36 px). */
.sv-footer__contacts { padding-top: calc(2.8 * var(--u)); line-height: 1.5; }
.sv-footer__contacts a { display: block; width: fit-content; }
.sv-footer__contacts a + a { margin-top: .807em; }

.sv-footer__social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: max(36px, calc(104 * var(--u)));
	margin: max(18px, calc(33 * var(--u))) 0 0;
	padding: max(25px, calc(34 * var(--u))) 0; /* centred between the lines (agency 09.10; Figma 37 / 31) */
	list-style: none;
	border-top: 3px solid var(--sv-terracotta);
	border-bottom: 3px solid var(--sv-terracotta);
}
.sv-footer__social a,
.sv-footer__social span { display: block; color: var(--sv-white); }
/* Figma: the icons start 63.5 in from the lines' left end, 104 then 93 apart. */
@media (min-width: 900px) {
	.sv-footer__social { justify-content: flex-start; padding-left: calc(63.5 * var(--u)); }
	.sv-footer__social li:nth-child(3) { margin-left: calc(-11 * var(--u)); }
}
.sv-footer__social .sv-icon {
	width: auto;
	height: max(26px, calc(53 * var(--u)));
	transition: transform .25s var(--sv-ease);
}
/* Figma: the icon grows 53 → 64 px on hover (the unlinked spans are the local/dev placeholders). */
.sv-footer__social a:hover .sv-icon,
.sv-footer__social a:focus-visible .sv-icon,
.sv-footer__social span:hover .sv-icon { transform: scale(1.2); }

/* Figma: under the middle column, aligned with its text (6 px further left), on a 22 px line. */
.sv-footer__copy {
	grid-column: 2 / -1;
	margin: max(40px, calc(104.5 * var(--u))) 0 0 calc(-5.7 * var(--u));
	font-size: var(--sv-fs-small);
	font-weight: 300;
	line-height: 1;
	letter-spacing: .002em;
}
/* The legal pages and the cookie settings (Complianz; not in Figma): a line of their own under the copyright, as small
   and light, "|" between them, centred on the copyright line (agency 30.10). The copyright alone sizes the block (the
   line is 0 wide) and the line spreads from its centre to both sides; the copyright stays where Figma has it. */
.sv-footer__legal { margin-top: max(8px, calc(14 * var(--u))); line-height: 1.5; }
@media (min-width: 900px) {
	.sv-footer__copy { display: grid; justify-items: center; justify-self: start; }
	.sv-footer__legal { display: flex; justify-content: center; width: 0; white-space: nowrap; }
	.sv-footer__item + .sv-footer__item::before { content: "|" / ""; display: inline-block; width: 1.2em; text-align: center; }
}
.sv-footer__legal a,
.sv-footer__consent { color: inherit; text-decoration: none; }
.sv-footer__consent { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; cursor: pointer; }
.sv-footer__legal a:hover,
.sv-footer__legal a:focus-visible,
.sv-footer__consent:hover,
.sv-footer__consent:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

@media (max-width: 899px) {
	.sv-footer__inner { grid-template-columns: 1fr; gap: 32px; }
	.sv-footer__legal,
	.sv-footer__item { display: block; } /* one under the other: they do not fit a phone's line */
	.sv-footer__social { justify-content: center; padding-inline: 0; }
	.sv-footer__social .sv-icon { height: 32px; }
	.sv-footer__copy { grid-column: auto; margin: 0; text-align: center; line-height: 1.5; }
}
/* Phones: the floating "Направете запитване" button and the back-to-top circle sit at the bottom;
   the copyright ends above them (agency 07.10). */
@media (max-width: 767px) {
	.sv-footer { padding-bottom: 84px; }
}

/* --- Fixed side tab "Направете запитване" --------------------------------- */
.sv-sidetab {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(40px, calc(66 * var(--u)));
	height: max(250px, calc(411 * var(--u)));
	border-radius: max(8px, calc(15 * var(--u))) max(8px, calc(15 * var(--u))) max(8px, calc(15 * var(--u))) 0;
	background: var(--sv-terracotta);
	color: var(--sv-navy);
	text-decoration: none;
	transition: background-color .2s var(--sv-ease);
}
.sv-sidetab span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: max(13px, calc(25.74 * var(--u)));
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
}
.sv-sidetab:hover,
.sv-sidetab:focus-visible { background: var(--sv-terracotta-dark); color: var(--sv-white); }
/* English (agency 15.10): "Send an inquiry" is shorter than the Bulgarian text, so the tab is as tall as its text with
   the Bulgarian tab's space above and below it (25 at 2560, 23 at the 250 px floor); it stays where it is. */
@media (min-width: 768px) {
	.sv-sidetab:lang(en) { height: auto; padding-block: max(23px, calc(25 * var(--u))); }
}

@media (max-width: 767px) {
	/* On phones the vertical tab would cover content: a compact pill at the bottom-left instead. */
	.sv-sidetab {
		left: 12px;
		bottom: max(12px, env(safe-area-inset-bottom));
		width: auto;
		height: 44px;
		padding: 0 18px;
		border-radius: 10px; /* as rounded as the desktop tab (agency 07.10), not a pill */
		box-shadow: 0 6px 18px rgb(8 21 58 / .25);
	}
	.sv-sidetab span {
		writing-mode: horizontal-tb;
		transform: none;
		font-size: 13px;
		letter-spacing: .06em;
	}
}

/* --- Back to top ---------------------------------------------------------- */
.sv-totop {
	position: fixed;
	right: max(16px, calc(66 * var(--u)));
	bottom: max(16px, calc(105 * var(--u)));
	z-index: 90;
	display: block;
	width: max(44px, calc(75 * var(--u)));
	height: max(44px, calc(75 * var(--u)));
	color: var(--sv-terracotta);
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .25s var(--sv-ease), transform .25s var(--sv-ease), visibility 0s .25s, color .2s;
}
.sv-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .25s var(--sv-ease), transform .25s var(--sv-ease), color .2s;
}
.sv-totop .sv-icon { width: 100%; height: 100%; }
.sv-totop:hover { color: #202c4d; } /* agency 09.10: not the footer's navy */

/* --- Plain content pages (non-Elementor) ---------------------------------- */
.sv-page {
	width: var(--sv-container);
	margin: 0 auto;
	padding-block: var(--sv-section-gap);
}
.sv-page__title { margin-bottom: max(24px, calc(48 * var(--u))); }
.sv-content > * + * { margin-top: 1em; }
.sv-content h2 { font-size: var(--sv-fs-subtitle); margin-top: 1.5em; }

/* --- Cookie banner (Complianz; not in Figma) --------------------------------- */
/* Its colours and corners are Complianz settings (docs/data/complianz.json); its buttons use the browser's font. */
.cmplz-cookiebanner .cmplz-btn { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}