/*
 * sd-dentist.css — Dentist profile + archive styles for searchdentist.in
 * Conditionally enqueued on is_singular('dentist') | is_post_type_archive('dentist').
 * Phase 3 Session 3b (profile) + 3a (archive chrome).
 * Uses sd-tokens custom properties only. No hard-coded values.
 */

/* ============================================================
   ASTRA RESET — §6.7 pattern.
   Strip display:flex from .ast-container; reset max-width/padding.
   Each section controls its own layout via .sd-container.
   ============================================================ */
body.single-dentist {
  background: var(--sd-color-bg);
}

body.single-dentist #content .ast-container {
  display: block;
  max-width: none;
  padding: 0;
}

/* ============================================================
   LAYOUT PRIMITIVES
   Ported from sd-speciality.css — required on every page type
   that uses .sd-container / .sd-section, since these files are
   conditionally enqueued and never co-loaded.
   ============================================================ */
.sd-container {
  max-width: var(--sd-max-search);
  margin-inline: auto;
  padding-inline: var(--sd-container-pad-mobile);
}
@media (min-width: 768px) {
  .sd-container { padding-inline: var(--sd-container-pad-tablet); }
}
@media (min-width: 1024px) {
  .sd-container { padding-inline: var(--sd-container-pad-desktop); }
}

.sd-section {
  padding-block: var(--sd-space-10);
}
@media (min-width: 768px) {
  .sd-section { padding-block: var(--sd-space-16); }
}

/* ============================================================
   BREADCRUMB — shared pattern with sd-speciality.css
   ============================================================ */
.sd-breadcrumb {
  background: var(--sd-color-bg);
  border-bottom: 1px solid var(--sd-color-border-subtle);
  padding-block: var(--sd-space-3);
}

.breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sd-space-1);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-sm);
  color: var(--sd-color-text-muted);
}

.breadcrumb__link {
  color: var(--sd-color-text-link);
  text-decoration: none;
  transition: color var(--sd-motion-duration-fast) var(--sd-motion-ease-standard);
}
.breadcrumb__link:hover {
  color: var(--sd-color-text-link-hover);
  text-decoration: underline;
}
.breadcrumb__link:focus-visible {
  outline: none;
  border-radius: var(--sd-radius-xs);
  box-shadow: var(--sd-shadow-focus);
}

.breadcrumb__item--sep    { color: var(--sd-color-text-subtle); font-size: var(--sd-fs-xs); }
.breadcrumb__item--current { color: var(--sd-color-text); font-weight: var(--sd-fw-medium); }

/* ============================================================
   SECTION BACKGROUNDS
   ============================================================ */
.sd-section--dentist-identity {
  background: var(--sd-color-bg-recessed);
}

.sd-section--dentist-info {
  background: var(--sd-color-bg);
  border-top: 1px solid var(--sd-color-border-subtle);
  padding-block: var(--sd-space-8);
}

.sd-section--dentist-reviewer {
  background: var(--sd-color-bg);
  border-top: 1px solid var(--sd-color-border-subtle);
  padding-block: var(--sd-space-8);
}

/* ============================================================
   IDENTITY SECTION
   ============================================================ */
.dentist-identity__name {
  margin-bottom: var(--sd-space-3);
}

.dentist-identity__credentials {
  color: var(--sd-color-text-muted);
  margin: 0;
}

/* ============================================================
   INFO SECTIONS — specialities + address
   ============================================================ */
.dentist-info__label {
  display: block;
  margin-bottom: var(--sd-space-3);
}

.dentist-info__value {
  margin: 0;
}

/* ============================================================
   ADDRESS BLOCK
   ============================================================ */
.dentist-address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-1);
}

.dentist-address__line {
  display: block;
}

/* ============================================================
   REVIEWER CARD — muted placeholder treatment.
   Recessed background + subtle border reads as "surface exists,
   content pending." No icon, no accent border — visual quietness.
   ============================================================ */
.dentist-reviewer-card {
  background: var(--sd-color-bg-recessed);
  border: 1px solid var(--sd-color-border-subtle);
  border-radius: var(--sd-radius-md);
  padding: var(--sd-space-5) var(--sd-space-6);
  max-width: var(--sd-max-prose);
}

.dentist-reviewer-card__text {
  color: var(--sd-color-text-muted);
  margin: 0;
}

/* ============================================================
   SPECIALITY CHIPS
   ============================================================ */
.dentist-specialities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sd-space-2);
}

