/* safetk.tech additions to the old theme's CSS: only what the theme's plugins and Font Awesome used to supply. */

html { scroll-behavior: smooth; }

/* Icons are inline SVG now (Font Awesome loaded from a CDN before). Same box as Font Awesome's. */
.svg-inline--fa { display: inline-block; height: 1em; width: 1em; overflow: visible; vertical-align: -0.125em; fill: currentColor; }
.js-open-nav { cursor: pointer; }

/* Sliders (site.js builds the bxSlider wrapper markup; this is the track). Without the script, the first slide shows. */
.bx-viewport { overflow: hidden; position: relative; width: 100%; }
.subheadslides, .slide-boxes { display: flex; flex-wrap: nowrap; will-change: transform; }
.subheadslides > * { flex: 0 0 100%; }
.slide-boxes > * { flex: 0 0 170px; }
.bullet-boxes .bx-wrapper { margin-bottom: 2.5rem; }
.bullet-boxes .bx-wrapper .bx-pager { position: absolute; bottom: -1.75rem; }
.bx-wrapper .bx-pager.bx-default-pager a {
  text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; border-radius: 5px;
}

/* The contact form (PBI 8349; was Fluent Forms): the same fields, labels and look as the WordPress form. */
.stk-form { margin: 0; font-family: 'Manrope', sans-serif; }
.stk-row { display: flex; gap: 0 1rem; }
.stk-row > .stk-field { flex: 1 1 0; min-width: 0; }
.stk-field { margin-bottom: 1.25rem; }
.stk-field label { display: block; margin-bottom: 0.4rem; color: #1e1f21; font-size: 0.875rem; font-weight: 600; }
.stk-req { color: #f56c6c; margin-left: 0.3rem; }
.stk-field input, .stk-field textarea {
  display: block; width: 100%; padding: 0.45rem 0.75rem; border: 1px solid #dadbdd; border-radius: 0.4rem;
  background: #fff; color: #1e1f21; font-family: inherit; font-size: 0.9375rem; line-height: 1.5;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.stk-field input::placeholder, .stk-field textarea::placeholder { color: #868e96; }
.stk-field input:focus, .stk-field textarea:focus { border-color: #1a7efb; box-shadow: 0 0 0 0.15rem rgba(26, 126, 251, 0.2); outline: 0; }
.stk-field input[aria-invalid="true"] { border-color: #f56c6c; }
.stk-err { margin: 0.3rem 0 0; color: #d63031; font-size: 0.8125rem; }
/* The honeypot: off-screen, out of the tab order and hidden from screen readers. Only bots fill it in. */
.stk-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.stk-turnstile { min-height: 0; margin: 0.25rem 0 0.5rem; }
.stk-form button[type="submit"] {
  position: relative; margin-top: 0.75rem; padding: 0.55rem 1rem; border: 1px solid #000; border-radius: 0.3rem;
  background-color: #bc0000; color: #fff; font-size: 0.9375rem; font-weight: 500;
}
.stk-form button[type="submit"]:hover, .stk-form button[type="submit"]:focus-visible { background-color: #fff; border-color: #1a7efb; color: #1a7efb; }
.stk-form button[type="submit"][disabled] { opacity: 0.6; cursor: progress; }
.stk-status { margin: 1rem 0 0; font-size: 0.9375rem; }
.stk-status.is-error { color: #d63031; }
.stk-status.is-ok { color: #1e1f21; }
.stk-note { margin: 0.5rem 0 0; font-size: 0.8125rem; color: #555; }
.stk-thanks h4 { margin-top: 0; }

/* Phone width: the contact columns stack instead of squeezing, and so do the name fields. */
@media only screen and (max-width: 767px) {
  .contact-section .col-5, .contact-section .col-7 { flex: 0 0 100%; max-width: 100%; }
  .contact-form-holder { margin-top: 1.5rem; }
}
@media only screen and (max-width: 420px) {
  .stk-row { display: block; }
}

/* The blog grid's page numbers (was the WP-PageNavi plugin's stylesheet). */
.wp-pagenavi { clear: both; text-align: center; padding: 1.5rem 0 3rem; font-family: 'Manrope', sans-serif; }
.wp-pagenavi a, .wp-pagenavi span { display: inline-block; margin: 0 0.25rem; padding: 0.3rem 0.7rem; border: 1px solid #ccc; border-radius: 0.25rem; color: #444; }
.wp-pagenavi span.current { background: #b40f09; border-color: #b40f09; color: #fff; }
.wp-pagenavi .sfwppa-pages:first-child { border: 0; }