/*
 * Accessibility styles. Loaded after css/main.min.css (see part/part-header.php),
 * so it is not touched by the Gulp purge/minify build.
 */

/* ---- Skip link (part/part-nav.php) ---- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 2147483000;
  padding: 12px 20px;
  background: #000;
  color: #fff;
  font: 700 16px/1.2 'Open Sans', Arial, sans-serif;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
}
a.skip-link,
a.skip-link:focus,
a.skip-link:hover {
  transition: none; /* main.min.css sets a { transition: .4s }; appear instantly */
}
.skip-link:focus,
.skip-link:hover {
  top: 0;
  color: #fff;
  text-decoration: underline;
}

/* The skip link moves focus to <main>; it is not an interactive control, so no ring. */
#main-content:focus {
  outline: 0;
}

/* ---- Visible keyboard focus ----
 * main.min.css removes outlines (a:focus, .form-control:focus, .navbar-toggle:focus,
 * #tipue_search_input, ...). :focus-visible puts them back for keyboard users only.
 * Selectors mirror the ones that remove the outline so the later rule wins.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.navbar-toggle:focus-visible,
.dropdown-toggle:focus-visible,
.flexslider a:focus-visible,
#tipue_search_input:focus-visible,
#footer-search-input:focus-visible,
#header-main .navbar-nav > li > a:focus-visible,
#header-main .dropdown-menu li a:focus-visible {
  outline: 3px solid #0b57d0;
  outline-offset: 2px;
}

/* Red footer bar and dark photo headers: the blue ring would not contrast, use white. */
.footer-bottom a:focus-visible,
.page_header a:focus-visible,
.page_header button:focus-visible {
  outline-color: #fff;
}

/* ---- Footer search (id differs from #tipue_search_input so ids stay unique on search.php) ---- */
#footer-search-input {
  font: 13px/1.6 'open sans', sans-serif;
  color: #333;
  padding: 12px 12px 12px 40px;
  width: 170px;
  border: 1px solid #e2e2e2;
  border-radius: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  margin: 0;
  background: #fff url('../tipuesearch/img/search.png') no-repeat 15px 15px;
}

/* ---- Radio groups (fieldset + legend), laid out inline like the old label + radios ---- */
fieldset.radio-group {
  min-width: 0;
  border: 0;
}
.form-group > fieldset.radio-group {
  margin: 8px 0 0;
  padding: 0;
}
legend.group-label {
  float: left;
  width: auto;
  margin: 0 10px 0 0;
  padding: 0;
  border: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.42857143;
  color: #333;
}