.sd-chip {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--sd-space-4);
  min-height: var(--sd-tap-min);
  border-radius: var(--sd-radius-full);
  background: var(--sd-sage-100);
  color: var(--sd-sage-900);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-sm);
  font-weight: var(--sd-fw-medium);
  text-decoration: none;
  transition:
    background-color var(--sd-motion-duration-fast) var(--sd-motion-ease-standard),
    color            var(--sd-motion-duration-fast) var(--sd-motion-ease-standard),
    box-shadow       var(--sd-motion-duration-fast) var(--sd-motion-ease-standard);
}
.sd-chip:hover {
  background: var(--sd-sage-200);
  color: var(--sd-sage-900);
}
.sd-chip:focus-visible {
  outline: none;
  box-shadow: var(--sd-shadow-focus);
}

/* ============================================================
   IDENTITY HEADER — avatar + info side-by-side
   ============================================================ */
.dentist-identity__header {
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-5);
}
@media (min-width: 480px) {
  .dentist-identity__header {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sd-space-6);
  }
}

.dentist-identity__info {
  flex: 1;
  min-width: 0;
}

/* Override the old stub margin — siblings now handle their own top spacing */
.dentist-identity__name {
  margin-bottom: 0;
}

.dentist-identity__practice {
  margin-top: var(--sd-space-2);
  color: var(--sd-color-text-muted);
}

/* Override: old rule set margin:0; new layout needs top gap */
.dentist-identity__credentials {
  margin-top: var(--sd-space-1);
  color: var(--sd-color-text-muted);
}

/* ============================================================
   AVATAR — CSS monogram circle and resolved-photo variant
   CSS lives here (sd-dentist.css), never in sd-tokens.css.
   Tokens file is read-only; all component rules go here.
   ============================================================ */
.dentist-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--sd-radius-full);   /* pill/circle */
  background: var(--sd-color-primary);    /* sage-500 #6B8E7F */
  color: var(--sd-white);
  font-family: var(--sd-font-serif);
  font-size: var(--sd-fs-2xl);            /* 24px — readable initial */
  font-weight: var(--sd-fw-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
}

/* <img> variant: object-fit keeps the photo cropped into the circle */
.dentist-avatar--photo {
  object-fit: cover;
  background: var(--sd-color-bg-recessed);
}

/* ============================================================
   VERIFICATION BADGE
   ============================================================ */
.dentist-badge--verified {
  display: inline-flex;
  align-items: center;
  background: var(--sd-color-verified-bg);
  color: var(--sd-color-verified-fg);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-sm);
  font-weight: var(--sd-fw-medium);
  padding: var(--sd-space-1) var(--sd-space-3);
  border-radius: var(--sd-radius-full);
  margin-top: var(--sd-space-3);
  width: fit-content;
}

.dentist-badge__sep {
  margin-inline: var(--sd-space-1);
  color: var(--sd-color-text-muted);
}

/* ============================================================
   ENQUIRY CTA SECTION
   ============================================================ */
.sd-section--dentist-enquiry {
  background: var(--sd-color-bg);
  border-top: 1px solid var(--sd-color-border-subtle);
  padding-block: var(--sd-space-12);
}

/* Terracotta focus ring is inherited from .btn:focus-visible
   via --sd-focus-ring (sd-tokens.css → --sd-focus-ring-color: terracotta-400). */
.dentist-enquiry__btn {
  text-decoration: none;
}
@media (max-width: 479px) {
  .dentist-enquiry__btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}

/* Shared input utilities — used by enquiry form; extend when needed elsewhere.
   .sd-input: sage-family border (--sd-color-border) + terracotta focus ring (--sd-focus-ring).
   .sd-label: medium weight label, sm size. Neither class existed before step 4.2. */
