/* ======================================================
   K3 LEGAL ADD-ON (requires k3-core.css)
   - No token redefinitions
   - Adds topbar offset for legal page
   - Styles legal-only UI (pills, notice, optional menu, fab top)
   ====================================================== */

/* ======================================================
   === LAYOUT / WIDTH
   ====================================================== */
.legal-wrap{
  max-width: 980px;
}

/* Core uses main.hero for topbar offset.
   Legal page doesn't have main.hero, so add it here. */
.legal-main{
  padding-top: var(--topbar-h);
}

/* Prevent anchor jumps landing under fixed header */
.legal-main section{
  scroll-margin-top: calc(var(--topbar-h) + 14px);
}

/* ======================================================
   === BRAND LOGO LINK (LEGAL HEADER)
   ====================================================== */
.brand a.logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;

  background: rgba(255,255,255,0.90);
  border: 1px solid var(--border);
  text-decoration:none;

  flex: 0 0 auto;
  box-shadow: var(--shadow2);
}

@media (prefers-color-scheme: dark){
  .brand a.logo{
    background: rgba(255,255,255,0.08);
    border-color: var(--border);
  }
}

/* ======================================================
   === PILLS (OPTIONAL)
   ====================================================== */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:8px 10px;
  border-radius:999px;

  background: var(--wash-soft2);           /* was accent-soft2 */
  border: 1px solid var(--accent-border-20);
  color: var(--text);
  text-decoration:none;

  cursor:pointer;
  font-weight:900;
  font-size:13px;

  transition: transform 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
}

.pill:hover{
  border-color: var(--accent-border-35);
  filter: saturate(1.05);
  transform: translateY(-1px);
  text-decoration:none;
}

.pill:active{
  transform: translateY(0);
  filter: saturate(1);
}

/* ======================================================
   === LEGAL NAV ROW
   ====================================================== */
.legal-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* ======================================================
   === NOTICE BOX
   ====================================================== */
.notice{
  margin-top:16px;
  padding:14px 16px;
  border-radius:14px;

  background: var(--wash-soft);            /* more obvious than wash-soft2 */
  border: 1px solid var(--accent-border-25);

  /* Give it just enough lift so it reads as a "callout" */
  box-shadow:
    0 10px 26px rgba(16,24,40,0.12),
    0 2px 8px rgba(16,24,40,0.08);

  color: var(--text);
  font-size: 13.8px;
  line-height: 1.5;

  text-align:center; /* legal pages read better w/ centered callout */
}

.notice a{
  text-decoration: underline;
  font-weight: 900;
}
.notice a:hover{
  text-decoration: underline;
}

/* Dark: notice needs a slightly clearer edge */
@media (prefers-color-scheme: dark){
  .notice{
    border-color: rgba(255,255,255,0.18);
    box-shadow:
      0 12px 30px rgba(0,0,0,0.40),
      0 2px 8px rgba(0,0,0,0.28);
  }
}

/* ======================================================
   === OPTIONAL: SUBTLE BRANDED EDGE ON LEGAL CARDS
   ====================================================== */
.legal-card::before{
  content:"";
  display:block;
  height:3px;
  background: var(--accentGrad);
}

/* ======================================================
   === MOBILE MENU (DISABLED)
   You said: no mobile menu. Keep CALL / QUOTE only.
   ====================================================== */
.menu-btn,
.menu-panel{
  display:none !important;
}

/* In case the template still includes .toplinks, keep it visible */
.toplinks{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ======================================================
   === FLOATING TOP BUTTON
   ====================================================== */
.fab-top{
  position:fixed;
  right:16px;
  bottom:16px;

  width:56px;
  height:66px;

  border-radius:16px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);

  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;

  z-index:998;
  text-decoration:none;

  transition: transform 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
}

.fab-top img{
  width:34px;
  height:34px;
  object-fit:contain;
}

.fab-top .fab-label{
  font-size:10px;
  font-weight:900;
  letter-spacing:0.08em;
  line-height:1;
  text-transform:uppercase;
  color: var(--muted2);
}

.fab-top:hover{
  border-color: var(--accent-border-35);
  text-decoration:none;
  transform: translateY(-1px);
  filter: saturate(1.05);
}

.fab-top:active{
  transform: translateY(0);
  filter: saturate(1);
}

@media (prefers-color-scheme: dark){
  .fab-top{
    background: rgba(20, 28, 44, 0.92);
    border-color: var(--border);
  }
}