/* TTF-007 — styling for generated SEO location pages ([therapist_listings] + .ttf-seo-page). */
.ttf-seo-page { max-width: 1100px; margin: 0 auto; line-height: 1.6; }
/* Doubled class bumps specificity so these beat Elementor's kit <h2>/<h3>
   typography (which loads later and otherwise renders them oversized). */
.ttf-seo-page.ttf-seo-page h2 { font-size: 1.75rem; line-height: 1.25; font-weight: 700; margin: 2.25rem 0 .75rem; }
.ttf-seo-page.ttf-seo-page h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 700; margin: 1.25rem 0 .5rem; }
.ttf-seo-page p  { margin: 0 0 1rem; }
.ttf-seo-page .ttf-listings { margin: 2rem 0; }

/* Collapsible FAQ accordion (native <details>/<summary> — no JS). */
.ttf-faq { margin: 2.5rem 0; }
.ttf-faq__item {
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    margin: 0 0 .75rem;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ttf-faq__item:hover { border-color: #cdd3da; }
.ttf-faq__item[open] { border-color: #b9c2cc; box-shadow: 0 2px 10px rgba(20,30,45,.06); }
.ttf-faq__item > summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 3rem 1rem 1.15rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    position: relative;
    user-select: none;
}
.ttf-faq__item > summary::-webkit-details-marker { display: none; }
.ttf-faq__item > summary:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 8px; }
/* Chevron */
.ttf-faq__item > summary::after {
    content: "";
    position: absolute;
    right: 1.15rem;
    top: 50%;
    width: .55rem;
    height: .55rem;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: translateY(-65%) rotate(45deg);
    transition: transform .2s ease;
}
.ttf-faq__item[open] > summary::after { transform: translateY(-35%) rotate(225deg); }
.ttf-faq__answer { padding: 0 1.15rem 1.1rem; color: #3b424b; }
.ttf-faq__answer p { margin: 0 0 .75rem; }
.ttf-faq__answer p:last-child { margin-bottom: 0; }

/* Dedicated SEO-page therapist cards ([ttf_seo_listings]).
   Self-contained so they don't depend on Elementor's widget-scoped CSS. */
.ttf-seo-listings { position: relative; margin: 2.5rem 0; }
.ttf-seo-listings__track { display: flex; gap: 24px; }
/* <=3 therapists: a centered row that wraps on small screens. */
.ttf-seo-listings--grid .ttf-seo-listings__track { flex-wrap: wrap; justify-content: center; }
/* >3 therapists: a horizontal scroll-snap slider. */
.ttf-seo-listings--slider .ttf-seo-listings__track {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
    padding: 4px 2px 14px;
    scrollbar-width: thin;
}
.ttf-seo-listings__track .ttf-seo-card { flex: 0 0 240px; max-width: 240px; scroll-snap-align: start; }
@media (max-width: 360px) {
    .ttf-seo-listings__track .ttf-seo-card { flex-basis: 230px; max-width: 230px; }
}
/* Slider arrows — centered on the avatars; reset hard (!important) so the theme's
   global gold <button> styling can't bleed in. Hidden at the track ends. */
.ttf-seo-listings__nav {
    position: absolute;
    top: 86px;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #e6e8ec !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #282828 !important;
    box-shadow: 0 4px 14px rgba(20, 30, 45, .16) !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.ttf-seo-listings__nav:hover { background: #282828 !important; color: #fff !important; }
.ttf-seo-listings__nav svg { display: block; }
.ttf-seo-listings__nav--prev { left: -6px; }
.ttf-seo-listings__nav--next { right: -6px; }
.ttf-seo-listings__nav[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 600px) {
    .ttf-seo-listings__nav { display: none !important; }   /* swipe on mobile */
}
.ttf-seo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 16px;
    padding: 1.5rem 1.25rem 1.35rem;
    box-shadow: 0 1px 2px rgba(20, 30, 45, .04);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.ttf-seo-card:hover {
    border-color: #e0e3e8;
    box-shadow: 0 10px 28px rgba(20, 30, 45, .10);
    transform: translateY(-3px);
}
/* Circular avatar — same treatment as the single-therapist hero photo. */
.ttf-seo-card__media {
    width: 124px;
    height: 124px;
    flex: 0 0 auto;
    margin: 0 0 1rem;
    border-radius: 50%;
    overflow: hidden;
    background: #f1f3f5;
    border: 4px solid #fff;
    box-shadow: 0 0 0 1px #ececf0, 0 4px 12px rgba(20, 30, 45, .10);
}
.ttf-seo-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ttf-seo-card__media--empty { display: flex; align-items: center; justify-content: center; }
.ttf-seo-card__initials { font-size: 2.2rem; font-weight: 700; color: #b3bac3; letter-spacing: .02em; }
.ttf-seo-card__body { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; }
.ttf-seo-card__name { font-size: 1.15rem; line-height: 1.3; font-weight: 700; margin: 0 0 .2rem; }
.ttf-seo-card__name a { color: #282828; text-decoration: none; }
.ttf-seo-card__name a:hover { color: #d9a300; }
.ttf-seo-card__role { font-size: .82rem; font-weight: 600; color: #8a93a0; margin: 0 0 .7rem; }
/* Clamp AND reserve 3 lines so every card is identical height and buttons align. */
.ttf-seo-card__excerpt {
    font-size: .9rem;
    line-height: 1.55;
    color: #5b6471;
    margin: 0 0 1.15rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(.9rem * 1.55 * 3);
}
.ttf-seo-card__btn {
    margin-top: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #F7C845;
    color: #282828;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    padding: .6rem 1.4rem;
    border-radius: 999px;
    transition: background .15s ease, transform .15s ease;
}
.ttf-seo-card__btn:hover { background: #ecbb33; color: #282828; transform: translateY(-1px); }
.ttf-seo-listings-empty { color: #6b7280; font-style: italic; text-align: center; }

/* Page title — match the site's "special heading" style (the Elementor global
   heading used on e.g. the About Us page). Values mirror the Elementor kit's
   global h1/h2 exactly (post-12.css): Poppins, 44px, weight 600, line-height 1.4,
   dark text, with the area word in brand gold. Poppins is loaded site-wide, so it
   is available here too. The doubled class + element beats the theme/Elementor-kit
   <h1.entry-title> styling without needing !important. */
.entry-title.entry-title {
    text-align: center;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;                 /* breathing room under the header, matching the About Us hero section (padding-top:80px) */
    font-family: "Poppins", sans-serif;
    font-size: 44px;
    line-height: 1.4;
    font-weight: 600;
    color: #282828;
}
/* Mirror the kit's responsive heading sizes so it scales like the Elementor pages. */
@media (max-width: 1024px) {
    .entry-title.entry-title { font-size: 36px; padding-top: 56px; }
}
@media (max-width: 767px) {
    .entry-title.entry-title { font-size: 30px; padding-top: 40px; }
}
/* The area word stays bold gold (700, via .yellow-highlight in the child theme) —
   the same dark-text + bold-gold contrast as the About Us heading. */
.entry-title .yellow-highlight { color: var(--e-global-color-primary, #F7C845); }