/* ============================================================
   RecreMap — банер підтримки ЗСУ (RECRE-347, 1.0.9)
   Стрічка «Підтримайте захисників України» другим рядком .rm-header
   (Варіант A, ТЗ Аналітика TOR-1.0.9-armed-forces-banner §4;
   дизайн-ТЗ Designer/TOR/TOR-1.0.9-armed-forces-banner.md;
   мокапи design_mockups/army-banner/).

   RECRE-393 — «смарагдове скло»: банер став темною скляною смугою з
   власним backdrop-filter, через що .rm-header довелося розібрати на
   два backdrop root'и (§3 того ТЗ). RECRE-394 — фікс світлої беж-смуги
   під банером (наслідок тієї ж реструктуризації).

   RECRE-408 — банер стає ПОСТІЙНИМ (dismiss видалено) і «органічно
   лягає в основу шапки»: концепт A «Цоколь»
   (дизайн-ТЗ Designer/TOR/TOR-recre408-permanent-army-banner.md,
   мокап design_mockups/army-banner-permanent/army-banner-permanent.html).
   Суть:
   - цоколь — НЕ окремий матеріал, а вуаль rgba(47,74,55,0.06) поверх
     тієї самої шибки скла; межі між рядками немає — є «згин» однієї
     поверхні (1px хайлайт + м'яке внутрішнє затемнення);
   - нижня межа хедера — беж 1px var(--border), як у стані без банера
     (RECRE-436: 3px стрічка прапора з RECRE-408 ВИДАЛЕНА — див. нижче);
   - шапка нижча: 105→98px (≥901px), 143→134px (681–900px),
     150→140px (≤680px). Константи --header-h у main.css НЕ чіпаються:
     вони описують шапку без банера, фактичну висоту й далі міряє
     ResizeObserver → --header-h-actual;
   - ⚠ РЕСТРУКТУРИЗАЦІЯ RECRE-393 §3 СКАСОВАНА: рецепт скла
     повертається на .rm-header, у в'юпорті знову ОДИН backdrop root і
     ОДИН blur-шар. Це заразом закриває клас багів RECRE-394 (беж-1px
     поза обома backdrop root'ами) — його правила видалені.

   ОКРЕМИЙ ФАЙЛ, а не main.css: дизайн-ТЗ передбачало перенесення в
   main.css, але правка main.css заблокована паралельним незакоміченим
   WIP (координатор; той самий прецедент, що локальний <style>
   RECRE-339 у includes/header.html). Файл підключений у base.html
   ПІСЛЯ main.css — усі перевизначення .rm-header нижче виграють
   каскадом за однакової специфічності. При нагоді перенести вміст у
   main.css (секція Header) і прибрати <link>.

   Токени — лише наявні з :root main.css; нових HEX у палітрі немає,
   окрім двох приглушених кольорів прапора (національна символіка,
   дозволений виняток — аналог --event-marker).
   ============================================================ */

/* ---------- Токени цоколя (дизайн-ТЗ RECRE-408 §2.3) ----------
   ТЗ дозволяє винести їх у :root main.css АБО локально сюди —
   обрано локально, бо main.css заблокований (див. шапку файла).
   ⚠ Регулювання (ТЗ §7): текст здається слабким → піднімати
   --army-plinth-veil 0.06 → 0.09, альфу скла шапки (0.86) НЕ чіпати.
   Просіла продуктивність → знижувати blur .rm-header 10px → 8px,
   альфу теж НЕ чіпати. Токени --army-glass-* від RECRE-393 видалені
   разом із темним склом. */
:root {
    --army-plinth-veil: rgba(47,74,55,0.06);   /* вуаль поверх скла шапки */
    --army-plinth-h: 32px;                     /* висота рядка цоколя */
    /* --army-rail-h видалено (RECRE-436): стрічки прапора більше немає */
    --army-flag-blue: #4E76B5;                 /* лише для чипа .army-flag */
    --army-flag-yellow: #E4C048;
}

