/* ==========================================================================
   Buttons and small controls. Loaded site-wide + editor canvas.
   DD Group: brand-blue pill, 48px tall, 14px semibold.
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.75rem 2rem;
  border:1.5px solid var(--brand);border-radius:var(--radius-pill);
  background:var(--brand);color:var(--white);
  font-family:var(--font-display);font-size:var(--step-small);font-weight:600;
  line-height: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:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:var(--white)}
.btn:active{transform:translateY(1px)}
.btn svg{width:1em;height:1em;flex:none}

.btn--sm{min-height:40px;padding:.6rem 1.5rem}

/* Solid brand — the default; kept as a class so templates read clearly. */
.btn--solid{background:var(--brand);color:var(--white);border-color:var(--brand)}
.btn--solid:hover{background:var(--brand-deep);border-color:var(--brand-deep)}

/* White fill, brand border, navy text — "Read More News" */
.btn--outline{background:var(--white);color:var(--navy);border-color:var(--brand)}
.btn--outline:hover{background:var(--brand);border-color:var(--brand);color:var(--white)}

/* Solid white pill with navy text — footer "Contact Us", buttons on dark bands */
.btn--white{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn--white:hover{background:var(--accent);border-color:var(--accent);color:var(--navy)}
.surface-gradient .btn--solid,.surface-navy .btn--solid,.surface-dark .btn--solid,.surface-brand .btn--solid{background:var(--white);color:var(--navy);border-color:var(--white)}
.surface-gradient .btn--solid:hover,.surface-navy .btn--solid:hover,.surface-dark .btn--solid:hover,.surface-brand .btn--solid:hover{background:var(--accent);border-color:var(--accent);color:var(--navy)}

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

/* Small outlined label — "Featured News Article" */
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:.4rem 1.25rem;
  border:1.5px solid var(--brand);border-radius:var(--radius-pill);
  background:transparent;color:var(--navy);
  font:inherit;font-size:var(--step-micro);font-weight:500;text-decoration:none;
  transition:background var(--speed) var(--ease),color var(--speed) var(--ease);
}
button.chip{cursor:pointer}
button.chip:hover{background:var(--brand);color:var(--white)}

/* Bare icon button — pagination chevrons, nav burger */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;border-radius:50%;padding:0;
  background:none;color:var(--brand);cursor:pointer;
  transition:background var(--speed) var(--ease);
}
.icon-btn:hover{background:rgba(var(--brand-rgb), .1)}
.icon-btn svg{width:24px;height:24px}

/* Text link with a chevron, e.g. "Learn more >" */
.link-arrow{
  display:inline-block;font-size:var(--step-small);font-weight:600;color:var(--brand);text-decoration:none;
}
.link-arrow::after{content:" >"}
.link-arrow:hover{text-decoration:underline;text-underline-offset:3px}

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