/* SinergCare V14 — UI fixes
   1) Larger top-bar logo on mobile
   2) Accessibility (Sienna) button kept above the mobile bottom bar
   3) Centered hero hex animation on mobile
   5) Expandable technology cards in the "advantages" section
   Loaded last so it wins the cascade. */

/* ===== Issue 6: larger top-bar logo on mobile, centered in the header ===== */
@media (max-width: 760px){
  .nav-inner{ position: relative !important; }
  .brand{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: min(88vw, 330px) !important;
    padding: 6px 11px !important;
  }
  .brand-logo-img{ width: min(228px, 69vw) !important; max-width: 100% !important; }
  /* keep the hamburger on the start (left) side, clear of the centered logo */
  .mobile-toggle{ margin-right: auto !important; margin-left: 4px !important; }
}

/* ===== Issue 7: hamburger lines invisible (grid place-items:center collapsed span width to 0) ===== */
@media (max-width: 760px){
  .mobile-toggle{
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    margin-left: 8px !important;
    border: 1px solid rgba(7,62,120,.16) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(5,27,42,.18) !important;
  }
  .mobile-toggle span{
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 2px !important;
    background: #073e78 !important;
  }
}

/* ===== Issue 2: keep the accessibility button above the mobile bottom bar ===== */
@media (max-width: 760px){
  .asw-menu-btn{ bottom: calc(172px + env(safe-area-inset-bottom, 0px)) !important; left: 20px !important; right: auto !important; }
  :root{ --asw-bottom: calc(172px + env(safe-area-inset-bottom, 0px)); --asw-left: 20px; --asw-right: auto; }
}

/* ===== Align "back to top" with the accessibility button on mobile =====
   Same size (42px) and same distance from the left (30px) as the Sienna button. */
@media (max-width: 760px){
  .back-top{
    width: 42px !important;
    height: 42px !important;
    left: 20px !important;
    right: auto !important;
    font-size: 18px !important;
  }
}

/* ===== Issue 3: center the hero hex animation on mobile ===== */
@media (max-width: 760px){
  .hero-nivaan .hex-cloud{
    margin-inline: auto !important;
    transform: none !important;
  }
}

/* ===== Issue 5: expandable technology cards (details/summary accordion) ===== */
.sc-tech-accordion{ display:grid; gap:12px; margin-top:22px; }
.sc-tech-item{
  border:1px solid rgba(37,196,181,.28);
  border-radius:16px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
  transition:border-color .25s ease, background .25s ease;
}
.sc-tech-item[open]{
  border-color:rgba(37,196,181,.6);
  background:rgba(37,196,181,.06);
}
.sc-tech-item > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  font-weight:700;
  font-size:16px;
  color:inherit;
}
.sc-tech-item > summary::-webkit-details-marker{ display:none; }
.sc-tech-item > summary::after{
  content:"+";
  flex:0 0 auto;
  width:26px; height:26px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(37,196,181,.16);
  color:var(--teal,#25c4b5);
  font-size:20px; font-weight:700; line-height:1;
  transition:transform .25s ease;
}
.sc-tech-item[open] > summary::after{ content:"\2212"; transform:rotate(180deg); }
.sc-tech-body{ padding:0 18px 18px; }
.sc-tech-body p{ margin:0 0 8px; line-height:1.75; }
.sc-tech-body .sc-tech-effect{
  margin-top:10px; padding-top:10px;
  border-top:1px dashed rgba(37,196,181,.25);
  font-size:14.5px; opacity:.95;
}
.sc-tech-body .sc-tech-effect strong{ color:var(--teal,#25c4b5); }

/* Tech section sits on a dark panel on most pages → keep text readable.
   On light backgrounds the inherited color already applies. */
.sc-wide-panel .sc-tech-item,
.sc-v11-tech .sc-tech-item{ color:#eaf6f4; }

@media (max-width:760px){
  .sc-tech-item > summary{ font-size:15px; padding:14px 15px; }
  .sc-tech-body{ padding:0 15px 15px; }
}
