/* ============================================================
   Frank Taylor & Associates — Component primitives
   Requires colors_and_type.css
   ============================================================ */

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-sans);font-weight:700;font-size:15px;line-height:1;
  padding:14px 22px;border-radius:var(--r-md);border:1.5px solid transparent;
  cursor:pointer;transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space:nowrap;text-decoration:none;
}
.btn:active{transform:translateY(0)}
.btn .arw{transition:transform var(--dur) var(--ease)}
.btn:hover .arw{transform:translateX(3px)}

.btn-primary{background:var(--gold);color:var(--ink)}
.btn-primary:hover{background:var(--gold-hover);transform:translateY(-1px);box-shadow:var(--shadow-gold)}

.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-1px);box-shadow:var(--shadow-md)}

.btn-outline{background:#fff;color:var(--ink);border-color:var(--gold)}
.btn-outline:hover{background:var(--gold-tint);transform:translateY(-1px)}

.btn-outline-ink{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-outline-ink:hover{background:var(--ink);color:#fff;transform:translateY(-1px)}

.btn-ghost{background:transparent;color:var(--ink);border-color:transparent;padding-left:6px;padding-right:6px}
.btn-ghost:hover{color:var(--gold-deep)}

.btn-sm{padding:10px 16px;font-size:14px}
.btn-lg{padding:17px 28px;font-size:16px}

/* ---------- BADGES / PILLS ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:var(--r-pill);letter-spacing:.01em}
.badge-nhs{background:var(--badge-nhs-bg);color:var(--badge-nhs-fg)}
.badge-mixed{background:var(--badge-mixed-bg);color:var(--badge-mixed-fg)}
.badge-private{background:var(--badge-private-bg);color:var(--badge-private-fg)}
.badge-tip{background:#fff;color:var(--gold-deep);box-shadow:var(--shadow-sm);padding:6px 14px;font-size:12.5px}

.avail{display:inline-flex;align-items:center;gap:6px;color:var(--available-fg);font-weight:600;font-size:14px}

/* ---------- CARDS ---------- */
.card{background:#fff;border-radius:var(--r-lg);transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out)}

/* practice card */
.practice-card{background:var(--surface-3);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:16px}
.practice-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.practice-card .loc{display:flex;align-items:center;gap:7px;font-size:18px;font-weight:700;color:var(--fg-1)}
.practice-card .ref{font-size:12px;color:var(--fg-3)}
.practice-card .specs{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;font-size:14px;color:var(--fg-2)}
.practice-card .divide{height:1px;background:var(--border)}
.price-row{display:flex;justify-content:space-between;align-items:baseline}
.price-row .k{font-size:13px;color:var(--fg-2);font-weight:600}
.price-row .v{font-size:15px;color:var(--fg-1);font-weight:600}
.price-row.asking .k{color:var(--gold-deep);font-weight:700}
.price-row.asking .v{font-size:24px;font-weight:800;color:var(--gold-deep);letter-spacing:-.01em}

/* article card */
.article-card{background:#fff;border:1px solid var(--gold);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:14px}
.article-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.article-card h3{font-size:20px;color:var(--fg-1)}
.article-card p{font-size:14.5px;color:var(--fg-2);line-height:1.6}

/* feature / journey card */
.feature-card{background:#fff;border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px}
.feature-card .disc{width:52px;height:52px;border-radius:var(--r-pill);background:var(--surface-disc);display:flex;align-items:center;justify-content:center}
.feature-card h4{font-size:17px;color:var(--fg-1)}
.feature-card p{font-size:14px;color:var(--fg-2)}

/* icon disc (gold) */
.disc-gold{width:64px;height:64px;border-radius:var(--r-pill);background:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}

/* testimonial */
.quote-card{background:#fff;border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:20px}
.quote-card .q{font-size:20px;font-weight:700;color:var(--fg-1);line-height:1.4;letter-spacing:-.01em}
.quote-card .who{font-size:14px;color:var(--fg-3);font-weight:600}
.stars{display:inline-flex;gap:3px}

/* ---------- SEARCH / INPUT ---------- */
.field{height:54px;border:1.5px solid var(--gold);border-radius:var(--r-md);padding:0 18px;font-size:15px;
  font-family:var(--font-sans);color:var(--fg-1);background:#fff;width:100%}
.field::placeholder{color:var(--fg-4)}
.field:focus{outline:none;box-shadow:0 0 0 3px var(--gold-tint)}
.search-panel{background:#fff;border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-lg)}
.toggle-group{display:inline-flex;gap:8px}

/* round carousel arrow */
.car-arw{width:42px;height:42px;border-radius:var(--r-pill);background:var(--gold);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.car-arw:hover{background:var(--gold-hover);transform:scale(1.06)}