/*
 * PracticeRank Site Kit. Loaded only when the kit is active (live, or a preview session).
 * Everything is scoped to .prsk-* classes. Colors and fonts come from the site config as
 * CSS custom properties (printed inline), so the defaults below only matter if a config
 * leaves a token out. The site's own stylesheet does most of the work through the theme
 * class names the markup also carries; this file fills the gaps.
 */

:root {
    --prsk-ink: #1f2933;
    --prsk-primary: #1f4e79;
    --prsk-accent: #2f6fa3;
    --prsk-muted: #5f6b76;
    --prsk-line: #d5dde3;
    --prsk-mint: #eef4f0;
    --prsk-cream-top: #fbf8f3;
    --prsk-cream-bottom: #f5efe6;
    --prsk-surface: #ffffff;
    --prsk-font-heading: system-ui, sans-serif;
    --prsk-font-body: system-ui, sans-serif;
    --prsk-radius: 12px;
    --prsk-pill: 999px;
}

.screen-reader-text:not(:focus) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* ---------- hero ---------- */
/* ---------- page banner: the theme's banner-section, as on /new-patients/ ----------
   The theme prints its banner H1 as the small eyebrow and an H2 as the big headline. Our
   pages keep one H1 and make it the headline, so these rules give the eyebrow paragraph the
   theme's H1 look and the H1 the theme's H2 look. Colors, sizes and spacing are the theme's
   (custom.css .banner-section, .page-template-new-patients .banner-section). */