/* ---------- .rm-header: одна панель = один backdrop root (§2.1) ----------
   sticky-РЯДОК → sticky-КОЛОНКА з двох рядків: рядкові стилі
   переїхали на .rm-header-main (header.html), а цоколь — другий
   дочірній елемент. position/z-index лишаються з main.css:136-137.
   ResizeObserver (alpine-data.js, trackHeaderHeight) міряє .rm-header
   цілком → --header-h-actual враховує цоколь автоматично,
   .map-shell/.rm-city-menu без правок.
   flex-wrap/align-content/gap/padding/height явно нейтралізовані і для
   media-правил main.css (681–900px, ≤680px) — вони переносяться на
   .rm-header-main у media-блоках нижче.

   RECRE-408: рецепт скла (background + blur, main.css:140-141)
   ПОВЕРТАЄТЬСЯ сюди з .rm-header-main. Цоколь більше не темне скло,
   власний backdrop-filter йому не потрібен, тож розділяти шапку на
   два backdrop root'и (RECRE-393 §3) більше нема причини: у в'юпорті
   лишається ОДИН blur-шар замість двох. saturate(1.04) — легка
   компенсація знебарвлення від блюру (дизайн-ТЗ §2.1); box-shadow —
   «підняття», що раніше було на банері. */
.rm-header {
    display: flex; flex-direction: column;
    align-items: stretch; align-content: normal; flex-wrap: nowrap;
    gap: 0; padding: 0;
    height: auto; min-height: 0;
    background: rgba(244,235,218,0.86);          /* значення 1:1 з main.css:140 */
    backdrop-filter: blur(10px) saturate(1.04);
    -webkit-backdrop-filter: blur(10px) saturate(1.04);
    box-shadow: 0 14px 30px -26px rgba(20,32,22,0.8);
}
.rm-header-main {
    display: flex; align-items: center; gap: 28px;
    padding: 0 30px; height: var(--header-h);
    /* ↓ рецепт скла переїхав на .rm-header (§2.1) */
    background: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: none;                         /* ↓ див. блок «Межа хедера» */
}

/* ---------- Межа хедера: беж 1px var(--border) (RECRE-436) ----------
   RECRE-408 §2.2 замінював беж-межу 3px стрічкою прапора
   (.rm-army-banner::after, linear-gradient синій/жовтий 50/50).
   RECRE-436 (show-stopper від PO): на реальних екранах синя половина
   3px градієнта округлюється до ~1px і зливається з контентом, а жовта
   рендериться як ~2px — банер отримує «сторонню жовту лінію» на всю
   ширину в'юпорта, що заважає відображенню. Стрічку ВИДАЛЕНО; жовто-
   блакитна символіка лишається в чипі .army-flag усередині банера.

   Межею хедера знову служить штатний border-bottom: 1px solid
   var(--border) з main.css:142 — тому override
   `.rm-header:has(.rm-army-banner){border-bottom:none}` (RECRE-408)
   видалено: межа однакова в станах З банером і БЕЗ нього.
   Прецедент RECRE-394 (беж-1px композитився частково прозорим над
   темним hero) НЕ повертається: його причиною була структура з двома
   backdrop root'ами RECRE-393, а після RECRE-408 §2.1 .rm-header сам
   несе скло+blur, тож його власна непрозора межа малюється коректно. */

/* ---------- Цоколь (другий рядок хедера) ---------- */
/* Один рядок 32px на всіх ширинах (30px на планшеті, 28px на мобілці —
   media-блоки нижче), висота РАЗОМ зі стрічкою прапора.

   RECRE-408 §2.3: банер перестає бути другою ПАНЕЛЛЮ і стає ЦОКОЛЕМ
   тієї самої панелі. Замість темного скла — вуаль --army-plinth-veil
   (6% --green) поверх скла .rm-header, тож обидва рядки розмивають
   один і той самий вміст і рухаються разом. Замість межі між двома
   поверхнями — «згин» однієї: 1px світлий хайлайт зверху + м'яке
   внутрішнє затемнення.
   ⚠ backdrop-filter тут НЕМАЄ і НЕ ДОДАВАТИ: блюр робить .rm-header
   (інакше повертаються і другий blur-шар, і containing block для
   fixed-нащадка .army-funds — див. §2.6).
   Контраст --green на цоколі (виміряні композити, ТЗ §7): 7,90:1 над
   чисто білим, ≈6,9:1 над тайлом /map/, 5,59:1 над темним фото-hero —
   усі ≥ 4,5 AA. */
