/* ============================================================
   plabo.net: основата на темата (файл в child темата)
   Съдържание: 1. цветове и стаи  2. шрифт  3. цветната линия
               4. хедърът (Salient)  5. футърът (Global Section „Футър“)
   Общият CSS за редакция е във „Външен вид → Персонализиране → Допълнителен CSS“,
   а CSS-ът само за една страница е в WPBakery → Page settings → Custom CSS.
   ============================================================ */

/* ===== 1. Цветове и стаи ===== */
:root {
  --c-biz: #2AC4EA;   /* бизнес, циан */
  --c-wed: #E6C910;   /* сватби, злато */
  --c-art: #DB0000;   /* авторски, червено */
  --c-med: #E5109C;   /* медитация, магента */
  --c-off: #C9CDD1;   /* сивите части на линията */

  --ink: #16181B;
  --paper: #FFFFFF;
  --muted: #5C6166;

  --room: var(--c-biz);       /* цветът на стаята */
  --room-ink: #0B2530;        /* текст върху цвета на стаята */

  --pad: clamp(20px, 5.2vw, 96px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* четирите части на линиите (горе и във футъра): сиво, освен частта на стаята */
  --s0: var(--c-off); --s1: var(--c-off); --s2: var(--c-off); --s3: var(--c-off);
}
body.room-biznes   { --room: var(--c-biz); --room-ink: #0B2530; --s0: var(--c-biz); }
body.room-svatbi   { --room: var(--c-wed); --room-ink: #1C1A17; --s1: var(--c-wed); }
body.room-avtorski { --room: var(--c-art); --room-ink: #FFFFFF; --s2: var(--c-art); }
body.room-zamen    { --room: #121212; --room-ink: #FFFFFF; }
body.room-kontakti { --room: #121212; --room-ink: #FFFFFF; --s0: var(--c-biz); --s1: var(--c-wed); --s2: var(--c-art); --s3: var(--c-med); }

/* Salient ползва цвета на акцента за бутони, връзки и т.н.: той е цветът на стаята */
body { --nectar-accent-color: var(--room); }

/* ===== 2. Шрифт: Montserrat навсякъде ===== */
html body,
html body p, html body li, html body a, html body span, html body label, html body blockquote,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body input, html body textarea, html body select, html body button,
html body #header-outer, html body .sf-menu, html body .nectar-button {
  font-family: var(--font);
}
html body { color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ===== 3. Цветната линия най-горе ===== */
.plabo-line { position: fixed; top: 0; left: 0; right: 0; z-index: 10001; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 6px; pointer-events: none; }
.plabo-line i { background: var(--c-off); }
.plabo-line i.on:nth-child(1) { background: var(--c-biz); }
.plabo-line i.on:nth-child(2) { background: var(--c-wed); }
.plabo-line i.on:nth-child(3) { background: var(--c-art); }
.plabo-line i.on:nth-child(4) { background: var(--c-med); }
body.admin-bar .plabo-line { top: 32px; }
@media (max-width: 782px) { body.admin-bar .plabo-line { top: 46px; } }
/* хедърът започва под линията */
body #header-outer { margin-top: 6px; }
body #header-space { margin-top: 6px; }

/* ===== 4. Хедърът (Salient) ===== */
#header-outer #top nav > ul > li > a { font-size: 15px; font-weight: 500; letter-spacing: 0; }
#header-outer #top nav > ul > li:not(.plabo-cta) > a { opacity: .72; transition: opacity .3s; }
#header-outer #top nav > ul > li:not(.plabo-cta) > a:hover,
#header-outer #top nav > ul > li.current-menu-item > a,
#header-outer #top nav > ul > li.current-menu-ancestor > a,
#header-outer #top nav > ul > li.current_page_item > a { opacity: 1; }

/* всеки пункт има свой цвят за линията отдолу */
#header-outer li.room-biznes { --c: var(--c-biz); }
#header-outer li.room-svatbi { --c: var(--c-wed); }
#header-outer li.room-avtorski { --c: var(--c-art); }
#header-outer li.room-zamen { --c: currentColor; }
#header-outer li.room-portfolio { --c: var(--c-biz); }
#header-outer #top nav > ul > li[class*='room-'] > a .menu-title-text { position: relative; }
#header-outer #top nav > ul > li[class*='room-'] > a .menu-title-text::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--c);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out);
}
#header-outer #top nav > ul > li[class*='room-'] > a:hover .menu-title-text::before,
#header-outer #top nav > ul > li[class*='room-'].current-menu-item > a .menu-title-text::before,
#header-outer #top nav > ul > li[class*='room-'].current-menu-ancestor > a .menu-title-text::before,
#header-outer #top nav > ul > li[class*='room-'].current_page_item > a .menu-title-text::before { transform: none; }

/* „Медитация и чай ↗“ е по-тиха; „Контакти“ е бутон с рамка */
#header-outer #top nav > ul > li.plabo-med > a { font-size: 14px; font-weight: 400; }
#header-outer #top nav > ul > li.plabo-cta { margin-left: 10px; }
#header-outer #top nav > ul > li.plabo-cta > a .menu-title-text {
  display: inline-block; padding: 12px 22px; border-radius: 999px; font-size: 14px; font-weight: 700;
  box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color .35s, color .35s, box-shadow .35s;
}
#header-outer #top nav > ul > li.plabo-cta > a:hover .menu-title-text,
#header-outer #top nav > ul > li.plabo-cta.current-menu-item > a .menu-title-text { background: var(--room); color: var(--room-ink); box-shadow: inset 0 0 0 1.5px var(--room); }

/* ===== 5. Футърът (Global Section „Футър“) =====
   Редове с „Extra class name“: ftr-main (покана и врати), ftr-bottom (мрежи, права, „Нагоре“, plabo.) */
body { --ftr-bg: #F3F6F7; --ftr-fg: #16181B; }
body.room-svatbi { --ftr-bg: #FFFCEB; }
body.ftr-dark { --ftr-bg: #0A0A0A; --ftr-fg: #F2F2F2; }
.ftr-main, .ftr-bottom {
  --ftr-soft: color-mix(in srgb, var(--ftr-fg) 60%, transparent);
  --ftr-hair: color-mix(in srgb, var(--ftr-fg) 13%, transparent);
  position: relative; background: var(--ftr-bg) !important; color: var(--ftr-fg);
  /* фонът стига до двата края на екрана, каквато и да е ширината на реда */
  box-shadow: 0 0 0 100vmax var(--ftr-bg); clip-path: inset(0 -100vmax);
}
.ftr-main :is(p, h3, a, span), .ftr-bottom :is(p, a, span) { color: inherit; }
.ftr-main p, .ftr-bottom p { padding-bottom: 0; }
.ftr-main { padding: clamp(84px, 12vh, 150px) 0 clamp(60px, 9vh, 110px) !important; }
/* линията на четири части най-горе на футъра */
.wpb_row.ftr-main::before {
  content: ''; display: block; position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); top: 0; height: 4px; z-index: 2;
  background: linear-gradient(90deg, var(--s0) 0 25%, var(--s1) 25% 50%, var(--s2) 50% 75%, var(--s3) 75%);
}
body.ftr-dark .wpb_row.ftr-main::before { --c-off: #2A2C2F; }

/* лявата колона: покана */
.ftr-main .ftr-k { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ftr-soft); line-height: 1.4; }
.ftr-main .ftr-k::before { content: ''; flex: none; width: 30px; height: 2px; background: var(--room); }
body.room-zamen .ftr-main .ftr-k::before { background: var(--c-med); }
body.room-kontakti .ftr-main .ftr-k::before { background: currentColor; }
.ftr-main .ftr-big { margin: 0; font-size: clamp(28px, 3.3vw, 52px); line-height: 1.14; letter-spacing: -.035em; }
.ftr-main .ftr-big a { display: block; width: fit-content; transition: color .3s; }
.ftr-main .ftr-big a:hover { color: var(--room); }
body:is(.room-zamen, .room-kontakti) .ftr-main .ftr-big a:hover { color: inherit; opacity: .7; }
.ftr-main .ftr-mail { font-weight: 800; }
.ftr-main .ftr-tel { font-weight: 200; }
.ftr-main .ftr-note { margin: 28px 0 0; font-size: 15px; line-height: 1.6; color: var(--ftr-soft); }
.ftr-main .ftr-more { display: inline-block; margin-top: 12px; padding-bottom: 4px; border-bottom: 1px solid var(--ftr-hair); font-size: 14px; font-weight: 600; transition: border-color .3s; }
.ftr-main .ftr-more:hover { border-color: currentColor; }
.ftr-main .ftr-where { margin: 56px 0 0; font-size: 13px; line-height: 1.7; color: var(--ftr-soft); }
.ftr-main .ftr-clock { display: inline-flex; align-items: center; font-weight: 600; letter-spacing: .04em; color: var(--ftr-fg); }
.ftr-main .ftr-clock::before { content: ''; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: #3BD16F; animation: ftr-live 2.4s ease-out infinite; }
.ftr-main .ftr-clock[data-time]::after { content: ', ' attr(data-time); }
@keyframes ftr-live { 0% { box-shadow: 0 0 0 0 rgba(59, 209, 111, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(59, 209, 111, 0); } }

/* дясната колона: вратите (заглавие h3 + ред с връзки) */
.ftr-main h3.ftr-door { --c: var(--ftr-fg); position: relative; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--ftr-hair); font-size: clamp(24px, 2.4vw, 38px); font-weight: 300; letter-spacing: -.035em; line-height: 1.1; }
.ftr-main h3.ftr-door.d-biznes { --c: var(--c-biz); }
.ftr-main h3.ftr-door.d-svatbi { --c: var(--c-wed); }
.ftr-main h3.ftr-door.d-avtorski { --c: var(--c-art); }
.ftr-main h3.ftr-door.d-med { --c: var(--c-med); }
.ftr-main h3.ftr-door > a { display: flex; align-items: center; gap: 16px; }
/* диамантът от логото, в цвета на стаята; „За мен“ е в четирите цвята */
.ftr-main h3.ftr-door > a::before { content: ''; flex: none; width: 11px; height: 11px; background: var(--c); transform: rotate(45deg); transition: transform .7s var(--ease-out); }
.ftr-main h3.ftr-door.d-zamen > a::before { background: conic-gradient(var(--c-biz) 0 25%, var(--c-wed) 0 50%, var(--c-art) 0 75%, var(--c-med) 0); }
.ftr-main h3.ftr-door > a::after { content: '→'; margin-left: auto; font-weight: 200; opacity: .35; transition: transform .5s var(--ease-out), opacity .3s; }
.ftr-main h3.ftr-door.d-med > a::after { content: '↗'; }
.ftr-main h3.ftr-door > a:hover::before { transform: rotate(225deg); }
.ftr-main h3.ftr-door > a:hover::after { transform: translateX(8px); opacity: 1; }
/* линията над вратата: изтегля се при посочване, на текущата стая стои */
.ftr-main h3.ftr-door::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out); }
.ftr-main h3.ftr-door.d-zamen::before { background: linear-gradient(90deg, var(--c-biz) 0 25%, var(--c-wed) 25% 50%, var(--c-art) 50% 75%, var(--c-med) 75%); }
.ftr-main h3.ftr-door:hover::before { transform: none; }
body.room-biznes .ftr-main h3.d-biznes, body.room-svatbi .ftr-main h3.d-svatbi, body.room-avtorski .ftr-main h3.d-avtorski, body.room-zamen .ftr-main h3.d-zamen { font-weight: 700; }
body.room-biznes .ftr-main h3.d-biznes::before, body.room-svatbi .ftr-main h3.d-svatbi::before, body.room-avtorski .ftr-main h3.d-avtorski::before, body.room-zamen .ftr-main h3.d-zamen::before { transform: none; height: 2px; }
.ftr-main p.ftr-links { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 12px 0 22px 27px; font-size: 14px; line-height: 1.6; }
.ftr-main p.ftr-links:last-child { border-bottom: 1px solid var(--ftr-hair); }
.ftr-main p.ftr-links a { color: var(--ftr-soft); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: color .3s, background-size .5s var(--ease-out); }
.ftr-main p.ftr-links a:hover { color: var(--ftr-fg); background-size: 100% 1px; }

/* долният ред: мрежи, права, „Нагоре“ и голямото plabo. */
.ftr-bottom { overflow: hidden; padding: 0 !important; }
.ftr-bottom .ftr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin: 0; padding: 22px 0; border-top: 1px solid var(--ftr-hair); font-size: 13px; line-height: 1.5; }
.ftr-bottom .ftr-bar > span { display: flex; gap: 24px; }
.ftr-bottom .ftr-bar a, .ftr-bottom .ftr-copy { color: var(--ftr-soft); transition: color .3s; }
.ftr-bottom .ftr-bar a:hover { color: var(--ftr-fg); }
.ftr-bottom .ftr-top { font-weight: 600; letter-spacing: .04em; }
.ftr-bottom .ftr-word {
  margin: 0 0 0 calc(-1 * var(--pad) * .1); font-size: clamp(110px, 21vw, 340px); line-height: .78; letter-spacing: -.06em; font-weight: 200; font-style: italic;
  color: color-mix(in srgb, var(--ftr-fg) 8%, var(--ftr-bg)); white-space: nowrap; user-select: none; transform: translateY(14%);
}
.ftr-bottom .ftr-word span { color: var(--room); font-weight: 800; font-style: normal; }
body:is(.room-zamen, .room-kontakti).ftr-dark .ftr-bottom .ftr-word span { color: #F2F0EB; }

/* Salient-овият футър (празен) и кръгчето „нагоре“ не се показват (има „Нагоре ↑“ във футъра) */
#footer-outer #copyright, #to-top { display: none !important; }

@media (max-width: 999px) {
  .ftr-main .ftr-where { margin-top: 32px; }
  .ftr-main .ftr-doors-col { margin-top: 48px; }
}
@media (max-width: 600px) {
  .ftr-main h3.ftr-door { padding-top: 16px; }
  .ftr-main p.ftr-links { gap: 4px 18px; padding-bottom: 18px; font-size: 13.5px; }
  .ftr-bottom .ftr-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ftr-main *, .ftr-main *::before, .ftr-main *::after, #header-outer *::before { transition: none !important; animation: none !important; }
}

/* ===== 6. BG / EN в менюто (вижда се, когато английският е публикуван) ===== */
#header-outer #top nav > ul > li.plabo-lang { display: flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 13px; font-weight: 600; letter-spacing: .08em; }
#header-outer #top nav > ul > li.plabo-lang > a { padding: 0 !important; opacity: .45; transition: opacity .3s; }
#header-outer #top nav > ul > li.plabo-lang > a:hover,
#header-outer #top nav > ul > li.plabo-lang > a.is-cur { opacity: 1; }
#header-outer #top nav > ul > li.plabo-lang > span { opacity: .3; }
#slide-out-widget-area li.plabo-lang { display: flex; justify-content: center; gap: 14px; }
#slide-out-widget-area li.plabo-lang > a { opacity: .5; }
#slide-out-widget-area li.plabo-lang > a.is-cur { opacity: 1; }
#slide-out-widget-area li.plabo-lang > span { opacity: .3; align-self: center; }

/* ===== 7. „Врата“: преходът между страниците =====
   Завесата в цвета на стаята пада, показва дребно името на страницата и се вдига над новата.
   Цветът и надписът идват от полетата „Врата: …“ на страницата (или от стаята ѝ). */
@font-face {
  font-family: 'Plabo Door'; font-style: italic; font-weight: 100 900; font-display: block;
  src: url('../fonts/montserrat-cyrillic-wght-italic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Plabo Door'; font-style: italic; font-weight: 100 900; font-display: block;
  src: url('../fonts/montserrat-latin-wght-italic.woff2') 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;
}
html.door-in { background: var(--door-bg, #0B0D0F); }
#door { position: fixed; inset: 0; z-index: 100000; pointer-events: none; visibility: hidden; }
#door .door-panel { position: absolute; inset: 0; background: var(--door-bg, #0B0D0F); clip-path: inset(100% 0 0 0); }
#door .door-name {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: color-mix(in srgb, var(--door-fg, #fff) 48%, transparent); font-family: 'Plabo Door', 'Montserrat', Arial, sans-serif;
  font-size: 12px; line-height: 1.2; font-weight: 400; font-style: italic; text-transform: uppercase;
  letter-spacing: .34em; white-space: nowrap; opacity: 0; -webkit-font-smoothing: antialiased;
}
html.door-in #door, html.door-out #door { visibility: visible; pointer-events: auto; }
html.door-in #door .door-panel { clip-path: inset(0 0 0 0); }
html.door-in #door .door-name { opacity: 1; }

/* ===== 8. Зареждане с брояч (поле „Зареждане с брояч“ на страницата) ===== */
.wi { position: fixed; inset: 0; z-index: 100001; cursor: pointer; }
.wi-top, .wi-bot { position: absolute; left: 0; right: 0; height: 50.2%; background: var(--wi-bg, #07080A); }
.wi-top { top: 0; }
.wi-bot { bottom: 0; }
.wi-line { position: absolute; left: 50%; top: 50%; display: flex; width: 240px; height: 3px; transform: translate(-50%, -50%); }
.wi-seg { flex: 1 1 0; transform: scaleX(0); transform-origin: left; }
.wi-num { position: absolute; left: 50%; top: calc(50% + 26px); transform: translateX(-50%); font-size: 13px; font-weight: 600; letter-spacing: .3em; color: var(--wi-ink, rgba(255, 255, 255, .6)); font-variant-numeric: tabular-nums; }
html.wi-on body { overflow: hidden; }
/* докато завесата или зареждането са горе, движенията отдолу чакат */
html.door-in body *, html.wi-on body > :not(.wi) * { animation-play-state: paused !important; }

/* ===== 9. Курсорът (само с мишка) ===== */
.p-cursor { --cur: var(--ink); position: fixed; left: 0; top: 0; z-index: 100002; pointer-events: none; transition: opacity .3s; }
.p-cursor.on-dark { --cur: #fff; }
.p-cursor.is-hidden { opacity: 0; }
.p-cursor-dot, .p-cursor-ring { position: fixed; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.p-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--room); }
body:is(.room-zamen, .room-kontakti) .p-cursor-dot { background: var(--cur); }
.p-cursor.is-down .p-cursor-dot { background: var(--cur); }
.p-cursor-ring {
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid color-mix(in srgb, var(--cur) 70%, transparent);
  transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out), border-radius .45s var(--ease-out), border-color .3s, background-color .3s;
}
.p-cursor.is-link .p-cursor-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.p-cursor.is-view .p-cursor-ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 0; border-color: transparent; background: color-mix(in srgb, var(--cur) 8%, transparent); backdrop-filter: blur(2px); }
/* ъглите на „визьора“ */
.p-cursor-ring::before, .p-cursor-ring::after, .p-cursor-ring > i::before, .p-cursor-ring > i::after {
  content: ''; position: absolute; width: 14px; height: 14px; border: 0 solid var(--cur); opacity: 0; transition: opacity .3s;
}
.p-cursor-ring::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.p-cursor-ring::after { right: -1px; top: -1px; border-width: 1px 1px 0 0; }
.p-cursor-ring > i::before { left: -1px; bottom: -1px; border-width: 0 0 1px 1px; }
.p-cursor-ring > i::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.p-cursor.is-view .p-cursor-ring::before, .p-cursor.is-view .p-cursor-ring::after,
.p-cursor.is-view .p-cursor-ring > i::before, .p-cursor.is-view .p-cursor-ring > i::after { opacity: 1; }
.p-cursor-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cur); white-space: nowrap; opacity: 0; transition: opacity .3s; }
.p-cursor.is-view .p-cursor-label { opacity: 1; }
/* системната стрелка се скрива; в полетата за писане остава */
html.has-cursor body, html.has-cursor body *:not(input):not(textarea):not(select):not([contenteditable]) { cursor: none !important; }
html.has-cursor #wpadminbar, html.has-cursor #wpadminbar * { cursor: auto !important; }

/* ---------- 10. Главното меню (компютър): „Медитация и чай“ и „Контакти“ са отделени; подменюто е като в прототипа ---------- */
#header-outer #top nav > ul > li.plabo-med { margin-left: clamp(28px, 3.2vw, 60px); }
/* стрелкичка до пункт с подменю */
#header-outer #top .sf-menu > li.menu-item-has-children > a .menu-title-text::after {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 8px; vertical-align: middle;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-3px) rotate(45deg); opacity: .6; transition: transform .4s var(--ease-out);
}
#header-outer #top .sf-menu > li.menu-item-has-children:is(:hover, .sfHover, :focus-within) > a .menu-title-text::after { transform: translateY(1px) rotate(225deg); }
/* кутията на подменюто: бяла, заоблена, точка в цвета на стаята пред всеки пункт */
#header-outer #top .sf-menu > li > ul.sub-menu {
  display: flex !important; flex-direction: column; left: -22px !important; top: calc(50% + 24px) !important; width: auto !important; min-width: 280px;
  padding: 12px !important; border-radius: 14px !important; background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .05) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  visibility: hidden; opacity: 0; transform: translate3d(0, 10px, 0); pointer-events: none;
  transition: opacity .35s, transform .5s var(--ease-out), visibility 0s .35s !important;
}
#header-outer #top .sf-menu > li:is(:hover, .sfHover, :focus-within) > ul.sub-menu {
  visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .35s, transform .5s var(--ease-out) !important;
}
#header-outer #top .sf-menu ul.sub-menu li { background: none !important; padding: 0 !important; margin: 0 !important; }
body #header-outer #top .sf-menu ul.sub-menu li.menu-item a {
  display: flex !important; align-items: center; gap: 12px; padding: 11px 12px !important; border-radius: 9px; white-space: nowrap;
  font-size: 14px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: 0; color: var(--ink) !important; opacity: 1 !important;
  background: none !important; transition: background-color .3s;
}
body #header-outer #top .sf-menu ul.sub-menu li.menu-item a::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--room)); opacity: .35; transition: opacity .3s; }
body #header-outer #top .sf-menu ul.sub-menu li.menu-item a::after { display: none !important; }
body #header-outer #top .sf-menu ul.sub-menu li.menu-item a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent) !important; }
body #header-outer #top .sf-menu ul.sub-menu li.menu-item a:hover::before,
body #header-outer #top .sf-menu ul.sub-menu li.current-menu-item.menu-item > a::before { opacity: 1; }
body #header-outer #top .sf-menu ul.sub-menu li.current-menu-item.menu-item > a { font-weight: 700 !important; }
body #header-outer #top .sf-menu ul.sub-menu li.menu-item .menu-title-text { color: inherit !important; }

