/* eco-components.css - shared components of the 1krok.link ecosystem, ONE source:
   https://1krok.link/assets/css/eco-components.css?v=... Needs eco-tokens.css (all values are var(--...)).
   Header, mobile menu and footer: the markup is chrome.php (chrome_nav / chrome_nav_page / chrome_footer);
   moved here from studio_works/works/nav.css 19.10.2026, values replaced by tokens, nav collapses at 968px
   (was 900px; 968px is what studio pages use). Below them: buttons, fields, cards, sections. */
.nav, .footer{ --nav-primary:var(--c-accent); --nav-primary-dark:var(--c-accent-dark); --nav-ink:var(--c-text); }

/* ===================== HEADINGS ===================== */
/* Balanced lines: no lone last word under a long first line (browsers without support ignore it). */
h1, h2 { text-wrap: balance; }

/* ===================== NAV ===================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:16px 40px;
  border-bottom:1px solid var(--c-border);
  font-family:var(--font-body);
}
/* The blur sits on a pseudo-element, not on .nav: backdrop-filter makes an element the containing block of its
   position:fixed descendants, and .mobile-nav (fixed, full height) lives inside .nav - with the filter on .nav the
   drawer was clipped to the header height (works/dev/idea, 360 px, found 19.10.2026). */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--header-bg);
  backdrop-filter:var(--header-blur);-webkit-backdrop-filter:var(--header-blur)}
