/**
 * overrides.css — Surgical CSS overrides for ORCounselors
 * Loaded on every page via header.php. Use page-scoped body classes
 * for targeted rules (e.g. .page-provider-page, .page-home, .page-dashboard).
 *
 * Body classes set by header.php:
 *   .page-home, .page-provider, .page-provider-page, .page-dashboard,
 *   .page-match, .page-quickmatch, .page-about, .page-admin, etc.
 */

/* ============================================================
 * HERO & HEADER COLLISION OVERRIDES
 * ------------------------------------------------------------
 * This section manages the `padding-top` of all page heroes 
 * so that they aren't hidden underneath the fixed navigation 
 * header across various devices and viewports.
 * ============================================================ */

/* --- Desktop / Tablet Fallbacks --- */
/* Basic heroes need ~6em (96px) or 4.5rem (72px) to clear the header */

.page-clinic .orc-clinic-hero {
    padding-top: 4.5rem;
}

.page-dashboard.mobile .dashboard-hero .pt-24 {
    padding-top: 0rem;
}

@media (min-width: 640px) {
    .page-dashboard.mobile .dashboard-hero.sm\:pt-28 {
        padding-top: 0rem;
    }
}


.clinic-page-page .orc-clinic-hero {
    padding-top: 1rem;
}

.clinic .orc-clinic-hero {
    padding-top: 5rem;
}


.clinic.mobile .orc-clinic-hero {
    padding-top: 7rem;
}


.page-clinic-page .orc-clinic-hero {
    padding-top: 1rem;
}

.page-clinic-dashboard .orc-clinic-hero {
    padding-top: 2rem;
}

.page-clinic-dashboard .orc-clinic-hero .pt-24 {
    padding-top: 2em;
}

@media (min-width: 768px) {
    .page-clinic-dashboard .md\:pt-28 {
        padding-top: 1rem;
    }
}

.page-provider .orc-provider-hero div.max-w-6xl {
    padding-top: 4.5rem;
}

.page-provider-page .orc-provider-hero {
    padding-top: 0rem;
}

.page-provider .pt-\[92px\],
.page-provider-page .pt-\[92px\] {
    padding-top: 1em !important;
}

.page-dashboard .orc-dashboard-hero {
    padding-top: 2rem;
}

body.page-dashboard .orc-dashboard-hero div.max-w-7xl {
    padding-top: 1.5rem !important;
}

.page-index .orc-clinic-hero {
    padding-top: 5em;
}

.page-index .orc-provider-hero {
    padding-top: 0;
}

/* Explicitly lock index hero padding for 800px+ */
@media (min-width: 800px) {
    .page-index .orc-clinic-hero {
        padding-top: 5em;
    }
}

.page-clinics .clinics-fade-up {
    margin-top: 4.5rem;
    border: none;
}

.page-pricing main {
    padding-top: 4.5rem;
}

/* --- Tailwind Utilities Overrides --- */
/* 
 * The default template uses Tailwind classes like `sm:pt-[100px]` 
 * or `sm:pt-28` directly on the hero wrappers. Since these trigger 
 * at `min-width: 640px` (Tailwind's 'sm' breakpoint), we must use 
 * `!important` to force our custom header-clearance overrides.
 */

@media (min-width: 801px) {

    /* 
     * Large Desktop: Keep dashboard heroes tucked closer to the header (5rem)
     */
    .sm\:pt-28 {
        padding-top: calc(var(--header-height) + .1em) !important;
    }

    .page-dashboard .orc-dashboard-hero .sm\:pt-28,
    .page-dashboard .sm\:pt-28 {
        padding-top: 0 !important;
    }

}

/* Ensure Guide Hero properly clears the dynamic header */

.orc-guide-hero .pt-20 {
    padding-top: calc(var(--header-height) + .1em) !important;
}

@media (min-width: 640px) {
    .orc-guide-hero .sm\:pt-16 {
        padding-top: 1em !important;
    }

    .sm\:justify-items-end {
        justify-items: start;
    }
}

@media (min-width: 481px) and (max-width: 800px) {

    /* 
     * Tablet Dashboard Heroes (481px - 800px)
     * Pad the dashboard out to 7rem so content isn't cramped under the header
     */
    .page-dashboard .orc-dashboard-hero .sm\:pt-28,
    .page-dashboard .sm\:pt-28,
    .sm\:pt-28 {}
}

