/* ==========================================================================
   SUDAIR PHARMA — TEXT ON GREEN AND ON IMAGERY
   Single rule: anything sitting on brand green or on a photograph is white.

   This file is the last stylesheet loaded, and colour declarations carry
   `!important`. That is deliberate and narrow. Elementor writes per-element
   colour into each page's own stylesheet at a specificity no theme rule can
   reach (`.elementor-86 .elementor-element-abc123 .elementor-heading-title`),
   which is what previously left near-black headings on brand green measuring
   2.08:1. Every fix attempted at normal specificity lost.

   Scope is limited to the dark-surface classes listed below, so this cannot
   leak onto light sections.
   ========================================================================== */

/* Every surface that is green or photographic */
.sud-surface-brand,
.sud-banner,
.sud-band,
.sud-footer,
.sud-h-cta,
.sud-h-dark,
.sud-on-dark {
	color: #fff;
}

/* --------------------------------------------------------------------------
   Headings, body copy, list text, icon-box text, counters, links
   -------------------------------------------------------------------------- */

.sud-surface-brand :is(h1, h2, h3, h4, h5, h6),
.sud-banner        :is(h1, h2, h3, h4, h5, h6),
.sud-band          :is(h1, h2, h3, h4, h5, h6),
.sud-footer        :is(h1, h2, h3, h4, h5, h6),
.sud-h-cta         :is(h1, h2, h3, h4, h5, h6),
.sud-h-dark        :is(h1, h2, h3, h4, h5, h6),
.sud-on-dark       :is(h1, h2, h3, h4, h5, h6),

.sud-surface-brand .elementor-heading-title,
.sud-banner        .elementor-heading-title,
.sud-band          .elementor-heading-title,
.sud-footer        .elementor-heading-title,
.sud-h-cta         .elementor-heading-title,
.sud-h-dark        .elementor-heading-title,
.sud-on-dark       .elementor-heading-title,

.sud-surface-brand .elementor-icon-box-title,
.sud-banner        .elementor-icon-box-title,
.sud-band          .elementor-icon-box-title,
.sud-footer        .elementor-icon-box-title,
.sud-h-cta         .elementor-icon-box-title,
.sud-h-dark        .elementor-icon-box-title,
.sud-on-dark       .elementor-icon-box-title,

.sud-surface-brand .elementor-counter-number-wrapper,
.sud-band          .elementor-counter-number-wrapper,
.sud-h-dark        .elementor-counter-number-wrapper,
.sud-on-dark       .elementor-counter-number-wrapper {
	color: #fff !important;
}

/* Body-weight text. Held at full white rather than a tint: at 15px on brand
   green a 78% white lands near 4.4:1, and the brief is white. */
.sud-surface-brand :is(p, li, span, div, td, dd, dt),
.sud-banner        :is(p, li, span, div, td, dd, dt),
.sud-band          :is(p, li, span, div, td, dd, dt),
.sud-h-cta         :is(p, li, span, div, td, dd, dt),
.sud-h-dark        :is(p, li, span, div, td, dd, dt),
.sud-on-dark       :is(p, li, span, div, td, dd, dt),

.sud-surface-brand .elementor-icon-box-description,
.sud-banner        .elementor-icon-box-description,
.sud-band          .elementor-icon-box-description,
.sud-h-cta         .elementor-icon-box-description,
.sud-h-dark        .elementor-icon-box-description,
.sud-on-dark       .elementor-icon-box-description,

.sud-surface-brand .elementor-icon-list-text,
.sud-h-cta         .elementor-icon-list-text,
.sud-h-dark        .elementor-icon-list-text,
.sud-on-dark       .elementor-icon-list-text,

.sud-surface-brand .elementor-counter-title,
.sud-band          .elementor-counter-title,
.sud-h-dark        .elementor-counter-title,
.sud-on-dark       .elementor-counter-title {
	color: #fff !important;
}

/* Eyebrows and breadcrumbs — white too, per the rule. Hierarchy is carried by
   size and weight instead of hue. */
.sud-surface-brand .sud-eyebrow,
.sud-banner        .sud-eyebrow,
.sud-band          .sud-eyebrow,
.sud-h-cta         .sud-eyebrow,
.sud-h-dark        .sud-eyebrow,
.sud-on-dark       .sud-eyebrow,
/* The eyebrow renders a heading widget inside the wrapper, so the inner
   element must be named too — matching only the wrapper loses to any rule
   that reaches the child. */