.nav-container{max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav .logo{display:flex;align-items:center;flex-shrink:0}
.nav .logo img{height:32px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-link{
  padding:10px 20px;border-radius:var(--r);font-size:15px;font-weight:500;
  color:var(--nav-ink);text-decoration:none;white-space:nowrap;
  background:transparent;border:none;cursor:pointer;font-family:inherit;
  transition:background .15s,color .15s;
}
/* hover — світліший тон, щоб не збігався з active (var(--c-accent-soft)) */
.nav-link:hover{background:var(--c-accent-hover-soft)}
/* КАНОН активного: бліда підкладка + синій текст + 600 + r12 */
.nav-link.active{background:var(--c-accent-soft);color:var(--nav-primary);font-weight:600}
.nav-link.active:hover{background:var(--c-accent-soft)}
.nav-sep{width:1px;height:20px;background:var(--c-border-strong);margin:0 6px;flex-shrink:0}

/* CTA-кнопка в nav (chrome_nav_page) */
.nav-cta{margin-left:8px;padding:10px 22px;border-radius:var(--r-pill);background:var(--nav-primary);color:#fff;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .15s,transform .15s}
.nav-cta:hover{background:var(--nav-primary-dark);transform:translateY(-1px)}
.mobile-cta{margin-top:8px;background:var(--nav-primary)!important;color:#fff!important;justify-content:center!important;font-weight:600}
.mobile-cta:hover{background:var(--nav-primary-dark)!important;color:#fff!important}
/* Optional header CTA visible at EVERY width, next to the burger (outside .nav-links): opt-in by class, pages without it
   are unchanged. 44 px = touch target. Desktop: links move right next to it; mobile: it sits left of the burger. */
.nav-cta-always{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-left:12px;padding:0 22px;border-radius:var(--r);background:var(--nav-primary);color:#fff;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;flex-shrink:0;transition:background .15s,transform .15s}
.nav-cta-always:hover{background:var(--nav-primary-dark);color:#fff;transform:translateY(-1px)}
.nav-container:has(.nav-cta-always) .nav-links{margin-left:auto}
/* Optional caption next to the logo (inside a.logo, after the img), e.g. the service name on a product landing. */
.nav .logo-label{margin-left:12px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--c-text-2);white-space:nowrap}
@media(max-width:560px){.nav .logo-label{display:none}}

/* dropdown */
.nav-dropdown{position:relative}
.nav-dropdown-toggle{
  display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:var(--r);
  font-size:15px;font-weight:500;color:var(--nav-ink);background:transparent;border:none;
  cursor:pointer;font-family:inherit;transition:background .15s;
}
.nav-dropdown-toggle:hover{background:var(--c-accent-hover-soft)}
.nav-dropdown-toggle svg{transition:transform .2s}
.nav-dropdown:hover .nav-dropdown-toggle svg,.nav-dropdown:focus-within .nav-dropdown-toggle svg,.nav-dropdown.open .nav-dropdown-toggle svg{transform:rotate(180deg)}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:210px;background:#fff;
  border:1px solid var(--c-border);border-radius:var(--r);box-shadow:var(--shadow);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{opacity:1;visibility:visible;transform:none}
.nav-dropdown-menu a{
  display:block;padding:10px 14px;border-radius:var(--r);font-size:14px;font-weight:500;
  color:var(--nav-ink);text-decoration:none;transition:background .15s,color .15s;
}
.nav-dropdown-menu a:hover{background:var(--c-accent-hover-soft);color:var(--nav-primary)}
.nav-dropdown-menu a.active,.mobile-dropdown-menu a.active{background:var(--c-accent-soft);color:var(--nav-primary);font-weight:600;border-radius:var(--r)}

/* Дропдаун «Екосистема» (chrome_nav_page) — окремі сервіси, вирівняний праворуч */
.nav-dropdown-menu--eco{left:auto;right:0;min-width:200px}
/* поточний сервіс в еко-дропдауні: фон+колір уже дає правило a.active вище, тут лише вага */
.nav-dropdown-menu--eco a.active{font-weight:600}

/* burger */
.burger{position:relative;z-index:1000;display:none;flex-direction:column;gap:5px;width:44px;height:44px;box-sizing:border-box;margin:-11px -8px;background:none;border:none;cursor:pointer;padding:11px 8px}
.burger span{display:block;height:2px;width:100%;background:var(--nav-ink);border-radius:2px;transition:transform .25s,opacity .25s}
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile panel */
.mobile-nav-overlay{display:none;position:fixed;inset:0;background:rgba(10,10,26,.4);z-index:998}
.mobile-nav-overlay.active{display:block}
/* page under an open mobile menu does not scroll (class set by toggleMobileNav in chrome.php) */
html.nav-open,html.nav-open body{overflow:hidden}
.mobile-nav{
  display:none;position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:#fff;z-index:999;
  padding:88px 20px 24px;overflow-y:auto;box-shadow:-20px 0 60px rgba(0,0,0,.12);
}
.mobile-nav.active{display:flex}
.mobile-nav-links{display:flex;flex-direction:column;gap:4px;width:100%}
.mobile-nav-links a,.mobile-dropdown-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 16px;border-radius:var(--r);font-size:16px;font-weight:500;
  color:var(--nav-ink);text-decoration:none;background:none;border:none;cursor:pointer;
  font-family:inherit;width:100%;text-align:left;
}
.mobile-nav-links a:hover,.mobile-nav-links a.active{color:var(--nav-primary);background:var(--c-accent-soft)}
.mobile-dropdown-toggle svg{transition:transform .2s;flex-shrink:0}
.mobile-dropdown-toggle.active svg{transform:rotate(180deg)}
.mobile-dropdown-menu{display:none;flex-direction:column;padding-left:10px}
.mobile-dropdown-menu.active{display:flex}

/* ===================== FOOTER ===================== */
.footer{background:var(--c-footer);color:#fff;padding:80px 40px 40px;font-family:var(--font-body)}
.footer .container{max-width:var(--container);margin:0 auto}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px}
.footer-title{font-family:var(--font-head);font-size:18px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#fff;margin:0 0 20px}
.footer-link{display:block;font-size:16px;color:rgba(255,255,255,.6);text-decoration:none;margin-bottom:12px;transition:color .15s}
.footer-link:hover{color:#fff}
.footer-email{color:#0077FF}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1)}
.footer-legal-links{display:flex;flex-wrap:wrap;gap:20px}
.footer-legal-links a{font-size:14px;color:rgba(255,255,255,.5);text-decoration:none;transition:color .15s}
.footer-legal-links a:hover{color:rgba(255,255,255,.8)}
.footer-copyright{font-size:14px;color:rgba(255,255,255,.6);margin:0}   /* .6: 7.27:1 on --c-footer; .4 gave 3.78:1 (below AA) */

/* ===================== RESPONSIVE ===================== */
@media(max-width:968px){
  .nav-cta-always{margin-left:auto;padding:0 16px;font-size:14px}
  .nav{padding:14px 20px}
  .nav-links{display:none}
  .burger{display:flex}
  .footer{padding:56px 20px 32px}
  .footer-bottom{margin-top:40px}
}
@media(prefers-reduced-motion:reduce){
  .nav-link,.burger span,.nav-dropdown-menu,.footer-link,.mobile-nav-links a{transition:none}
}

/* ===================== BUTTONS ===================== */
.eco-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--btn-h);padding:12px 28px;
  border:1px solid transparent;border-radius:var(--r);font-family:var(--font-body);font-size:var(--btn-fs);font-weight:var(--btn-fw);
  line-height:1.2;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}
.eco-btn--primary{background:var(--c-accent);color:#fff;box-shadow:var(--shadow-accent)}
.eco-btn--primary:hover{background:var(--c-accent-dark)}
.eco-btn--secondary{background:var(--c-bg);color:var(--c-accent);border-color:var(--c-accent)}
.eco-btn--secondary:hover{background:var(--c-accent-soft)}
.eco-btn--pill{border-radius:var(--r-pill)}

/* ===================== FIELDS ===================== */
.eco-field{width:100%;min-height:var(--field-h);padding:15px 16px;font-family:var(--font-body);font-size:16px;color:var(--c-text);
  background:var(--c-bg);border:var(--field-border) solid var(--c-border);border-radius:var(--r);box-sizing:border-box}
.eco-field:focus{outline:none;border-color:var(--c-accent)}

/* ===================== CARDS / SECTIONS ===================== */
.eco-card{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r);padding:28px}
.eco-container{max-width:var(--container);margin:0 auto;padding:0 40px}
.eco-section{padding:var(--section-y) 0}
@media(max-width:768px){.eco-section{padding:var(--section-y-mobile) 0}.eco-container{padding:0 20px}}
/* Narrow phones: logo + CTA + burger must fit (burger never shrinks; measured 20.10: «Обрати тариф» cut the burger at 360/375).
   Order: CTA padding first, then a slightly smaller logo; the CTA text is never hidden or shortened. */
.nav-container:has(.nav-cta-always) .burger{flex-shrink:0}
@media(max-width:389px){.nav-cta-always{padding:0 10px;font-size:14px}.nav-container:has(.nav-cta-always) .logo img{height:28px}}
@media(max-width:374px){.nav-cta-always{padding:0 8px}.nav-container:has(.nav-cta-always) .logo img{height:26px}}
@media(max-width:339px){.nav-container:has(.nav-cta-always) .logo img{height:22px}}
/* Mobile drawer (20.10.2026): the header logo is repeated at the top of the open panel, and the header logo
   itself is hidden while the panel is open - a piece of it showed in the strip left of the panel. The panel
   logo band is the burger's band: nav padding 14px + container height (44 with .nav-cta-always, 32 without),
   so the logo and the close cross share one centre line. Burger and cross in the accent colour. */
.burger span{background:var(--c-accent)}
.mobile-nav::before{content:"";position:absolute;top:14px;left:20px;width:150px;height:32px;
  background:url(https://1krok.link/logo/blue.png) no-repeat left center/auto 32px}
.nav:has(.nav-cta-always) .mobile-nav::before{height:44px}
.nav:has(.mobile-nav.active) .nav-container>.logo{visibility:hidden}
/* Open menu (21.10.2026): the header band stayed white above the dim overlay (left of the panel). The overlay
   cannot go above .nav (the panel lives inside it), so while the panel is open the header itself goes clear -
   no background, no blur, no bottom border - and the overlay under it dims that band like the rest of the page. */
.nav:has(.mobile-nav.active){border-bottom-color:transparent}
.nav:has(.mobile-nav.active)::before{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}