/**
 * Components: buttons, chips, cards, alerts, breadcrumb, tabs, local
 * actions, badges, error panel, profile header and quick actions.
 */

/* ── Buttons ─────────────────────────────────────────────────── */
.kc-btn,
.button,
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem;
  font: 650 var(--kc-fs-sm)/1.2 var(--kc-font-sans);
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  color: var(--kc-green-900);
  background: var(--kc-surface);
  border: 1px solid var(--kc-line-strong);
  border-radius: var(--kc-radius);
  box-shadow: var(--kc-shadow-xs);
  cursor: pointer;
  transition: background 0.15s var(--kc-ease), border-color 0.15s var(--kc-ease), color 0.15s var(--kc-ease), transform 0.15s var(--kc-ease), box-shadow 0.15s var(--kc-ease);
  -webkit-appearance: none;
  appearance: none;
}
.kc-btn:hover, .button:hover { border-color: var(--kc-green-400); background: var(--kc-green-50); color: var(--kc-green-900); text-decoration: none; }
.kc-btn:active, .button:active { transform: translateY(1px); }
.kc-btn:focus-visible, .button:focus-visible { outline: 3px solid var(--kc-focus); outline-offset: 3px; }
.kc-btn[disabled], .button[disabled], .is-disabled.kc-btn { opacity: 0.55; cursor: not-allowed; transform: none; }

.kc-btn--primary,
.button--primary {
  color: #fff;
  background: var(--kc-green-700);
  border-color: var(--kc-green-700);
  box-shadow: 0 8px 18px -10px rgba(12, 97, 66, 0.7);
}
.kc-btn--primary:hover, .button--primary:hover { color: #fff; background: var(--kc-green-800); border-color: var(--kc-green-800); }
.kc-btn--gold { color: var(--kc-green-950); background: var(--kc-gold-400); border-color: var(--kc-gold-400); }
.kc-btn--gold:hover { color: var(--kc-green-950); background: var(--kc-gold-300); border-color: var(--kc-gold-300); }
.kc-btn--outline { color: var(--kc-green-800); background: transparent; border-color: var(--kc-green-700); box-shadow: none; }
.kc-btn--outline:hover { background: var(--kc-green-50); }
.kc-btn--ghost-light { color: #fff; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.4); box-shadow: none; }
.kc-btn--ghost-light:hover { color: var(--kc-green-950); background: #fff; border-color: #fff; }
.kc-btn--danger, .button--danger { color: #fff; background: var(--kc-error); border-color: var(--kc-error); }
.kc-btn--danger:hover, .button--danger:hover { color: #fff; background: #912018; border-color: #912018; }
.kc-btn--sm, .button--small { min-height: 2.25rem; padding: 0.4rem 0.8rem; font-size: var(--kc-fs-xs); border-radius: var(--kc-radius-sm); }
.kc-btn--lg { min-height: 3.4rem; padding: 0.9rem 1.6rem; font-size: var(--kc-fs-base); border-radius: var(--kc-radius-lg); }
.kc-btn--pill { border-radius: var(--kc-radius-pill); padding-inline: 1.3rem; }
.kc-btn--block { display: flex; width: 100%; }
.kc-btn .kc-icon { width: 1.1em; height: 1.1em; }

/* ── Chips, eyebrows, badges ─────────────────────────────────── */
.kc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--kc-radius-pill);
  font-size: var(--kc-fs-2xs);
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--kc-green-50);
  color: var(--kc-green-800);
  flex: none;
}
.kc-chip--gold { background: rgba(232, 185, 73, 0.16); color: var(--kc-gold-300); }
.kc-chip .kc-icon { width: 0.85rem; height: 0.85rem; }
.kc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 var(--kc-s2);
  font-size: var(--kc-fs-xs);
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kc-gold-700);
}
.kc-eyebrow .kc-icon { width: 0.95rem; height: 0.95rem; }

