/* Shining Star Teal Color Override - MAXIMUM SPECIFICITY */

/* CSS Variables - Override at root level */
:root {
    --priColor: #00897B !important;
    --secColor: #E0F2F1 !important;
}

html:root {
    --priColor: #00897B !important;
    --secColor: #E0F2F1 !important;
}

/* ALL pink text colors to teal - Maximum specificity */
h2 small,
h1 small,
h3 small,
h4 small,
.h1_title small,
h2.h1_title small,
body h2 small,
body .h1_title small,
.h1_hdng,
body .h1_hdng {
    color: #00897B !important;
}

/* Main content area headings */
.btm2_info h2 small,
.btm1_info h2 small,
.btm1_info2 h2 small,
#bottom1 h2 small,
#bottom2 h2 small {
    color: #00897B !important;
}

/* Buttons - ALL variations */
.btn,
a.btn,
button.btn,
.form_btn,
body .btn,
body a.btn,
#submit_formmessage button[type=submit] {
    background: #00897B !important;
    background-color: #00897B !important;
    border-color: #00897B !important;
}

.btn:hover,
a.btn:hover,
button.btn:hover,
.form_btn:hover {
    background: #00695C !important;
    background-color: #00695C !important;
}

/* Sidebar2 - Set an Appointment box */
aside.sidebar2,
.sidebar2,
body aside.sidebar2,
body .sidebar2 {
    background: #00897B !important;
    background-color: #00897B !important;
}

.sidebar2 h2,
.sidebar2 h2 small,
.sidebar2 p,
.sidebar2 a {
    color: #fff !important;
}

/* Page titles */
.page_title,
body .page_title,
div.page_title {
    background: #00897B !important;
    background-color: #00897B !important;
}

/* Footer sections */
#footer .footer_top,
.footer_top,
footer .footer_top,
footer#footer .footer_top,
body #footer .footer_top {
    background: #00897B !important;
    background-color: #00897B !important;
}

.contact_info h2,
.contact_info h2 small,
.footer_nav h2,
.footer_nav h2 small {
    color: #fff !important;
}

/* Links and accents */
#breadcrumbs span a {
    color: #00897B !important;
}

/* FAQ elements */
.faq h6 {
    background: #E0F2F1 !important;
}

.faq h6:before {
    background: #00897B !important;
}

.sign.active {
    color: #00897B !important;
}

/* Cookie notice */
.cn-button,
#cn-accept-cookie {
    background-color: #00897B !important;
}

/* Mark/highlight elements */
mark {
    background-color: transparent !important;
    color: inherit !important;
}

.contact_info mark,
.contact_info1 mark,
.contact_info2 mark {
    background-color: transparent !important;
    color: inherit !important;
}

/* Override ANY inline pink styles */
[style*="#FF0077"],
[style*="#f07"],
[style*="rgb(255, 0, 119)"],
[style*="#e91e63"],
[style*="rgb(233, 30, 99)"] {
    background-color: #00897B !important;
}

/* Bottom sections */
#bottom1,
#bottom2 {
    background: #f5f5f5 !important;
}

/* Override inline pink color styles */
[style*="color: #FF0077"],
[style*="color:#FF0077"],
[style*="color: #f07"],
[style*="color:#f07"] {
    color: #00897B !important;
}

[style*="background: #FF0077"],
[style*="background:#FF0077"],
[style*="background-color: #FF0077"],
[style*="background-color:#FF0077"],
[style*="background: #f07"],
[style*="background:#f07"],
[style*="background-color: #f07"],
[style*="background-color:#f07"] {
    background: #00897B !important;
    background-color: #00897B !important;
}

/* Service cards hover states - change pink to teal */
.btm1_info2 a:hover,
.btm1_info a:hover,
.btm1_info:hover,
.btm1_info2:hover,
.service-card:hover,
.card:hover {
    background: #00897B !important;
    background-color: #00897B !important;
}

/* Card overlay on hover - comprehensive */
.btm1_info:hover::before,
.btm1_info2:hover::before,
.btm1_info:hover::after,
.btm1_info2:hover::after,
.btm1_info a:hover::before,
.btm1_info a:hover::after,
.btm1_info2 a:hover::before,
.btm1_info2 a:hover::after {
    background: #00897B !important;
    background-color: #00897B !important;
}

