/* ==========================================================================
   Buttons and text links. Loaded site-wide + editor canvas.
   AKN: pill buttons. Solid = the logo yellow with ink text; outline = ink.
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:0 1.5rem;
  border:2px solid transparent;border-radius:var(--radius-pill);
  font:inherit;font-size:var(--step-body);font-weight:650;
  line-height:1.1;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--speed) var(--ease),
             color var(--speed) var(--ease),
             border-color var(--speed) var(--ease),
             transform var(--speed) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.1em;height:1.1em;flex:none}

.btn--solid{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn--solid:hover{background:var(--accent-2);border-color:var(--accent-2)}
/* On the yellow surface a yellow button vanishes: go ink. */
.surface-accent .btn--solid{background:var(--ink);color:var(--accent);border-color:var(--ink)}
.surface-accent .btn--solid:hover{background:var(--white);color:var(--ink);border-color:var(--white)}

.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--white)}
.surface-brand .btn--outline,.surface-dark .btn--outline,.btn--outline.btn--on-dark{color:var(--white);border-color:var(--white)}
.surface-brand .btn--outline:hover,.surface-dark .btn--outline:hover,.btn--outline.btn--on-dark:hover{background:var(--white);color:var(--ink)}

.btn--sm{min-height:40px;padding:0 1.1rem;font-size:var(--step-small)}

.btn-row{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin-top:2rem}

/* Round icon button */
.btn--icon{min-height:44px;width:44px;padding:0;flex:none;background:var(--ink);color:var(--white)}
.btn--icon:hover{background:var(--brand-deep)}

/* Text link with a chevron */
.link-arrow{display:inline-block;font-size:var(--step-small);font-weight:700;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}

/* Small pill — compact actions, the search submit. */
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:0 1rem;border:0;border-radius:var(--radius-pill);cursor:pointer;
  background:var(--ink);color:var(--white);
  font:inherit;font-size:var(--step-small);font-weight:700;text-decoration:none;
  transition:background var(--speed) var(--ease);
}
.chip:hover{background:var(--brand-deep)}

/* Trust ticks: an inline list of short facts with a yellow tick. */
.ticks{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;margin:0;padding:0;font-size:var(--step-small);color:var(--ink-muted)}
.ticks li{display:inline-flex;align-items:center;gap:.45rem}
.ticks svg{width:1.1em;height:1.1em;color:var(--accent-text);flex:none}

@media (prefers-reduced-motion: reduce){
  .btn:active{transform:none}
}