/*
 * DeutschVektor button system — loaded last on every public page.
 * `:root` raises specificity just enough to replace the older rules in
 * landing.css and human-centered.css without !important.
 *
 *  Primary   .btn.btn-signal  yellow, the one main action of a block
 *  Dark      in program cards  ink, repeated actions inside cards
 *  Outline   .btn.btn-ghost    secondary action next to a primary one
 *  Link      .human-secondary  tertiary action, blue text with an arrow
 *  Pills     filters (.chip, .program-goals button)
 */
:root{
  --btn-radius:12px;
  --btn-h:52px;
  --btn-h-sm:44px;
  --btn-yellow:#FFD43B;
  --btn-yellow-hover:#FFC800;
  --btn-yellow-edge:#D9A900;
  --btn-ink:#14171A;
  --btn-ink-hover:#2A3036;
  --btn-line:#CBD3D8;
  --btn-link:#1F5BB5;
  --btn-focus:#1959C8;
}

/* ---------- Base ---------- */
:root .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--btn-h);padding:14px 24px;
  font-family:var(--body);font-size:16px;font-weight:600;line-height:1.25;
  letter-spacing:0;text-transform:none;text-align:center;
  border:1.5px solid transparent;border-radius:var(--btn-radius);
  box-shadow:none;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
}
:root .btn:focus-visible{outline:3px solid var(--btn-focus);outline-offset:3px}
:root .btn:active{transform:translateY(1px)}
:root .btn .arr{transition:transform .18s ease}
:root .btn:hover .arr{transform:translateX(3px)}
:root .btn-block{width:100%}

/* ---------- Primary ---------- */
:root .btn-signal{
  background:var(--btn-yellow);color:var(--btn-ink);border-color:var(--btn-yellow);
  box-shadow:inset 0 -3px 0 var(--btn-yellow-edge);
}
:root .btn-signal:hover{
  background:var(--btn-yellow-hover);border-color:var(--btn-yellow-hover);
  box-shadow:inset 0 -3px 0 var(--btn-yellow-edge),0 6px 16px rgba(217,169,0,.28);
  transform:translateY(-1px);
}
:root .btn-signal:active{box-shadow:inset 0 -1px 0 var(--btn-yellow-edge);transform:translateY(1px)}