.rm-army-banner {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    min-height: var(--army-plinth-h);
    padding: 3px 30px;
    color: var(--green);
    background: var(--army-plinth-veil);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.42),
                inset 0 8px 10px -9px rgba(47,74,55,0.30);
}
/* .rm-army-banner::after (стрічка прапора 3px) ВИДАЛЕНО — RECRE-436,
   див. блок «Межа хедера» вище. */

/* Прапорець — «другий канал сенсу» поза кольором (ТЗ Аналітика §2.1).
   Тони навмисно приглушені під boho-акварель: верх #4E76B5 (синій),
   низ #E4C048 (жовтий) — токени (єдиний носій прапора після RECRE-436).
   RECRE-408: 18×13 → 16×11, обідок ТЕМНИЙ (поверхня стала світлою),
   внутрішній глянець «емальованого значка» знято — на кремі він
   читався б як засвітка. */
.army-flag {
    flex: none; width: 16px; height: 11px; border-radius: 3px;
    background: linear-gradient(180deg,
                var(--army-flag-blue) 50%, var(--army-flag-yellow) 50%);
    box-shadow: 0 0 0 1px rgba(47,74,55,0.20);
}

/* колір успадковується з .rm-army-banner (--green) */
.army-text {
    min-width: 0;
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.15px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- CTA «Задонатити ▾» (кнопка-розкривач) ---------- */
/* RECRE-408 §2.4: CTA лишається ОХРЯНОЮ ПІЛЮЛЕЮ (охра — рідний колір
   шапки, лого-орб), але зменшується, щоб не бути найгучнішим об'єктом
   постійної шапки. ink на ochre-light ≈ 8.6:1 AAA.
   ⚠ margin-left: auto переїхав сюди з видаленої кнопки «×»: без нього
   CTA злипнеться з текстом. Праве прибиття свідоме — цоколь повторює
   композицію рядка навігації (сенс ліворуч — дія праворуч). */
.army-cta-wrap { position: relative; flex: none; margin-left: auto; }
.army-cta {
    position: relative;
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--ochre-light); color: var(--ink);
    border: none; border-radius: 30px; padding: 4px 12px;
    font-size: 11.5px; font-weight: 800; letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 3px 9px -6px rgba(20,32,22,0.55);
    transition: background .15s ease, transform .15s ease;
}
.army-cta:hover { background: var(--ochre); transform: translateY(-1px); }
/* Фокус-кільце ІНВЕРТОВАНЕ проти RECRE-393 (surface усередині, green
   ззовні): поверхня цоколя тепер СВІТЛА, тож зовнішнім має бути
   темний green. Кільце перекриває box-shadow підняття — навмисно. */
.army-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4.5px var(--green);
}
/* Клік-ціль ≥44px при видимій висоті ~24px — прозорий ::after
   (конвенція hit-area проєкту, WCAG 2.5.5) */
