/* Kerb Wise — theme-rendered components
   Markup built by the theme itself rather than page content: the provider
   CTA box and sale chips (functions.php), the providers grid, the About
   page header and the breakdown numbers page.
   Uses the tokens at the top of site.css and helpers from pages.css. */

/* ---------- Provider "Ready to check X?" box (functions.php) ---------- */

.kw-provider-outbound-cta {
  max-width: var(--kw-module);
  margin: 48px auto 24px;
  padding: clamp(28px, 5vw, 40px);
  border-radius: var(--kw-radius-lg);
  background: var(--wp--preset--color--mint, #DDF1E6);
  text-align: center;
}

.kw-provider-outbound-cta h2 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3vw, 34px);
}

.kw-provider-outbound-cta > p {
  margin: 0 0 24px;
  color: var(--kw-muted);
}

/* The CTA repeats the disclosure under its link; .kw-disclosure stays on
   it so the page-level disclosure isn't added twice (functions.php). */
.kw-provider-outbound-cta .kw-disclosure {
  max-width: none;
  margin: 16px 0 0;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 13px;
  color: var(--kw-muted);
}

.kw-sale-line {
  max-width: 460px;
  margin: 0 auto 20px !important;
  padding: 10px 16px;
  border-radius: var(--kw-radius-sm);
  font-size: 15px;
}

.kw-sale-line.is-printed {
  background: #ffffff;
  color: var(--kw-green) !important;
}

.kw-sale-line.is-claimed {
  background: #fbe5c2;
  color: #3b2a00 !important;
}

/* Sale chips (provider cards) */
.kw-sale-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.kw-sale-chip.is-printed {
  background: var(--wp--preset--color--mint, #DDF1E6);
  color: var(--kw-night);
}

.kw-sale-chip.is-claimed {
  background: #fbe5c2;
  color: #3b2a00;
}

.kw-sale-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.kw-sale-was {
  font-weight: 500;
  text-decoration: line-through;
  color: var(--kw-muted);
}

.kw-sale-conds {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--kw-muted);
}

.kw-stamp {
  display: inline-flex;
  flex-direction: column;
  text-align: right;
  font-size: 13px;
  line-height: 1.4;
  color: var(--kw-muted);
}

/* ---------- Providers grid (kerbwise/providers-grid) ---------- */

.kw-provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}

.kw-provider-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: var(--kw-radius-lg);
  background: #ffffff;
  transition: transform 0.2s var(--kw-ease), box-shadow 0.2s var(--kw-ease);
}

.kw-provider-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--kw-shadow-lift);
}

.kw-provider-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}

.kw-provider-logo {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  border-radius: var(--kw-radius-md);
  background: var(--kw-cream);
}

.kw-provider-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.kw-provider-initials {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.kw-provider-visibility {
  text-align: right;
}

.kw-provider-visibility .kw-kicker {
  font-size: 12px;
  margin-bottom: 4px;
}

.kw-provider-visibility-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--kw-green);
}

.kw-provider-name {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px;
}

.kw-provider-price {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--kw-muted);
}

.kw-provider-sale {
  margin: 0 0 20px;
}

.kw-provider-sale.is-empty {
  margin: 0 0 8px;
}

.kw-provider-features {
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kw-provider-features li {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 15px;
}

.kw-provider-features .material-symbols-outlined {
  font-size: 20px;
  color: var(--kw-green);
}

.kw-provider-trust {
  margin: 0 0 16px;
  gap: 8px;
}

.kw-provider-trust .kw-pill {
  background: var(--kw-cream);
  font-size: 13px;
}

.kw-provider-trust .material-symbols-outlined {
  font-size: 16px;
  color: var(--kw-green);
}

.kw-provider-source {
  margin: 0 0 16px;
}

.kw-provider-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  margin-top: auto;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--kw-green);
  color: var(--kw-cream) !important;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s var(--kw-ease);
}

.kw-provider-link:hover {
  background: var(--kw-night);
}

.kw-provider-grid-note {
  margin-top: 32px;
  text-align: center;
}

/* ---------- About template (page-header-about) ---------- */

/* The hero sits in its own .wb-shell so it lines up with the page
   content's shell below it; the two shells shouldn't double the gap. */
.wb-shell.kw-page-head {
  padding-bottom: 0;
}

.kw-page-hero {
  margin-top: 0;
  margin-bottom: 0;
}

.kw-page-hero h1 {
  margin: 16px 0 24px;
}

/* ---------- Search field (404 and search templates) ---------- */

.wp-block-search__input {
  min-height: 48px;
  padding: 12px 18px;
  border: 2px solid #dfdacd;
  border-radius: var(--kw-radius-md);
  background: var(--kw-cream);
  color: var(--kw-ink);
  font-family: inherit;
  font-size: 16px;
  box-sizing: border-box;
}

.wp-block-search__input:focus {
  outline: none;
  border-color: var(--kw-green);
}

/* ---------- Breakdown numbers (kerbwise/breakdown-numbers) ---------- */

.kw-jump {
  padding: 20px 24px;
  border-radius: var(--kw-radius-lg);
  background: var(--wp--preset--color--sky, #DDEBF4);
}

.kw-jump .kw-pill {
  font-size: 14px;
}

.kw-anchor {
  scroll-margin-top: 100px;
}

.kw-provider-cell {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
}

.kw-quiet-link {
  color: inherit !important;
  text-decoration: none;
}

.kw-tel {
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.kw-number-card {
  margin: 0 0 16px;
}

.kw-tel-button {
  font-size: 22px;
  min-height: 56px;
  margin: 0 0 16px;
  letter-spacing: 0.02em;
}

.kw-note-line {
  font-style: italic;
}

.kw-breakdown-numbers td a[href^="tel:"] {
  white-space: nowrap;
}