/* ---------- 11. Мобилното меню (като в прототипа; HTML-ът е от functions.php) ----------
   Четирите цвята минават като завеси отдясно, после тъмният панел с номерираните пунктове.
   Менюто на Salient е изключено; бутонът и „Контакти“ са в хедъра на телефон. */
:root { --ease-io: cubic-bezier(.76, 0, .24, 1); }
#header-outer .slide-out-widget-area-toggle, #slide-out-widget-area, #slide-out-widget-area-bg { display: none !important; }
#header-outer .mobile-header .inner { display: flex; align-items: center; gap: 14px; }
#header-outer .pmm-cta {
  display: inline-block; padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  color: var(--ink); box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color .35s, color .35s, box-shadow .35s;
}
#header-outer .pmm-cta:hover, #header-outer .pmm-cta.is-cur { background: var(--room); color: var(--room-ink); box-shadow: inset 0 0 0 1.5px var(--room); }
.pmm-burger {
  position: relative; flex: none; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  -webkit-appearance: none; appearance: none; font: inherit; color: var(--ink); background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color .4s, color .4s;
}
.pmm-burger span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease-out), top .5s var(--ease-out); }
.pmm-burger span:first-child { top: 19px; }
.pmm-burger span:last-child { top: 27px; }
/* Salient (Button Styling „slightly rounded“) дава на всеки <button> 4 px ъгли с !important и маха сянката;
   бутонът на менюто остава кръг с тънък кант */