/* Override any filter or opacity effects that might show pink */
.btm1_info:hover,
.btm1_info2:hover,
.btm1_info a:hover,
.btm1_info2 a:hover {
    filter: none !important;
}

/* Service cards in bottom section */
.btm1_infos .btm1_info:hover,
.btm1_infos .btm1_info2:hover {
    background: transparent !important;
}

.btm1_infos .btm1_info a:hover,
.btm1_infos .btm1_info2 a:hover {
    background: #00897B !important;
    background-color: #00897B !important;
}

/* Homepage service cards (mid_box) - fix pink hover overlay */
/* The overlay is controlled by .mid_inner:hover:before */
/* This uses mid-overlay2.png which we've already changed to teal */
/* The image file handles the gradient effect - no CSS override needed */

/* Ensure all buttons match the "Set an Appointment" style */
.btn,
a.btn,
button.btn {
    background: #00897B !important;
    background-color: #00897B !important;
    color: #fff !important;
    border: none !important;
}

.btn:hover,
a.btn:hover,
button.btn:hover {
    background: #00695C !important;
    background-color: #00695C !important;
}

/* Button arrows - exact copy of .sidebar2 a styling */
.btn span,
a.btn span,
button.btn span {
    width: 50px !important;
    display: flex !important;
    justify-content: start !important;
    align-items: center !important;
    background: #fff !important;
    border-radius: 50% !important;
    aspect-ratio: 1/1 !important;
    position: absolute !important;
    left: 3px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Arrow icon - exact copy of .sidebar2 a:after styling with vertical adjustment */
.btn span:after,
a.btn span:after,
button.btn span:after {
    content: url(wp-content/themes/harmonyroseke439/images/arrow2.png) !important;
    display: flex !important;
    position: relative !important;
    left: -7px !important;
    top: 10px !important;
}

/* Fix pink banner on Testimonials and other pages */
.page_title {
    background: #00897B !important;
    background-color: #00897B !important;
}

.page_title:before {
    background: #00897B !important;
}

/* Fix pink border on testimonial cards */
.comment,
.commentlist li,
blockquote,
.testimonial,
.comment-body,
.comment-content {
    border-color: #00897B !important;
}

.comment:before,
.commentlist li:before,
blockquote:before {
    border-color: #00897B !important;
    background: #00897B !important;
}

/* Fix pink border surrounding testimonial form area */
#respond,
.comment-respond,
.respond,
#commentform,
.comment-form {
    border-color: #00897B !important;
}

#respond:before,
#respond:after,
.comment-respond:before,
.comment-respond:after {
    border-color: #00897B !important;
    background: #00897B !important;
}

/* Fix dotted/dashed pink lines (separators) */
hr,
.separator,
.divider {
    border-color: #00897B !important;
    background-color: #00897B !important;
}

/* Override any dotted or dashed borders */
*[style*="border"][style*="dotted"],
*[style*="border"][style*="dashed"] {
    border-color: #00897B !important;
}

/* Mobile-only: Hide Quick Links in footer */
@media only screen and (max-width: 768px) {
    .footer_nav,
    .footer_btm_con .footer_nav {
        display: none !important;
    }
}

/* Testimonial form elements */
#commentform input[type="text"],
#commentform input[type="email"],
#commentform textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    border-color: #ddd !important;
}

#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform textarea:focus,
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus {
    border-color: #00897B !important;
    outline-color: #00897B !important;
}

#commentform input[type="submit"],
#commentform button[type="submit"],
.comment-form input[type="submit"],
.comment-form button[type="submit"],
input[value="Post Comment"],
button[type="submit"] {
    background: #00897B !important;
    background-color: #00897B !important;
    border-color: #00897B !important;
}

#commentform input[type="submit"]:hover,
#commentform button[type="submit"]:hover,
.comment-form input[type="submit"]:hover,
.comment-form button[type="submit"]:hover {
    background: #00695C !important;
    background-color: #00695C !important;
}