/* ---- Heading levels ----
 * Headings were renumbered so each page has one <h1> and no skipped levels.
 * A renumbered heading (or a page-header subtitle turned into <p>) carries .as-hN = its
 * ORIGINAL level. The rules below are clones of every hN rule in main.min.css with hN
 * replaced by :is(h1,...,div):where(.as-hN), which has exactly the specificity of hN, so
 * the element keeps its original look: ties with rules aimed at the new tag go to this
 * later file, and class utilities (.logo-font2, .space30, ...) still win as before.
 */
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h1) {margin:.67em 0;font-size:2em}
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h1),
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2),
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3),
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h4),
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h5) {font-family:inherit;font-weight:500;line-height:1.1;color:inherit}
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h1) .small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h1) small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2) .small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2) small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) .small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h4) .small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h4) small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h5) .small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h5) small {font-weight:400;line-height:1;color:#777}
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h1),
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2),
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) {margin-top:20px;margin-bottom:10px}
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h1) .small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h1) small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2) .small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2) small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) .small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) small {font-size:65%}
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h4),
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h5) {margin-top:10px;margin-bottom:10px}
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h4) .small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h4) small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h5) .small,
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h5) small {font-size:75%}
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h1) {font-size:36px}
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2) {font-size:30px}
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) {font-size:24px}
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h4) {font-size:18px}
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h5) {font-size:14px}
.b-settings-panel :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h5) {margin-left:3px;margin-bottom:13px;text-align:left;font-size:13px}
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h1),
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2),
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3),
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h4),
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h5) {font-family:Montserrat,'Helvetica Neue',Arial,sans-serif;color:#000}
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h5) {text-transform:capitalize}
#header-main .yamm :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) i {color:#8dc73f}
.section-about :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) {font-size:25px;margin:15px 0 20px}
.section-services2 :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) {font-size:25px;margin:0 0 20px}
.ss2-content :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h4) {font-size:16px;text-transform:uppercase;margin:30px 0 13px}
.page_header :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h1) {font-family:Dancing+Script;margin:20px 0;color:#fff;font-size:80px;line-height:60px}
.page_header :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2) {font-family:Raleway;margin:40px 0;color:#fff;font-size:56px;letter-spacing:-1px;line-height:60px;font-weight:400}
.page_header :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) {font-family:Raleway;margin:20px 0;color:#fff;font-size:40px;letter-spacing:-1px;line-height:48px;font-weight:300}
.page_header :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) span {background:#8dc73f;font-size:13px;letter-spacing:2px;padding:4px 6px;display:table;font-weight:700;line-height:16px;text-transform:uppercase;margin-bottom:15px}
.page_header :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h4) {font-family:Raleway;margin:0;color:#fff;font-size:34px;letter-spacing:-1px;line-height:48px;font-weight:300}
.error-404 :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2) {font-size:200px;text-shadow:0 4px 0 #dcdcdc;margin:-44px 0 0;font-family:Open Sans;font-weight:300}
.service-content :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2) {font-size:15px;text-transform:uppercase}
.dollar-content :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2) {font-size:15px;text-transform:uppercase}
.safety-content :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2) {font-size:15px;text-transform:uppercase}
.green-content :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2) {font-size:15px;text-transform:uppercase}
.project-info :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2) {margin:0;font-size:13px;text-transform:uppercase}
#portfolio-section :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h1) {font-size:70px;margin:0}
#portfolio-section :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) {font-size:50px;margin:0}
:is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2).title {font-size:40px}
#errorpage .page_header :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) {font-size:29px;text-transform:uppercase;color:#fff;display:table;margin:0 auto;position:relative;top:30px;padding:10px 20px;letter-spacing:14px}
footer :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h4) {font-size:15px;text-transform:uppercase;margin:0 0 25px;color:#c00;position:relative}
#portfolio-home.folio-boxed-4col .project-info :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2) {font-size:15px;color:#000;letter-spacing:1px;transition:.4s}
#portfolio-home.folio-boxed-4col .project-info :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2):hover {color:#8dc73f;transition:.4s}
.fs-info :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) {font-size:17px;font-weight:400;letter-spacing:2px;text-transform:uppercase;margin-top:0;margin-bottom:15px}
@media screen and (max-width:767px) {
#errorpage .page_header :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) {font-size:16px;letter-spacing:2px}
}
@media screen and (max-width:767px) {
.error-404 :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2) {font-size:100px}
}
#header-main .yamm :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) i {color:#ff0104}
.page_header :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h3) span {background:#ff0104}
#portfolio-home.folio-boxed-4col .project-info :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
div):where(.as-h2):hover {color:#ff0104}

/* Context rules in main.min.css that target the NEW tag (h3) and outrank the clones above:
 * .section-about h3, .section-services2 h3, #portfolio-section h3. Restore the base h4/h5
 * size and margins for headings that were h4/h5 originally. Same specificity, later file wins. */
.section-about :is(h2,h3):where(.as-h4),
.section-services2 :is(h2,h3):where(.as-h4),
#portfolio-section :is(h2,h3):where(.as-h4) {
  font-size: 18px;
  margin: 10px 0;
}
.section-about :is(h2,h3):where(.as-h5),
.section-services2 :is(h2,h3):where(.as-h5),
#portfolio-section :is(h2,h3):where(.as-h5) {
  font-size: 14px;
  margin: 10px 0;
}
.section-services2 .ss2-content :is(h2,h3):where(.as-h4) {
  font-size: 16px;
  margin: 30px 0 13px;
}