.sd-label {
  display: block;
  font-size: var(--sd-fs-sm);
  font-weight: var(--sd-fw-medium);
  color: var(--sd-color-text);
  margin-bottom: var(--sd-space-1);
}
.sd-input {
  display: block;
  width: 100%;
  padding: var(--sd-space-2) var(--sd-space-3);
  font-family: inherit;
  font-size: var(--sd-fs-md);
  color: var(--sd-color-text);
  background: var(--sd-color-bg);
  border: 1px solid var(--sd-color-border);
  border-radius: var(--sd-radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sd-input:focus-visible {
  outline: none;
  border-color: var(--sd-color-border-focus);
  box-shadow: var(--sd-focus-ring);
}

.dentist-enquiry__form {
  max-width: 480px;
}
.dentist-enquiry__field {
  margin: 0 0 var(--sd-space-5);
}
.dentist-enquiry__hint {
  display: block;
  margin-top: var(--sd-space-1);
  font-size: var(--sd-fs-xs);
  color: var(--sd-color-text-muted);
}
.dentist-enquiry__consent {
  border: none;
  padding: 0;
  margin: 0 0 var(--sd-space-5);
}
.dentist-enquiry__consent-legend {
  font-size: var(--sd-fs-sm);
  font-weight: var(--sd-fw-medium);
  color: var(--sd-color-text);
  margin-bottom: var(--sd-space-2);
  padding: 0;
}
.dentist-enquiry__check {
  display: flex;
  align-items: flex-start;
  gap: var(--sd-space-2);
  font-size: var(--sd-fs-sm);
  color: var(--sd-color-text);
  margin-bottom: var(--sd-space-2);
  cursor: pointer;
}
.dentist-enquiry__check input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--sd-color-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.dentist-enquiry__notice {
  padding: var(--sd-space-3) var(--sd-space-4);
  border-radius: var(--sd-radius-sm);
  font-size: var(--sd-fs-sm);
  margin-bottom: var(--sd-space-5);
}
.dentist-enquiry__notice--ok {
  background: var(--sd-color-success-bg);
  color: var(--sd-color-success-fg);
}
.dentist-enquiry__notice--err {
  background: var(--sd-color-error-bg);
  color: var(--sd-color-error-fg);
}
.dentist-enquiry__submit-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sd-space-3);
  margin: 0;
}
.dentist-enquiry__consent-note {
  font-size: var(--sd-fs-2xs);
  color: var(--sd-color-text-muted);
}

/* ============================================================
   CLAIM SECTION
   ============================================================ */
.sd-section--dentist-claim {
  background: var(--sd-color-bg-recessed);
  border-top: 1px solid var(--sd-color-border-subtle);
  padding-block: var(--sd-space-8);
}

.dentist-claim__pending {
  color: var(--sd-color-text-muted);
  margin: 0;
}

/* ── Claim disclosure — <details>/<summary> CSS-only toggle ──────────────── */

/* Remove browser default triangle/arrow marker */
.dentist-claim__disclosure > summary {
  list-style: none;
  cursor: pointer;
}
.dentist-claim__disclosure > summary::-webkit-details-marker {
  display: none;
}

/* Panel revealed when <details> is open */
.dentist-claim__panel {
  margin-top: var(--sd-space-5);
  padding: var(--sd-space-6);
  background: var(--sd-color-bg);
  border: 1px solid var(--sd-color-border-subtle);
  border-radius: var(--sd-radius-md);
  max-width: 480px;
}

.dentist-claim__reg-display {
  margin: 0 0 var(--sd-space-5);
  font-size: var(--sd-fs-sm);
  color: var(--sd-color-text-muted);
}

.dentist-claim__field {
  margin: 0 0 var(--sd-space-5);
}

.dentist-claim__hint {
  display: block;
  margin-top: var(--sd-space-1);
  font-size: var(--sd-fs-xs);
  color: var(--sd-color-text-muted);
}

.dentist-claim__submit-row {
  margin: 0;
}

/* Short width for single numeric inputs (year field) */
.sd-input--short {
  max-width: 120px;
}

/* Notices — mirrors .dentist-enquiry__notice pattern */
.dentist-claim__notice {
  padding: var(--sd-space-3) var(--sd-space-4);
  border-radius: var(--sd-radius-sm);
  font-size: var(--sd-fs-sm);
  margin-bottom: var(--sd-space-5);
}
.dentist-claim__notice--ok {
  background: var(--sd-color-success-bg);
  color: var(--sd-color-success-fg);
}
.dentist-claim__notice--err {
  background: var(--sd-color-error-bg);
  color: var(--sd-color-error-fg);
}

/* ============================================================
   AVATAR — small variant for listing cards (56 × 56)
   Base .dentist-avatar is 80 × 80 (profile); --sm scales it down.
   ============================================================ */
.dentist-avatar--sm {
  width: 56px;
  height: 56px;
  font-size: var(--sd-fs-xl);   /* 20px — proportional to the smaller circle */
}

/* ============================================================
   DENTIST CARD — compact listing card
   CSS lives here (sd-dentist.css), never in sd-tokens.css.
   ============================================================ */
.dentist-card {
  background: var(--sd-color-surface);
  border: 1px solid var(--sd-color-border);
  border-radius: var(--sd-radius-md);
  padding: var(--sd-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-4);
  box-shadow: var(--sd-shadow-xs);
  transition:
    box-shadow   var(--sd-motion-duration-fast) var(--sd-motion-ease-standard),
    border-color var(--sd-motion-duration-fast) var(--sd-motion-ease-standard);
}