.sud-surface-brand .sud-eyebrow .elementor-heading-title,
.sud-banner        .sud-eyebrow .elementor-heading-title,
.sud-band          .sud-eyebrow .elementor-heading-title,
.sud-h-cta         .sud-eyebrow .elementor-heading-title,
.sud-h-dark        .sud-eyebrow .elementor-heading-title,
.sud-on-dark       .sud-eyebrow .elementor-heading-title,
.sud-banner        .sud-breadcrumb,
.sud-banner        .sud-breadcrumb p,
.sud-banner        .sud-breadcrumb a {
	color: #fff !important;
}

/* The eyebrow's leading rule stays bright green — a graphic, not text, so it is
   free to use a colour that could never carry type. */
.sud-surface-brand .sud-eyebrow::before,
.sud-banner .sud-eyebrow::before,
.sud-band .sud-eyebrow::before,
.sud-h-cta .sud-eyebrow::before,
.sud-h-dark .sud-eyebrow::before {
	background: var(--sud-green-500);
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

.sud-surface-brand a:not(.elementor-button),
.sud-banner        a:not(.elementor-button),
.sud-band          a:not(.elementor-button),
.sud-footer        a:not(.elementor-button),
.sud-h-cta         a:not(.elementor-button),
.sud-h-dark        a:not(.elementor-button),
.sud-on-dark       a:not(.elementor-button) {
	color: #fff !important;
	text-decoration-color: rgba(255, 255, 255, .5);
}

.sud-surface-brand a:not(.elementor-button):hover,
.sud-banner        a:not(.elementor-button):hover,
.sud-band          a:not(.elementor-button):hover,
.sud-footer        a:not(.elementor-button):hover,
.sud-h-cta         a:not(.elementor-button):hover,
.sud-h-dark        a:not(.elementor-button):hover,
.sud-on-dark       a:not(.elementor-button):hover {
	color: #fff !important;
	text-decoration-color: #fff;
}

/* Footer link list needs a visible resting state distinct from headings */
.sud-footer .elementor-icon-list-text,
.sud-footer .sud-footer-blurb p,
.sud-footer .sud-footer-legal p {
	color: rgba(255, 255, 255, .86) !important;
}

.sud-footer .elementor-icon-list-item:hover .elementor-icon-list-text {
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   Buttons on dark surfaces — inverted, so the label is green on white
   -------------------------------------------------------------------------- */

.sud-surface-brand .elementor-button,
.sud-band          .elementor-button,
.sud-h-cta         .elementor-button,
.sud-h-dark        .elementor-button,
.sud-on-dark       .elementor-button,
.sud-surface-brand .sud-btn .elementor-button {
	background-color: #fff !important;
	border-color: #fff !important;
	color: var(--sud-green-700) !important;
}

.sud-surface-brand .elementor-button:hover,
.sud-band          .elementor-button:hover,
.sud-h-cta         .elementor-button:hover,
.sud-h-dark        .elementor-button:hover,
.sud-on-dark       .elementor-button:hover {
	background-color: var(--sud-green-500) !important;
	border-color: var(--sud-green-500) !important;
	color: #00301F !important;
}

/* Ghost variant stays outlined in white */
.sud-surface-brand .sud-btn--ghost .elementor-button,
.sud-h-cta .sud-btn--ghost .elementor-button {
	background-color: transparent !important;
	border-color: rgba(255, 255, 255, .55) !important;
	color: #fff !important;
}

.sud-surface-brand .sud-btn--ghost .elementor-button:hover,
.sud-h-cta .sud-btn--ghost .elementor-button:hover {
	background-color: rgba(255, 255, 255, .14) !important;
	border-color: #fff !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   Icons
   -------------------------------------------------------------------------- */

.sud-surface-brand .elementor-icon,
.sud-band          .elementor-icon,
.sud-h-cta         .elementor-icon,
.sud-h-dark        .elementor-icon,
.sud-on-dark       .elementor-icon {
	color: #fff !important;
	background-color: rgba(255, 255, 255, .14) !important;
}

.sud-surface-brand .elementor-icon-list-icon,
.sud-h-cta .elementor-icon-list-icon,
.sud-h-dark .elementor-icon-list-icon,
.sud-footer .elementor-icon-list-icon,
.sud-on-dark .elementor-icon-list-icon {
	color: var(--sud-green-500) !important;   /* graphic, not text */
	background: transparent !important;
}

/* Focus rings must remain visible against green */
.sud-surface-brand :focus-visible,
.sud-banner :focus-visible,
.sud-band :focus-visible,
.sud-footer :focus-visible,
.sud-h-cta :focus-visible,
.sud-h-dark :focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}