@media (min-width: 640px) {

    /* 
     * Tablet / Small Desktop: Generic Provider Heroes
     */
    .page-provider .orc-provider-hero .sm\:pt-\[100px\],
    .sm\:pt-\[100px\] {
        padding-top: 1rem !important;
    }
}

/* Ensure avatars never show a border */
.orc-avatar-wrapper img,
.orc-avatar-wrapper .orc-img-container {
    border: none !important;
}

/* --- Mobile Specific Hero Overrides (<= 767px) --- */
/* 
 * Mobile headers are often smaller, but layouts stack vertically.
 * We adjust hero paddings so elements don't get trapped behind the nav.
 */
@media (max-width: 767px) {

    .page-clinic .orc-clinic-hero,
    .clinic-page .orc-clinic-hero,
    .page-clinic.mobile .orc-clinic-hero,
    .page-index.mobile .orc-clinic-hero {
        padding-top: 6.5em;
    }

    .page-clinic-page .orc-clinic-hero {
        padding-top: 2rem;
    }

    .page-clinic-dashboard .orc-clinic-hero {
        padding-top: 1rem;
    }

    .page-clinic-dashboard .pt-24 {
        padding-top: 1rem;
    }



    .page-clinics .clinics-fade-up {
        padding-top: 4.5rem;
        margin-top: 0;
    }


}

@media (max-width: 769px) {
    body.page-dashboard .orc-dashboard-hero div.max-w-7xl {
        padding-top: 6.5rem !important;
    }
}

/* ============================================================
 * COMPONENT & LAYOUT OVERRIDES
 * ============================================================ */

.page-index div.absolute.top-0.right-0 {
    display: none;
}

.page-quickmatch main {
    max-width: 900px;
    margin: 0 auto;
}

.about-me-box {
    background: rgba(255, 255, 255, 0.99);
    padding: 1.5em;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: none;
    border-radius: 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px -2px rgba(0, 0, 0, 0.06), 0 12px 48px -8px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-index .about-me-box {
    background: white;
    padding: 2em;
    border-radius: 1em;
}

#main-header a[href="/"],
#main-header a[href*="://"][class*="font-bold"] {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

body.screen-xs #main-header a[href="/"],
body.screen-xs #main-header a[href*="://"][class*="font-bold"] {
    font-size: 13px !important;
}

.orc-provider-hero .text-sm {
    margin-bottom: 0.33em;
}

body.mobile .orc-provider-credentials-hero {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}


body.page-index.mobile .about-me-box {
    margin-top: 0.8em;
}

body.mobile h1 .ph-chalkboard-teacher {
    display: none;
}

body.mobile p,
body.mobile li {
    zoom: 0.92;
}

body.mobile h1,
body.mobile h2,
body.mobile h3,
body.mobile h4,
body.mobile h5,
body.mobile h6 {
    zoom: 0.88;
}


.page-dashboard .bottom-6 button {
    background: black;
}

/* Hide Breadcrumbs < 800px */
@media (max-width: 799px) {

    .orc-provider-hero nav:has(a[href*="/therapist/"]),
    .orc-clinic-hero nav:has(a[href*="/clinic/"]),
    .orc-dashboard-hero nav,
    .orc-breadcrumb,
    .orc-provider-hero nav,
    .orc-clinic-hero nav {
        display: none !important;
    }
}

/* ============================================================
 * GLOBAL UTILITIES & HELPERS
 * ============================================================ */

/** 
 * Can be applied to any sidebar or element to make it stick 
 * below the fixed header (top-20 / 5rem).
 */
.sticky-sidebar {
    position: sticky !important;
    top: 5rem !important;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 30;
}

/* Helper to hide scrollbars while maintaining scroll functionality */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* ============================================================
 * WYSIWYG Bio Display Styles
 * 
 * Controls how rich-text content from the TinyMCE editor
 * renders on the public-facing provider and clinic pages.
 *
 * Containers:
 *   .clinic-description  — clinic.php (public clinic page)
 *   #bio-container        — provider.php (public provider page)
 * ============================================================ */

/* --- Shared base for both bio containers --- */
.clinic-description,
#bio-container {
    font-size: 15px;
    line-height: 1.8;
    color: #475569;
    /* slate-600 */
}