.army-cta::after { content: ""; position: absolute; inset: -10px; border-radius: 40px; }
.army-cta .chev { width: 11px; height: 11px; transition: transform .18s ease; }
.army-cta[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* ---------- Disclosure-панель 4 фондів (popover) ---------- */
/* Мова .rm-city-menu: surface, border-2, radius 16, rmPop .18s
   (keyframes — main.css:114). Позиція — під тригером, НЕ в потоці:
   висота цоколя/хедера не змінюється (ТЗ Аналітика §3a).
   ⚠ RECRE-408 §2.4(б): якір left → RIGHT. Після переїзду
   margin-left:auto на .army-cta-wrap тригер стоїть біля правого краю
   в'юпорта, і панель шириною 264px із left:0 виїхала б за екран. */
.army-funds {
    position: absolute; top: calc(100% + 9px); right: 0; left: auto; z-index: 45;
    margin: 0; padding: 7px; list-style: none;
    min-width: 264px;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 16px;
    /* Панель НАВМИСНО лишається НЕПРОЗОРОЮ (носій дії з посиланнями,
       11.9:1). Тіні — з RECRE-393 §5, без змін. */
    box-shadow: 0 26px 54px -22px rgba(36,52,38,0.62),
                0 2px 6px rgba(36,52,38,0.10),
                inset 0 1px 0 rgba(255,255,255,0.75);
    animation: rmPop .18s ease;
}
.army-funds-title {
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase; color: #b6a37e;   /* = .rm-city-menu-title */
    padding: 6px 10px 8px;
}
.fund-item a {
    display: flex; align-items: center; gap: 11px;
    min-height: 44px; padding: 8px 12px;
    border-radius: 11px; text-decoration: none;
    color: var(--ink-2);
    transition: background .12s ease;
}
.fund-item a:hover {
    background: #f1e6cf;
    box-shadow: inset 0 0 0 1.6px rgba(126,148,102,0.55);  /* = .rm-city-item:hover */
}
.fund-item a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--sage);
    background: #f1e6cf;
}
.fund-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fund-name { font-size: 14px; font-weight: 700; line-height: 1.25; }
.fund-domain {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px;
    color: var(--muted-2);
}
.fund-item a svg.ext {
    width: 14px; height: 14px; margin-left: auto; flex: none;
    color: var(--muted-3);
}

/* ---------- Планшетна смуга 681–900px (RECRE-132) ---------- */
/* Двохрядкові правила .rm-header з main.css:4433 переносяться на
   .rm-header-main — сам .rm-header лишається колонкою [main · цоколь] */
@media (min-width: 681px) and (max-width: 900px) {
    .rm-header-main {
        flex-wrap: wrap; align-content: flex-start;
        gap: 7px 14px;
        padding: 10px 20px;
        height: auto; min-height: var(--header-h);
    }
    /* RECRE-462: та сама двохрядкова grid-розкладка, що ≤680px нижче —
       заміряно, що .army-text обрізається (ellipsis) уже в цій смузі
       (356–425px клієнтської ширини проти ~537px тексту на 681–750px,
       і межовий випадок навіть на 900px), бо ARMY_BANNER.text/cta_label
       редагуються в адмінці й довжина не гарантована. Шрифт лишається
       десктопного розміру (тут достатньо горизонтального простору для
       самого рядка тексту, шрифт зменшує лише мобільний брейкпоінт). */
    .rm-army-banner {
        --army-plinth-h: auto;
        display: grid;
        grid-template-columns: 16px 1fr;
        grid-template-areas: "flag text" "cta  cta";
        align-items: start;
        padding: 6px 20px;
        gap: 5px 11px;
    }
    .army-flag { grid-area: flag; margin-top: 2px; }
    .army-text {
        grid-area: text;
        white-space: normal; overflow: visible; text-overflow: clip;
        line-height: 1.35;
    }
    .army-cta-wrap { grid-area: cta; justify-self: end; margin-left: 0; }
}