/* ---------- Outline ---------- */
:root .btn-ghost{background:#fff;color:var(--btn-ink);border-color:var(--btn-line)}
:root .btn-ghost:hover{border-color:var(--btn-ink);background:#fff}

/* Outline on dark backgrounds */
:root :is(.path.main,section.hans,.final,.proof) .btn-ghost,
:root .btn-ghost.instagram{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
:root :is(.path.main,section.hans,.final,.proof) .btn-ghost:hover,
:root .btn-ghost.instagram:hover{background:rgba(255,255,255,.1);border-color:#fff}
/* Hans block: one strong action on a light background */
:root .human-design section.hans .btn-ghost{background:var(--btn-ink);border-color:var(--btn-ink);color:#fff}
:root .human-design section.hans .btn-ghost:hover{background:var(--btn-ink-hover);border-color:var(--btn-ink-hover)}

/* ---------- Dark: repeated actions inside program cards ---------- */
:root .human-program .btn-signal,
:root .prog .btn-signal{background:var(--btn-ink);border-color:var(--btn-ink);color:#fff;box-shadow:none}
:root .human-program .btn-signal:hover,
:root .prog .btn-signal:hover{background:var(--btn-ink-hover);border-color:var(--btn-ink-hover);box-shadow:none}
:root .human-program .btn{width:100%;min-height:var(--btn-h-sm);padding:11px 16px;font-size:15px}

/* ---------- Text link ---------- */
:root .human-secondary{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:15px;font-weight:600;color:var(--btn-link);
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:1.5px;
  transition:text-decoration-color .15s ease,color .15s ease;
}
:root .human-secondary:hover{text-decoration-color:currentColor;color:var(--btn-link)}
:root .human-secondary:focus-visible{outline:3px solid var(--btn-focus);outline-offset:3px;border-radius:4px}
:root .proof .story-cta-card .human-secondary{color:#fff}
:root .story-card .human-secondary,:root .story-spotlight .human-secondary{color:#295fa9}

/* ---------- Header ---------- */
:root .nav-cta{
  display:inline-flex;align-items:center;min-height:42px;padding:9px 18px;
  font-family:var(--body);font-size:14px;font-weight:600;
  background:var(--btn-yellow);color:var(--btn-ink);
  border:1.5px solid var(--btn-yellow);border-radius:10px;
  box-shadow:inset 0 -2px 0 var(--btn-yellow-edge);
  transition:background-color .15s ease;
}
:root .nav-cta:hover{background:var(--btn-yellow-hover);border-color:var(--btn-yellow-hover);color:var(--btn-ink)}
:root .nav-cta:focus-visible{outline:3px solid var(--btn-focus);outline-offset:3px}
:root .menu-toggle{
  font-family:var(--body);font-size:14px;font-weight:600;
  min-height:42px;padding:8px 16px;background:#fff;color:var(--btn-ink);
  border:1.5px solid var(--btn-line);border-radius:10px;
}
:root .menu-toggle[aria-expanded=true]{border-color:var(--btn-ink)}

/* ---------- Filter pills ---------- */
:root .chip,
:root .program-goals button{
  font-family:var(--body);font-size:14px;font-weight:500;line-height:1.3;
  min-height:44px;padding:10px 18px;
  background:#fff;color:var(--btn-ink);
  border:1.5px solid var(--btn-line);border-radius:999px;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
:root .chip:hover,
:root .program-goals button:hover{border-color:var(--btn-ink);background:#fff}
:root .chip.on,
:root .program-goals button[aria-pressed=true]{background:var(--btn-ink);border-color:var(--btn-ink);color:#fff}
:root .chip:focus-visible,
:root .program-goals button:focus-visible{outline:3px solid var(--btn-focus);outline-offset:2px}

/* ---------- Small buttons ---------- */
:root .dboard .book{
  display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;
  font-family:var(--body);font-size:13px;font-weight:600;
  background:var(--btn-yellow);color:var(--btn-ink);border-radius:10px;
  box-shadow:inset 0 -2px 0 var(--btn-yellow-edge);
}
:root .dboard .book:hover{background:var(--btn-yellow-hover);color:var(--btn-ink)}
:root .human-program-more{
  min-height:var(--btn-h-sm);padding:10px 20px;
  font-family:var(--body);font-size:14px;font-weight:600;
  background:#fff;color:var(--btn-ink);border:1.5px solid var(--btn-line);border-radius:var(--btn-radius);
}
:root .human-program-more:hover{border-color:var(--btn-ink)}
:root .sticky-cta .s-main{
  border-radius:var(--btn-radius);font-weight:600;
  background:var(--btn-yellow);color:var(--btn-ink);
  box-shadow:inset 0 -3px 0 var(--btn-yellow-edge),0 8px 24px rgba(20,23,26,.18);
}
:root .consultation-copy,:root .story-share button{border-radius:10px;border-width:1.5px;font-weight:600}

@media (max-width:720px){
  :root .btn{min-height:50px;padding:13px 20px}
  /* On phones the sticky bottom bar carries this action */
  :root .nav-cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  :root .btn,:root .btn .arr{transition:none}
  :root .btn:hover,:root .btn:active{transform:none}
}

/* ---------- Arrows ----------
 * Buttons carry no arrows. Text links get one consistent arrow from CSS,
 * so labels typed in the admin never need one. Back links keep their "←". */
:root :is(.human-secondary,.goal-card>a,.goals-corporate a,.tertiary a,.story-share a,.block-cta,.eco-club__cta,.soc>a,.resource-grid a):not(.link-back)::after{
  content:"→";display:inline-block;margin-left:6px;transition:transform .15s ease;
}
:root :is(.human-secondary,.goal-card>a,.goals-corporate a,.tertiary a,.story-share a,.block-cta,.eco-club__cta,.soc>a,.resource-grid a):not(.link-back):hover::after{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){:root .human-secondary::after{transition:none}}
:root .human-secondary:not(.link-back)::after{margin-left:0}