/* --- Headings --- */
.clinic-description h1,
#bio-container h1,
.clinic-description h2,
#bio-container h2,
.clinic-description h3,
#bio-container h3,
.clinic-description h4,
#bio-container h4,
.clinic-description h5,
#bio-container h5,
.clinic-description h6,
#bio-container h6 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    color: #0f172a;
    /* slate-900 */
    line-height: 1.3;
}

.clinic-description h1,
#bio-container h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin: 1.8em 0 0.8em;
}

.clinic-description h2,
#bio-container h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 1.6em 0 0.8em;
}

.clinic-description h3,
#bio-container h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 1.4em 0 0.6em;
}

.clinic-description h4,
#bio-container h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 1.2em 0 0.5em;
    color: #1e293b;
}

.clinic-description h5,
.clinic-description h6,
#bio-container h5,
#bio-container h6 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1em 0 0.4em;
    color: #334155;
}

/* --- Paragraphs --- */
.clinic-description p,
#bio-container p {
    margin: 0 0 1.25em;
    line-height: 1.8;
}

.clinic-description p:last-child,
#bio-container p:last-child {
    margin-bottom: 0;
}

/* --- Inline formatting --- */
.clinic-description strong,
.clinic-description b,
#bio-container strong,
#bio-container b {
    font-weight: 700;
    color: #1e293b;
    /* slate-800 */
}

.clinic-description em,
.clinic-description i,
#bio-container em,
#bio-container i {
    font-style: italic;
}

.clinic-description u,
#bio-container u {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.clinic-description s,
.clinic-description del,
.clinic-description strike,
#bio-container s,
#bio-container del,
#bio-container strike {
    text-decoration: line-through;
    opacity: 0.7;
}

.clinic-description mark,
#bio-container mark {
    background: #fef9c3;
    /* yellow-100 */
    padding: 0.1em 0.25em;
    border-radius: 2px;
}

.clinic-description small,
#bio-container small {
    font-size: 0.85em;
    color: #64748b;
    /* slate-500 */
}

.clinic-description sub,
#bio-container sub {
    font-size: 0.75em;
    vertical-align: sub;
}

.clinic-description sup,
#bio-container sup {
    font-size: 0.75em;
    vertical-align: super;
}

/* --- Links --- */
.clinic-description a,
#bio-container a {
    color: #059669;
    /* emerald-600 */
    text-decoration: underline;
    text-decoration-color: rgba(5, 150, 105, 0.4);
    text-underline-offset: 3px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.clinic-description a:hover,
#bio-container a:hover {
    color: #047857;
    /* emerald-700 */
    text-decoration-color: #047857;
    background-color: rgba(5, 150, 105, 0.05);
    border-radius: 2px;
}

/* --- Lists --- */
.clinic-description ul,
#bio-container ul {
    list-style-type: disc;
    padding-left: 1.5em;
    margin: 0.5em 0 1em;
}

.clinic-description ol,
#bio-container ol {
    list-style-type: decimal;
    padding-left: 1.5em;
    margin: 0.5em 0 1em;
}

.clinic-description li,
#bio-container li {
    margin-bottom: 0.35em;
    line-height: 1.7;
}

.clinic-description li>ul,
.clinic-description li>ol,
#bio-container li>ul,
#bio-container li>ol {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

/* --- Blockquotes --- */
.clinic-description blockquote,
#bio-container blockquote {
    border-left: 4px solid #10b981;
    /* emerald-500 */
    padding: 1em 1.5em;
    margin: 1.5em 0;
    background: #ecfdf5;
    /* emerald-50 */
    color: #064e3b;
    /* emerald-900 */
    border-radius: 0 12px 12px 0;
    font-style: italic;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 1.1em;
    line-height: 1.7;
}

/* --- Code / Pre --- */
.clinic-description code,
#bio-container code {
    font-family: "SF Mono", Menlo, Monaco, monospace;
    font-size: 0.875em;
    background: #f1f5f9;
    /* slate-100 */
    padding: 0.15em 0.4em;
    border-radius: 4px;
    color: #be123c;
    /* rose-700 */
}

.clinic-description pre,
#bio-container pre {
    font-family: "SF Mono", Menlo, Monaco, monospace;
    font-size: 0.875em;
    background: #1e293b;
    /* slate-800 */
    color: #e2e8f0;
    /* slate-200 */
    padding: 1em 1.25em;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1em 0;
    line-height: 1.6;
}

.clinic-description pre code,
#bio-container pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* --- Tables --- */
.clinic-description table,
#bio-container table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.9em;
}

