/*
 * Keyboard focus indicator layer.
 * Author: Service Glow
 *
 * Shows a two-tone ring (black outer, white inner) only when the browser reports
 * :focus-visible (keyboard navigation, text inputs). The legacy outline:0 rules in
 * child-theme.min.css stay in place for mouse clicks and programmatic focus; this
 * layer overrides them on specificity and !important.
 */
:root{
  --pd-focus-outer:#000000;
  --pd-focus-inner:#ffffff;
  --pd-focus-width:3px;
  --pd-focus-gap:2px;
  --pd-sticky-top:0px;    /* set by pd-a11y-focus.js */
  --pd-sticky-bottom:0px; /* set by pd-a11y-focus.js */
}
html{
  scroll-padding-top:calc(var(--pd-sticky-top) + 16px);
  scroll-padding-bottom:calc(var(--pd-sticky-bottom) + 16px);
}

/* Base layer: specificity (0,3,2) + !important beats a:focus{outline:0!important} (0,1,1) and .pagination .page-link:focus (0,3,0). */
html body :is(a[href],area[href],button,input:not([type=hidden]),select,textarea,summary,iframe,[tabindex]:not([tabindex="-1"]),[role=button],[role=link],[role=menuitem],[role=tab],[contenteditable=""],[contenteditable=true]):focus-visible{
  outline:var(--pd-focus-width) solid var(--pd-focus-outer)!important;
  outline-offset:var(--pd-focus-gap)!important;
  box-shadow:0 0 0 var(--pd-focus-gap) var(--pd-focus-inner)!important;
}

/* Dark-surface variant: white-filled controls on black or dark panels (tones swapped). */
html body .pd-focus-on-dark :focus-visible,
html body footer#colophon :is(input,select,textarea,.btn):focus-visible,
html body .banner-side-form :is(input,button):focus-visible,
html body #zipcode :is(input,button):focus-visible{
  --pd-focus-outer:#ffffff;
  --pd-focus-inner:#000000;
}

/* Inset variant: controls inside overflow:hidden wrappers (thumbnails, carousels, rounded pills).
   Carousel slide links are clipped by the carousel, so they get the inset ring too. */
html body .pd-focus-inset:focus-visible,
html body .pd-focus-inset :focus-visible,
html body :is(.swiper-pagination-bullet,.swiper-button-next,.swiper-button-prev):focus-visible,
html body :is(.servicesSwiper,.blog-widget-sidebar) .swiper-slide a:focus-visible,
html body .swiper-container .swiper-slide a:focus-visible,
html body .desktop-sticky-footer a.btn:focus-visible{
  outline-offset:calc(-1 * var(--pd-focus-width))!important;
  box-shadow:inset 0 0 0 calc(var(--pd-focus-width) + var(--pd-focus-gap)) var(--pd-focus-inner)!important;
}

/* Media links: anchors that wrap block content (video thumbnails, blog slider cards). As
   inline boxes they have no box of their own to draw a ring on, and their wrappers clip
   overflow. Make them block boxes and draw the inset two-tone ring on an overlay above the
   image, so it is neither clipped nor painted under the thumbnail. */
html body :is(a.video-section,a.blog-slider-slide,a[data-toggle="modal"][data-target^="#youtube_shortcode_iframe-"],.servicesSwiper .swiper-slide > a.home-services-link,.blog-widget-sidebar .swiper-slide .blog-card > a){
  display:block;
  position:relative;
}
html body :is(a.video-section,a.blog-slider-slide,a[data-toggle="modal"][data-target^="#youtube_shortcode_iframe-"],.servicesSwiper .swiper-slide > a.home-services-link,.blog-widget-sidebar .swiper-slide .blog-card > a):focus-visible{
  outline-style:none!important;
  box-shadow:none!important;
}
html body :is(a.video-section,a.blog-slider-slide,a[data-toggle="modal"][data-target^="#youtube_shortcode_iframe-"],.servicesSwiper .swiper-slide > a.home-services-link,.blog-widget-sidebar .swiper-slide .blog-card > a):focus-visible::after{
  content:"";
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  z-index:5;
  pointer-events:none;
  outline:var(--pd-focus-width) solid var(--pd-focus-outer);
  outline-offset:calc(-1 * var(--pd-focus-width));
  box-shadow:inset 0 0 0 calc(var(--pd-focus-width) + var(--pd-focus-gap)) var(--pd-focus-inner);
}