.kc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--kc-radius-pill);
  font-size: var(--kc-fs-xs);
  font-weight: 650;
  line-height: 1.5;
  background: var(--kc-canvas);
  color: var(--kc-body);
  border: 1px solid var(--kc-line);
}
.kc-badge--success { background: var(--kc-success-bg); color: var(--kc-success); border-color: #bfe6cf; }
.kc-badge--warning { background: var(--kc-warning-bg); color: var(--kc-warning); border-color: #f5dc9f; }
.kc-badge--error { background: var(--kc-error-bg); color: var(--kc-error); border-color: #fbcfca; }

/* ── Cards ───────────────────────────────────────────────────── */
.kc-card {
  background: var(--kc-surface);
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius-lg);
  box-shadow: var(--kc-shadow-sm);
  padding: var(--kc-s6);
}
.kc-card > :last-child { margin-bottom: 0; }
.kc-card__title { font-size: var(--kc-fs-lg); margin-bottom: var(--kc-s2); }

/* ── Alerts (status messages) ────────────────────────────────── */
.kc-messages { display: grid; gap: var(--kc-s3); margin-bottom: var(--kc-s6); }
.kc-messages:empty { display: none; }
.kc-alert {
  position: relative;
  display: flex;
  gap: var(--kc-s3);
  align-items: flex-start;
  padding: var(--kc-s4) 3rem var(--kc-s4) var(--kc-s4);
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--kc-radius);
  font-size: var(--kc-fs-sm);
  line-height: 1.55;
  box-shadow: var(--kc-shadow-xs);
}
.kc-alert--status { background: var(--kc-success-bg); border-color: #bfe6cf; border-left-color: var(--kc-success); color: #0b4f2f; }
.kc-alert--warning { background: var(--kc-warning-bg); border-color: #f5dc9f; border-left-color: var(--kc-gold-500); color: #6b3a05; }
.kc-alert--error { background: var(--kc-error-bg); border-color: #fbcfca; border-left-color: var(--kc-error); color: #8a1c13; }
.kc-alert--info { background: var(--kc-info-bg); border-color: #c9d9fb; border-left-color: var(--kc-info); color: #163c8c; }
.kc-alert__icon { width: 1.25rem; height: 1.25rem; margin-top: 0.05rem; }
.kc-alert__body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kc-alert__body a { color: inherit; font-weight: 650; }
.kc-alert__list { margin: 0; padding-left: 1.1rem; }
.kc-alert__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--kc-radius-sm);
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}
.kc-alert__close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }

/* ── Breadcrumb ──────────────────────────────────────────────── */
.kc-breadcrumb { margin-bottom: var(--kc-s3); font-size: var(--kc-fs-xs); }
.kc-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.kc-breadcrumb li { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; color: var(--kc-muted); }
.kc-breadcrumb li + li::before { content: "/"; color: var(--kc-line-strong); }
.kc-breadcrumb a { color: var(--kc-green-700); font-weight: 600; text-decoration: none; }
.kc-breadcrumb a:hover { text-decoration: underline; }

/* ── Tabs and actions ────────────────────────────────────────── */
.kc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kc-tabs__item { margin: 0; }
.kc-tabs__link, .kc-tabs__item > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.3rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--kc-line-strong);
  border-radius: var(--kc-radius-pill);
  background: var(--kc-surface);
  font-size: var(--kc-fs-sm);
  font-weight: 600;
  color: var(--kc-green-900);
  text-decoration: none;
}
.kc-tabs__link:hover, .kc-tabs__item > a:hover { border-color: var(--kc-green-400); background: var(--kc-green-50); }
.kc-tabs__item.is-active > a, .kc-tabs__link.is-active { background: var(--kc-green-700); border-color: var(--kc-green-700); color: #fff; }
.kc-tabs--secondary .kc-tabs__item > a { min-height: 2rem; font-size: var(--kc-fs-xs); border-radius: var(--kc-radius-sm); }
.kc-actions { margin-bottom: var(--kc-s5); }
.kc-actions ul, ul.action-links { display: flex; flex-wrap: wrap; gap: var(--kc-s2); margin: 0 0 var(--kc-s5); padding: 0; list-style: none; }
.kc-actions__item { margin: 0; }

/* ── Error panel (403 / 404) ─────────────────────────────────── */
.kc-error {
  max-width: 40rem;
  margin: var(--kc-s4) auto;
  padding: var(--kc-s10) var(--kc-s8);
  text-align: center;
  background: var(--kc-surface);
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius-xl);
  box-shadow: var(--kc-shadow);
}
.kc-error__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--kc-s4);
  padding: 0.4rem 0.9rem;
  border-radius: var(--kc-radius-pill);
  background: var(--kc-gold-100);
  color: var(--kc-gold-700);
  font-family: var(--kc-font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
}
.kc-error__title { font-size: var(--kc-fs-2xl); }
.kc-error__text { color: var(--kc-muted); margin-bottom: var(--kc-s6); }
.kc-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kc-s3); }