.clinic-description th,
#bio-container th {
    background: #f8fafc;
    font-weight: 700;
    text-align: left;
    color: #0f172a;
}

.clinic-description th,
.clinic-description td,
#bio-container th,
#bio-container td {
    border: 1px solid #e2e8f0;
    padding: 0.6em 0.8em;
}

.clinic-description tr:nth-child(even),
#bio-container tr:nth-child(even) {
    background: #f8fafc;
}

/* --- Horizontal Rules --- */
.clinic-description hr,
#bio-container hr {
    border: none;
    border-top: 2px solid #e2e8f0;
    margin: 1.5em 0;
}

/* ============================================================
 * "The Sanctuary" Premium Aesthetic Refinements [2026-03-18]
 * ============================================================ */

/* --- Homepage Hero Enhancements --- */
.page-home .orc-home-hero {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 1) 100%),
        /*  url("../assets/images/portland-oregon-nature.webp") center/cover no-repeat
      fixed;
  transition: background 0.5s ease;*/
}

.healing-text {
    font-family: Georgia, "Times New Roman", serif;
    background: linear-gradient(90deg, #065f46, #10b981, #059669);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 4s ease-in-out infinite;
}

@keyframes textShimmer {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.text-oregon-multi {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* --- Footer Refinements --- */
footer {
    border-top: 3px solid #10b981 !important;
    /* Subtle bright green top-border */
}

footer a[href*="clinics"],
footer a[href*="clinic-register"] {
    color: #10b981 !important;
    font-weight: 700;
}

footer .ph-buildings {
    color: #10b981;
}

/* --- Provider & Clinic Page Styles (Image 501 Aesthetic) --- */

/* Professional Bio / About Me Box */
.about-me-box {
    /* emerald-50 */
    border: 1px solid rgba(16, 185, 129, 0.1);
    border-radius: 24px;
    padding: 2rem;
    margin-top: 0rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.about-me-box h2,
.about-me-box h3 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    color: #064e3b;
    /* emerald-900 */
    margin-top: 0 !important;
    border-bottom: 2px solid rgba(16, 185, 129, 0.1);
    padding-bottom: 0.5rem;
}

/* My Approach Cards */
.approach-card {
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.approach-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08);
}

.approach-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #ecfdf5;
    /* emerald-50 */
    color: #059669;
    /* emerald-600 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* Specialty Pills */
.specialty-pill {
    background: #f1f5f9;
    color: #475569;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.specialty-pill:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* CTA Buttons */
.btn-emerald {
    background: #059669;
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 14px;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.2);
}

.btn-emerald:hover {
    background: #047857;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.3);
}

.btn-emerald-outline {
    background: transparent;
    border: 2px solid #059669;
    color: #059669;
    padding: 0.8rem 1.5rem;
    border-radius: 14px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-emerald-outline:hover {
    background: rgba(5, 150, 105, 0.05);
    border-color: #047857;
    color: #047857;
}

/* --- Global Micro-Animations: The Sanctuary --- */

:root {
    --sanctuary-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --sanctuary-breathe: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.sanctuary-fade-in {
    opacity: 0;
    transform: translateY(12px);
    animation: sanctuaryFadeIn 0.8s var(--sanctuary-spring) forwards;
}

@keyframes sanctuaryFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sanctuary-hover {
    transition: all 0.4s var(--sanctuary-spring);
}

.sanctuary-hover:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 20px 40px -10px rgba(6, 78, 59, 0.12);
}

.sanctuary-shimmer {
    position: relative;
    overflow: hidden;
}

.sanctuary-shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    animation: sanctuaryShimmer 3s infinite linear;
    pointer-events: none;
}

@keyframes sanctuaryShimmer {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(300%);
    }
}

.sanctuary-float {
    animation: sanctuaryFloat 6s ease-in-out infinite;
}

@keyframes sanctuaryFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.sanctuary-pulse {
    animation: sanctuaryPulse 4s var(--sanctuary-breathe) infinite;
}

@keyframes sanctuaryPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.02);
    }
}

/* Stagger Helpers */
.stagger-1 {
    animation-delay: 0.1s;
}

.stagger-2 {
    animation-delay: 0.2s;
}

.stagger-3 {
    animation-delay: 0.3s;
}

.stagger-4 {
    animation-delay: 0.4s;
}

/* Fixed Background Fade Effect */
.bg-fade-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(255, 255, 255, 0.8) 50%,
            white 100%);
    pointer-events: none;
    z-index: 1;
}