/* Quick Links widget: the inline link wraps a block (.media) and its label is absolutely
   positioned, so the link itself paints no ring. Draw the ring on the .media row instead.
   (Selectors here need specificity above the base layer, (0,3,2).) */
html body .quick_links_col > a[href]:focus-visible{
  outline-style:none!important;
  box-shadow:none!important;
}
html body .quick_links_col > a:focus-visible > .media{
  outline:var(--pd-focus-width) solid var(--pd-focus-outer);
  outline-offset:var(--pd-focus-gap);
  box-shadow:0 0 0 var(--pd-focus-gap) var(--pd-focus-inner);
}

/* Header search: the field is 0px wide until the search icon is clicked, so a keyboard user
   tabbed onto an invisible control. Open it while it has focus (same look as the clicked state). */
html body form#search .transparent-input.search_input:focus{
  width:294px;
  height:45px;
  padding:0 20px;
  right:-8px;
  border:1px solid #d4d7db!important;
  background-color:#d4d7db!important;
  border-radius:25px!important;
}
@media (min-width:900px) and (max-width:1199px){
  html body form#search .transparent-input.search_input:focus{width:382px}
}

/* UberMenu: its own focus rule is (0,4,0) with an !important box-shadow; out-rank it. Inset ring because the menu bar clips outset rings. */
html body .ubermenu.ubermenu-accessible .ubermenu-item .ubermenu-target:focus-visible,
html body .ubermenu .ubermenu-item .ubermenu-target:focus-visible{
  outline:var(--pd-focus-width) solid var(--pd-focus-outer)!important;
  outline-offset:calc(-1 * var(--pd-focus-width))!important;
  box-shadow:inset 0 0 0 calc(var(--pd-focus-width) + var(--pd-focus-gap)) var(--pd-focus-inner)!important;
}

/* Gravity Forms: visually hidden native checkbox/radio, so show the ring on its label. */
html body .gform_wrapper .gfield_checkbox input:focus-visible + label,
html body .gform_wrapper .gfield_radio input:focus-visible + label,
html body .gform_wrapper .gchoice input:focus-visible + label{
  outline:var(--pd-focus-width) solid var(--pd-focus-outer)!important;
  outline-offset:var(--pd-focus-gap)!important;
  box-shadow:0 0 0 var(--pd-focus-gap) var(--pd-focus-inner)!important;
}

/* Show the ring at once: keep theme link transitions (e.g. transition:all .3s) for other
   properties, but leave outline and box-shadow out of them while the ring is shown. */
html body :focus-visible,
html body .gform_wrapper :is(.gfield_checkbox,.gfield_radio,.gchoice) input:focus-visible + label{
  transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,transform!important;
}

/* Mobile fixed bottom bar: room at page end so the last controls can scroll clear of it. */
@media (max-width:1199.98px){
  body{padding-bottom:calc(var(--pd-sticky-bottom) + 8px)}
}

/* Commercial CTA bar (.desktop-sticky-footer): on desktop, room at page end as above; below
   1200px, sit above the mobile bottom bar instead of under it (--pd-mobile-bar-h from the JS). */
@media (min-width:1200px){
  html.pd-has-bottom-bar body{padding-bottom:calc(var(--pd-sticky-bottom) + 8px)}
}
@media (max-width:1199.98px){
  html body .desktop-sticky-footer{bottom:var(--pd-mobile-bar-h,63px);left:0;right:0}
  /* The theme's 240px button min-width pushed the second CTA past a 390px screen edge, and the
     fixed 60px height with overflow:hidden cut the wrapped labels; let the buttons grow instead. */
  html body .desktop-sticky-footer a{min-width:0;flex:1 1 50%;height:auto;min-height:60px;padding:8px 6px}
}

/* Forced colors (Windows High Contrast): system colors on every variant. Custom properties
   with !important out-rank the variant declarations above regardless of selector weight. */