.prsk-page .prsk-banner {
    background-image: linear-gradient(180deg, var(--prsk-banner-top, #FFF5E9) 0%, var(--prsk-banner-bottom, #FAE7D0) 100%);
    padding: 72px 0 80px;
}
.prsk-banner .prsk-banner-text {
    max-width: 640px;
}
.prsk-banner .prsk-banner-eyebrow {
    font-family: var(--prsk-font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--prsk-ink);
    margin: 0 0 16px;
}
.prsk-banner .prsk-banner-title {
    font-family: var(--prsk-font-heading);
    font-size: 64px;
    font-weight: 700;
    line-height: 57.6px;
    letter-spacing: -0.03em;
    text-transform: none;
    color: var(--prsk-ink);
    margin: 0;
}
.prsk-banner .prsk-banner-lede {
    margin: 38px 0;
    color: var(--prsk-ink);
}
.prsk-page .prsk-banner .prsk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: none;
    height: 54px;
    padding: 0 28px;
    white-space: nowrap;
}
@media screen and (max-width: 991px) {
    .prsk-page .prsk-banner {
        padding: 50px 0;
    }
    .prsk-banner .prsk-banner-title {
        font-size: 42px;
        line-height: 45px;
    }
    .prsk-banner .prsk-banner-lede {
        margin: 24px 0;
    }
}
@media screen and (max-width: 767px) {
    /* The theme hides ".banner-section h1" below 768px because its H1 is the eyebrow. Ours is
       the headline: keep it, and hide the eyebrow instead, as the theme's pages do. */
    .prsk-page .prsk-banner h1.prsk-banner-title {
        display: block;
        font-size: 40px;
        line-height: 40px;
    }
    .prsk-page .prsk-banner .prsk-banner-eyebrow {
        display: none;
    }
}

.prsk-hero {
    background-image: linear-gradient(180deg, var(--prsk-cream-top) 0%, var(--prsk-cream-bottom) 100%);
}
.prsk-hero .prsk-eyebrow {
    font-family: var(--prsk-font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.24em;
    line-height: 21px;
    text-align: center;
    text-transform: uppercase;
    color: var(--prsk-primary);
}
.prsk-hero .prsk-headline {
    font-family: var(--prsk-font-heading);
    font-weight: 700;
    letter-spacing: -0.03em;
    text-align: center;
    color: var(--prsk-ink);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.prsk-hero .prsk-lede {
    text-align: center;
    max-width: 640px;
    margin: -40px auto 0;
}
.prsk-page.prsk-blog .prsk-hero .prsk-headline {
    max-width: 664px;
}
.prsk-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 28px;
    margin: 32px 0 0;
}
.prsk-hero-actions .prsk-btn {
    min-width: 230px;
    height: 54px;
    padding: 0 28px;
}
.prsk-btn {
    border: 0;
    cursor: pointer;
}
.prsk-btn-ghost {
    font-family: var(--prsk-font-body);
    font-size: 18px;
    font-weight: 600;
    color: var(--prsk-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.prsk-btn-ghost:hover,
.prsk-btn-ghost:focus-visible {
    color: var(--prsk-ink);
}
.prsk-hero .prsk-featured {
    align-items: center;
}
.prsk-card-media-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 822 / 538;
    border-radius: var(--prsk-radius);
    background: var(--prsk-mint);
    color: var(--prsk-primary);
    font-family: var(--prsk-font-heading);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    text-decoration: none;
    text-align: center;
    padding: 24px;
}
.prsk-card .prsk-card-media-empty {
    aspect-ratio: 368 / 256;
    min-height: 247px;
    font-size: 22px;
}

/* ---------- FAQ search ---------- */
.prsk-faq-search {
    margin: 0 auto 32px;
    text-align: center;
}
.prsk-faq-empty {
    margin: 16px 0 0;
    color: var(--prsk-muted);
}
.prsk-faq-content .qa-accordion[hidden],
.prsk-faq-search[hidden],
.prsk-faq-empty[hidden] {
    display: none !important;
}

/* ---------- blog filters ---------- */
.prsk-filters {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin: 0 16px 16px;
}
.prsk-search,
.prsk-chips {
    width: 100%;
}
.prsk-search-label {
    display: block;
    font-family: var(--prsk-font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--prsk-primary);
    text-align: center;
    margin: 0 0 10px;
}
.prsk-search-row {
    display: flex;
    gap: 12px;
    max-width: 640px;
    margin: 0 auto;
}
.prsk-search .prsk-search-input,
.prsk-faq-search .prsk-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 54px;
    padding: 0 22px;
    border: 2px solid var(--prsk-line);
    border-radius: var(--prsk-pill);
    background: var(--prsk-surface);
    font-family: var(--prsk-font-body);
    font-size: 18px;
    color: var(--prsk-ink);
}
.prsk-search-input::placeholder {
    color: var(--prsk-muted);
    opacity: 1;
}
.prsk-search .prsk-search-input:focus,
.prsk-faq-search .prsk-search-input:focus {
    outline: none;
    border-color: var(--prsk-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--prsk-accent) 25%, transparent);
}
.prsk-search-row .prsk-btn {
    flex: 0 0 auto;
    height: 54px;
    padding: 0 30px;
}
.prsk-chips ul {
    justify-content: center;
}
.prsk-chips ul,
.prsk-town-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.prsk-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 18px;
    border: 2px solid var(--prsk-line);
    border-radius: var(--prsk-pill);
    background: var(--prsk-surface);
    font-family: var(--prsk-font-heading);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--prsk-primary);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.prsk-chip:hover {
    border-color: var(--prsk-accent);
    color: var(--prsk-ink);
}
.prsk-chip[aria-current="page"] {
    background: var(--prsk-primary);
    border-color: var(--prsk-primary);
    color: #fff;
}
.prsk-chip-count {
    font-family: var(--prsk-font-body);
    font-size: 13px;
    font-weight: 600;
    opacity: 0.7;
}
.prsk-results {
    min-height: 27px;
    margin: 8px 16px 32px;
    font-family: var(--prsk-font-body);
    font-size: 16px;
    color: var(--prsk-muted);
}
.prsk-results a {
    color: var(--prsk-primary);
    font-weight: 600;
    margin-left: 8px;
}
.prsk-chip:focus-visible,
.prsk-search-row .prsk-btn:focus-visible,
.prsk-page a:focus-visible {
    outline: 3px solid var(--prsk-accent);
    outline-offset: 3px;
}
.prsk-listing {
    margin-top: 64px;
}

/* ---------- cards ---------- */
.prsk-card-meta {
    margin: 0;
    font-family: var(--prsk-font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--prsk-muted);
}
.prsk-card-meta a {
    color: var(--prsk-primary);
    text-decoration: none;
}
.prsk-card-meta a:hover {
    text-decoration: underline;
}
.prsk-card .prsk-card-title {
    margin: 0;
}
.prsk-card-media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 368 / 256;
}
.prsk-empty {
    margin: 24px 16px 64px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------- pagination ---------- */
.prsk-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 8px 0 32px;
}
.prsk-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--prsk-pill);
    text-decoration: none;
}
.prsk-page-link.current {
    background: var(--prsk-primary);
    color: #fff !important;
}