/* ============================================================
 * CLINICS PAGE (.page-clinics) — Overrides & Enhancements
 * Scoped to body.page-clinics so nothing leaks
 * ============================================================ */

/* Fix serif font for headings */
.page-clinics .font-serif,
.page-clinics h1,
.page-clinics h2,
.page-clinics h3,
.page-clinics h4 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Ensure provider hero maintains base static spacing on desktop/tablet */
.page .orc-provider-hero {
    padding-top: 1em !important;
}

/* Adjust padding when breadcrumb is hidden on mobile */
.mobile.page .orc-provider-hero {
    padding-top: calc(var(--header-height) + 1em) !important;
}

/* Prevent inner tailwind utilities from stacking with the outer hero padding */
.mobile .orc-provider-hero .pt-24,
.mobile .orc-provider-hero .pt-\[104px\] {
    padding-top: 0 !important;
}

/* Re-align Admin Control buttons */
.orc-admin-controls {
    top: 0;
}

/* Fix header collision — clinics page needs no body padding since hero is standalone */
.page-clinics {
    padding-top: 0 !important;
}

/* Hero CTA buttons — scoped to hero section only */
.page-clinics .remotion-section a {
    text-decoration: none;
}

/* Push hero glass card down for breathing room under header */
.page-clinics .clinics-fade-up {
    margin-top: -.9%;
    border: none;
}

.page-clinics.mobile .clinics-fade-up {
    margin-top: 0em;
    border: none;
}

/* Pricing card hover lift */
.page-clinics #pricing .bg-white:hover,
.page-clinics #pricing .bg-navy-900:hover {
    transform: translateY(-4px);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* Feature tile icon bounce on hover */
.page-clinics #features .group:hover .w-14 {
    transform: scale(1.15);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* "Most Popular" badge glow */
.page-clinics .border-emerald-400 {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.12);
}

/* Enterprise dark-card text contrast */
.page-clinics .bg-navy-900 {
    background-color: #0f172a;
}

/* Fix the "Why register" CTA section */
.page-clinics .bg-emerald-50 {
    background-color: #ecfdf5;
}

/* Tooltip-style info labels */
.page-clinics .text-xs.font-bold {
    transition: gap 0.2s ease;
}

