/* NovaSync 3.3.1 — responsive navigation, blog filters and top-bar contact. */

.ns-topbar__support { display: flex; align-items: center; gap: 16px; }
.ns-topbar__phone { display: inline-flex; min-height: 28px; padding-left: 16px; align-items: center; gap: 7px; border-left: 1px solid rgba(255,255,255,.16); color: #fff; line-height: 1; text-decoration: none; white-space: nowrap; }
.ns-topbar__phone span { color: rgba(255,255,255,.55); font-size: .62rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.ns-topbar__phone strong { color: #fff; font-size: .72rem; font-weight: 850; }
.ns-topbar__phone:hover span,.ns-topbar__phone:hover strong { color: #9fbbff; }

.ns-header-cta,
.ns-mobile-menu-cta { animation: ns-header-cta-pulse 3.2s ease-in-out infinite; }
.ns-mobile-menu-cta { display: none; }
@keyframes ns-header-cta-pulse {
  0%,100% { box-shadow: 0 12px 28px rgba(19,81,216,.2), 0 0 0 0 rgba(19,81,216,0); }
  52% { box-shadow: 0 14px 32px rgba(19,81,216,.27), 0 0 0 8px rgba(19,81,216,.075); }
}

/* Filters stay in document flow: opening one can never cover another filter or the posts. */
.ns-blog-filters { z-index: auto; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; align-items: start; }
.ns-blog-filters__all,
.ns-blog-filters details,
.ns-blog-filters summary { width: 100%; min-width: 0; }
.ns-blog-filters__all,
.ns-blog-filters summary { justify-content: space-between; }
.ns-blog-filters details > div { position: static; top: auto; right: auto; left: auto; width: 100%; max-height: 285px; margin-top: 8px; box-shadow: 0 12px 28px rgba(22,35,63,.1); }
.ns-blog-filters details > div a { gap: 8px; overflow-wrap: anywhere; }

@media (max-width: 1000px) {
  .ns-blog-filters { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ns-blog-filters__all { grid-column: auto; }
}

@media (max-width: 900px) {
  .ns-site-header { z-index: 1100; }
  .ns-header-inner { position: relative; }
  .ns-brand,.custom-logo-link { min-width: 0; max-width: calc(100% - 62px); }
  .custom-logo { max-width: min(210px,52vw); }
  .ns-menu-toggle { z-index: 1102; position: relative; display: block; flex: 0 0 46px; }
  .ns-primary-nav {
    z-index: 1098;
    position: fixed;
    top: var(--ns-mobile-nav-top,72px);
    right: 0;
    bottom: auto;
    left: 0;
    display: block !important;
    width: 100%;
    height: calc(100dvh - var(--ns-mobile-nav-viewport-top,72px));
    min-height: 0;
    padding: 22px 18px max(28px,env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid #e4e9f2;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(255,255,255,.99);
    box-shadow: 0 24px 55px rgba(13,25,49,.16);
    transform: translateY(-10px);
    transition: opacity .2s ease,transform .2s ease,visibility .2s;
  }
  .ns-primary-nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
  .ns-primary-nav > ul { width: min(100%,620px); }
  .ns-primary-nav > ul > li > a { padding: 16px 6px; font-size: clamp(1.02rem,3vw,1.18rem); }
  .ns-primary-nav .sub-menu { padding: 0 0 12px 16px; }
  .ns-primary-nav .ns-mobile-menu-cta { display: flex; width: min(100%,620px); min-height: 52px; margin: 24px auto 0; align-items: center; justify-content: center; color: #fff; }
  .ns-primary-nav .ns-mobile-menu-cta:hover { color: #fff; }
  .admin-bar .ns-primary-nav { top: var(--ns-mobile-nav-top,72px); height: calc(100dvh - var(--ns-mobile-nav-viewport-top,118px)); }
}

@media (max-width: 620px) {
  .ns-topbar { display: block !important; }
  .ns-topbar__inner { min-height: 40px; justify-content: center; }
  .ns-topbar__inner > p:first-child,
  .ns-topbar__support > span { display: none; }
  .ns-topbar__support { width: 100%; justify-content: center; }
  .ns-topbar__phone { min-height: 40px; padding: 0 8px; border-left: 0; gap: 9px; }
  .ns-topbar__phone span { display: inline; }
  .ns-topbar__phone strong { font-size: .78rem; }
  .ns-blog-filters { grid-template-columns: 1fr; gap: 9px; }
  .ns-blog-filters__all { grid-column: auto; }
  .ns-blog-filters details > div { max-height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  .ns-header-cta,.ns-mobile-menu-cta { animation: none !important; }
  .ns-primary-nav { transition: none; }
}

/* 3.3.2 — compact map and a better-balanced process presentation. */
.ns-workflow-intro {
  grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr) !important;
  grid-template-areas:
    "kicker support"
    "title support";
  align-items: start;
}
.ns-workflow-intro .ns-kicker { grid-area: kicker; }
.ns-workflow-intro h2 {
  grid-area: title;
  max-width: 650px;
  margin: 18px 0 0;
  font-size: clamp(2.75rem,4.6vw,4.5rem);
}
.ns-workflow-intro__support {
  grid-area: support;
  width: 100%;
  max-width: 360px;
  padding-top: 2px;
  justify-self: end;
}
.ns-workflow-intro__support p {
  margin: 0 0 24px;
  color: rgba(235,241,255,.72);
  font-size: .97rem;
  line-height: 1.7;
}
.ns-workflow-intro__support .ns-button { margin-top: 0; }

@media (min-width: 1051px) {
  .ns-workflow-shell { gap: clamp(32px,4vw,52px) !important; }
  .ns-process-journey__steps { height: 360px; }
  .ns-process-stage__card { top: 8px; min-height: 142px; }
  .ns-process-stage:nth-child(even) .ns-process-stage__card { bottom: 8px; }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .ns-workflow-intro {
    grid-template-columns: minmax(0,1fr) minmax(240px,.75fr) !important;
    column-gap: 36px;
  }
  .ns-workflow-intro h2 { max-width: 540px; font-size: clamp(2.65rem,6vw,3.9rem); }
  .ns-process-journey { margin: 0; overflow: visible; }
  .ns-process-journey__steps {
    width: auto;
    min-width: 0;
    height: auto;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
  }
  .ns-process-journey__track { display: none; }
  .ns-process-stage { min-height: 0; }
  .ns-process-stage__number {
    top: 14px;
    right: 14px;
    left: auto;
    width: 29px;
    height: 29px;
    border-width: 4px;
  }
  .ns-process-stage__card,
  .ns-process-stage:nth-child(even) .ns-process-stage__card {
    position: relative;
    inset: auto;
    height: 100%;
    min-height: 154px;
    padding: 20px 54px 20px 20px;
  }
  .ns-process-stage__card::after,
  .ns-process-stage:nth-child(even) .ns-process-stage__card::after { display: none; }
  .ns-process-stage h3 { font-size: .96rem; }
  .ns-process-stage p { font-size: .72rem; }
}

.ns-contact-copy .ns-contact-map--compact {
  margin: 28px 0 0;
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(24,40,76,.1);
}
.ns-contact-map--compact .ns-contact-map__header {
  padding: 15px 17px;
  align-items: center;
  flex-direction: row;
  gap: 14px;
  background: #fff;
}
.ns-contact-map--compact .ns-kicker { margin-bottom: 3px; font-size: .55rem; }
.ns-contact-map--compact .ns-contact-map__header h3 {
  margin: 0;
  color: var(--ns-ink);
  font-size: 1.08rem;
  line-height: 1.2;
}
.ns-contact-map--compact .ns-text-link { flex: 0 0 auto; font-size: .7rem; }
.ns-contact-map.ns-contact-map--compact iframe { height: 190px; }

@media (max-width: 760px) {
  .ns-workflow-intro {
    display: flex !important;
    align-items: flex-start;
  }
  .ns-workflow-intro h2 { max-width: 100%; margin-bottom: 24px; }
  .ns-workflow-intro__support { max-width: 100%; padding: 0; }
  .ns-workflow-intro__support p { margin-bottom: 22px; }
  .ns-process-journey__steps { height: auto; }
  .ns-contact-map.ns-contact-map--compact iframe { height: 170px; }
}

@media (max-width: 430px) {
  .ns-contact-map--compact .ns-contact-map__header { padding: 14px; }
  .ns-contact-map--compact .ns-contact-map__header h3 { font-size: 1rem; }
  .ns-contact-map--compact .ns-text-link { font-size: .65rem; }
}
