/* ============================================================
   Unified Header / Navigation Component
   Shared CSS for technobarrier.ru and subdomains
   Uses CSS custom properties: --ink, --ink2, --panel, --text,
   --muted, --line, --accent, --max
   ============================================================ */

/* ===== FONT ===== */
@font-face{font-family:Manrope;src:url("./fonts/Manrope-Variable.ttf") format("truetype");font-style:normal;font-weight:200 800;font-display:swap}

/* ===== BASE RESETS (needed by header) ===== */
*,*::before,*::after{box-sizing:border-box}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:5px}

/* ===== CONTAINER ===== */
.container{width:min(calc(100% - 112px),var(--max));margin-inline:auto}

/* ===== SKIP LINK ===== */
.skip-link{position:absolute;z-index:100;top:-100px;left:12px;padding:12px;background:var(--text);color:var(--ink)}
.skip-link:focus{top:12px}

/* ===== HEADER ===== */
.site-header{height:84px;position:sticky;top:0;z-index:110;background:#071923;border-bottom:1px solid var(--line)}
.header-inner{height:100%;display:flex;align-items:center;gap:48px}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:14px;text-decoration:none;white-space:nowrap}
.logo-mark{font-size:11px;border:1px solid var(--accent);color:var(--accent);width:31px;height:31px;display:grid;place-items:center;letter-spacing:-.06em;flex-shrink:0}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-eyebrow{font-size:9px;font-weight:500;letter-spacing:.18em;color:var(--muted);order:1}
.logo-name{font-size:21px;letter-spacing:.13em;font-weight:800;order:2;color:var(--text)}

/* Desktop nav */
.desktop-nav{display:flex;align-items:center;gap:clamp(20px,3vw,52px);margin-left:auto}
.desktop-nav a{font-size:14px;color:#c6d0d3;transition:color .2s}
.desktop-nav a:hover{color:var(--accent)}
.desktop-nav .nav-home{font-weight:700;color:var(--text)}
.desktop-nav .nav-blog{font-weight:500}

/* Dropdown */
.nav-dropdown{position:relative}
.nav-dropdown-trigger{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#c6d0d3;background:none;border:none;cursor:pointer;padding:0;transition:color .2s}
.nav-dropdown-trigger:hover,.nav-dropdown-trigger[aria-expanded="true"]{color:var(--accent)}
.dropdown-chevron{transition:transform .2s}
.nav-dropdown-trigger[aria-expanded="true"] .dropdown-chevron{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:260px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,visibility .2s,transform .2s;z-index:50;box-shadow:0 12px 32px rgba(0,0,0,.3)}
.nav-dropdown-menu:not([inert]){opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown-menu a{display:block;padding:12px 20px;font-size:14px;color:#c6d0d3;transition:background .15s,color .15s;white-space:nowrap}
.nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible{background:rgba(200,164,121,.1);color:var(--accent)}

/* Header action (CTA button) */
.header-action{border:1px solid var(--accent);padding:12px 18px;color:var(--accent);font-size:13px;font-weight:700;white-space:nowrap;transition:background .25s,color .25s}
.header-action span{margin-left:22px}
.header-action:hover{background:var(--accent);color:var(--ink)}

/* Mobile menu toggle button */
.menu-toggle,.mobile-menu{display:none}
.menu-toggle{flex-direction:column;gap:5px;padding:12px;background:none;border:none;cursor:pointer;z-index:30}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:1px;transition:transform .25s,opacity .25s}
.menu-toggle[aria-expanded="true"] span:first-child{transform:rotate(45deg) translate(5px,5px)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:rotate(-45deg) translate(5px,-5px)}

/* Mobile menu overlay */
.mobile-menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.mobile-menu-overlay.open{opacity:1;visibility:visible}

/* Mobile menu */
.mobile-menu a{min-height:44px;display:flex;align-items:center}
.mobile-dropdown{width:100%}
.mobile-dropdown-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:12px 4px;font-size:17px;color:inherit;background:none;border:none;border-bottom:1px solid var(--line);cursor:pointer;text-align:left}
.mobile-dropdown-menu{overflow:hidden;max-height:0;transition:max-height .25s ease}
.mobile-dropdown-menu:not([inert]){max-height:300px}
.mobile-dropdown-menu a{display:block;padding:12px 20px;font-size:15px;color:#a5b1b6;border-bottom:1px solid var(--line);min-height:44px}
.mobile-dropdown-menu a:hover,.mobile-dropdown-menu a:focus-visible{color:var(--accent)}

/* ===== RESPONSIVE: 1100px ===== */
@media(max-width:1100px){
  .container{width:min(calc(100% - 64px),var(--max))}
  .desktop-nav{gap:18px}
  .header-inner{gap:24px}
  .logo-name{font-size:17px}
  .logo-eyebrow{font-size:8px}
}

/* ===== RESPONSIVE: 780px (tablet/mobile) ===== */
@media(max-width:780px){
  .container{width:min(calc(100% - 40px),var(--max))}
  .menu-toggle{display:flex}
  .mobile-menu{display:flex;flex-direction:column;position:fixed;inset:0;z-index:100;background:var(--ink);padding:84px 24px 24px;overflow-y:auto;transform:translateX(-100%);transition:transform .3s ease}
  .mobile-menu.open{transform:translateX(0)}
  .mobile-menu a{font-size:17px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--text)}
  .desktop-nav,.header-action{display:none}
}

/* ===== RESPONSIVE: 560px (small mobile) ===== */
@media(max-width:560px){
  .container{width:min(calc(100% - 32px),var(--max))}
}

/* ===== RESPONSIVE: 390px (very small) ===== */
@media(max-width:390px){
  .container{width:min(calc(100% - 24px),var(--max))}
  .logo-name{font-size:14px;letter-spacing:.08em}
  .logo-eyebrow{font-size:7px;letter-spacing:.1em}
  .logo-mark{width:26px;height:26px;font-size:9px}
}

/* ===== REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}