/* Mobile fixes */
@media (max-width: 768px) {

    /* Stack pricing cards better on mobile */
    .page-clinics #pricing .grid {
        gap: 1rem;
    }

    /* Ensure Remotion left text panel doesn't overflow */
    .page-clinics .remotion-section .md\:w-\[45\%\] {
        width: 100%;
    }

    /* Full-width CTA buttons on mobile */
    .page-clinics .page-clinics-info .flex-wrap a {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
 * CLINIC DASHBOARD (.page-clinic-dashboard) — Overrides
 * ============================================================ */
.page-clinic-dashboard .font-serif {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

.page-clinic-dashboard .sticky.bottom-0 {
    display: flex !important;
    flex-direction: row-reverse;
    bottom: -25px;
}

.page-clinic-dashboard .absolute.inset-y-0 {
    padding-top: 4em;
}

/* ============================================================
 * CLINIC DIRECTORY (.page-clinic-directory) — Overrides
 * ============================================================ */
.page-clinic-directory .font-serif {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ============================================================
 * CLINIC REGISTER (.page-clinic-register) — Overrides
 * ============================================================ */
.page-clinic-register .font-serif {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ============================================================
 * PRICING PAGE (.page-pricing, .page-clinic-pricing) — Overrides
 * ============================================================ */
.page-pricing .font-serif,
.page-clinic-pricing .font-serif {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ============================================================
 * ABOUT PAGE (.page-about) — Overrides
 * ============================================================ */
.page-about .font-serif {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ============================================================
 * MATCH & QUICKMATCH — Shared Styles
 * Both .page-match and .page-quickmatch
 * ============================================================ */

/* --- Animations --- */
@keyframes card-enter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes search-pulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes dot-bounce {

    0%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-8px);
    }
}

@keyframes bg-float-1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(20px, -30px) scale(1.05);
    }
}

/* --- Score Rings (match + quickmatch) --- */
.match-ring {
    transform: rotate(-90deg);
}

.match-ring-bg {
    fill: white;
    stroke: #e2e8f0;
    stroke-width: 2.5;
}

.match-ring-fill {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Card enter animation --- */
.match-card-enter {
    animation: card-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.qm-fade-up {
    animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.qm-card-enter {
    animation: card-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* --- Search dots (quickmatch) --- */
.search-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #059669;
}

.search-dot:nth-child(1) {
    animation: dot-bounce 1.4s ease-in-out infinite;
}

.search-dot:nth-child(2) {
    animation: dot-bounce 1.4s ease-in-out infinite 0.2s;
}

.search-dot:nth-child(3) {
    animation: dot-bounce 1.4s ease-in-out infinite 0.4s;
}

/* --- Option Buttons (shared base) --- */
.match-option-btn,
.qm-selection-btn {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    outline: none !important;
}

.match-option-btn:active,
.qm-selection-btn:active {
    transform: scale(0.98);
}

/* --- Selected State (works for both) --- */
.match-option-btn.is-selected,
.qm-selection-btn.is-active {
    border-color: transparent !important;
    border-width: 0 !important;
    background-color: #3d5a3e !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(61, 90, 62, 0.3);
}

.match-option-btn.is-selected>span,
.qm-selection-btn.is-active>span {
    color: #fff !important;
}

/* --- CTA / Navigate Buttons (both match + quickmatch) --- */
.match-btn-emerald,
.qm-btn-primary {
    background: #0f172a !important;
    color: white !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.match-btn-emerald:hover:not(:disabled),
.qm-btn-primary:hover:not(:disabled) {
    background: #1e293b !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.3);
}

/* --- Match Results (responsive, no fixed widths) --- */
.match-results-container {
    width: 100%;
    max-width: 42rem;
    /* ~672px, fluid */
    box-sizing: border-box;
}

/* Card link — flexible padding */
.page-match .match-card-enter>a {
    padding: 12px;
}

/* Card photo — responsive sizing */
.page-match .match-card-enter .rounded-full.ring-2 {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
}

/* Card name + credentials — truncate elegantly */
.page-match .match-card-enter h3 {
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Score ring container — never cut off */
.page-match .match-card-enter .match-ring {
    flex-shrink: 0;
}

/* Tag chips — flex, wrap, no cutoff */
.page-match .match-card-enter .flex-wrap {
    flex-wrap: wrap;
}

.page-match .match-card-enter .flex-wrap>span,
.page-match .match-card-enter .flex-wrap>template+span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Score breakdown toggle — responsive text */
.page-match .match-card-enter button[type="button"] {
    font-size: 10px;
    padding: 6px 8px;
}

/* Score breakdown details — tight on mobile */
.page-match .match-card-enter [x-collapse] {
    padding-left: 12px;
    padding-right: 12px;
}

@media (min-width: 640px) {
    .match-results-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .page-match .match-card-enter>a {
        padding: 14px 16px;
    }

    .page-match .match-card-enter .rounded-full.ring-2 {
        width: 3rem;
        height: 3rem;
    }

    .page-match .match-card-enter h3 {
        font-size: 0.875rem;
    }

    .page-match .match-card-enter button[type="button"] {
        font-size: 11px;
        padding: 8px 12px;
    }
}

/* ============================================================
 * CLINIC PAGE (.page-clinic) — Sidebar Layout
 * Sticky sidebar, no content gaps
 * ============================================================ */

/* Desktop: sidebar sticks below header */
@media (min-width: 1024px) {
    .clinic-sidebar {
        position: sticky;
        top: 5rem;
    }
}

/* Mobile: sidebar boxes stack naturally, no sticky */
@media (max-width: 1023px) {
    .clinic-sidebar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* Tablet: sidebar boxes in 2 columns */
@media (min-width: 640px) and (max-width: 1023px) {
    .clinic-sidebar {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Force mobile bounds on therapists page to fix horizontal scrolling issues */
.page-therapists {
    overflow-x: hidden;
    max-width: 100vw;
}

.page-therapists .grid>a.group,
.page-therapists .grid>div {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden !important;
}

/* Force text and flex containers inside teasers to respect bounds */
.page-therapists .grid>a.group>.flex-1 {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    word-break: break-word;
    /* allow long pipeless strings to break */
}

/* QuickMatch CTA Tile Response Refinement */
@media (min-width: 640px) {
    .qm-cta-tile .flex-col.items-start {
        flex-direction: column;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .page-index .qm-cta-tile .flex-col.items-start,
    .page-or-prescribers .qm-cta-tile .flex-col.items-start {
        flex-direction: row;
    }
}