/* NT 2026-09-30 ortho-podology.com stand 8082: readability after the accent change gold #c9a961 -> teal #166574
   (hover #0f4c57). The lawyer modules only got the colour replacement; what became hard to read is fixed here:
   1) teal text on dark backgrounds (top bar, footer, side panel, hero, dark blocks) -> light teal of the same hue;
   2) dark text #1f1f1f on teal buttons -> white.
   Enqueued by inc/mod/nt-ortho-color.php after all css/mod/nt-*.css. Rollback: delete both files. */

:root {
	--nt-ortho-accent: #166574;
	--nt-ortho-accent-dark: #0f4c57;
	--nt-ortho-on-dark: #5cb8c7;       /* 7.2:1 on #1f1f1f */
	--nt-ortho-on-dark-hover: #8fd0db; /* 9.6:1 on #1f1f1f */
}

/* ---------- 1. Teal text on dark backgrounds ---------- */

/* 1a. Top bar of the header (phone, e-mail, current item of the top menu) */
html body .nt-topbar .nt-tb-phone a,
html body .nt-topbar .nt-tb-mail a,
html body #masthead [id^="menu-top-bar"] .current-menu-item > a,
html body #masthead [id^="menu-top-bar"] .current-menu-ancestor > a,
html body #masthead [id^="menu-top-bar"] .current_page_item > a {
	color: var(--nt-ortho-on-dark) !important;
}
html body .nt-topbar .nt-tb-phone a:hover,
html body .nt-topbar .nt-tb-mail a:hover,
html body #masthead [id^="menu-top-bar"] a:hover {
	color: var(--nt-ortho-on-dark-hover) !important;
}

/* 1b. Page title block over the photo (breadcrumbs) */
html body #masthead .elementor-element-4a1f220 a:hover {
	color: var(--nt-ortho-on-dark-hover) !important;
}

/* 1c. Footer: phones, e-mail, accent words of the headings, link hover */
html body #colophon a.nt-fphone,
html body #colophon .elementor-element.elementor-element-e2c6b32 a,
html body #colophon .elementor-element.elementor-element-f72e3e2 a,
html body #colophon .elementor-element.elementor-element-3292d93 span[style*="166574"],
html body #colophon .elementor-element.elementor-element-79bc068 .constructum-heading-content,
html body #colophon .elementor-element.elementor-element-79bc068 span[style*="166574"] {
	color: var(--nt-ortho-on-dark) !important;
}
html body #colophon .elementor-element.elementor-element-3292d93 a,
html body #colophon .elementor-element.elementor-element-3292d93 a span {
	color: var(--nt-ortho-on-dark) !important;
}
html body #colophon a:not(.elementor-button):not(.elementor-social-icon):not(.wp-block-button__link):hover,
html body #colophon a:not(.elementor-button):not(.elementor-social-icon):not(.wp-block-button__link):hover span,
html body #colophon a.nt-fphone:hover {
	color: var(--nt-ortho-on-dark-hover) !important;
}
/* the white card of the footer (form and text, container 54fbcfd) keeps the dark teal hover */
html body #colophon .elementor-element.elementor-element-54fbcfd a:not(.elementor-button):hover,
html body #colophon .elementor-element.elementor-element-54fbcfd a:not(.elementor-button):hover span {
	color: var(--nt-ortho-accent-dark) !important;
}

/* 1d. Side panel (contacts widget and its outline button) */
html body .slide-sidebar .constructum-contacts-widget-field a {
	color: var(--nt-ortho-on-dark) !important;
}
html body .slide-sidebar a.wp-block-button__link {
	color: var(--nt-ortho-on-dark) !important;
	border-color: var(--nt-ortho-on-dark) !important;
}
html body .slide-sidebar a:hover,
html body .slide-sidebar a.wp-block-button__link:hover {
	color: var(--nt-ortho-on-dark-hover) !important;
	border-color: var(--nt-ortho-on-dark-hover) !important;
}

/* 1e. Hero slider over the photo: accent words of the heading, hover of the outline buttons */
html body .content-item span[style*="166574"],
html body .content-item span[style*="166574"] .word-inner {
	color: var(--nt-ortho-on-dark) !important;
}
html body .nt-hero-btns a.nt-hero-btn:not(.nt-hero-btn--main):hover {
	color: var(--nt-ortho-on-dark-hover) !important;
	border-color: var(--nt-ortho-on-dark-hover) !important;
}

/* 1f. Dark block of the home page: accent words of the heading, outline button */
html body .elementor-element.elementor-element-16c28da .constructum-heading-content {
	color: var(--nt-ortho-on-dark) !important;
}
html body .elementor-element.elementor-element-6819b68 a.constructum-button {
	color: var(--nt-ortho-on-dark) !important;
	background-image: linear-gradient(0deg, var(--nt-ortho-on-dark) 0%, var(--nt-ortho-on-dark) 100%) !important;
}
html body .elementor-element.elementor-element-6819b68 a.constructum-button:hover {
	color: var(--nt-ortho-on-dark-hover) !important;
}

/* 1g. Blog sidebar CTA (dark box): phone */
html body .nt-bc-cta .nt-bc-cta-phone a {
	color: var(--nt-ortho-on-dark) !important;
}
html body .nt-bc-cta .nt-bc-cta-phone a:hover {
	color: var(--nt-ortho-on-dark-hover) !important;
}

/* ---------- 2. Dark text on teal buttons -> white ---------- */

html body .nt-hero-btns a.nt-hero-btn.nt-hero-btn--main,
html body .nt-hero-btns a.nt-hero-btn.nt-hero-btn--main:hover,
html body div.wpforms-container .wpforms-form button.wpforms-submit,
html body div.wpforms-container .wpforms-form button.wpforms-submit:hover,
html body #masthead .elementor-element.elementor-element-56b4a99 .elementor-button:hover,
html body #masthead .elementor-element.elementor-element-56b4a99 .elementor-button:hover .elementor-button-text,
html body .sidebar .widget .nt-bc-cta .wp-block-button a.wp-block-button__link,
html body .sidebar .widget .nt-bc-cta .wp-block-button a.wp-block-button__link:hover,
html body .nt-tails-cta-mobile .nt-bc-cta .wp-block-button a.wp-block-button__link,
html body .nt-tails-cta-mobile .nt-bc-cta .wp-block-button a.wp-block-button__link:hover,
html body .elementor-element.elementor-element-d7ddaad a.constructum-button,
html body .elementor-element.elementor-element-d7ddaad a.constructum-button:hover,
html body .post-more-button a.constructum-button,
html body .post-more-button a.constructum-button:hover,
html body.single-post .post-content > .wp-block-buttons > .wp-block-button:first-child > a.wp-block-button__link,
html body.single-post .post-content > .wp-block-buttons > .wp-block-button:first-child > a.wp-block-button__link:hover {
	color: #fff !important;
}
html body.single-post .post-content > .wp-block-buttons > .wp-block-button:first-child > a.wp-block-button__link:hover {
	background-color: var(--nt-ortho-accent-dark) !important;
}

/* floating contact widget: icons were dark on the gold circle */
html body .nt-cw {
	--nt-cw-fg: #fff;
}