/* ---------- area pages ---------- */
.prsk-facts {
    margin: -40px 0 0;
    position: relative;
}
.prsk-facts-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    max-width: 1056px;
    margin: 0 auto;
    background: var(--prsk-surface);
    border: 1px solid var(--prsk-line);
    border-radius: var(--prsk-radius);
    box-shadow: 0 12px 32px -18px rgba(3, 54, 61, 0.25);
    overflow: hidden;
}
.prsk-fact {
    padding: 24px 28px;
    border-left: 1px solid var(--prsk-line);
}
.prsk-fact:first-child {
    border-left: 0;
}
.prsk-fact dt {
    font-family: var(--prsk-font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--prsk-muted);
    margin: 0 0 6px;
}
.prsk-fact dd {
    margin: 0;
    font-family: var(--prsk-font-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--prsk-ink);
}
.prsk-source {
    max-width: 1056px;
    margin: 12px auto 0;
    font-family: var(--prsk-font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--prsk-muted);
}
.prsk-prose-section {
    padding: 72px 0 24px;
}
.prsk-prose .prsk-prose-body {
    gap: 18px;
}
.prsk-prose h2 {
    font-family: var(--prsk-font-heading);
    font-size: 36px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.05em;
    color: var(--prsk-ink);
    margin: 32px 0 0;
}
.prsk-prose .prsk-prose-body > h2:first-child {
    margin-top: 0;
}
.prsk-prose .prsk-prose-body p,
.prsk-prose .prsk-prose-body li {
    font-family: var(--prsk-font-body);
    font-size: 18px;
    line-height: 27px;
    letter-spacing: -0.01em;
    color: var(--prsk-primary);
}
.prsk-prose .prsk-prose-body ul {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.prsk-prose a {
    color: var(--prsk-primary);
    font-weight: 600;
    text-underline-offset: 3px;
}
.prsk-towns {
    margin: 48px 0 24px;
}
.prsk-town-card {
    padding: 28px 24px;
    border: 1px solid var(--prsk-line);
    border-radius: var(--prsk-radius);
    background: var(--prsk-surface);
    height: calc(100% - 48px);
    gap: 12px !important;
}
.prsk-town-time {
    margin: 0;
    font-family: var(--prsk-font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--prsk-muted);
}
.prsk-town-mins {
    font-family: var(--prsk-font-heading);
    font-size: 44px;
    letter-spacing: -0.04em;
    color: var(--prsk-ink);
    margin-right: 2px;
}
.prsk-nearby,
.prsk-others {
    margin: 24px 0 0;
}
.prsk-nearby h2,
.prsk-others h2 {
    margin: 0 0 16px;
}
.prsk-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 0;
    font-family: var(--prsk-font-body);
    font-size: 18px;
    color: var(--prsk-primary);
}
.prsk-table th,
.prsk-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--prsk-line);
    text-align: left;
}
.prsk-table thead th {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--prsk-muted);
}
.prsk-table tbody th {
    font-family: var(--prsk-font-heading);
    font-weight: 700;
    color: var(--prsk-ink);
}
.prsk-visit a {
    color: inherit;
}
.prsk-map {
    margin: 0 0 64px;
}
.prsk-map iframe {
    display: block;
    width: 100%;
    border-radius: 20px;
    background: var(--prsk-mint);
}
.prsk-map-link {
    margin: 12px 0 0;
    font-family: var(--prsk-font-body);
    font-size: 16px;
    font-weight: 600;
}
.prsk-map-link a {
    color: var(--prsk-primary);
}

/* ---------- preview banner ---------- */
.prsk-preview-banner {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 32px);
    padding: 10px 18px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font: 600 14px/1.3 system-ui, sans-serif;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.prsk-preview-banner a {
    color: #ffd666;
    text-decoration: underline;
    white-space: nowrap;
}

