/* ─── Font Awesome 7 Pro (Regular) ─────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   ASTRA FULL-WIDTH OVERRIDE
   Astra uses flexbox on .ast-container (to accommodate its
   sidebar widget area), which pushes our custom sections into a
   side-by-side layout and kills the design.
   Every rule below neutralises a specific Astra wrapper.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Remove top padding Astra adds above #content */
.specialists-page #content.site-content {
  padding-top: 0 !important;
}

/* 2. The critical one — kill Astra's flex row and let sections stack */
.specialists-page .ast-container {
  display: block   !important;   /* ← fixes the side-by-side stacking */
  max-width: 100%  !important;
  width: 100%      !important;
  padding-left: 0  !important;
  padding-right: 0 !important;
}

/* 3. Primary content column — full width, no float */
.specialists-page #primary,
.specialists-page #primary.content-area {
  width: 100%     !important;
  max-width: 100% !important;
  padding: 0      !important;
  margin: 0       !important;
  float: none     !important;
}

/* 4. Main element */
.specialists-page #main,
.specialists-page #main.site-main {
  padding: 0 !important;
  margin: 0  !important;
}

/* 5. Astra wraps posts in an <article> — reset it */
.specialists-page .ast-article-single {
  padding: 0      !important;
  margin: 0       !important;
  max-width: none !important;
}

/* 6. Entry content div (Astra/WordPress default) */
.specialists-page .entry-content,
.specialists-page .post-content {
  padding: 0      !important;
  margin: 0       !important;
  max-width: none !important;
}

/* 7. Hide Astra's sidebar — not needed on this page */
.specialists-page #secondary,
.specialists-page .secondary,
.specialists-page .widget-area,
.specialists-page .ast-sidebar-wrap {
  display: none !important;
}

/* html overflow-x:clip breaks position:sticky in Chrome — override it for this page only */
html {
  overflow-x: visible !important;
}


