/* =============================================================
   KENTS PHARMACY — CONTACT
   ============================================================= */

.kp-section--tight { padding-block: 0 var(--kp-section); }

/* ---------- the three quick routes ---------- */

.kp-contact__quick { display: grid; gap: var(--kp-s4); grid-template-columns: 1fr; }
@media (min-width: 720px)  { .kp-contact__quick { grid-template-columns: repeat(3, 1fr); } }

.kp-quick {
  display: flex; align-items: flex-start; gap: var(--kp-s4);
  padding: var(--kp-s5);
  border: 1px solid var(--kp-line); border-radius: var(--kp-r-lg);
  background: #fff; text-decoration: none; color: inherit;
  transition: border-color var(--kp-fast) var(--kp-ease), box-shadow var(--kp-fast) var(--kp-ease);
}
.kp-quick:hover { border-color: var(--kp-slate-400); box-shadow: var(--kp-shadow-sm); color: inherit; }
.kp-quick__icon {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--kp-r);
  background: var(--kp-slate-50); color: var(--kp-slate-700);
}
.kp-quick__icon svg { width: 22px; height: 22px; }
.kp-quick__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kp-quick__label {
  font-size: var(--kp-t-xs); font-weight: 600;
  letter-spacing: var(--kp-ls-wide); text-transform: uppercase; color: var(--kp-ink-3);
}
.kp-quick__body strong {
  font-size: var(--kp-t-lg); color: var(--kp-ink); line-height: 1.3;
  overflow-wrap: anywhere;
}
.kp-quick__note { font-size: var(--kp-t-sm); color: var(--kp-ink-3); }
.kp-quick__note.is-open { color: var(--kp-success); font-weight: 600; }

/* ---------- urgent routes ----------
   Deliberately NOT styled as a warning box to be scrolled past. It is a
   panel with its own heading, above the form, using the danger colour only
   on the numbers so the emphasis lands on the action. */

.kp-urgent {
  padding: var(--kp-s6);
  border: 1px solid var(--kp-line);
  border-left: 4px solid var(--kp-danger);
  border-radius: var(--kp-r-lg);
  background: var(--kp-surface);
}
.kp-urgent__title { font-family: var(--kp-font-body); font-size: var(--kp-t-h4); margin-bottom: var(--kp-s2); }
.kp-urgent__lede { color: var(--kp-ink-3); font-size: var(--kp-t-sm); margin-bottom: var(--kp-s5); }
.kp-urgent__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kp-s3); }
@media (min-width: 860px) { .kp-urgent__list { grid-template-columns: repeat(3, 1fr); gap: var(--kp-s5); } }
.kp-urgent__list li {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--kp-s5);
  background: var(--kp-slate-50); border-radius: var(--kp-r);
}
.kp-urgent__list strong { color: var(--kp-ink); font-size: var(--kp-t-base); }
.kp-urgent__list span { font-size: var(--kp-t-sm); color: var(--kp-ink-3); flex: 1; }
.kp-urgent__num {
  margin-top: var(--kp-s2);
  font-weight: 700; font-size: var(--kp-t-lg);
  color: var(--kp-danger); text-decoration: none;
  border-bottom: 2px solid currentColor; align-self: flex-start;
}
.kp-urgent__num:hover { color: var(--kp-danger); opacity: .8; }

/* ---------- hours / directions / map ---------- */

.kp-contact__grid { display: grid; gap: var(--kp-s5); grid-template-columns: 1fr; }
@media (min-width: 760px)  { .kp-contact__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .kp-contact__grid { grid-template-columns: 1fr 1fr 1.4fr; } }

.kp-contact__map {
  min-height: 340px;
  border: 1px solid var(--kp-line); border-radius: var(--kp-r-lg);
  overflow: hidden; background: var(--kp-slate-50);
  display: grid; place-items: center;
}
.kp-contact__map iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }

.kp-address { font-style: normal; line-height: 1.8; }
.kp-address__notes { margin-top: var(--kp-s4); font-size: var(--kp-t-sm); color: var(--kp-ink-3); }
/* ---------- the form ---------- */

.kp-contact__form { display: grid; gap: var(--kp-s7); align-items: start; }
@media (min-width: 900px) { .kp-contact__form { grid-template-columns: 1fr 1.15fr; gap: var(--kp-s9); } }
.kp-contact__formintro p { color: var(--kp-ink-3); }
.kp-contact__formbox {
  padding: var(--kp-s7);
  border: 1px solid var(--kp-line); border-radius: var(--kp-r-lg);
  background: #fff; box-shadow: var(--kp-shadow-sm);
}
@media (max-width: 599px) { .kp-contact__formbox { padding: var(--kp-s5); } }

.kp-field { margin-bottom: var(--kp-s5); }
.kp-field label {
  display: block; margin-bottom: 6px;
  font-weight: 600; font-size: var(--kp-t-sm); color: var(--kp-ink);
}
.kp-field__opt { font-weight: 400; color: var(--kp-ink-3); }
.kp-field__hint { margin: 0 0 8px; font-size: var(--kp-t-xs); color: var(--kp-ink-3); line-height: 1.5; }

.kp-field input,
.kp-field select,
.kp-field textarea {
  width: 100%; padding: 13px var(--kp-s4);
  border: 1px solid var(--kp-line); border-radius: var(--kp-r);
  background: #fff; font: inherit; font-size: var(--kp-t-base); color: var(--kp-ink);
  transition: border-color var(--kp-fast) var(--kp-ease), box-shadow var(--kp-fast) var(--kp-ease);
}
.kp-field textarea { resize: vertical; min-height: 130px; }
.kp-field input:focus,
.kp-field select:focus,
.kp-field textarea:focus {
  border-color: var(--kp-slate-700);
  box-shadow: 0 0 0 3px rgba(35,58,66,.12);
  outline: none;
}

/* The error state is carried by a border, an icon-free message AND the
   aria-invalid attribute — never by colour alone. */
.kp-field--err input,
.kp-field--err select,
.kp-field--err textarea { border-color: var(--kp-danger); }
.kp-field__err { margin: 6px 0 0; font-size: var(--kp-t-sm); font-weight: 600; color: var(--kp-danger); }

.kp-form__privacy { font-size: var(--kp-t-sm); color: var(--kp-ink-3); margin-bottom: var(--kp-s5); }

/* Honeypot. Off-screen rather than display:none — some bots skip anything
   that is not rendered, and screen readers get aria-hidden on the wrapper. */
.kp-hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.kp-formnote {
  padding: var(--kp-s5); margin-bottom: var(--kp-s5);
  border-radius: var(--kp-r); font-size: var(--kp-t-sm);
  border: 1px solid; border-left-width: 4px;
}
.kp-formnote strong { display: block; margin-bottom: 3px; font-size: var(--kp-t-base); }
.kp-formnote--ok  { background: var(--kp-success-bg); border-color: #bfe3ce; border-left-color: var(--kp-success); color: var(--kp-ink-2); }
.kp-formnote--ok strong { color: var(--kp-success); }
.kp-formnote--bad { background: var(--kp-danger-bg); border-color: #f0c9cb; border-left-color: var(--kp-danger); color: var(--kp-ink-2); }
.kp-formnote--bad strong { color: var(--kp-danger); }