/* ==========================================================================
   Connect 2026 - Buttons, badges, form controls                        T-19
   --------------------------------------------------------------------------
   Small file, but it unblocks a lot: the newsletter band, pagination, the
   forthcoming-events card and every "View >" on a card all need it.

   Measured across artboards p1 / p10 / p13 / p22 - the design is very
   consistent: every standard pill is 34px tall, fully rounded, label 18px
   Medium. The only exception is the small 22px pill on Membership.

   DEPENDS ON: tokens.css
   ========================================================================== */

/* ============================================================== BUTTONS == */

.cn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cn-space-2);
  min-height: var(--cn-btn-h);
  padding-inline: var(--cn-btn-pad-x);
  border: 1px solid transparent;
  border-radius: var(--cn-radius-pill);
  font-size: var(--cn-btn-text);
  font-weight: var(--cn-fw-medium);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--cn-dur) var(--cn-ease),
              border-color var(--cn-dur) var(--cn-ease),
              color var(--cn-dur) var(--cn-ease);
}

/* ---------------------------------------------------------- primary ----- */
/* See the accessibility note in tokens.css: the fill/ink pair is tokenised
   so the AA fix is a one-line change there, not an edit to this file. */
.cn-btn--primary {
  background: var(--cn-btn-primary-bg);
  color: var(--cn-btn-primary-ink);
}
.cn-btn--primary:hover { background: var(--cn-cyan-alt); }

/* ------------------------------------------------------------- solid ---- */
/* Deep blue, full width. "View all events" in the forthcoming-events card. */
.cn-btn--solid {
  background: var(--cn-blue-cta);
  color: var(--cn-ink-invert);
}
.cn-btn--solid:hover { background: var(--cn-navy); }

/* ----------------------------------------------------------- outline ---- */
.cn-btn--outline {
  background: transparent;
  border-color: var(--cn-cyan);
  color: var(--cn-fam-cyan-ink);
}
.cn-btn--outline:hover {
  background: var(--cn-cyan);
  color: var(--cn-btn-primary-ink);
}

/* -------------------------------------------------------- modifiers ----- */
.cn-btn--sm {
  min-height: var(--cn-btn-h-sm);
  padding-inline: var(--cn-space-4);
  font-size: var(--cn-text-tiny);
}
.cn-btn--block { display: flex; width: 100%; }

.cn-btn:disabled,
.cn-btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* =============================================================== BADGES == */

.cn-badge {
  display: inline-block;
  padding: 2px var(--cn-space-3);
  border-radius: var(--cn-radius-pill);
  font-size: var(--cn-text-label);
  font-weight: var(--cn-fw-semibold);
  line-height: 1.6;
}

/* Connect Plus marker. Gold, using the AA-safe ink on a tinted ground. */
.cn-badge--plus {
  background: var(--cn-panel-blue);
  color: var(--cn-fam-gold-ink);
}

/* Corner-mounted variant, for cards and covers. Needs a positioned parent. */
.cn-badge--corner {
  position: absolute;
  top: var(--cn-space-3);
  left: var(--cn-space-3);
  z-index: var(--cn-z-base);
}

/* ======================================================== FORM CONTROLS == */

.cn-input {
  width: 100%;
  min-height: var(--cn-search-h);
  padding: var(--cn-space-2) var(--cn-space-4);
  background: var(--cn-surface);
  border: 1px solid var(--cn-border);
  border-radius: var(--cn-radius-sm);
  font-size: var(--cn-text-meta);
  color: var(--cn-ink-body);
}
.cn-input::placeholder { color: var(--cn-ink-faint); }
.cn-input:focus-visible { border-color: var(--cn-cyan); }

/* Nav search. Fixed width, measured 250 x 41px on every artboard. */
.cn-input--search {
  width: var(--cn-search-w);
  min-height: var(--cn-search-h);
}

.cn-field { display: block; }
.cn-field__label {
  display: block;
  margin-bottom: var(--cn-space-2);
  font-size: var(--cn-text-label);
  font-weight: var(--cn-fw-medium);
  color: var(--cn-ink);
}

/* =========================================================== RESPONSIVE == */
/*
   T-40: buttons narrow their padding on mobile. They no longer "keep their
   34px height at tablet" - that was wrong, and an iPad got 34px buttons
   because 768 sits outside this query. The 44px floor now comes from the
   `pointer: coarse` block in shell.css, which applies on any touch device at
   any width. What is left here is the width-driven part.
*/
@media (max-width: 1279px) {
  .cn-input--search { width: 100%; max-width: var(--cn-search-w); }
}

@media (max-width: 767px) {
  .cn-input--search { max-width: none; }
  .cn-btn    { min-height: 44px; }
  .cn-btn--sm { min-height: 44px; padding-inline: var(--cn-space-5); }
}