body #header-outer .pmm-burger { border-radius: 50% !important; box-shadow: inset 0 0 0 1.5px currentColor; }
/* над тъмна корица (прозрачен хедър със светъл текст, напр. проектите) „Контакти“ и бутонът са светли */
body #header-outer.transparent:not(.dark-text) .pmm-cta:not(.is-cur) { color: #fff; }
html:not(.pmm-open) body #header-outer.transparent:not(.dark-text) .pmm-burger { color: #fff; background: rgba(10, 11, 13, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* след скрол над тъмна секция (класът plabo-dark идва от plabo-base.js): тъмен фон, светли надписи и лого, както в прототипа */
body #header-outer.plabo-dark:not(.transparent) { background-color: rgba(10, 11, 13, .72) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) !important; }
body #header-outer.plabo-dark:not(.transparent) #top nav > ul > li > a,
body #header-outer.plabo-dark:not(.transparent) #top nav > ul > li > a .menu-title-text,
body #header-outer.plabo-dark:not(.transparent) .pmm-cta:not(.is-cur) { color: #fff !important; }
body #header-outer.plabo-dark:not(.transparent) #logo img.stnd { opacity: 0 !important; }
body #header-outer.plabo-dark:not(.transparent) #logo img.starting-logo:not(.dark-version) { opacity: 1 !important; }
html:not(.pmm-open) body #header-outer.plabo-dark:not(.transparent) .pmm-burger { color: #fff; background: rgba(255, 255, 255, .08); }
html.pmm-open .pmm-burger, html.pmm-open body #header-outer .pmm-burger { background: transparent; color: #fff; }
html.pmm-open .pmm-burger span:first-child { top: 23px; transform: rotate(45deg); }
html.pmm-open .pmm-burger span:last-child { top: 23px; transform: rotate(-45deg); }
@media (max-width: 420px) { #header-outer .pmm-cta { padding: 9px 13px; font-size: 12.5px; } }

/* докато менюто е отворено, хедърът е прозрачен, текстът и логото са светли, страницата не се скролва */
html.pmm-open #header-outer { background-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* текстът и логото светват, след като завесите са минали под тях */
html.pmm-open #header-outer .pmm-cta:not(.is-cur) { color: #fff; transition: color .3s .35s, background-color .35s, box-shadow .35s; }
#header-outer #logo img { transition: filter .3s; }
html.pmm-open body:is(.room-zamen, .room-kontakti) #header-outer #logo img { filter: brightness(0) invert(1); transition-delay: .35s; }
html.pmm-open, html.pmm-open body { overflow: hidden !important; }

.pmm { position: fixed; inset: 0; z-index: 9990; pointer-events: none; visibility: hidden; transition: visibility 0s 1s; }
html.pmm-open .pmm { visibility: visible; pointer-events: auto; transition: none; }
.pmm-layer { position: absolute; inset: 0; background: var(--c); transform: translate3d(100%, 0, 0); transition: transform .9s var(--ease-io); transition-delay: calc((3 - var(--i)) * 50ms); }
html.pmm-open .pmm-layer { transform: none; transition-delay: calc(var(--i) * 70ms); }
.pmm-panel {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 130px var(--pad) calc(36px + env(safe-area-inset-bottom)); background: #0B0D0F; color: #fff;
  overflow-y: auto; overscroll-behavior: contain; transform: translate3d(100%, 0, 0); transition: transform .9s var(--ease-io);
}
html.pmm-open .pmm-panel { transform: none; transition-delay: .26s; }
.pmm a { color: inherit; text-decoration: none; }
.pmm-nav { display: flex; flex-direction: column; }
.pmm-nav > a, .pmm-group > a {
  display: flex; align-items: baseline; gap: 16px; padding: 10px 0; font-size: clamp(28px, 7.4vw, 50px); font-weight: 200; letter-spacing: -.03em; line-height: 1.1;
  border-bottom: 1px solid rgba(255, 255, 255, .1); opacity: 0; transform: translate3d(40px, 0, 0); transition: opacity .6s, transform .8s var(--ease-out), font-weight .4s;
}
html.pmm-open .pmm-nav > a, html.pmm-open .pmm-group > a { opacity: 1; transform: none; transition-delay: calc(.45s + var(--i) * 60ms); }
.pmm-nav > a:hover, .pmm-group > a:hover, .pmm-nav a:focus-visible { font-weight: 800; }
.pmm-nav a.has-subs { border-bottom: 0; }
.pmm-num { font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--c); }
.pmm-subs { display: flex; flex-direction: column; padding: 4px 0 12px 46px; border-bottom: 1px solid rgba(255, 255, 255, .1); opacity: 0; transition: opacity .6s; }
html.pmm-open .pmm-subs { opacity: 1; transition-delay: calc(.5s + var(--i) * 60ms); }
.pmm-subs a { padding: 6px 0; font-size: 16px; font-weight: 400; line-height: 1.4; color: rgba(255, 255, 255, .72); }
.pmm-subs a.is-cur { color: #fff; font-weight: 700; }
.pmm-foot { display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.4; opacity: .8; }
.pmm-lang { display: flex; gap: 10px; margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.pmm-lang a { opacity: .5; }
.pmm-lang a.is-cur { opacity: 1; }
.pmm-lang span { opacity: .3; }
@media (min-width: 1100px) { .pmm { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pmm, .pmm *, .pmm-burger span { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* ===== 12. Появяване при скрол (общо за всички страници и елементи, както в прототипа) =====
   [data-rv] = отдолу; [data-rv="fade"] само прозрачност; "blur" с размазване; "clip" маска отдолу нагоре
   (снимката вътре леко се смалява). --d: закъснение в ms (style="--d:200").
   .lines: заглавие по редове, всеки ред (.ln > .ln-i, --i = номер на реда) излиза изпод маска.
   Скрито е само под html[data-js] (слага го <head>); скриптът слага data-in, щом елементът влезе в екрана. */
:root { --ease-io: cubic-bezier(.76, 0, .24, 1); }
[data-js] [data-rv] { opacity: 0; transform: translate3d(0, 46px, 0); transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); }
[data-js] [data-rv='blur'] { filter: blur(8px); transition-property: opacity, transform, filter; }
[data-js] [data-rv='fade'] { transform: none; }
[data-js] [data-rv='clip'] { opacity: 1; transform: none; clip-path: inset(14% 0 0 0); transition: clip-path 1.5s var(--ease-out); }
[data-js] [data-rv='clip'] > img, [data-js] [data-rv='clip'] > .media { transform: scale(1.12); transition: transform 1.8s var(--ease-out); }
[data-js] [data-rv][data-in] { opacity: 1; transform: none; filter: none; }
/* маската е само на „clip“; иначе inset(0) реже сенките и всичко, което излиза навън */
[data-js] [data-rv='clip'][data-in] { clip-path: inset(0 0 0 0); }
[data-js] [data-rv='clip'][data-in] > img, [data-js] [data-rv='clip'][data-in] > .media { transform: none; }
/* Salient има свой клас .lines за иконата на менюто (<i class="lines">: 22 px ширина, 3 px височина, черти
   отгоре и отдолу). Нашите заглавия .lines никога не са <i>, затова тук всичко това се маха. */
.lines:not(i) { width: auto; height: auto; background: none; transition: none; }
.lines:not(i)::before, .lines:not(i)::after { content: none; display: none; }
.lines .ln { display: block; overflow: clip; padding: 0 .12em .1em 0; margin: 0 -.12em -.1em 0; }
.lines .ln-i { display: block; }
[data-js] .lines .ln-i { transform: translate3d(0, 108%, 0); transition: transform 1.25s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0) * 1ms); }
[data-js] .lines[data-in] .ln-i { transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-js] [data-rv] { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; }
  [data-js] .lines .ln-i { transform: none; transition: none; }
}

/* ===== 13. „Лепкавите“ сцени (position: sticky) работят =====
   Salient слага на body overflow: hidden; така body става отделна „кутия за скрол“ и sticky спира да се
   закача за екрана. clip пак реже всичко, което излиза встрани, но не пречи на sticky. */
html body { overflow: visible; overflow-x: clip; }