/* =============================================================================
   legibility.css - contrast corrections.

   MUST be the LAST stylesheet in _Layout.cshtml, after Headerstyle.css.

   Every rule here traces to a contrast failure measured in a browser against
   the real cascade, not inferred from reading CSS. Each block records the
   ratio before -> after. WCAG 2.1 AA: 4.5:1 normal text, 3:1 large text
   (>=24px, or >=18.66px bold) and non-text/graphical objects.

   Why a separate file: the failures originate in Headerstyle.css - a 248 KB
   minified theme export - and in CDN-hosted Bootstrap. Editing either would be
   lost on the next theme re-export or version bump, and neither is reviewable.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Content links were invisible.                            1.00:1 -> 6.71:1

   Headerstyle.css declares `.elementor-kit-7 a{color:#FFFFFF}`. The class sits
   on div#page (_Layout.cshtml:75), which encloses @RenderBody(), and its
   specificity (0,1,1) beats every generic `a` rule in the cascade. The page
   ground is #fff, so every unclassed link rendered white on white.
   -------------------------------------------------------------------------- */
.elementor-kit-7 a {
	color: #B81117;
}

.elementor-kit-7 a:hover,
.elementor-kit-7 a:focus {
	color: #96060B;
}

/* 1a. Links that legitimately sit on a dark bar keep white.          7.77:1 */
.elementor-kit-7 .ast-above-header-bar a,
.elementor-kit-7 .site-primary-footer-wrap a,
.elementor-kit-7 .site-below-footer-wrap a,
.elementor-kit-7 .ast-footer-copyright a {
	color: #FFFFFF;
}

/* 1b. Anchors styled as buttons keep their white label.    6.71:1 / 5.44:1 */
.elementor-kit-7 a.btn-primary,
.elementor-kit-7 a.btn-danger {
	color: #FFFFFF;
}


/* -----------------------------------------------------------------------------
   2. Modal close "x" was red on red.                          1.10:1 -> 7.46:1

   Headerstyle.css paints every button #FD0000 with white text; Bootstrap's
   `.close` then fades the whole element to opacity .2, giving #fd3333 on
   #fd0000. Restore a plain dark glyph on the modal's white header.
   -------------------------------------------------------------------------- */
.elementor-kit-7 button.close {
	background: transparent;
	color: #555555;
	opacity: 1;
}

.elementor-kit-7 button.close:hover,
.elementor-kit-7 button.close:focus {
	color: #000000;
	opacity: 1;
}


/* -----------------------------------------------------------------------------
   3. Price-card service-name band.                            1.17:1 -> 9.02:1

   `.elementor-kit-7 h3{color:#3F3F3F}` overrode custom.css's intended white on
   the #96060B band, leaving dark grey on dark red.
   -------------------------------------------------------------------------- */
.elementor-kit-7 .pricing-plan h3 {
	color: #FFFFFF;
}


/* -----------------------------------------------------------------------------
   4. Price-card strapline ("HALF PRICE SPECIAL").             2.82:1 -> 6.71:1

   custom.css set rgba(215,215,215,0.7), which composites to #ce9c9d on the
   #B81117 band.
   -------------------------------------------------------------------------- */
.pricing-plan .pricing-plan-price span.pricing-plan-text {
	color: #FFFFFF;
}


/* -----------------------------------------------------------------------------
   5. Buttons.                            4.06:1 -> 6.71:1 / 5.44:1 / 5.11:1

   `.elementor-kit-7 button{background-color:#FD0000}` (0,1,1) overrides the
   brand button colours in color/red.css and custom.css, and #FD0000 is too
   light to carry white text at the 16-18px this theme forces.
   -------------------------------------------------------------------------- */
.elementor-kit-7 .btn-primary {
	background-color: #B81117;
}

.elementor-kit-7 .btn-danger {
	background-color: #C0392B;
}

.elementor-kit-7 button,
.elementor-kit-7 input[type="button"],
.elementor-kit-7 input[type="submit"],
.elementor-kit-7 .elementor-button {
	background-color: #DE0000;
}

.ast-header-button-1 .ast-custom-button {
	background: #DE0000;
}


/* -----------------------------------------------------------------------------
   6. Form placeholders.                        2.85:1 / 2.54:1 -> 5.10:1

   Bootstrap ships #999; Headerstyle.css ships #9CA3AF on bare inputs. Each
   vendor prefix needs its own rule - one invalid selector in a shared list
   would drop the whole block.
   -------------------------------------------------------------------------- */
.form-control::-webkit-input-placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #6E6E6E;
}

.form-control::-moz-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder {
	color: #6E6E6E;
	opacity: 1;
}

.form-control:-ms-input-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	color: #6E6E6E;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
	color: #6E6E6E;
}


/* -----------------------------------------------------------------------------
   7. Bootstrap text utilities on the white page ground.
      .text-muted   4.48:1 -> 5.10:1
      .text-success 2.10:1 -> 5.33:1
      .text-warning 2.85:1 -> 6.84:1
      .text-info    3.15:1 -> 5.52:1
   -------------------------------------------------------------------------- */
.text-muted {
	color: #6E6E6E;
}

.text-success {
	color: #1B7A43;
}

.text-warning {
	color: #8A4B00;
}

.text-info {
	color: #1F6F9B;
}


/* -----------------------------------------------------------------------------
   8. Alert variants.        1.14:1 / 2.10:1 / 2.85:1 / 3.15:1 -> 7:1 or better

   custom.css sets `.alert{color:#FFFFFF}` for every alert, which strands white
   text on the light and bright variants. The three alerts currently in the
   markup all carry the dark red .booking-prep-warning / .alert-danger
   backgrounds and are unaffected; these four variants are latent today.
   -------------------------------------------------------------------------- */
