/* v8 overrides: header + mobile nav + language flags, non-destructive */
:root{
  --apm-dark:#082a3a;   /* dark blue */
  --apm-turq:#0fbcd4;   /* turkuaz */
}
.apm-topbar{
  position: sticky;
  top:0; z-index: 9999;
  background: linear-gradient(90deg, rgba(8,42,58,.95), rgba(8,42,58,.85));
  backdrop-filter: blur(6px);
  display: flex; align-items:center; justify-content:space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.apm-brand{display:flex; align-items:center; gap:12px;}
.apm-brand img{height:28px; width:auto; display:block; filter: drop-shadow(0 0 6px rgba(255,255,255,.4));}
.apm-slogan{color:#d8f3ff; font-weight:600; font-size:14px; white-space:nowrap;}

.apm-actions{display:flex; align-items:center; gap:10px;}
/* Language pills */
.apm-lang{display:flex; gap:8px;}
.apm-pill{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff; font-weight:700; font-size:12px;
  padding:6px 10px; border-radius:999px; cursor:pointer;
  line-height:1;
}
.apm-pill.active{background:#fff; color:#082a3a;}
/* Hamburger */
.apm-burger{
  border:1px solid rgba(255,255,255,.2);
  background:transparent; color:#fff;
  font-size:18px; border-radius:10px; padding:6px 10px; cursor:pointer;
}
/* Offcanvas menu */
.apm-drawer{
  position: fixed; inset:0 0 0 auto; width:78%;
  max-width:360px; background:#0b3143; color:#e9f7ff;
  transform: translateX(100%); transition: transform .28s ease;
  box-shadow: -10px 0 30px rgba(0,0,0,.35);
  display:flex; flex-direction:column; padding:18px;
}
.apm-drawer.open{ transform: translateX(0); }
.apm-drawer a{ color:#e9f7ff; text-decoration:none; padding:12px 6px; border-bottom:1px solid rgba(255,255,255,.06); font-weight:600; }
.apm-drawer .apm-close{ align-self:flex-end; background:transparent; color:#fff; font-size:22px; border:none; padding:6px 8px; cursor:pointer; }

/* Hide desktop nav on small screens to avoid duplication if original header exists */
@media (max-width: 992px){
  nav ul, .main-nav, .site-nav { display:none !important; }
}
/* Ensure hero gradient stays nice on mobile by tightening paddings slightly */
@media (max-width: 480px){
  .hero, .hero-section { padding-top: 18px !important; }
}

/* === ÇETO SEO BUILD: visual-safe reset and minor header tune === */
html, body, header { margin:0; padding:0; }
.brand-slogan{ font-weight:600; margin-left:10px; color:#fff; opacity:.9; white-space:nowrap; }
@media (max-width:640px){ .brand-slogan{ font-size:12px; opacity:.85; } }
.apm-topbar, .apm-burger, .apm-close, .apm-drawer, #menu-open-dup{ display:none !important; }



/* === Çeto UI update (2025-10-26): Header order & spacing === */
/* Goal:
   - Mobile: bring slogan closer to the logo and keep it left-aligned.
   - Desktop: show language flags to the RIGHT of the slogan (after logo + slogan).
*/
header .container.nav,
header .nav { display:flex; align-items:center; justify-content:space-between; }

header .nav-left { display:flex; align-items:center; gap:.5rem; }

/* Desktop ordering */
@media (min-width: 641px){
  header .nav-left .brand       { order: 1; }
  header .nav-left #site-slogan { order: 2; margin-left: 6px; }
  header .nav-left .lang-flags  { order: 3; margin-left: 12px; }
}

/* Mobile tweaks: tighter spacing, slogan next to logo on the left */
@media (max-width: 640px){
  header .nav { gap: .5rem !important; }
  header .nav-left { gap: .35rem !important; }
  header .logo-slogan, header #site-slogan {
    margin-left: 4px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
  }
  /* Keep flags at far right on mobile if present */
  header .nav-left .lang-flags { margin-left: auto !important; }
  /* Ensure logo stays compact on small screens */
  header .brand img.apm-logo {
    max-height: 28px !important;
    height: auto !important;
  }
}


/* .apm-hardorder-20251026: ensure mobile spacing */
@media (max-width:640px){
  header .nav-left{ gap:.35rem !important; }
  header .nav-left .brand img{ max-height:28px !important; }
  header #site-slogan, header .logo-slogan{ margin-left:4px !important; }
}


/* === Çeto fix v4 (2025-10-26): header spacing & mobile visibility === */

/* Base: make nav-left flex so we can push flags right reliably */
header .nav-left { display:flex; align-items:center; flex: 1 1 auto; }
header .nav-right { flex: 0 0 auto; }

/* Desktop: push language flags fully to the right, away from slogan */
@media (min-width: 1024px){
  header .nav-left .lang-flags{
    margin-left: auto !important;     /* push to far right */
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
  }
  header #site-slogan, header .logo-slogan{
    margin-left: 10px !important;     /* slight gap after logo */
  }
}

/* Tablet & general desktop */
@media (min-width: 641px) and (max-width: 1023px){
  header .nav-left .lang-flags{
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }
  header #site-slogan, header .logo-slogan{
    margin-left: 8px !important;
  }
}

/* Mobile: keep logo + slogan tight on the left, flags to the far right and VISIBLE */
@media (max-width: 640px){
  header .nav { gap: .35rem !important; }
  header .nav-left { gap: .25rem !important; flex: 1 1 auto !important; }
  header .brand img.apm-logo{ max-height: 24px !important; height:auto !important; }
  header #site-slogan, header .logo-slogan{
    display:inline-block !important;
    margin-left: 3px !important;  /* slogan very close to logo */
    font-size: 12px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }
  header .lang-flags{
    display: inline-flex !important;   /* ensure visible */
    margin-left: auto !important;      /* send to far right */
    gap: 4px !important;
  }
  header .lang-flags .flag-btn{
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }
  header .lang-flags .label{ display:inline !important; } /* show EN/RU if hidden elsewhere */
}

/* Guard: never hide language flags due to other rules */
.lang-flags{ display:inline-flex; align-items:center; gap:6px; }