@font-face {
    font-family: 'FA Pro';
    src: url('./Font Awesome 7 Pro-Regular-400.otf') format('opentype');
    font-weight: 400; font-style: normal; font-display: swap;
  }
  .fa { font-family: 'FA Pro'; font-style: normal; font-weight: 400; line-height: 1; display: inline-block;
        -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

  /* ─── Tokens (mirrors home.html) ───────────────────────────── */
  :root {
    --background: 220 20% 98%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --primary: 216 100% 22%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 216 45% 94%;
    --primary-tint: 205 70% 72%;
    --accent: 140 59% 28%; /* #1D7239 dark green (was 196 100% 46% / #00ACEB) */
    --accent-foreground: 0 0% 100%;
    --muted: 220 20% 96%;
    --muted-foreground: 220 10% 46%;
    --border: 220 15% 90%;
    --info: 199 88% 50%;
    --destructive: 0 75% 48%;
    --destructive-soft: 0 80% 96%;
    --surface: 220 30% 96%;
    --surface-warm: 38 40% 97%;
    --radius: 8px;
    --shadow-sm: 0 1px 2px 0 hsl(216 100% 22% / .05);
    --shadow-md: 0 4px 12px -2px hsl(216 100% 22% / .08);
    --shadow-lg: 0 14px 40px -12px hsl(216 100% 22% / .25);
    --shadow-menu: 0 24px 48px -16px hsl(216 100% 22% / .25);
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--font-sans);
    color: hsl(var(--foreground));
    background: hsl(var(--background));
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; }

  /* ─── Page intro ───────────────────────────────────────────── */
  .page-intro { background: hsl(var(--card)); padding: 40px 200px 8px; }
  .page-intro__inner { max-width: none; }
  .breadcrumb {
    font-size: 13px;
    color: hsl(var(--muted-foreground));
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
  }
  .breadcrumb a { color: hsl(var(--muted-foreground)); }
  .breadcrumb a:hover { color: hsl(var(--primary)); }
  .breadcrumb .sep { opacity: .4; font-size: 9px; }
  .breadcrumb__current { color: hsl(var(--accent)); font-weight: 500; }
  .page-intro__eyebrow {
    font: 600 12px/1 var(--font-sans);
    color: hsl(var(--accent));
    letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: 12px;
  }
  .page-intro h1 {
    margin: 20px 0;
    font: 600 clamp(2.25rem, 3vw, 3.5rem)/1.08 var(--font-sans);
    color: hsl(var(--primary));
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  .page-intro p {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 17px; line-height: 1.6;
    text-wrap: pretty;
  }
  .page-intro p + p { margin-top: 12px; }

  /* ─── Tools (search + alphabet) ───────────────────────────── */
  .index-tools {
    background: hsl(var(--card));
    padding: 40px 200px 24px;
  }
  .index-tools__inner { max-width: none; }

  .search {
    display: flex; align-items: center; gap: 12px;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 9999px;
    padding: 0 24px; height: 56px;
    box-shadow: var(--shadow-sm);
    transition: border-color .2s, box-shadow .2s;
  }
  .search:focus-within {
    border-color: hsl(var(--primary) / .35);
    box-shadow: var(--shadow-md);
  }
  .search .fa { color: hsl(var(--muted-foreground)); font-size: 15px; }
  .search input {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
    font: 400 15px/1 var(--font-sans); color: hsl(var(--foreground));
  }
  .search input:focus {
    outline: none !important;
    border: none !important;
  }
  .search input::placeholder { color: hsl(var(--muted-foreground)); }

  .alpha {
    display: grid; grid-template-columns: repeat(14, 1fr); gap: 10px;
    margin-top: 28px;
  }
  .alpha__letter {
    aspect-ratio: 1; border-radius: 9999px;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    color: hsl(var(--primary));
    font: 600 14px/1 var(--font-sans);
    display: grid; place-items: center;
    transition: background .2s, color .2s, border-color .2s, transform .15s;
  }
  .alpha__letter:hover {
    background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
    border-color: hsl(var(--primary)); transform: translateY(-2px);
  }
  .alpha__letter[aria-disabled="true"] {
    color: hsl(var(--muted-foreground)); background: hsl(var(--muted));
    cursor: default; opacity: .5;
  }
  .alpha__letter[aria-disabled="true"]:hover {
    background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
    border-color: hsl(var(--border)); transform: none;
  }
  @media (max-width: 880px) { .alpha { grid-template-columns: repeat(9, 1fr); } }
  @media (max-width: 480px) { .alpha { grid-template-columns: repeat(7, 1fr); } }

  .results-meta {
    margin: 24px 0 0;
    font-size: 14px; color: hsl(var(--muted-foreground));
  }

  /* ─── Listing layout (sidebar + grid) ──────────────────────── */
  .listing { background: hsl(var(--card)); padding: 24px 200px 40px; }
  .listing__inner {
    max-width: none;
    display: grid; grid-template-columns: 260px 1fr; gap: 48px;
    align-items: start;
  }

  /* Filter sidebar */
  .filters {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 24px);
    align-self: start;
  }

  .filters__group { margin-bottom: 28px; }
  .filters__label {
    font: 600 12px/1 var(--font-sans);
    color: hsl(var(--muted-foreground));
    letter-spacing: .08em; text-transform: uppercase;
    margin: 0 0 10px;
    display: block;
  }
  .filters__select {
    width: 100%; height: 44px; padding: 0 14px;
    border-radius: 8px;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    font: 400 14px/1 var(--font-sans);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, hsl(var(--muted-foreground)) 50%), linear-gradient(135deg, hsl(var(--muted-foreground)) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }
  .filters__select:focus { border-color: hsl(var(--primary) / .35); box-shadow: var(--shadow-sm); }

  .filters__chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .filters__chip {
    height: 30px; min-width: 30px; padding: 0 10px;
    border-radius: 9999px;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    color: hsl(var(--primary));
    font: 600 12px/1 var(--font-sans);
    display: inline-grid; place-items: center;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  .filters__chip:hover {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-color: hsl(var(--primary));
  }
  .filters__chip.is-active {
    background: hsl(var(--accent));
    border-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
  }

  /* Main column */
  .listing__meta {
    font-size: 14px; color: hsl(var(--muted-foreground));
    margin: 0 0 20px;
  }

  /* Specialist cards */
  .spec-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  }
  .spec-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: grid; grid-template-columns: 140px 1fr; gap: 20px;
    align-items: stretch;
    transition: transform .15s;
  }
  .spec-card:hover { transform: translateY(-1px); }
  .spec-card:hover .spec-card__name { color: hsl(var(--accent)); }
  .spec-card__photo {
    width: 140px;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: hsl(var(--muted));
    flex-shrink: 0;
  }
  .spec-card__photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .spec-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .spec-card__name {
    margin: 0;
    font: 600 17px/1.25 var(--font-sans);
    color: hsl(var(--primary));
    letter-spacing: -0.01em;
  }
  .spec-card__role {
    font-size: 13px; color: hsl(var(--muted-foreground));
    margin: 0;
  }
  .spec-card__pill {
    align-self: flex-start;
    display: inline-flex; align-items: center;
    height: 22px; padding: 0 10px;
    border-radius: 9999px;
    background: hsl(var(--primary-light));
    color: hsl(var(--primary));
    font: 600 11px/1 var(--font-sans);
    letter-spacing: .02em;
    margin-top: 2px;
  }
  .spec-card__bio {
    margin: 4px 0 0;
    font-size: 13px; line-height: 1.5;
    color: hsl(var(--muted-foreground));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .spec-card__links {
    margin-top: auto;
    padding-top: 8px;
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  }
  .spec-link {
    font: 600 12.5px/1 var(--font-sans);
    color: hsl(var(--accent));
    display: inline-flex; align-items: center; gap: 6px;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color .15s, color .15s;
  }
  .spec-link:hover { border-bottom-color: hsl(var(--accent)); }
  .spec-link--muted { color: hsl(var(--muted-foreground)); }
  .spec-link--muted:hover { border-bottom-color: hsl(var(--muted-foreground)); color: hsl(var(--primary)); }

  @media (max-width: 1100px) { .spec-grid { grid-template-columns: 1fr; } }
  @media (max-width: 960px) {
    .listing__inner { grid-template-columns: 1fr; }
    .filters { position: static; }
  }
  .spec-grid { gap: 32px 24px; }
  @media (max-width: 520px) {
    .spec-card { grid-template-columns: 96px 1fr; gap: 14px; }
    .spec-card__photo { width: 96px; height: 100%; min-height: 96px; }
  }

  /* Pagination */
  .pager {
    margin-top: 56px; padding-top: 32px;
    border-top: 1px solid hsl(var(--border));
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
  }
  .pager__meta { font-size: 13.5px; color: hsl(var(--muted-foreground)); }
  .pager__nav { display: inline-flex; gap: 6px; }
  .pager__nav a, .pager__nav span {
    min-width: 38px; height: 38px; padding: 0 12px;
    border-radius: 9999px; border: 1px solid hsl(var(--border));
    display: inline-grid; place-items: center;
    font: 600 13px/1 var(--font-sans);
    color: hsl(var(--primary));
    background: hsl(var(--card));
    transition: background .15s, color .15s, border-color .15s;
  }
  .pager__nav a:hover {
    background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
    border-color: hsl(var(--primary));
  }
  .pager__nav .is-current {
    background: hsl(var(--accent)); color: hsl(var(--accent-foreground));
    border-color: hsl(var(--accent));
  }
  .pager__nav .is-gap { border: 0; background: transparent; color: hsl(var(--muted-foreground)); }
  /* Tighten section gutters on smaller viewports */
  @media (max-width: 1200px) {
    .page-intro,
    .index-tools,
    .listing { padding-left: 40px; padding-right: 40px; }
  }