/* ── Profile (user page) ─────────────────────────────────────── */
.kc-profile__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--kc-s4) var(--kc-s5);
  align-items: center;
  margin-bottom: var(--kc-s6);
  padding: var(--kc-s6);
  background:
    radial-gradient(30rem 12rem at 100% 0%, rgba(232, 185, 73, 0.18), transparent 70%),
    var(--kc-green-900);
  border-radius: var(--kc-radius-xl);
  color: var(--kc-green-100);
  box-shadow: var(--kc-shadow);
}
.kc-profile__avatar {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1.1rem;
  background: var(--kc-gold-400);
  color: var(--kc-green-950);
  font-family: var(--kc-font-display);
  font-size: var(--kc-fs-xl);
  font-weight: 800;
}
.kc-profile__who .kc-eyebrow { color: var(--kc-gold-300); margin-bottom: 0.15rem; }
.kc-profile__name { margin: 0; color: #fff; font-size: var(--kc-fs-xl); overflow-wrap: anywhere; }
.kc-profile__meta { margin: 0.2rem 0 0; font-size: var(--kc-fs-sm); color: var(--kc-green-200); }
.kc-profile__actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kc-s2); }
@media (min-width: 48rem) {
  .kc-profile__head { grid-template-columns: auto 1fr auto; }
  .kc-profile__actions { grid-column: auto; grid-template-columns: repeat(4, auto); }
}
.kc-quick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--kc-radius);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: var(--kc-fs-sm);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.kc-quick:hover { background: #fff; color: var(--kc-green-900); border-color: #fff; text-decoration: none; }
.kc-quick .kc-icon { color: var(--kc-gold-300); }
.kc-quick:hover .kc-icon { color: var(--kc-green-700); }
.kc-profile__content { display: grid; gap: var(--kc-s6); }
.kc-profile__content > * { min-width: 0; }

/* ── Generic menus (sidebar / footer blocks) ─────────────────── */
.kc-menublock { margin-bottom: var(--kc-s6); }
.kc-menu { margin: 0; padding: 0; list-style: none; }
.kc-menu__item { margin: 0; }
.kc-menu__link { display: block; padding: 0.45rem 0; text-decoration: none; font-weight: 550; }
.kc-menu--sub { padding-left: var(--kc-s4); }
.kc-block__title { font-size: var(--kc-fs-md); }

/* ── Misc Drupal output ──────────────────────────────────────── */
.kc-body__main > .region--content > * + * { margin-top: 0; }
.node__content, .field { margin-bottom: var(--kc-s4); }
.field__label { font-weight: 650; color: var(--kc-ink); }
.item-list ul { padding-left: 1.2rem; }
.more-link { margin-top: var(--kc-s3); }
.feed-icon { display: none; }
.views-element-container + .views-element-container { margin-top: var(--kc-s8); }
.view-header, .view-footer { margin-bottom: var(--kc-s4); }
.view-empty { padding: var(--kc-s8); text-align: center; color: var(--kc-muted); background: var(--kc-surface); border: 1px dashed var(--kc-line-strong); border-radius: var(--kc-radius-lg); }
.view-filters, .views-exposed-form { margin-bottom: var(--kc-s5); }
.views-exposed-form .form--inline, .form--inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--kc-s3) var(--kc-s4); }
.views-exposed-form .form-item, .form--inline .form-item { margin: 0; }
.ajax-progress, .ajax-progress-throbber { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.5rem; font-size: var(--kc-fs-xs); color: var(--kc-muted); }
.ajax-progress-throbber .throbber, .ajax-progress .throbber { width: 1rem; height: 1rem; border: 2px solid var(--kc-green-200); border-top-color: var(--kc-green-700); border-radius: 50%; animation: kc-spin 0.8s linear infinite; background: none; }
.ajax-progress-fullscreen { position: fixed; inset: 50% auto auto 50%; z-index: 1000; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border: 4px solid var(--kc-green-200); border-top-color: var(--kc-green-700); border-radius: 50%; animation: kc-spin 0.8s linear infinite; background: var(--kc-surface); }
@keyframes kc-spin { to { transform: rotate(360deg); } }

