/* ==========================================================================
   SimplyWill™ — floating sidebar navigation
   Shared across every page. Mirrors the rail in the SimplyWill desktop app.

   NOTE: selectors are prefixed with `body` so they outrank the per-page
   inline <style> blocks regardless of whether this file is linked before
   or after them.
   ========================================================================== */

/* ── FLOATING RAIL ─────────────────────────────────────────────────────── */
.sidenav{
  position:fixed;left:14px;top:50%;transform:translateY(-50%);
  width:62px;
  background:rgba(18,4,44,.82);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  box-shadow:0 18px 50px rgba(12,1,32,.35),0 2px 10px rgba(12,1,32,.2);
  z-index:200;
  display:flex;flex-direction:column;align-items:center;
  padding:.8rem 0 .7rem;
}
.sn-top{
  width:100%;display:flex;justify-content:center;
  padding-bottom:.75rem;margin-bottom:.35rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sn-logo{
  width:36px;height:36px;
  background:#4A2280;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.82rem;font-weight:600;
  color:#fff;text-decoration:none;letter-spacing:.02em;flex-shrink:0;
}

/* the inner <nav> must not inherit the old fixed top-bar rules that some
   pages still declare on the bare `nav` element */
.sidenav nav.sn-links{
  position:static;top:auto;left:auto;width:100%;
  flex:1;display:flex;flex-direction:column;align-items:center;
  gap:.12rem;padding:.4rem 0;z-index:auto;
  background:none;box-shadow:none;justify-content:flex-start;
}
.sn-link{
  position:relative;width:44px;height:44px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.3);text-decoration:none;
  transition:background .18s,color .18s;flex-shrink:0;
}
.sn-link:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);}
.sn-link:focus-visible{outline:2px solid #C8A24A;outline-offset:2px;}
.sn-link.active{
  background:rgba(255,255,255,.13);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.sn-link svg{width:18px;height:18px;flex-shrink:0;}
.sn-tip{
  position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:#1E0B3B;color:rgba(255,255,255,.9);
  font-size:.68rem;font-weight:500;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  padding:.28rem .72rem;border-radius:4px;
  white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .12s;
  border:1px solid rgba(255,255,255,.1);z-index:210;
}
.sn-link:hover .sn-tip,
.sn-link:focus-visible .sn-tip{opacity:1;}
.sn-cta{color:rgba(180,150,255,.75);}
.sn-cta:hover{background:rgba(74,34,128,.4);color:rgba(200,180,255,1);}
.sn-btm{
  width:100%;display:flex;flex-direction:column;align-items:center;
  gap:.12rem;padding-top:.5rem;margin-top:.35rem;
  border-top:1px solid rgba(255,255,255,.08);
}

/* ── CONTENT CLEARANCE ─────────────────────────────────────────────────── */
/* The rail floats over the page, so section backgrounds stay full-bleed and
   only the inner content is inset past it. */
@media(min-width:769px){

  /* full-bleed bands with centred content — symmetric, so it stays centred */
  body .page-hero,
  body .cta-band,
  body .tagline-band,
  body .brand-bar,
  body .brand-bar-foot,
  body .final-inner{
    padding-left:calc(5vw + 62px);
    padding-right:calc(5vw + 62px);
  }

  /* left-aligned content columns — inset on the rail side only */
  body .content,
  body .wrap,
  body .wrap-sm,
  body .foot-wrap,
  body .story,
  body .story-pull,
  body .pillars,
  body .co-facts,
  body .guides-wrap,
  body .screenshot-strip,
  body .steps-wrap,
  body .policy-layout,
  body .contact,
  body .security-inner,
  body .not-inner,
  body main.main{
    padding-left:calc(5vw + 62px);
  }

  /* header top padding is set in page-header.css (the old fixed top bar,
     which this used to clear, no longer exists) */
}

/* ── MOBILE BOTTOM BAR ─────────────────────────────────────────────────── */
.mobnav{display:none;}

@media(max-width:768px){
  .sidenav{display:none;}
  body{padding-bottom:56px;}

  /* override the bare `nav` fixed-top-bar rules some pages declare */
  body nav.mobnav{
    display:flex;
    position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;
    height:56px;padding:0;
    background:#0C0120;
    border-top:1px solid rgba(255,255,255,.09);
    box-shadow:0 -2px 18px rgba(12,1,32,.25);
    z-index:200;
    justify-content:space-around;align-items:center;
  }
  .mn-link{
    display:flex;flex-direction:column;align-items:center;gap:.18rem;
    color:rgba(255,255,255,.3);text-decoration:none;
    font-size:.44rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    flex:1;padding:.4rem 0;transition:color .18s;
  }
  .mn-link svg{width:18px;height:18px;}
  .mn-link.active,.mn-link:hover{color:rgba(255,255,255,.9);}
  .mn-cta{color:rgba(180,150,255,.8);}

  /* keep the WhatsApp button clear of the bottom bar */
  body .wa{bottom:calc(56px + 1rem);right:1rem;left:auto;}
}