/* ---------- small screens ---------- */
@media (max-width: 991.98px) {
    .prsk-hero .prsk-lede {
        margin-top: -30px;
    }
    .prsk-town-card {
        height: auto;
    }
}
@media (max-width: 767.98px) {
    .prsk-listing {
        margin-top: 40px;
    }
    .prsk-filters,
    .prsk-results {
        margin-left: 0;
        margin-right: 0;
    }
    .prsk-search-row .prsk-btn {
        padding: 0 20px;
    }
    .prsk-chips ul {
        /* A centred row that scrolls sideways cuts off its first chips. */
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 -12px;
        padding: 2px 12px 6px;
    }
    .prsk-chips ul::-webkit-scrollbar {
        display: none;
    }
    .prsk-chips .prsk-chip {
        white-space: nowrap;
    }
    .prsk-facts {
        margin-top: -24px;
    }
    .prsk-facts-list {
        grid-template-columns: 1fr;
    }
    .prsk-fact {
        border-left: 0;
        border-top: 1px solid var(--prsk-line);
        padding: 16px 20px;
    }
    .prsk-fact:first-child {
        border-top: 0;
    }
    .prsk-fact dd {
        font-size: 20px;
    }
    .prsk-prose-section {
        padding-top: 48px;
    }
    .prsk-prose h2 {
        font-size: 28px;
    }
    .prsk-hero-actions .prsk-btn {
        width: 100%;
    }
    .prsk-preview-banner {
        bottom: 10px;
        font-size: 12px;
        padding: 8px 14px;
        border-radius: 14px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .prsk-chip {
        transition: none;
    }
}

/* ---------- entrance motion ----------
   The theme animates headings, cards, accordion items and image blocks with AOS fade-up:
   a timed fade (500 to 1500ms, 100px) that starts when the element scrolls into view.
   Kody's review 2026-10-16: the first version here was scroll-driven (it moved only while
   you scrolled), which read as no animation at all next to the theme. This one is timed,
   like AOS, but keeps our invariant, which AOS breaks:

   1. The hidden state (opacity 0, offset) lives ONLY in @keyframes prskRise. No rule sets it.
   2. The animation attaches only under BOTH guards: prefers-reduced-motion: no-preference,
      and the .prsk-motion class, which our footer script puts on <html> only after it has
      run in a real browser with IntersectionObserver. No script (a crawler reading HTML, a
      reader view, a blocked script) means no class, no animation, fully visible content.
   3. Before an element is in view the animation is attached but paused, so its first
      keyframe (hidden) holds; the script adds .prsk-in when it scrolls into view, which
      runs it. Elements already in view on load get .prsk-in straight away, and a timer
      reveals everything after 8s, so nothing can stay hidden.
   4. The offset uses the individual `translate` property, never `transform`, so theme hover
      transforms are untouched. Banners are not animated: the banner H1 is the LCP element.
   Source technique: sites/_shared/motion/motion.css (prRise), timed instead of scroll-linked. */
@media (prefers-reduced-motion: no-preference) {
    .prsk-motion [data-prsk-rise],
    .prsk-motion .prsk-prose .prsk-prose-body > h2,
    .prsk-motion .prsk-faq-content .qa-accordion {
        /* Timing comes from custom properties so a site stylesheet can tune it; the
           fallbacks are the original values (Smiles By Design). */
        animation: prskRise var(--prsk-rise-dur, 1.1s) var(--prsk-rise-ease, cubic-bezier(0.16, 1, 0.3, 1)) both paused;
        animation-delay: calc(var(--prsk-i, 0) * var(--prsk-rise-step, 150ms));
    }
    .prsk-motion .prsk-faq-content .qa-accordion {
        --prsk-rise-from: var(--prsk-rise-from-small, 40px);
        animation-duration: var(--prsk-rise-dur-small, 0.6s);
    }
    .prsk-motion [data-prsk-rise].prsk-in,
    .prsk-motion .prsk-prose .prsk-prose-body > h2.prsk-in,
    .prsk-motion .prsk-faq-content .qa-accordion.prsk-in {
        animation-play-state: running;
    }
    /* Stagger across a grid row: three across on the blog grid, four on the town cards. */
    @media (min-width: 768px) {
        .prsk-motion [data-prsk-stagger] > :nth-child(2n) {
            --prsk-i: 1;
        }
    }
    @media (min-width: 992px) {
        .prsk-motion .prsk-grid[data-prsk-stagger] > :nth-child(3n + 1) {
            --prsk-i: 0;
        }
        .prsk-motion .prsk-grid[data-prsk-stagger] > :nth-child(3n + 2) {
            --prsk-i: 1;
        }
        .prsk-motion .prsk-grid[data-prsk-stagger] > :nth-child(3n) {
            --prsk-i: 2;
        }
        .prsk-motion .prsk-towns [data-prsk-stagger] > :nth-child(4n + 1) {
            --prsk-i: 0;
        }
        .prsk-motion .prsk-towns [data-prsk-stagger] > :nth-child(4n + 2) {
            --prsk-i: 1;
        }
        .prsk-motion .prsk-towns [data-prsk-stagger] > :nth-child(4n + 3) {
            --prsk-i: 2;
        }
        .prsk-motion .prsk-towns [data-prsk-stagger] > :nth-child(4n) {
            --prsk-i: 3;
        }
    }
}

/* Outside the guards on purpose: an unreferenced @keyframes is inert, and this is the only
   place in the file where a hidden state is written. */
@keyframes prskRise {
    from {
        opacity: 0;
        translate: 0 var(--prsk-rise-from, 60px);
    }
}

/* Some themes style the bare <main> element (one centres it as a grid); the kit's main is a plain block. */
.prsk-main {
    display: block;
    min-height: 0;
    place-items: initial;
}