/* ===== Framelab Header — одна шапка на весь сайт (макет: _preview/header.html) =====
   Все правила под #flh-root — так их не перебивают сброс темы Hello Elementor (button:hover #c36)
   и глобальные стили ссылок Elementor. */
#flh-root {
	--flh-bg: #220800;
	--flh-red: #C21B0C;
	--flh-red-h: #A41609;
	--flh-red-p: #8E1207;
	--flh-ink: #1E1412;
	--flh-line: #EADCDA;
	--flh-soft: #FBF7F6;
	--flh-h: 84px;
	--flh-top: 0px;
	--flh-ease: cubic-bezier(.3, .7, .2, 1);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
}
body.admin-bar #flh-root { --flh-top: 32px; }
@media (max-width: 782px) { body.admin-bar #flh-root { --flh-top: 46px; } }
#flh-root *, #flh-root *::before, #flh-root *::after { box-sizing: border-box; }
#flh-root a { text-decoration: none; }
#flh-root svg { display: block; flex: 0 0 auto; }

/* ---------- Шапка ---------- */
#flh-root .flh {
	position: fixed; z-index: 9990; top: var(--flh-top); left: 0; right: 0;
	background: transparent;
	transition: background-color .25s, box-shadow .25s;
}
#flh-root.is-scrolled .flh,
#flh-root.is-open .flh { background: rgba(34, 8, 0, .95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
#flh-root.is-scrolled { --flh-h: 68px; }
#flh-root .flh-in { display: flex; align-items: center; gap: 40px; max-width: 1248px; height: var(--flh-h); margin: 0 auto; padding: 0 24px; transition: height .25s; }
#flh-root .flh-logo { display: block; flex: 0 0 auto; color: #fff; }
#flh-root .flh-logo svg { width: 150px; height: auto; transition: width .25s; }
#flh-root.is-scrolled .flh-logo svg { width: 132px; }

/* меню */
#flh-root .flh-nav { display: flex; gap: 6px; margin-right: auto; }
#flh-root .flh-nav a {
	position: relative; padding: 10px 14px; border-radius: 999px; outline: none;
	color: rgba(255, 255, 255, .78); font-size: 15px; font-weight: 500; line-height: 1.3;
	transition: color .2s, background-color .2s, transform .12s;
}
#flh-root .flh-nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
#flh-root .flh-nav a:active { transform: scale(.96); background: rgba(255, 255, 255, .14); }
#flh-root .flh-nav a.is-active { color: #fff; }
#flh-root .flh-nav a.is-active::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--flh-red); }

/* кнопки */
#flh-root .flh-actions { display: flex; align-items: center; gap: 10px; }
#flh-root .flh-guest {
	display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; outline: none;
	color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap;
	transition: background-color .2s, border-color .2s, transform .12s;
}
#flh-root .flh-guest svg { transition: transform .25s; }
#flh-root .flh-guest:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); color: #fff; }
#flh-root .flh-guest:hover svg { transform: rotate(-8deg) scale(1.08); }
#flh-root .flh-guest:active { transform: scale(.97); background: rgba(255, 255, 255, .14); }
#flh-root .flh-guest.is-active { border-color: rgba(255, 255, 255, .45); }
#flh-root .flh-cta {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
	border-radius: 999px; outline: none; background: var(--flh-red);
	color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap;
	transition: background-color .2s, box-shadow .2s, transform .12s;
}
#flh-root .flh-cta svg { transition: transform .2s; }
#flh-root .flh-cta:hover { background: var(--flh-red-h); box-shadow: 0 10px 24px -10px rgba(194, 27, 12, .9); color: #fff; }
#flh-root .flh-cta:hover svg { transform: translateX(3px); }
#flh-root .flh-cta:active { transform: scale(.97); background: var(--flh-red-p); box-shadow: none; }
#flh-root .flh-nav a:focus-visible,
#flh-root .flh-guest:focus-visible,
#flh-root .flh-cta:focus-visible,
#flh-root .flh-toggle:focus-visible,
#flh-root .flh-logo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* кнопка ☰ — только на телефоне/планшете */
#flh-root .flh-toggle {
	display: none; place-items: center; width: 44px; height: 44px; margin: 0 -6px 0 auto; padding: 0;
	border: 0; border-radius: 50%; outline: none; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
	transition: background-color .2s, transform .12s;
}
#flh-root .flh-toggle:hover, #flh-root .flh-toggle:focus { background: rgba(255, 255, 255, .1); color: #fff; }
#flh-root .flh-toggle:active { transform: scale(.9); background: rgba(255, 255, 255, .22); }
#flh-root.is-open .flh-toggle { background: rgba(255, 255, 255, .16); }
#flh-root .flh-burger { position: relative; display: block; width: 18px; height: 12px; }
#flh-root .flh-burger i { position: absolute; right: 0; display: block; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s var(--flh-ease), width .3s, top .3s; }
#flh-root .flh-burger i:first-child { top: 2px; width: 18px; }
#flh-root .flh-burger i:last-child { top: 8px; width: 12px; }
#flh-root.is-open .flh-burger i:first-child { top: 5px; transform: rotate(45deg); }
#flh-root.is-open .flh-burger i:last-child { top: 5px; width: 18px; transform: rotate(-45deg); }

