/* ==========================================================================
   Accessibility remediation — WCAG 2.1 Level AA
   Loaded LAST (after style.css, responsive.css and the theme file) so these
   rules override the template defaults without touching the minified CSS.
   Each block notes the Success Criterion it addresses.
   ========================================================================== */

/* --- 1.4.3 Contrast (Minimum) ---------------------------------------------
   Default body text was #8b8b8b (~3.4:1 on #fff). Darkened to #6b6b6b
   (~5.2:1 on #fff) to clear the 4.5:1 minimum for normal-size text. ------- */
body { color: #6b6b6b; }

/* --- 2.4.7 Focus Visible --------------------------------------------------
   The template set `outline:0` on every link and button, removing all
   keyboard focus indicators. Restore a strong, always-visible focus ring.
   `!important` guarantees we beat the template's reset regardless of order. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[tabindex]:focus,
.navbar-toggle:focus,
.scroll-to-top:focus {
  outline: 3px solid #1d6fdb !important;
  outline-offset: 2px !important;
}

/* Brighter ring for the dark-background regions (top bar, footer, off-canvas)
   so the indicator keeps >=3:1 against its surroundings (1.4.11). */
.top-bar-area a:focus,    .top-bar-area button:focus,
.footer-area a:focus,     .footer-area button:focus,
.footer-bottom-area a:focus, .footer-bottom-area button:focus,
.hidden-bar a:focus,      .hidden-bar button:focus {
  outline-color: #ffd23f !important;
}

/* The skip-link target is a wrapper; don't draw a box around the whole page. */
#main-content:focus { outline: none !important; }

/* --- 2.4.1 Bypass Blocks --------------------------------------------------
   "Skip to main content" link — visually hidden until it receives focus. -- */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-120%);
  z-index: 100000;
  background: #0a2722;
  color: #fff;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  border-radius: 0 0 6px 0;
  transition: transform 150ms ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #ffd23f !important;
  outline-offset: 2px !important;
}

/* --- Screen-reader-only utility (visually hidden, exposed to assistive tech) */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- 1.3.1 / 2.4.6 Heading semantics --------------------------------------
   Headings were re-leveled to give every page one <h1> and a logical
   outline. These rules preserve the original visual design for the demoted
   / promoted elements. ---------------------------------------------------- */

/* Section titles demoted from <h1> to <h2> keep the large display size. */
.sec-title h2 {
  position: relative;
  display: block;
  margin: 10px 0 0;
  color: #303030;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  text-transform: none;
  font-family: 'Poppins', sans-serif;
}

/* Service "eyebrow" demoted from <h3> to a paragraph keeps the accent look.
   Colour darkened from #28aae7 (2.6:1) to #0b6e93 (~5.1:1) for 1.4.3. */
.sec-title .sec-eyebrow {
  position: relative;
  display: block;
  margin: 0;
  color: #0b6e93;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  text-transform: capitalize;
  font-family: 'Poppins', sans-serif;
}