/* Contextual links and toolbar sit on top of the masthead. */
body.toolbar-fixed .kc-header { top: var(--drupal-displace-offset-top, 0); }

/* ── Help card (beside payment forms) ────────────────────────── */
.kc-help-card {
  position: sticky;
  top: calc(var(--kc-header-h) + 4rem);
  padding: var(--kc-s6);
  border: 1px solid var(--kc-green-100);
  border-radius: var(--kc-radius-xl);
  background: linear-gradient(180deg, var(--kc-green-50), var(--kc-surface));
}
.kc-help-card__title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: var(--kc-s4); font-size: var(--kc-fs-md); color: var(--kc-green-900); }
.kc-help-card__title .kc-icon { color: var(--kc-green-700); }
.kc-help-card__list { margin: 0 0 var(--kc-s5); padding: 0; list-style: none; display: grid; gap: var(--kc-s3); font-size: var(--kc-fs-sm); }
.kc-help-card__list li { position: relative; margin: 0; padding-left: 1.1rem; }
.kc-help-card__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--kc-gold-500); }
.kc-help-card__links { margin: 0; padding: var(--kc-s4) 0 0; list-style: none; border-top: 1px solid var(--kc-green-100); display: grid; gap: var(--kc-s2); }
.kc-help-card__links li { margin: 0; }
.kc-help-card__links a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--kc-fs-sm); font-weight: 700; text-decoration: none; }
.kc-help-card__links a:hover { text-decoration: underline; }

/* ── Prose (node bodies) ─────────────────────────────────────── */
.kc-prose { max-width: 52rem; font-size: var(--kc-fs-md); line-height: 1.7; }
.kc-prose.kc-card { padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); }
.kc-prose h2 { margin-top: var(--kc-s8); font-size: var(--kc-fs-xl); }
.kc-prose h3 { margin-top: var(--kc-s6); font-size: var(--kc-fs-lg); }
.kc-prose img { border-radius: var(--kc-radius); }
.kc-prose blockquote { margin: var(--kc-s6) 0; padding: var(--kc-s4) var(--kc-s5); border-left: 4px solid var(--kc-gold-400); background: var(--kc-gold-100); border-radius: 0 var(--kc-radius) var(--kc-radius) 0; }
.kc-node__meta { font-size: var(--kc-fs-sm); color: var(--kc-muted); }
.kc-node__title a { text-decoration: none; }

/* --------------------------------------------------------------------------
   Pager (templates/navigation/pager.html.twig, mini pager too)
   -------------------------------------------------------------------------- */
.kc-pager {
  margin: 1.5rem 0;
}
.kc-pager__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kc-pager__item {
  margin: 0;
}
.kc-pager__item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius-pill);
  background: var(--kc-surface);
  color: var(--kc-green-700);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kc-pager__item a:hover {
  border-color: var(--kc-green-300);
  background: var(--kc-green-50);
}
.kc-pager__item a:focus-visible {
  outline: none;
  box-shadow: var(--kc-focus-ring);
}
.kc-pager__item.is-active a {
  border-color: var(--kc-green-700);
  background: var(--kc-green-700);
  color: #fff;
}
.kc-pager__item--edge a {
  font-size: 1.125rem;
}
.kc-pager__item--ellipsis {
  padding: 0 0.25rem;
  color: var(--kc-muted);
}