.alert {
	color: #333333;
}

/* The two alerts actually in the markup carry dark red grounds and must keep
   their white text: .booking-prep-warning (EnterJobInfo.cshtml:191,229) and
   .alert-danger (EnterJobInfo.cshtml:251).                          5.44:1

   The ground is declared HERE, alongside the white text, on purpose. These two
   only survived because a separate rule in custom.css painted them dark red -
   white text and dark ground lived in different files and could come apart.
   That is exactly how the sprinkler warning was seen as white-on-light-grey
   (1.05:1) on the #F9F9F9 .form-address panel: the text rule applied and the
   background rule did not. Declaring both together makes that impossible - if
   custom.css's variant rule is ever renamed, removed, or deployed late, this
   file still supplies a ground that the white text is legible on. */
.alert-danger,
.alert.booking-prep-warning {
	background-color: #C0392B;
	color: #FFFFFF;
}

/* Phone links inside the dark-red alerts.                                                 5.44:1
   Without this a tel: link inherits the content-link red (#B81117) from rule 1 and lands on the
   #C0392B alert ground at 1.2:1 - dark red on dark red. The links were added so a customer on a phone
   can tap to call; that is worth nothing if they cannot see them. */
.alert-danger a,
.alert.booking-prep-warning a {
	color: #FFFFFF;
	text-decoration: underline;
}

/* The "no online dates" notice carries BOTH of its colours itself.                        5.44:1

   It is a customer-facing dead end - if it is unreadable the booking is simply lost - so it does not
   borrow its ground from .alert-danger in custom.css the way the sibling "trouble loading dates" alert
   does. That split pairing measures fine here (white on #C0392B), but it is the same shape as the bug
   that rendered the sprinkler warning white-on-grey: text in one file, background in another, and
   nothing forcing them to travel together. Declared together, this cannot come apart. */
.alert.booking-no-dates {
	background-color: #C0392B;
	border: 3px solid #A3271A;
	color: #FFFFFF;
	font-size: 15px;
	line-height: 1.5;
}

.alert.booking-no-dates a,
.alert.booking-no-dates b,
.alert.booking-no-dates strong {
	color: #FFFFFF;
}

/* -----------------------------------------------------------------------------
   Sprinkler-blowout upsell on the confirmation page.        heading 5.44:1, body 12.6:1

   Carries BOTH colours itself, like .booking-no-dates and for the same reason: text in one file and
   its ground in another is how the sprinkler warning ended up white-on-grey. Deliberately a LIGHT
   panel with dark text rather than another red block - the confirmation page already has a red
   heading and a red services band, and a third red slab would read as an error on the one page that
   is purely good news.
   -------------------------------------------------------------------------- */
.sprinkler-ad {
	display: table;             /* table, not flex - this stylesheet also serves IE-era browsers */
	width: 100%;
	background-color: #FFF8F7;  /* barely-there warm tint; the page ground is white */
	border: 1px solid #E8C7C3;
	border-left: 5px solid #C0392B;
	border-radius: 3px;
	color: #333333;
	margin: 30px 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.sprinkler-ad-icon,
.sprinkler-ad-body {
	display: table-cell;
	vertical-align: top;
	padding: 22px 20px;
}

.sprinkler-ad-icon {
	width: 92px;
	padding-right: 0;
	text-align: center;
}

/* The glyph is decorative - the heading carries the message - but WCAG 1.4.11 still wants 3:1 for a
   graphical object, and #1565C0 on this tint is 5.5:1, so it clears it comfortably.
   BLUE, not the panel's red: a red droplet reads as a drop of blood, which is not what a sprinkler
   blowout is selling. The accent bar and heading stay brand red. */
.sprinkler-ad-icon i {
	color: #1565C0;
	font-size: 46px;
	line-height: 1;
}

.sprinkler-ad h3 {
	color: #C0392B;
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
}

.sprinkler-ad p {
	color: #333333;
	font-size: 16px;
	line-height: 1.55;
	margin: 0 0 16px;
}

.sprinkler-ad .sprinkler-ad-note {
	display: block;
	margin-top: 10px;
	color: #6E6E6E;    /* 5.0:1 on the tint - deliberately quieter, still above AA */
	font-size: 14px;
}

/* Stack on phones, and drop the icon rather than let it eat a third of a narrow screen. */
@media (max-width: 600px) {
	.sprinkler-ad,
	.sprinkler-ad-body {
		display: block;
	}

	.sprinkler-ad-icon {
		display: none;
	}

	.sprinkler-ad .btn {
		display: block;
		width: 100%;
	}
}

.alert-default {
	color: #333333;
}

.alert-success {
	color: #08331B;
}

.alert-warning {
	color: #3D1F00;
}

.alert-info {
	color: #0A2A3D;
}


/* -----------------------------------------------------------------------------
   9. Default label.                                           1.92:1 -> 6.58:1

   custom.css raised Bootstrap's #777 background to #BBBBBB but left the white
   label text behind.
   -------------------------------------------------------------------------- */
.label-default {
	color: #333333;
}


/* -----------------------------------------------------------------------------
   10. Decorative icons - WCAG 1.4.11 wants 3:1 for graphical objects.
       .text-highlight i     1.84:1 -> 4.23:1
       .pricing-plan ul li i 2.61:1 / 2.26:1 -> 4.23:1 / 3.79:1
   -------------------------------------------------------------------------- */
.text-highlight i {
	color: #6B6B6B;
}

.pricing-plan ul li i {
	color: #6B6B6B;
}