/* Breadcrumb banner title promoted from <h2> to <h1> keeps its banner size. */
.breadcrumb-area .title h1 {
  color: #fff;
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
  text-transform: capitalize;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

/* Fact-counter numbers changed from <h1> to a non-heading <div>. */
.fact-counter-area .single-fact-counter .counter-number {
  position: relative;
  display: block;
  margin: 0;
  color: #303030;
  font-family: 'Poppins', sans-serif;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
}
.fact-counter-area .single-fact-counter .counter-number span { color: #303030; }

/* --- 1.1.1 / 2.4.4 — decorative read-more arrow ---------------------------
   The empty <a href="#"><span class="flaticon-next"></span></a> arrows were
   replaced by a decorative <span>; keep the glyph styling it used to get
   from `.readmore a span:before`. ----------------------------------------- */
.readmore > .flaticon-next { display: block; }
.readmore > .flaticon-next:before {
  display: block;
  line-height: 58px;
  font-size: 22px;
  color: #323232;
  border-radius: 50%;
}

/* --- 2.1.1 Keyboard -------------------------------------------------------
   The nav dropdown only opened on hover. Open it on keyboard focus too. --- */
.main-menu .navigation > li:focus-within > ul {
  top: 100%;
  opacity: 1;
  visibility: visible;
}

/* --- 1.4.3 Contrast — accent text on light backgrounds --------------------
   Testimonial location text was #28aae7 on #f5f5f5 (~2.6:1). ------------- */
.single-testimonial-item .name span { color: #0b6e93; }

/* Brand cyan #28aae7 (~2.6:1 on white) used as TEXT or a control icon on light
   backgrounds. Darkened to #0b6e93 (~5:1) / #0a2722 only where it actually
   renders on these pages. (Most other cyan uses sit on dark backgrounds, are
   decorative icons, or belong to template components this site doesn't use.) */

/* Dropdown sub-menu item — hover & keyboard-focus state (white sub-menu) */
.main-menu.style1 .navigation > li > ul > li:hover > a,
.main-menu.style1 .navigation > li > ul > li > a:focus { color: #0b6e93; }

/* "More About Us" / "Book an Appointment" buttons: the cyan/teal hover failed
   on both the white page and the cyan footer box. Near-black + underline
   passes on both and adds a non-colour hover cue. */
.btn-two:hover,
.btn-two:focus { color: #0a2722; text-decoration: underline; }

/* Back-to-top control: arrow icon (default) and its hover fill, on the page */
.scroll-to-top { color: #0b6e93; }
.scroll-to-top:hover { background: #0b6e93; border-color: #0b6e93; color: #fff; }

/* --- 2.4.3 Focus Order / 1.3.1 — the off-canvas "hidden bar" --------------
   Dead UI: no opener element exists for it, and it is parked off-screen
   (right:-420px), NOT display:none — so its placeholder content ("50% Offer",
   "5 Years Warranty", newsletter, Contact Info) and its headings stayed in the
   accessibility tree AND the keyboard tab order on every page. Remove it. -- */
.hidden-bar { display: none !important; }

/* --- 1.3.1 — footer section headings re-leveled <h3> -> <h2> (they are
   top-level page sections, so a lone <h1> no longer jumps straight to h3).
   Original h3 appearance preserved. -------------------------------------- */
.single-footer-widget .title h2,
.single-footer-contact-box .text-holder h2 {
  color: #fff;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
}
.single-footer-widget .title h2 { text-transform: capitalize; }
.single-footer-contact-box .text-holder h2 { margin: 0 0 9px; }

/* --- Author / byline card: an attribution, not a section heading (was <h3>) */
.author-box .text-box .author-name {
  display: block;
  margin: 0 0 3px;
  color: #303030;
  font-size: 18px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
}

/* Contact sidebar field labels kept at their original size after the
   h5 -> h3 re-level that removed the h2->h5 heading-order skip. */
.state .text h3 { font-size: 16px; line-height: 20px; margin: 0 0 10px; font-weight: 600; }

/* --- 1.4.3 Contrast — footer credit bar (dark #0a2722 background) ----------
   On the home footer the credit text/links inherited the light-grey body
   colour; set explicit light values that pass on the dark background. ---- */
.footer-bottom-area { color: #c7d3d1; }
.footer-bottom-area a { color: #ffffff; text-decoration: underline; }
.footer-bottom-area a:hover,
.footer-bottom-area a:focus { color: #7fd1f3; }

/* --- Accessible contact form (replaces the old third-party iframe form) ----
   Visible labels, >=3:1 input borders (1.4.11), text + icon error states so
   errors aren't signalled by colour alone (1.4.1), and a honeypot that is
   removed from view and from assistive tech / keyboard. ------------------- */
.contact-form { margin-top: 10px; }
.contact-form .form-row { margin: 0 0 20px; }
.contact-form label {
  display: block;
  margin: 0 0 6px;
  color: #303030;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}
.contact-form label .optional { color: #6b6b6b; font-weight: 400; }
.contact-form .req { color: #b3261e; text-decoration: none; border: 0; font-weight: 700; }
.contact-form .form-required-note { margin: 0 0 20px; color: #6b6b6b; font-size: 14px; }
.contact-form .field-help { margin: 6px 0 0; color: #6b6b6b; font-size: 14px; }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  display: block;
  width: 100%;
  max-width: 560px;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.5;
  color: #303030;
  background: #fff;
  border: 1px solid #6b6b6b;          /* ~5:1 on white — exceeds the 3:1 UI minimum */
  border-radius: 4px;
  font-family: 'Rubik', sans-serif;
}
.contact-form textarea { max-width: 100%; resize: vertical; }
.contact-form input.captcha-input { max-width: 160px; }

.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
  border-color: #b3261e;
  border-width: 2px;
}

.contact-form .field-error {
  margin: 6px 0 0;
  color: #b3261e;                     /* ~6.5:1 on white */
  font-weight: 600;
  font-size: 14px;
}
.contact-form .field-error::before {
  content: "\26A0";                   /* warning glyph — a redundant, non-colour cue */
  margin-right: 6px;
}

.contact-form .contact-submit {
  display: inline-block;
  margin-top: 6px;
  padding: 12px 30px;
  background: #0a2722;                 /* white-on-dark-green ~13:1 */
  color: #fff;
  border: 2px solid #0a2722;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: background 300ms ease, border-color 300ms ease;
}
.contact-form .contact-submit:hover,
.contact-form .contact-submit:focus {
  background: #14463b;
  border-color: #14463b;
  color: #fff;
}

/* Error summary shown above the form on a failed submit */
.form-errors {
  margin: 0 0 26px;
  padding: 16px 20px;
  background: #fdecea;
  border: 2px solid #b3261e;
  border-radius: 6px;
  color: #5f1a15;
}
.form-errors h2 { margin: 0 0 10px; color: #b3261e; font-size: 18px; }
.form-errors ul { margin: 0; padding-left: 20px; }
.form-errors li { margin: 0 0 4px; }
.form-errors a { color: #5f1a15; text-decoration: underline; }
.form-errors a:hover, .form-errors a:focus { color: #b3261e; }

/* Honeypot — kept in the DOM for bots, removed from view and from AT/keyboard */
.hp-field {
  position: absolute !important;
  left: -5000px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- 2.3.3 Animation from Interactions / prefers-reduced-motion -----------
   Respect users who ask for reduced motion: neutralise the auto-animations
   but keep WOW-animated content visible (WOW hides it until it animates). - */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .wow {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}

/* Nav dropdown disclosure: styled as a link but exposed to AT as a button */
.main-menu .navigation li.dropdown > a[role="button"] { cursor: pointer; }