/* ---------- Мобильное меню (вариант B) ---------- */
#flh-root .flh-dim {
	position: fixed; z-index: 9988; inset: 0; background: rgba(10, 2, 0, .55);
	opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
#flh-root.is-open .flh-dim { opacity: 1; visibility: visible; }
#flh-root .flh-sheet {
	position: fixed; z-index: 9989; top: calc(var(--flh-top) + var(--flh-h) + 8px); right: 12px;
	display: grid; width: min(420px, calc(100% - 24px)); max-height: calc(100vh - var(--flh-top) - var(--flh-h) - 20px); overflow-y: auto;
	padding: 10px; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px -10px rgba(0, 0, 0, .45);
	opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.97); transform-origin: top right;
	transition: opacity .2s, transform .3s var(--flh-ease), visibility .3s;
}
#flh-root.is-open .flh-sheet { opacity: 1; visibility: visible; transform: none; }
#flh-root .flh-sheet > a { opacity: 0; transform: translateY(6px); transition: opacity .25s var(--d, 0ms), transform .3s var(--d, 0ms), background-color .15s; }
#flh-root.is-open .flh-sheet > a { opacity: 1; transform: none; }
#flh-root .flh-item {
	display: flex; align-items: center; gap: 10px; padding: 16px 14px; border-radius: 14px; outline: none;
	color: var(--flh-ink); font-size: 17px; font-weight: 600; line-height: 1.3;
}
#flh-root .flh-item span { flex: 1; }
#flh-root .flh-item > svg:last-child { color: #C7B5B2; }
#flh-root .flh-item:hover { color: var(--flh-ink); }
#flh-root.is-open .flh-sheet > .flh-item:active { background: #F3E7E5; transform: scale(.98); }
#flh-root .flh-item.is-active { background: var(--flh-soft); }
#flh-root .flh-item.is-active span { color: var(--flh-red); }
#flh-root .flh-item:focus-visible { box-shadow: inset 0 0 0 2px var(--flh-red); }
#flh-root .flh-item--guest { margin-top: 6px; border-top: 1px solid var(--flh-line); border-radius: 0 0 14px 14px; color: #6B5A58; font-size: 15px; font-weight: 500; }
#flh-root .flh-item--guest:hover { color: #6B5A58; }
#flh-root .flh-cta--block { width: 100%; height: 54px; margin-top: 8px; font-size: 16px; }
#flh-root .flh-cta--block:focus-visible { outline-color: var(--flh-red); }
html.flh-lock, html.flh-lock body { overflow: hidden; }

/* ---------- Переключение десктоп / мобильный ---------- */
@media (max-width: 1180px) {
	#flh-root { --flh-h: 68px; }
	#flh-root.is-scrolled { --flh-h: 60px; }
	#flh-root .flh-in { padding: 0 20px; }
	#flh-root .flh-nav, #flh-root .flh-actions { display: none; }
	#flh-root .flh-toggle { display: grid; }
	#flh-root .flh-logo svg { width: 128px; }
	#flh-root.is-scrolled .flh-logo svg { width: 116px; }
}
@media (min-width: 1181px) {
	#flh-root .flh-dim, #flh-root .flh-sheet { display: none; }
}
/* Шапка висит поверх страницы — первая секция страницы начинается под ней (фон секции уходит под прозрачную шапку).
   Перебивает отступ Elementor (.elementor-NNN .elementor-element-…{--padding-top}); страницы бывают wp-page и wp-post. */
body.flh-on .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"]) > .e-con:first-child { --padding-top: 84px; }
@media (max-width: 1180px) {
	body.flh-on .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"]) > .e-con:first-child { --padding-top: 68px; }
}
/* Первая секция, где кроме старой шапки ничего нет (как на /find-my-digital-photos/) — без нижнего отступа:
   тёмная полоса ровно по высоте шапки. */
body.flh-on .elementor:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"]) > .e-con:first-child:has(.elementor-element-ba956fc:only-child) { --padding-bottom: 0px; }

/* Короткая страница (меньше двух экранов, решает header.js) — шапка не закрепляется, уезжает вместе со страницей.
   Меню на телефоне тогда тоже привязано к странице, чтобы открываться ровно под шапкой. */
#flh-root.is-static .flh,
#flh-root.is-static .flh-sheet { position: absolute; }
@media (prefers-reduced-motion: reduce) {
	#flh-root *, #flh-root *::before, #flh-root *::after { transition-duration: .01ms !important; }
}