@media (forced-colors:active){
  html body :focus-visible,
  html body :focus-visible + label{
    --pd-focus-outer:CanvasText!important;
    --pd-focus-inner:Canvas!important;
  }
  html body :focus-visible{
    outline:3px solid CanvasText!important;
    outline-offset:2px!important;
    box-shadow:none!important;
  }
  html body .quick_links_col > a:focus-visible > .media,
  html body :is(a.video-section,a.blog-slider-slide,a[data-toggle="modal"][data-target^="#youtube_shortcode_iframe-"],.servicesSwiper .swiper-slide > a.home-services-link,.blog-widget-sidebar .swiper-slide .blog-card > a):focus-visible::after{
    outline:3px solid CanvasText!important;
    box-shadow:none!important;
  }
}

/* BEGIN outset card rings: services cards and sidebar blog cards.
   Their text runs to the card edge, so the inset band covered the first glyphs and the
   "READ MORE" label. Draw the ring just outside the card instead (2px white + 3px black),
   and while a card has keyboard focus let the carousel paint exactly that much past its
   clip edge. The ring itself covers that strip, so neighbouring slides never show through.
   Browsers without overflow-clip-margin keep the inset ring above. No size or layout change. */
@supports (overflow-clip-margin:1px) and selector(:has(*)){
  /* Always clip (never a scroll container), so focusing an off-screen card cannot leave a
     hidden scroll offset behind; the slides move by transform, which clip does not affect. */
  html body .swiper-container:is(.servicesSwiper,.blog-widget-sidebar){
    overflow:clip!important;
    min-width:0; /* as with overflow:hidden, so a flex item does not grow to its content */
  }
  html body .swiper-container:is(.servicesSwiper,.blog-widget-sidebar):has(:is(.swiper-slide > a.home-services-link,.swiper-slide .blog-card > a):focus-visible){
    overflow-clip-margin:5px; /* = --pd-focus-width + --pd-focus-gap; calc() is not honoured here */
  }
  /* From 992px the sidebar card is 4px narrower than its slide (.pr-lg-1), so the ring ends
     1px past the carousel edge: clip the right side there so the next slide cannot show. */
  @media (min-width:992px){
    html body .swiper-container.blog-widget-sidebar:has(.swiper-slide .blog-card > a:focus-visible){
      clip-path:inset(-5px -1px -5px -5px);
    }
  }
  html body :is(.servicesSwiper .swiper-slide > a.home-services-link,.blog-widget-sidebar .swiper-slide .blog-card > a):focus-visible::after{
    outline-offset:var(--pd-focus-gap);
    box-shadow:0 0 0 var(--pd-focus-gap) var(--pd-focus-inner);
  }
}
/* END outset card rings. */

/* Footer privacy-choices trigger: native button styled like the former span.
   :where() keeps this reset at zero specificity so the existing type, colour
   and display classes on the element still apply. Author-origin rules still
   override user-agent button defaults. */
:where(html body .pd-privacy-choices) {
	background: none;
	border: 0;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
	font: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	-webkit-appearance: none;
	appearance: none;
}

/* Colour and appearance for the footer privacy-choices button.
   A child-theme rule groups button with ::placeholder and sets
   color: #000000 !important, which beats .bc_color_secondary on the
   black copyright bar (1:1 contrast). [type="button"] also sets
   -webkit-appearance: button, which beats the zero-specificity :where()
   reset. This rule restores those two properties only.
   Colour is #ffffff, the computed colour of the sibling copyright-bar
   links (.bc_footer_copyright_bar a { color: #ffffff !important }),
   not #A1854A from .bc_color_secondary, which those links do not
   compute to. :hover and :focus-visible stay #ffffff (21:1 against
   the #000000 bar, above 4.5:1). color: inherit is not used.
   A later wp_head inline style (button_style) sets button and
   button:hover to background-color: #00395e, after this sheet.
   background: none !important and background-color: transparent
   !important on this rule, including :hover and :focus-visible,
   keep the control clear of that navy fill. The focus ring is
   unchanged. */
html body button.pd-privacy-choices {
	color: #ffffff !important;
	background: none !important;
	background-color: transparent !important;
	-webkit-appearance: none;
	appearance: none;
}
html body button.pd-privacy-choices:hover,
html body button.pd-privacy-choices:focus-visible {
	color: #ffffff !important;
	background: none !important;
	background-color: transparent !important;
}