/* ==========================================================================
   print-cup — header/nav (partials/header.html). Підключати після style.css.
   ========================================================================== */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,1.3vw,28px);height:72px;padding:0 clamp(12px,1.3vw,26px);
  position:sticky;top:16px;z-index:50;
  background:#F9F6F0;border:2px solid #172622;border-radius:21px;
  box-shadow:0 5px 0 rgba(16,61,52,.9);margin-top:18px;
  transition:opacity .16s ease;
}
.nav.nav-hidden{opacity:0;visibility:hidden;pointer-events:none}
.nav a:focus-visible,.nav button:focus-visible{outline:2px solid #FF6A3D;outline-offset:2px;border-radius:8px}

.brand{display:flex;align-items:center;gap:13px;font-family:'Manrope';font-weight:700;font-size:16px;letter-spacing:-.02em;color:#16231E;flex:none;transition:font-size .2s ease}
/* та сама висота/розмір, що й іконка Telegram у .nav-contacts (.nav .ico-btn — 38px) */
.brand span{width:38px;height:38px;border-radius:13px;background:#124239;border:2px solid #16231E;display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.brand span svg{width:58%;height:58%;display:block}
/* margin-top:-2px компенсує асиметричний padding у .nav-links a (4px згори/8px знизу —
   знизу більше, щоб лишити місце під підкреслення при ховері), через що текст пунктів меню
   сидить трохи вище за свій бокс; без цього "print-cup" виглядав нижче за пункти меню,
   хоча боксові центри обох елементів збігаються */
.brand-txt{display:flex;flex-direction:column;line-height:1.02;margin-top:-2px}
.brand-slogan{font-family:'Manrope';font-weight:700;font-size:12px;line-height:1.2;letter-spacing:.01em;color:#FF6A3D;opacity:.8;margin-top:3px}

/* середня група — пункти меню + телефон/месенджери, притиснуті вправо margin-left:auto */
.nav-menu{display:flex;align-items:center;flex:1;min-width:0;gap:clamp(14px,1.7vw,32px)}
/* nav-links росте до max-width і центрується в вільній зоні nav-menu через margin-inline:auto;
   пункти всередині рівномірно розподіляє justify-content:space-evenly (без власного gap,
   інакше по проекту разом з space-evenly дає надлишкові відстані) */
.nav-links{display:flex;align-items:center;justify-content:space-evenly;flex-wrap:nowrap;flex:1 1 auto;min-width:0;max-width:540px;margin-inline:auto;gap:10px}
.nav-links a{position:relative;color:#3F4742;font-weight:600;font-size:16px;padding:4px 0 8px;white-space:nowrap;flex-shrink:0;transition:color .2s ease}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:#FF6A3D;transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:#172622}

.nav-contacts{display:flex;align-items:center;gap:clamp(8px,.9vw,16px);margin-left:auto}
.contacts{display:flex;align-items:center;gap:clamp(6px,.6vw,9px);flex-shrink:0}
.nav .ico-btn{width:38px;height:38px}

.nav-cta{height:46px;display:inline-flex;align-items:center;flex-shrink:0;padding:0 20px;border-radius:15px;border:2px solid #172622;font-size:15px;font-weight:700;white-space:nowrap;box-shadow:0 4px 0 #172622;transition:transform .2s ease,box-shadow .2s ease}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 6px 0 #172622;background:#FF6A3D}
.nav-cta:active{transform:translateY(1px);box-shadow:0 2px 0 #172622}

/* правий блок бургер-режиму — швидкі контакти (телефон/Viber/Telegram) + сама кнопка-бургер,
   разом як один правий "стовпчик", щоб CTA лишалась абсолютно-центрованою окремо (див. нижче) */
.nav-right{display:flex;align-items:center;gap:12px;flex:none}
/* швидкі контакти — окремі елементи від тих, що в випадному меню; за замовчуванням
   приховані (на десктопі контакти вже видно в nav-contacts), показуються лише в
   діапазоні бургера, де реально влазять */
.nav-quick{display:none;align-items:center;gap:8px;flex:none}
.ico-phone{background:#124239}
.ico-phone i{color:#F5C543;font-size:18px}

/* кнопка мобільного меню — ціла/розбита чашка замість бургера */
.header-menu-cup{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;padding:0;
  border:2px solid #172622;border-radius:13px;
  background:#124239;color:#F5C543;
  box-shadow:2px 2px 0 #172622;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease;
}
.header-menu-cup__icons{position:relative;display:block;width:27px;height:27px;pointer-events:none}
.header-menu-cup__icon{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:center;transition:opacity .22s ease,transform .22s ease}
.header-menu-cup__icon--whole{opacity:1;transform:scale(1) rotate(0deg)}
.header-menu-cup__icon--broken{opacity:0;transform:scale(.72) rotate(-5deg)}
.header-menu-cup[aria-expanded="true"]{background:#FF6A3D;color:#172622}
.header-menu-cup[aria-expanded="true"] .header-menu-cup__icon--whole{opacity:0;transform:scale(.7) rotate(5deg)}
.header-menu-cup[aria-expanded="true"] .header-menu-cup__icon--broken{opacity:1;transform:scale(1) rotate(0deg)}
.header-menu-cup__broken-part{transform-box:fill-box;transform-origin:center;transition:transform .26s ease}
.header-menu-cup[aria-expanded="true"] .header-menu-cup__broken-part--left{transform:translate(-1.6px,1.2px) rotate(-4deg)}
.header-menu-cup[aria-expanded="true"] .header-menu-cup__broken-part--right{transform:translate(1.6px,-1px) rotate(4deg)}
@media (hover:hover) and (pointer:fine){ .header-menu-cup:hover{transform:translateY(-2px);box-shadow:2px 6px 10px rgba(16,61,52,.22),2px 2px 0 #172622} }
.header-menu-cup:active{transform:translateY(1px);box-shadow:1px 1px 0 #172622}
.header-menu-cup[aria-expanded="true"]:focus-visible{outline-color:#F5C543}

/* overlay під мобільним меню */
.mobile-menu-overlay{
  position:fixed;inset:0;z-index:998;
  background:rgba(9,40,34,.45);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .24s ease,visibility .24s ease;
}
.mobile-menu-overlay.is-visible{opacity:1;visibility:visible;pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  .header-menu-cup,.header-menu-cup__icon,.header-menu-cup__broken-part,.nav-menu,.mobile-menu-overlay,
  .nav,.nav-cta{transition:none !important}
}

/* глушить transition під час живого ресайзу вікна (клас додає/знімає js/nav.js) —
   без цього перетин бургер-брейкпоінта на льоту проступає порожньою рамкою .nav-menu,
   доки браузер "доанімовує" різку зміну max-height/opacity/position */
html.resizing .nav-menu,html.resizing .nav{transition:none !important}

@media (max-width:960px){
  .brand{gap:8px}
}

/* ---------- nav: телефон-іконка (≤1180px) — desktop-рядок лишається, але номер згортається
   в іконку-кнопку (як Viber/Telegram), звільняючи місце для nav-links; повний текст номера —
   лише від 1181px і в мобільній випадайці (там своя override нижче). ---------- */
@media (max-width:1180px){
  .nav .contact-phone{width:44px;height:44px;justify-content:center;padding:0;gap:0;border:2px solid #172622;border-radius:13px;background:#124239;box-shadow:2px 2px 0 #172622;flex:none}
  .nav .contact-phone i{color:#F5C543;font-size:18px}
  .nav .contact-phone:hover{background:#172622}
  .contact-phone-num{display:none}
}

/* ---------- nav: компактний десктоп (≤1040px) — тісніші gap/padding, CTA трохи менша;
   шрифт nav-links лишається 16px (див. базове правило) аж до бургер-брейкпоінта нижче. ---------- */
@media (max-width:1040px){
  .nav{gap:12px;padding:0 16px;height:62px}
  .nav-links{gap:8px}
  .brand-slogan{display:none}
  .nav-cta{height:44px;padding:0 18px;font-size:14px}
}

/* ---------- nav: бургер (≤910px) — нижче все (пункти меню, телефон, Viber/Telegram)
   згортається у випадне меню. Було 869px, але після збільшення іконки лого до 38px
   (під розмір Telegram) nav-links стали впиратись у nav-contacts вже на 879–896px
   (заміряно: реальний нахлест зникає лише при ~897px) — 910px лишає запас. ---------- */
@media (max-width:910px){
  /* CTA має лишатись строго по центру шапки незалежно від того, скільки важить правий
     блок (іконки контактів то з'являються, то ховаються). justify-content:space-between
     чи grid 1fr/auto/1fr центрують CTA лише відносно бічних блоків — щойно їхня ширина
     різна (лого з текстом ≠ бургер, чи бургер+іконки ≠ просто бургер), CTA зміщується.
     Тому CTA виведена з потоку (position:absolute, .nav — контейнер завдяки position:sticky)
     і центрується по самому .nav, а лого/nav-right лишаються звичайним flex-рядком
     (space-between з базового правила) — вони більше не впливають на позицію CTA. */
  .nav-cta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  .header-menu-cup{display:inline-flex}
  /* лого — той самий розмір, що й кнопка-бургер, щоб обидва краї шапки виглядали парно */
  .brand span{width:44px;height:44px;border-radius:13px}
  /* CTA виведена з потоку, тож зліва від неї весь час вільно — гасло лишається видимим,
     поки реально влазить (ховається окремим, нижчим брейкпоінтом) */
  .brand-slogan{display:block}
  /* показуємо швидкі контакти в правому блоці, поки реально влазять (виміряно: перестають
     влазити раніше за 860px — нижче окрема медіа-точка ховає їх назад, лишається лише
     випадне меню) */
  .nav-quick{display:flex}
  .nav-menu{
    position:absolute;left:20px;right:20px;top:calc(100% + 10px);
    flex-direction:column;align-items:stretch;
    background:#F9F6F0;border:2px solid #172622;border-radius:16px;
    box-shadow:0 5px 0 rgba(16,61,52,.9);
    /* min-height:0 обов'язковий: .nav-menu — flex-контейнер (column), а колонковим
       flex-контейнерам браузер за замовчуванням дає автоматичний min-height по контенту,
       який переважає max-height:0 — без цього скинення рамка все одно рендерилась ~36px
       заввишки (з border/box-shadow помітна навіть при opacity:0) замість повного схлопування */
    min-height:0;max-height:0;overflow:hidden;opacity:0;padding:14px 18px 18px;
    transition:max-height .28s ease,opacity .22s ease;
  }
  .nav.nav-open .nav-menu{opacity:1}
  /* у випадаючому мобільному меню nav-links — звичайний вертикальний список,
     а не центрована desktop-стрічка: скидаємо justify-content/flex/max-width/margin/gap */
  .nav-links{flex-direction:column;justify-content:flex-start;align-items:flex-start;flex:none;max-width:none;margin-inline:0;gap:2px;width:100%}
  .nav-links a{width:100%;padding:11px 2px;font-size:15px}
  .nav-contacts{margin-left:0;margin-top:8px;padding-top:14px;border-top:2px solid rgba(23,38,34,.14);width:100%;flex-wrap:wrap;gap:14px}
  /* у випадайці телефон знову повний текст, а не іконка-кнопка з правила вище */
  .nav .contact-phone{width:auto;height:auto;justify-content:flex-start;display:inline-flex;font-size:16px;padding:10px 0;gap:8px;border:none;border-radius:0;background:none;box-shadow:none}
  .nav .contact-phone i{color:#FF6A3D;font-size:15px}
  .contact-phone-num{display:inline}
}

/* Viber/Telegram із швидких контактів ховаємо (лишаються доступні в випадному меню), а
   іконку дзвінка лишаємо — це основний спосіб зв'язку, і вона сама по собі значно вужча
   за трійку. Заміряно: усі три іконки влазять без нахлесту на CTA аж до ~605px. */
@media (max-width:620px){
  .nav-quick .ico-viber,
  .nav-quick .ico-tg{display:none}
}

/* гасло лога ("Друкуємо з любов'ю") ховаємо, коли воно впирається в абсолютно-центровану
   CTA — заміряно: реальний нахлест починається ~585px, 620px лишає безпечний запас */
@media (max-width:620px){
  .brand-slogan{display:none}
}

/* навіть сама іконка дзвінка займає min-content незалежно від viewport — заміряно: разом
   з лого й бургером вона впирається в CTA вже ~405px, тож ховаємо і її з запасом на 430px */
@media (max-width:430px){
  .nav-quick{display:none}
}

@media (max-width:640px){
  .nav{height:58px;padding:0 14px}
  .nav-menu{left:14px;right:14px}
}

/* дуже вузькі телефони: лого стає лише іконкою */
@media (max-width:480px){
  .brand-txt{display:none}
  /* touch-area 44×44: лого тепер лише іконка й саме по собі менше — розширюємо клікабельну
     зону без зміни візуального розміру. Раніше цей трюк жив у тій самій медіа-точці, що й
     видимий brand-txt, і negative margin "з'їдав" nav-овий gap між текстом лого й nav-links
     (вони торкались впритул) — переніс сюди, де лого вже лише іконка й сусідів поруч нема. */
  .brand{padding:8px;margin:-8px}
}