/* ---- Colour contrast (WCAG 1.4.3) ----
 * The theme accent #ff0104 is 3.99:1 on white. #d60000 is the closest same-hue red that
 * passes 4.5:1 on white (5.44:1) and on the #efefef footer (4.72:1); white text on it is
 * 5.44:1. Every main.min.css rule that uses #ff0104 is repeated here with the new value
 * (same selectors, so this later file wins).
 */
a {
  color:#d60000;
}
#header-main .dropdown-menu li a:hover {
  color:#d60000!important;
}
#header-main .yamm-fw .dropdown-menu li a:hover {
  color:#d60000!important;
}
#header-main .navbar-default .navbar-nav>.open>a,
#header-main .navbar-default .navbar-nav>.open>a:focus,
#header-main .navbar-default .navbar-nav>.open>a:hover,
#header-main .navbar-nav>li>a:hover {
  color:#d60000!important;
}
#header-main .dropdown-menu,
#header-main .yamm .dropdown.yamm-fw .dropdown-menu {
  border-top-color:#d60000!important;
}
#header-main .yamm h3 i,
#header-main .yamm-fw .dropdown-menu li a:before {
  color:#d60000;
}
#header-main .navbar-nav>li>a:hover .arrow-up {
  color:#d60000;
}
#header-main .navbar-nav>li>a.active .arrow-up {
  color:#d60000;
}
.ss2-content i {
  color:#d60000;
}
.button:hover {
  background:#d60000!important;
}
.button.one {
  background:#d60000;
}
.page_header h3 span {
  background:#d60000;
}
.cat-list li a:hover {
  color:#d60000;
}
.service-content span a {
  color:#d60000;
}
.service-content:hover span {
  background:#d60000;
}
.service-content span:after {
  background:#d60000;
}
.service-content:hover span:after {
  background:#d60000;
}
.page_nav a:hover {
  background:#d60000;
}
#portfolio-home.folio-boxed-4col .project-info h2:hover {
  color:#d60000;
}
.navbar-default .navbar-nav>li.active>a {
  color:#d60000!important;
}
.text-primary {
  color:#d60000!important;
}

/* COVID banner label: #6495ed on #f5f5dc was 2.69:1, #2f5bb7 is 5.75:1 */
.covid-19 strong {
  color: #2f5bb7;
}

/* ---- Reduced motion (WCAG 2.3.3 / user preference) ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* parallax page headers: stop the fixed-background effect */
  [class*="page_header_parallax"] {
    background-attachment: scroll !important;
  }
}

/* Owl carousel prev/next made focusable in js/a11y.js */
.owl-buttons [role="button"]:focus-visible {
  outline: 3px solid #0b57d0;
  outline-offset: 2px;
}

/* Bootstrap .text-muted #777 is 4.48:1 on white; #737373 is 4.74:1 */
.text-muted {
  color: #737373;
}

/* ---- Theme fix (not accessibility) ----
 * main.min.css sets .page_header h1 { font-family: Dancing+Script }, which is not a valid
 * font name, so page titles fell back to a default font. */
.page_header h1,
.page_header :is(h1,h2,h3,h4,h5,h6,p,div):where(.as-h1) {
  font-family: 'Dancing Script', cursive;
}

/* Secure forms (js/forms.js): reserve the reCAPTCHA widget's height so the lazy render doesn't shift the layout */
form[data-secure-form] .g-recaptcha { min-height: 78px; }
.form-success:focus { outline: 2px solid currentColor; outline-offset: 2px; }
.form-error,
.form-success { padding: 12px 15px; margin: 10px 0 15px; border: 1px solid; border-radius: 4px; font-weight: 600; }
.form-error { color: #a94442; background: #f2dede; border-color: #ebccd1; }
.form-success { color: #2b542c; background: #dff0d8; border-color: #d6e9c6; }