/* ---------- Мобільна адаптація ≤680px (брейкпоінт хедера) ---------- */
@media (max-width: 680px) {
    /* перенос правил .rm-header з main.css:4455 на .rm-header-main */
    .rm-header-main {
        flex-wrap: wrap; align-content: flex-start;
        gap: 6px 10px;
        padding: 9px 14px;
        height: auto; min-height: var(--header-h);
    }
    /* RECRE-462 (show-stopper від PO): на вузьких екранах однорядковий
       flex .rm-army-banner + `.army-text{white-space:nowrap;...ellipsis}`
       (базове правило вище) стискали повідомлення до «Відвідування па...» —
       CTA-пілюля й прапорець з'їдали майже всю ширину. Рішення — двома
       рядками через grid замість flex, ДЕТЕРМІНОВАНО (не залежить від
       довжини ARMY_BANNER.text, який редагується в адмінці):
         рядок 1: прапорець + текст (переноситься на скільки завгодно рядків)
         рядок 2: CTA-пілюля, притиснута праворуч (той самий принцип
                   «сенс ліворуч — дія праворуч», що й у флекс-версії)
       Текст CTA НЕ скорочується — ARMY_BANNER.cta_label конфігурується
       через SiteSettings/адмінку, а не хардкодиться в шаблоні, тож
       вкорочення вимагало б окремого контенту з бекенда; пріоритет ПО —
       читабельність самого повідомлення, яку цей layout уже забезпечує. */
    .rm-army-banner {
        --army-plinth-h: auto;
        display: grid;
        grid-template-columns: 16px 1fr;
        grid-template-areas: "flag text" "cta  cta";
        align-items: start;
        padding: 6px 14px;
        gap: 5px 9px;
    }
    .army-flag { grid-area: flag; margin-top: 2px; }
    .army-text {
        grid-area: text;
        font-size: 11.5px; letter-spacing: 0;
        white-space: normal; overflow: visible; text-overflow: clip;
        line-height: 1.35;
    }
    .army-cta-wrap { grid-area: cta; justify-self: end; margin-left: 0; }
    .army-cta { font-size: 11px; padding: 3px 10px; }
    /* Панель — на всю ширину viewport під шапкою, патерн .rm-city-menu
       ≤680px (main.css:200-206).

       ⚠ RECRE-408 §2.6: ПОВЕРНЕНО формулу RECRE-347 замість
       calc(100% + 8px). RECRE-393 змінив її, бо backdrop-filter банера
       робив банер containing block'ом для position:fixed-нащадка.
       Після RECRE-408 банер без backdrop-filter — containing block
       знову .rm-header. calc(100% + 8px) формально дав би той самий
       результат, але має ЛАТЕНТНИЙ БАГ у фолбеку: у браузері без
       backdrop-filter декларація відкидається на парсингу, containing
       block стає viewport і 100% = висота ЕКРАНА → панель їде за межі
       видимого. Формула з --header-h-actual коректна в ОБОХ випадках
       (шапка sticky top:0 і є першим елементом) і збігається з тим,
       що вже вживає .rm-city-menu (main.css:220). */
    .army-funds {
        position: fixed; left: 12px; right: 12px;
        top: calc(var(--header-h-actual, var(--header-h)) + 8px);
        min-width: 0;
    }
}

/* ---------- Reduced motion (дизайн-ТЗ §2.7) ---------- */
/* Анімується тільки popover і hover CTA, сама поверхня статична.
   Жодних transition на backdrop-filter (урок .park-overlay__backdrop:
   одночасні opacity + backdrop-filter дають білі проміжні кадри в
   Chromium). RECRE-408: .army-dismiss зі списку прибрано разом із
   кнопкою; нових анімацій не додається — постійний елемент із рухом
   гарантовано дратує. */
@media (prefers-reduced-motion: reduce) {
    .army-funds { animation: none; }
    .army-cta, .army-cta .chev { transition: none; }
    .army-cta:hover { transform: none; }
}

/* ---------- Фолбек без backdrop-filter (дизайн-ТЗ §2.7) ---------- */
/* Старі WebView; Firefox із layout.css.backdrop-filter.enabled=false.
   Без блюру напівпрозоре скло читалося б поверх довільного контенту,
   тому поверхня стає майже суцільною. RECRE-408: ОДНЕ правило замість
   двох — цоколь тепер лише вуаль ПОВЕРХ поверхні шапки, тож він
   коректний і над непрозорим кремом (власного фолбеку не потребує). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .rm-header { background: rgba(244,235,218,0.97); }
}