.dentist-card:hover {
  box-shadow: var(--sd-shadow-sm);
  border-color: var(--sd-color-border-strong);
}

.dentist-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sd-space-4);
}

.dentist-card__identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-1);
}

.dentist-card__name {
  margin: 0;
}

.dentist-card__name-link {
  color: var(--sd-color-text-strong);
  text-decoration: none;
  transition: color var(--sd-motion-duration-fast) var(--sd-motion-ease-standard);
}

.dentist-card__name-link:hover {
  color: var(--sd-color-primary);
}

/* Terracotta keyboard focus ring — uses the same --sd-focus-ring token as .btn */
.dentist-card__name-link:focus-visible {
  outline: none;
  border-radius: var(--sd-radius-xs);
  box-shadow: var(--sd-focus-ring);
}

/* Badge sits inline in the card identity column — override the profile's top-margin */
.dentist-card__identity .dentist-badge--verified {
  margin-top: 0;
}

.dentist-card__location {
  margin: 0;
}

.dentist-card__footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--sd-space-3);
  border-top: 1px solid var(--sd-color-border-subtle);
}

/* enquiry link: ghost-button via .btn.btn--ghost.btn--sm; suppress underline */
.dentist-card__enquiry-link {
  text-decoration: none;
}

/* Terracotta focus ring on enquiry link inherited from .btn:focus-visible
   (sd-components.css → --sd-focus-ring → --sd-focus-ring-color: terracotta-400) */

/* ============================================================
   ARCHIVE — dentist-archive__* chrome
   Astra reset + grid + pagination + empty-states.
   BEM block: dentist-archive__* mirrors dentist-card__* naming.
   ============================================================ */

body.post-type-archive-dentist {
  background: var(--sd-color-bg);
}

body.post-type-archive-dentist #content .ast-container {
  display: block;
  max-width: none;
  padding: 0;
}

.dentist-archive {
  padding-block: var(--sd-space-10);
}

.dentist-archive__header {
  margin-bottom: var(--sd-space-8);
}

.dentist-archive__title {
  margin: 0 0 var(--sd-space-2);
}

.dentist-archive__intro {
  margin: 0;
  color: var(--sd-color-text-muted);
}

/* Grid: 1 col → 2 col → 3 col */
.dentist-archive__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sd-space-5);
}

@media (min-width: 640px) {
  .dentist-archive__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dentist-archive__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.dentist-archive__pagination {
  margin-top: var(--sd-space-10);
  display: flex;
  justify-content: center;
}

.dentist-archive__pagination ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--sd-space-1);
  flex-wrap: wrap;
  justify-content: center;
}

.dentist-archive__pagination li {
  margin: 0;
}

.dentist-archive__pagination a,
.dentist-archive__pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding-inline: var(--sd-space-3);
  border-radius: var(--sd-radius-sm);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-sm);
  font-weight: var(--sd-fw-medium);
  text-decoration: none;
  color: var(--sd-color-text-link);
  background: var(--sd-color-surface);
  border: 1px solid var(--sd-color-border);
  transition:
    background-color var(--sd-motion-duration-fast) var(--sd-motion-ease-standard),
    color            var(--sd-motion-duration-fast) var(--sd-motion-ease-standard),
    border-color     var(--sd-motion-duration-fast) var(--sd-motion-ease-standard);
}

.dentist-archive__pagination a:hover {
  background: var(--sd-color-bg-recessed);
  border-color: var(--sd-color-border-strong);
  color: var(--sd-color-text-link-hover);
}

/* Terracotta keyboard focus ring — canonical focus token per design system */
.dentist-archive__pagination a:focus-visible {
  outline: none;
  box-shadow: var(--sd-focus-ring);
}

.dentist-archive__pagination .current {
  background: var(--sd-color-primary);
  color: var(--sd-color-text-on-primary);
  border-color: var(--sd-color-primary);
  cursor: default;
}

.dentist-archive__pagination .dots {
  background: none;
  border-color: transparent;
  color: var(--sd-color-text-muted);
  cursor: default;
}

/* ── Empty states ────────────────────────────────────────────────────────── */
.dentist-archive__empty {
  padding-block: var(--sd-space-16);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sd-space-4);
  max-width: 560px;
}

.dentist-archive__empty-msg {
  margin: 0;
  color: var(--sd-color-text-strong);
}

.dentist-archive__empty-cue {
  margin: 0;
  color: var(--sd-color-text-muted);
}

.dentist-archive__enquiry-cta {
  text-decoration: none;
  margin-top: var(--sd-space-2);
}