/* ================================================================
   SGS Mobile CSS — mobile.css
   Підключити: wp_enqueue_style('sgs-mobile', .../mobile.css)
   АБО додати вміст в кінець theme.css
   ================================================================ */

/* ── MOBILE CONTROLS (lang в хедері) ────────────────────────── */
.sgs-mobile-controls {
  order: 2;
}
.sgs-mobile-controls .sgs-lang-switcher {
  display: flex !important;
  gap: 2px;
}
.sgs-mobile-controls .sgs-lang-link {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: rgba(255,255,255,.4) !important;
  padding: 5px 9px;
  border-radius: 5px;
  text-decoration: none;
  transition: color .2s, background .2s;
}
.sgs-mobile-controls .sgs-lang-link:hover,
.sgs-mobile-controls .sgs-lang-link.active {
  color: #fff !important;
  background: rgba(104,82,237,.25);
}

/* ── HAMBURGER ───────────────────────────────────────────────── */
.sgs-toggler {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 4px;
  background: none;
  border: none !important;
  order: 3;
  flex-shrink: 0;
}
.sgs-toggler:focus { box-shadow: none !important; outline: none; }
.sgs-toggler-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,.8);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
/* Animate to X when open */
[aria-expanded="true"] .sgs-toggler-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
[aria-expanded="true"] .sgs-toggler-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
[aria-expanded="true"] .sgs-toggler-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── NAVBAR CONTAINER ────────────────────────────────────────── */
.sgs-nav-container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
}

/* ── MOBILE MENU PANEL ───────────────────────────────────────── */
@media (max-width: 991px) {

  .sgs-navbar,
  .sgs-navbar .container,
  .sgs-nav-container {
    height: 60px !important;
    min-height: 60px;
  }

  /* Collapse panel — full viewport glass */
  #sgsNav.show {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(11, 7, 28, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow-y: auto;
    padding: 12px 0 40px;
    z-index: 1049;
    animation: sgsMobileIn .22s cubic-bezier(.4,0,.2,1);
  }
  @keyframes sgsMobileIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Nav links */
  .sgs-nav {
    width: 100%;
    padding: 0 8px;
  }
  .sgs-nav .nav-item {
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  .sgs-nav .nav-item:last-child { border-bottom: none; }

  .sgs-nav .nav-link {
    height: auto !important;
    padding: 14px 16px !important;
    font-size: .95rem !important;
    font-weight: 500;
    color: rgba(255,255,255,.8) !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    transition: background .15s, color .15s;
  }
  .sgs-nav .nav-link:hover,
  .sgs-nav .nav-link.active {
    color: #fff !important;
    background: rgba(104,82,237,.12);
  }
  .sgs-nav .nav-link::after {
    display: none !important; /* hide underline on mobile */
  }

  /* Dropdown toggle arrow on mobile */
  .sgs-nav .dropdown-toggle::after {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-right: 1.5px solid rgba(255,255,255,.5) !important;
    border-bottom: 1.5px solid rgba(255,255,255,.5) !important;
    transform: rotate(45deg) !important;
    margin-left: auto !important;
    transition: transform .25s !important;
  }
  .sgs-nav .dropdown.show > .nav-link::after {
    transform: rotate(-135deg) translateY(3px) !important;
  }

  /* Mobile dropdown — no popup, inline expand */
  .sgs-nav .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    background: rgba(255,255,255,.04) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 4px 0 8px 12px !important;
    margin: 0 !important;
    animation: none !important;
    min-width: unset !important;
    backdrop-filter: none !important;
  }
  .sgs-nav .dropdown-item {
    color: rgba(255,255,255,.65) !important;
    font-size: .88rem !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
    white-space: normal !important;
    line-height: 1.35;
  }
  .sgs-nav .dropdown-item:last-child { border-bottom: none !important; }
  .sgs-nav .dropdown-item:hover {
    background: rgba(104,82,237,.15) !important;
    color: #fff !important;
  }

  /* Mobile CTA button */
  .sgs-mobile-cta-wrap {
    padding: 16px 16px 8px;
  }
  .sgs-mobile-cta-wrap .sgs-nav-cta {
    padding: 14px 20px !important;
    font-size: .92rem !important;
    border-radius: 10px !important;
    text-align: center;
  }

  /* Hero padding compensation */
  .sgs-hero,
  .sgs-service-hero {
    padding-top: calc(60px + 60px) !important;
  }
}

/* ── GLOBAL MOBILE CONTENT FIXES ────────────────────────────── */
@media (max-width: 768px) {

  /* Typography scale */
  .sgs-section-title { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; }
  .sgs-hero-title    { font-size: clamp(2rem, 9vw, 3.5rem) !important; }
  .sgs-service-title { font-size: clamp(1.8rem, 7vw, 2.8rem) !important; }

  /* Sections spacing */
  .sgs-section { padding: 52px 0 !important; }
  .sgs-section-alt { padding: 52px 0 !important; }

  /* Stat strip — vertical */
  .sgs-stat-strip {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .sgs-stat-strip-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(89,49,150,.12);
    padding: 14px 20px !important;
  }
  .sgs-stat-strip-item:last-child { border-bottom: none !important; }

  /* Process items */
  .sgs-process-item { flex-direction: column; gap: 10px; }
  .sgs-process-num  { width: 36px; height: 36px; font-size: .85rem; flex-shrink: 0; }

  /* Feature items */
  .sgs-feature-item { flex-direction: column; gap: 10px; }
  .sgs-feature-icon { width: 36px; height: 36px; align-self: flex-start; }

  /* Strategy table — scroll */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sgs-strategy-table { min-width: 480px; }

  /* Breadcrumb — wrap */
  .sgs-service-breadcrumb { flex-wrap: wrap; font-size: .72rem; }

  /* Footer */
  .sgs-footer .row > div { margin-bottom: 24px; }
  .sgs-footer-heading { font-size: .78rem; }
  .sgs-footer-links li a { font-size: .85rem; }

  /* Platform chips */
  .sgs-platform-chips,
  .sgs-vendor-chips { gap: 5px !important; }
  .sgs-chip,
  .sgs-vendor-chip {
    font-size: .74rem !important;
    padding: 4px 10px !important;
  }

  /* Scenario cards */
  .sgs-scenario-card { padding: 20px 16px; }

  /* Coverage items */
  .sgs-coverage-item { padding: 16px 12px; }
  .sgs-coverage-icon { font-size: 1.4rem; }

  /* CTA section */
  .sgs-page-cta { padding: 52px 0; }
  .sgs-page-cta h2 { font-size: clamp(1.4rem, 6vw, 2rem); }
  .sgs-page-cta .d-flex { flex-direction: column; align-items: stretch; }
  .sgs-page-cta .btn { text-align: center; }

  /* Contact form */
  .sgs-contact-form .row { gap: 12px; }
  .form-control { font-size: .9rem !important; }
}

@media (max-width: 480px) {
  .sgs-hero-stats .sgs-stat-number { font-size: 2rem; }
  .sgs-hero-cta { flex-direction: column; align-items: stretch; }
  .sgs-hero-cta .btn { text-align: center; }
  .sgs-service-badge { font-size: .72rem; padding: 4px 10px; }
}