/* TESORIN section navigation icon system.
   Used by the sticky/vertical navigation on Features, FAQs, and Safety.
   Icons are small monochrome Cupertino-style line symbols and remain decorative. */

.section-nav-item{
  min-width:0;
}

.section-nav-icon{
  display:grid;
  place-items:center;
  width:19px;
  height:19px;
  min-width:19px;
  color:var(--ink-3);
  opacity:.9;
  transition:color .2s ease,opacity .2s ease,transform .2s ease;
}

.section-nav-icon svg{
  display:block;
  width:19px;
  height:19px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.section-nav-label{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
}

/* FAQ and Safety use the same icon + label geometry. */
.faq-nav a.section-nav-item,
.safety-nav a.section-nav-item{
  display:grid;
  grid-template-columns:19px minmax(0,1fr);
  align-items:center;
  gap:11px;
}

.faq-nav a.section-nav-item:hover .section-nav-icon,
.faq-nav a.section-nav-item:focus-visible .section-nav-icon,
.faq-nav a.section-nav-item.on .section-nav-icon,
.faq-nav a.section-nav-item[aria-current="true"] .section-nav-icon,
.safety-nav a.section-nav-item:hover .section-nav-icon,
.safety-nav a.section-nav-item:focus-visible .section-nav-icon,
.safety-nav a.section-nav-item.on .section-nav-icon,
.safety-nav a.section-nav-item[aria-current="true"] .section-nav-icon{
  color:var(--gold);
  opacity:1;
  transform:scale(1.04);
}

/* Features has a denser menu, so keep the same symbol language at a slightly
   smaller text/icon gap without changing the existing sticky layout. */
.feature-detail-layout .feature-nav a.section-nav-item,
.feature-nav a.section-nav-item{
  display:grid;
  grid-template-columns:19px minmax(0,1fr);
  align-items:center;
  gap:9px;
}

.feature-detail-layout .feature-nav a.section-nav-item:hover .section-nav-icon,
.feature-detail-layout .feature-nav a.section-nav-item:focus-visible .section-nav-icon,
.feature-detail-layout .feature-nav a.section-nav-item.on .section-nav-icon,
.feature-detail-layout .feature-nav a.section-nav-item[aria-current="true"] .section-nav-icon,
.feature-nav a.section-nav-item:hover .section-nav-icon,
.feature-nav a.section-nav-item:focus-visible .section-nav-icon,
.feature-nav a.section-nav-item.on .section-nav-icon,
.feature-nav a.section-nav-item[aria-current="true"] .section-nav-icon{
  color:var(--gold);
  opacity:1;
}

@media(max-width:980px){
  .section-nav-icon,
  .section-nav-icon svg{
    width:18px;
    height:18px;
    min-width:18px;
  }

  .faq-nav a.section-nav-item,
  .safety-nav a.section-nav-item,
  .feature-detail-layout .feature-nav a.section-nav-item,
  .feature-nav a.section-nav-item{
    grid-template-columns:18px minmax(0,1fr);
    gap:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  .section-nav-icon{transition:none}
}