/*
 * Mountainside Dental fixes found by tools/audit.js (2026-10-09).
 *
 * Color rules are scoped to html.ks-a11y-colors: they visibly change brand
 * colors, so they stay in preview (?a11y-colors=1) until approved, then the
 * profile's "colors_live" turns them on for everyone. Ratios are measured
 * before / after; text needs 4.5:1, large text and icons 3:1.
 */

/* ---------- layout (always on) ---------- */

/* Footer "Mountainside Dental <office>" line: room for wider text spacing (1.4.12).
   Width in em so it grows with the text instead of clipping "Rancho Mirage". */
.footer-location-cycle {
    height: 1.6em !important;
    min-width: 12em !important;
}

/* Footer columns were 2px wider than a 320px screen (400% zoom, 1.4.10);
   the old wrapper hid it by clipping. Let the single column shrink. */
@media (max-width: 400px) {
    .msd-footer .footer-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .msd-footer .footer-grid > * {
        min-width: 0;
    }
    /* "Rancho Santa Margarita: 949-368-0193" ran 2px past the edge */
    .msd-footer .footer-locations .location-item {
        flex-wrap: wrap;
        white-space: normal;
    }
}

/* ---------- colors (preview until approved) ---------- */

/* Brand periwinkle gradient behind white text: #758fc4 > #a8b8e0 was 3.2 to 2.0:1.
   Same hue, darker: 5.6 to 4.5:1. */
html.ks-a11y-colors .msd-nav-cta .btn-primary,
html.ks-a11y-colors .work-number {
    background: linear-gradient(135deg, #4a66a6 0%, #5a75b3 100%) !important;
}

/* Periwinkle text on white (nav hover, mega menu hover and buttons, header phone): 3.2 > 5.6:1 */
html.ks-a11y-colors .msd-nav-link:hover,
html.ks-a11y-colors .msd-mega-featured-btn,
html.ks-a11y-colors .msd-mega-list a:hover,
html.ks-a11y-colors .msd-phone-btn {
    color: #4a66a6 !important;
}

/* Grey hero subtitle on the dark photo overlay: about 4.3 > 7:1 */
html.ks-a11y-colors .msd-hero .hero-subtitle {
    color: #cbd5e1 !important;
}

/* "4.9 ★★★★★" rating line and review stars, gold on white: 1.3 to 1.4 > 5.2:1 */
html.ks-a11y-colors .section-subtitle > span[style*="FFD700"],
html.ks-a11y-colors .section-subtitle > span[style*="ffd700"],
html.ks-a11y-colors .testimonial-stars {
    color: #946200 !important;
}

/* Review date / office line under each testimonial: 4.4 > 5.4:1 */
html.ks-a11y-colors .testimonial-author p {
    color: #5f6b7a !important;
}

/* Home "Find Your Location" button: white text on a white section, 1.0 > 6.8:1 */
html.ks-a11y-colors .testimonial-cta .btn-outline {
    color: #0B5F7B !important;
    border-color: #0B5F7B !important;
}
html.ks-a11y-colors .testimonial-cta .btn-outline:hover,
html.ks-a11y-colors .testimonial-cta .btn-outline:focus-visible {
    background: #0B5F7B !important;
    color: #fff !important;
}

/* Membership "Saves $X/year" badge, white on light green: 2.0 > 5.5:1 */
html.ks-a11y-colors .savings-badge {
    background: linear-gradient(135deg, #047857, #0f766e) !important;
}

/* Blog card "by Mountainside Dental" (#888: 3.5:1) and /services/ stat
   labels (#6c7a89 on #f8fafc: 4.2:1) > 5.0:1+ */
html.ks-a11y-colors .blog-card-meta span,
html.ks-a11y-colors .stat-label {
    color: #5f6b7a !important;
}

/* Crossed-out original prices on offer cards: 2.6 > 4.8:1 */
html.ks-a11y-colors .price-original {
    color: #64748b !important;
}

/* Bottom "Schedule your appointment" band: the light end of the teal gradient
   left white text and the outline Call button at 3.3 to 4.4:1 */
html.ks-a11y-colors .msd-appointment {
    background: linear-gradient(135deg, #0B5F7B, #0B6A8A) !important;
}

/* ---------- blog (found by the sitemap crawl, 2026-10-10) ---------- */

/* Links in posts and "related" cards: periwinkle #758fc4 was 3.1 to 3.2:1 > 5.6:1 */
html.ks-a11y-colors .msd-blog-content a,
html.ks-a11y-colors .msd-blog-related-link,
html.ks-a11y-colors .boneloss-fact-value > a {
    color: #4a66a6 !important;
}
html.ks-a11y-colors .msd-blog-content a:hover { color: #34508c !important; }

/* Sidebar post dates (#94a3b8, 2.6:1 > 4.8:1) */
html.ks-a11y-colors .msd-sidebar-post-date { color: #64748b !important; }

/* Sidebar and end-of-post "Schedule" boxes: white text on the light periwinkle
   gradient (2.3 to 2.5:1); same darker brand gradient as the buttons */
html.ks-a11y-colors .msd-blog-cta,
html.ks-a11y-colors .msd-sidebar-cta {
    background: linear-gradient(135deg, #4a66a6 0%, #5a75b3 100%) !important;
}
html.ks-a11y-colors .msd-blog-cta-content p,
html.ks-a11y-colors .msd-sidebar-cta p { color: #fff !important; }

/* Footer trademark line, 50% grey on the dark footer (2.2:1 > 6:1) */
html.ks-a11y-colors .trademark-disclaimer p { color: rgba(203, 213, 225, 0.85) !important; }