/* ra-main-d.css - extracted from webhelper-riverarts-org/templates/html-header.twig (Twig->PHP conversion 2026-10). Order matters - see ra_enqueue_scripts(). */

.st-gallery a {
    display: inline-block;
}
.st-gallery a {
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0;
    border: 0;
    padding: 2px;
}

div.smc
{
	display: none;
}


.lg-backdrop {
  background-color: #ffffff;

}


.lg-toolbar .lg-icon {
  color: #000000;
  }

	.lg-actions .lg-next, .lg-actions .lg-prev {

	    color: #000000;

	}
	.lg-outer * {

	     box-sizing: border-box;
			 border: 0;

	}

div#lg-counter
{
	color: #000000;
}
/* end infoblock spinners */

.wh-gallery-wrapper {
  display: block;
  clear: both;
  margin: 0 auto;
  text-align: center;
  padding: 20px 0 20px 0;
}
div.whz-listwrapper {
 display: block;
 text-align: center;
 margin: 0 auto;
}

li.whz-category {
    display: inline-block;
    /* background-color: #f2e7d5; */
    float: none;
    /* min-width: 200px; */
    text-align: center;
    margin: 0;
    border: 0;
    vertical-align: top;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border: 2px solid #000000;
    transition: all 500ms;
      }

.whz-artists li.whz-category {
    
    }

li.whz-category:hover {
  border: 2px solid rgba(255, 211, 91, 1); 
  transition: all 500ms;
}

.whz-border {
  display: block;
  width: 340px;
  min-height: 480px;
  position: relative;
  padding: 20px;
  background-color: #ffffff;
  }

.whz-img {
  display: block;
  position: absolute;
  bottom: 20px;
  width: 300px;
  height: 300px;
  }



@media (max-width: 768px){

.whz-border {
    width: 240px;
    min-height: 360px;
    }
 

.whz-img {
  width: 200px;
  height: 200px;
  }

li.whz-category {
margin-left: 5px;
margin-right: 5px;
}
}

.whz-capname,
.whz-captext,
.whz-caplink {
  display: block;
  text-align: left;
  }

.whz-capname {
font-size: 24px;
line-height: 28px;
color: #000000;
}

.whz-captext,
.whz-captext p
 {
  font-size: 16px;
  line-height: 20px;
  color: #000000;
}

.whz-caplink {
  font-size: 14px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #000000;
  }

li.whz-category a {
  text-decoration: none;
}

.whz-long-dash {
  display: inline-block; /* Allows setting width and height */
  width: 20px; /* Adjust this value for your desired length */
  height: 2px; /* Adjust this for the dash thickness */
  background-color: #ffd35b; /* Or any color you prefer */
  vertical-align: middle; /* Aligns the dash vertically with the text */
  margin: 0 5px; /* Adds a little space around the dash */
}

/* wh-start event card date/time - shared by the Events page, Past Events page
   and the attached-event cards on single Projects (partials/event-cards.twig).
   These lived only in the page-level head blocks before, so the partial could
   not carry its own styling. */
div.wh-date,
div.wh-time {
	text-align: left;
	color: #000000;
	font-size: 16px;
	line-height: 18px;
}
/* wh-end event card date/time */

/* wh-start attached-project block on single events.
   Uppercase comes from CSS, not from the stored label, so the project's real
   casing is what a screen reader announces and what the client types. */
.ra-event-project {
  margin-top: 30px;
}

.ra-event-project p {
  margin-bottom: 12px;
}

.ra-event-project-button {
  text-transform: uppercase;
}
/* wh-end attached-project block */

/* wh-start project events section heading */
.ra-events-title {
  text-align: center;
}
/* wh-end project events section heading */


.wh-top-bar {
  background-color: #272727;
  background-color: #000000;
  background-color: #698fb0;
  display: block;
  width: 100%;
  height: 40px;
  height: 24px;
  position: relative;
  text-align: right;
  padding: 0;
  font-size: 14px;
  line-height: 14px;
  }


.wh-top-bar a,
.wh-top-bar a:link,
.wh-top-bar a:active,
.wh-top-bar a:visited
 {
  color: #ffffff;
  text-decoration: none;
  padding: 5px 15px 10px 15px;
}

.wh-top-bar a:hover {
  color: #ffd35b;
  text-decoration: none;
}

.wh-top-bar a {
 display: inline-block;
  vertical-align: top;
  padding: 0 20px 0 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  height: 30px;
  
}

.wh-service-title {
  font-family: "Oswald", sans-serif;
}

.wh-service-text {
  padding-top: 60px;
}



.wh-service-subtitle {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}

.wh-service-border {
  border: 1px solid #000000;
  display: inline-block;
  background-color: #ffffff;
}

.wh-service-outer-wrapper li {
display: inline-block;
margin: 3px 0 2px 0;
}

div.gform-body input[type="text"] {
  color: #000000;
  background-color: yellow;
}

div.gform-body select, div.gform-body .form-control, div.gform-body .form-select, div.gform-body textarea, div.gform-body input[type="text"], div.gform-body input[type="email"] {
    height: 62px;
    padding: 0 25px 0 25px;
    padding-right: 45px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #000000;
    background-color: #323232;
    background-color: #e7ecf2;
    border: 1px solid #c8ccd0;
    border-radius: 9999px;
    border-radius: 0;
    font-size: 16px;
    width: 100%;
    -webkit-transition: 0.3s 
ease-in-out;
    transition: 0.3s 
ease-in-out;
}

div.gform-body label,
div.gform-body legend

 {
  color: #000000 !important;
  font-size: 18px !important;
  font-weight: 400;
}

.wh-button,
div.gform_wrapper input#gform_submit_button_1,
input#mc-embedded-subscribe,
body.woocommerce-page form.cart .single_add_to_cart_button,
body.woocommerce-page button.button {
  background-color: #ffd35b;
  color: #000000;
  font-size: 18px;
  line-height: 18px;
  display: inline-block;
  border: 1px solid #ffd35b;
  padding: 15px 25px 15px 25px;
  margin-top: 0px;
  transition: all 300ms;
  font-family: "Oswald", sans-serif;
  font-weight: 400; 
  border-radius: 0;
  cursor: pointer;
}

.wh-button:hover,
body.woocommerce-page form.cart .single_add_to_cart_button:hover,
body.woocommerce-page button.button:hover,
div.gform_wrapper input[type="submit"]:hover
{
  background-color: #698fb0 !important;
  transition: all 300ms;
  color: #ffffff !important;
  border: 1px solid #698fb0 !important;
}

.wh-button-trans {
  font-family: "Oswald", sans-serif;
  border: 1px solid #ffffff;
  background: transparent;
  color: #ffffff;
  padding: 12px 24px 12px 24px;
  border-radius: 8px;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin: 10px;
  transition: all 500ms;
  }

  .wh-button-trans:hover {
    background-color: #ffd35b;
    border: 1px solid #ffd35b;
    transition: all 500ms;
    color: #000000;
  }

.wh-footer-nav {
  word-spacing: 8px; /* or 0.5em, 1rem, etc. */
  text-align: center;
  margin: 0 auto;
}

div.copyright {
    text-align: center;
  letter-spacing: 1px;
  }




.wh-page-content-wrapper {
    margin-top: 128px;
}

@media screen and (max-width: 768px) {
.wh-page-content-wrapper {
	margin-top: 0px;
}
}

.lg-sub-html p {
    font-size: 16px !Important;
    margin: 1px 0 0 1px !Important;
}

p.copyright {
  font-size: 12px !important;
}

div.item-donations {
  display: block;
  float: right;
  width: 300px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin: 10px;
}

@media screen and (max-width: 768px) {
  div.item-donations {
    display: block;
    float: none;
    width: 90%;
    margin: 0 auto;
    font-size: 14px;
    line-height: 16px;
  }
}

.wh-sponsors-wrapper {
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 30px;
  text-align: center;
  padding: 20px;
  background-color:  #ffffff;
  border-radius: 12px;
  border: 3px solid #000000;
}

.wh-sponsors-title {
  font-weight: normal;
  text-align: center;
  color: #000000;
  font-size: 22px;
  line-height: 24px;
}
.wh-sponsor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  max-width: 150px;
}


  div.wh-page {
    padding-top: 60px;
    padding-bottom: 100px;
    padding-left: 40px;
    padding-right: 40px;
    background-image: url(../img/background-art-010.jpg); 
background-position: top left;
background-position: left top;
background-repeat: repeat;
    }

div.wh-page-container {
background-image: url(../img/back-white-95.png); 
background-position: center center;
background-repeat: repeat; 
border-radius: 20px;
border: 4px solid #000000;
padding: 30px;
min-height: 600px;
}


@media (max-width: 768px){
.wh-page {
  padding: 0 10px 0 10px; 
}

ul.listwrapper {
  text-align: center;
padding: 0 !important;  
margin: 0 !important;
}

.wh-service-wrapper {
    width: 270px;
    height: 360px;
    width: 196px;
    height: 268px;
    transition: all 500ms;
}

.wh-service-inner-wrapper {
    width: 196px;
    height: 268px;
    transition: all 500ms;
}

.wh-service-inner-overlay {
    width: 196px;
    height: 268px;
    transition: all 500ms;
}

div.wh-page {
  padding-left: 20px;
  padding-right: 20px;
}

div.col-lg-12 {
  padding-left: 0;
  padding-right: 0;
}

}

/* Restore natural list behavior */
div.wh-post-content ul,
div.wh-post-content ol {
  padding-left: 1.5rem;    /* or tweak to taste */
  margin-left: 0;          /* optional */
  list-style: initial;     /* brings back bullets/numbers */
}

div.wh-post-content ul {
  list-style-type: disc;
}

div.wh-post-content ol {
  list-style-type: decimal;
}


ol.list,
ul.list {
  padding-left: 1.5rem;    /* or tweak to taste */
  margin-left: 0;          /* optional */
  list-style: initial;     /* brings back bullets/numbers */
}

ul.list {
  list-style-type: disc;
}

ul.list li {
  padding-top: 10px;
  padding-bottom: 10px;
}

ol.list {
  list-style-type: decimal;
}

div.woocommerce-additional-fields textarea#order_comments {
  display: none;
}

div.wh-news-date-display {
  margin: 10px 0 10px 0;
}


/* ------------------------------------------------------------------
   Text-safe brand variants.
   #698fb0 blue and #ffd35b gold are DECORATIVE ONLY - both fail as
   text on white. The variants below are the AA-safe pair.

   NOTE ON !important: the theme declares several of these colours with
   !important, and nothing beats an !important except another one -
   specificity is irrelevant. Where it appears below it is required, not
   preference.
   ------------------------------------------------------------------ */

/* Body-content links: #698fb0 was 3.41:1 on white. #456e91 is 5.40:1.
   Theme sets these !important, and its hover as #ffd35b !important (1.43:1). */
.wh-page a,
.wh-page a:link,
.wh-page a:active,
.wh-page a:visited {
  color: #456e91 !important;
}

.wh-page a:hover,
.wh-page a:focus {
  color: #281d17 !important;
}

/* Card "READ MORE" links - 14px, same blue */
.wha-caplink,
.whz-caplink {
  color: #456e91;
}

/* Heading highlight: #ffd35b was 1.43:1 on white. The deeper footer blue
   #38607f is 6.67:1 and reads as a two-tone against the #698fb0 heading. */
span.wh-title-highlight {
  color: #38607f;
}

/* h1.wh-title - used by 404.twig and search.twig, matches the h2 look */
h1.wh-title {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.2em;
  color: #456e91;
}

/* Breadcrumb links: #8b804a was 3.97:1 at 12px. #6e6231 is 6.08:1 */
.wh-breadcrumbs a,
.wh-breadcrumbs a:link,
.wh-breadcrumbs a:active,
.wh-breadcrumbs a:visited {
  color: #6e6231;
}

/* Header menu-extra (cart/search): #e2a95a was 2.09:1 on white */
.menu-extra li a {
  color: #4a4a4a;
}

/* Primary button hover: white on #698fb0 was 3.41:1.
   Theme sets background, colour AND border !important - match all three. */
.wh-button:hover,
body.woocommerce-page form.cart .single_add_to_cart_button:hover,
body.woocommerce-page button.button:hover,
body.woocommerce-page a.button:hover,
body.woocommerce-page input.button:hover {
  background-color: #38607f !important;
  color: #ffffff !important;
  border-color: #38607f !important;
}


/* ------------------------------------------------------------------
   Footer panel - darkened #698fb0 to #38607f.
   white 6.67:1, gold links 4.68:1 (both were failing).
   ------------------------------------------------------------------ */

.wh-page-base {
  background-color: #38607f;
}

.copyright {
  color: #ffffff;
}

.copyright a,
.copyright a:link,
.copyright a:active,
.copyright a:visited {
  color: #ffd35b;
  text-decoration: underline;
}

div.copyright a:hover,
div.copyright a:focus {
  color: #ffffff;
}

/* Icon-only links must not carry the running-text underline */
.footer-social a,
.footer-social a:hover,
.go-top {
  text-decoration: none;
}


/* ------------------------------------------------------------------
   Slider arrows - split to opposite edges and vertically centred so
   they work at every slider height (700 / 600 / 300px).
   ------------------------------------------------------------------ */

button.slick-prev,
button.slick-next {
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
  z-index: 5;
  /* the art is a ~50%-opaque black square that vanishes on a busy photo.
     Inset box-shadow, not border, so it adds no layout box: the PNG is
     46x46 with a 1px transparent margin and the square at 1..44, so a 1px
     inset ring lands exactly against the square's edge. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

button.slick-prev {
  left: 20px;
  right: auto;
}

button.slick-next {
  left: auto;
  right: 20px;
}

button.slick-prev:hover,
button.slick-next:hover,
button.slick-prev:focus,
button.slick-next:focus {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}

@media screen and (max-width: 768px) {
  button.slick-prev {
    left: 8px;
  }
  button.slick-next {
    left: auto;
    right: 8px;
  }
}

/* slick.css sets outline:none on the arrows - restore a keyboard ring */
button.slick-prev:focus-visible,
button.slick-next:focus-visible {
  outline: 3px solid #ffd35b;
  outline-offset: 2px;
}

/* Slider button hover dropped its background, leaving white text on the photo */
.wh-slider-button:hover {
  background-color: #281d17;
  border-color: #281d17;
  color: #ffffff;
}

/* The hero button has to start its own line. It used to be pushed down only
   as a side effect of .wh-slider-description being display:block - so an
   always-rendered but EMPTY subtitle span was doing the work. Now that empty
   spans are not output at all, a slide with a title and no subtitle left the
   button flowing inline after the heading.
   display:table is block-level (forces its own line) AND shrink-to-fit, so the
   link hugs the button instead of stretching the full hero width and creating
   a giant invisible click target. Auto margins centre it. */
.wh-slider-link {
  display: table;
  margin-left: auto;
  margin-right: auto;
}


/* ------------------------------------------------------------------
   Motion. Autoplay is off, so the 8s Ken Burns zoom on the active
   slide is the only thing left that starts on its own and runs past
   the 5s WCAG 2.2.2 threshold with no pause control.
   ------------------------------------------------------------------ */

li.slick-active div.slider-background {
  -webkit-animation: none;
     -moz-animation: none;
       -o-animation: none;
          animation: none;
}

@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;
  }
}


/* ------------------------------------------------------------------
   Header chrome. The top bar and mobile nav drawer used the same
   #698fb0 as the footer - white text on it is only 3.41:1.
   ------------------------------------------------------------------ */

.wh-top-bar {
  background-color: #38607f;
}

.wh-top-bar a:hover,
.wh-top-bar a:focus {
  color: #ffd35b;   /* 4.68:1 on #38607f */
}

nav#mainnav-mobi {
  background-color: #38607f !important;
}

/* Desktop nav hover was #ffd35b on a white header = 1.43:1 */
nav#mainnav > ul > li > a:hover,
nav#mainnav > ul > li > a:focus {
  color: #8a6219 !important;
}


/* ------------------------------------------------------------------
   WooCommerce chrome.
   ------------------------------------------------------------------ */

/* Success-message checkmark: #8fae1b on #e8e3d7 was 1.99:1 */
.woocommerce-page .woocommerce-message::before {
  color: #4d5f0f;
}

/* Mini-cart remove control: #999999 on #f7f7f7 was 2.66:1 */
div#whcartwidget div.widget_shopping_cart_content a.remove_from_cart_button {
  color: #6b6b6b !important;
}

/* Disabled buttons shipped at opacity:10% - effectively invisible. */
body.woocommerce-page button.button:disabled,
body.woocommerce-page button.button[disabled],
body.woocommerce-page input.button:disabled,
body.woocommerce-page input.button[disabled] {
  opacity: 1;
  background-color: #635a53;
  color: #ffffff !important;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------
   Donate / One Page Checkout.

   Production used #8fae1b with white text = 2.55:1. #5f7412 is the same
   olive deepened just enough to work: white on it is 5.26:1, and as a
   border on the cream panel (#fef3d5) it is 4.76:1 - comfortably past
   the 3:1 that WCAG 1.4.11 wants for a control boundary.

   Tabs: the ACTIVE one is filled, the inactive ones are outlined. That
   matters beyond looks - selection is then signalled by fill, not by
   colour alone (1.4.1).

   Specificity note: the theme's active-tab rule is
   `div.wh-pricing-table-tabs ul .nav-link.active { color:#000 !important }`
   at (0,3,2). An override has to be BOTH !important and more specific,
   hence `a.nav-link.active` (0,3,3). Getting this wrong is what left the
   active tab as black-on-dark earlier.
   ------------------------------------------------------------------ */

/* inactive tabs - outlined, black label on the cream panel (19:1) */
div.wh-pricing-table-tabs ul a.nav-link {
  background-color: transparent !important;
  color: #000000 !important;
  border: 1px solid #5f7412 !important;
}

div.wh-pricing-table-tabs ul a.nav-link:hover,
div.wh-pricing-table-tabs ul a.nav-link:focus {
  background-color: rgba(95, 116, 18, 0.12) !important;
  color: #000000 !important;
}

/* active tab - filled */
div.wh-pricing-table-tabs ul a.nav-link.active,
div.wh-pricing-table-tabs ul a.nav-link.active:hover,
div.wh-pricing-table-tabs ul a.nav-link.active:focus {
  background-color: #5f7412 !important;
  color: #ffffff !important;
  border: 1px solid #5f7412 !important;
}

/* the rule under the tab strip */
.nav-tabs {
  border-bottom-color: #5f7412;
}

/* Cart / checkout progress bar ("Step 1 of 3"). Same #8fae1b problem:
   white on it was 2.55:1, and the 12px label is NORMAL text needing 4.5:1.
   #5f7412 gives 5.26:1.
   A progress bar has a SECOND requirement most colour fixes miss - the
   boundary between the filled and unfilled portions carries the information,
   so WCAG 1.4.11 wants 3:1 there too. Against the #cccccc track the old green
   was 1.59:1; #5f7412 is 3.27:1. */
.woocommerce-page .progress-bar-success {
  background-color: #5f7412;
}

/* SELECT buttons on the amount cards */
div.whx-opc-pricing-table-product button.button,
div.wh-pricing-table-wrapper input.button,
div.wh-pricing-table-wrapper button.button {
  background-color: #5f7412 !important;
  color: #ffffff !important;
}

div.whx-opc-pricing-table-product button.button:hover,
div.wh-pricing-table-wrapper input.button:hover,
div.wh-pricing-table-wrapper button.button:hover {
  background-color: #3a480b !important;
  color: #ffffff !important;
}


/* ------------------------------------------------------------------
   Slider caption + hero text over photos.
   ------------------------------------------------------------------ */

.slider-caption-wrapper {
  background-color: #281d17;
}

/* invisible solid anchor - the photo covers it */
.slider-background {
  background-color: #281d17;
}

/* The overlay WRAPS the hero text (see the templates), so it is a real
   ancestor and contrast resolves against it. opacity MUST stay 1 - the
   theme's 0.3 would now fade the text too, since the text is a child.
   0.45 over white = 3.23:1, clearing the 3:1 large-text bar the 64px
   title and 24px subtitle qualify for. The <=768px overrides drop those
   to 20px/16px = NORMAL text needing 4.5:1, hence 0.55 there. */
.slider-overlay {
  background-color: rgba(0, 0, 0, 0.45);
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .slider-overlay {
    background-color: rgba(0, 0, 0, 0.55);
  }
}

/* Hero text block: vertically centred and spanning the width between the
   arrows. Anchoring BOTH edges is what lets the title wrap naturally - with
   `left: 50%` and `width: auto` the box is shrink-to-fit and its available
   space is only what remains right of the offset, so the title broke one
   word per line. A max-width cannot fix that; the constraint is the offset. */
.hero-text,
.wh-hero-text {
  top: 50%;
  bottom: auto;
  left: 90px;
  right: 90px;
  width: auto;
  height: auto;
  max-width: none;
  /* .hero-text also ships -webkit-/-ms- spellings of translate(-50%,-50%) */
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: center;
}

@media screen and (max-width: 768px) {
  .hero-text,
  .wh-hero-text {
    /* arrows sit 8px in and are 46px wide = 54px, so 62px keeps them clear */
    left: 62px;
    right: 62px;
  }
}


/* ------------------------------------------------------------------
   Project / service cards - the Pond Farm treatment: darken the
   CONTAINED elements, not the whole photo.
   ------------------------------------------------------------------ */

.wh-service-inner-wrapper {
  background-color: #281d17;
}

/* The band lives on .wh-service-text so title and subtitle share ONE
   background and ONE border. That element used to push itself down the card
   with padding-top, which would have painted the band over the whole upper
   half, so the offset moves to the overlay. Note the theme declares
   padding: 140px and then overrides it with a later, non-media
   padding-top: 60px - so 60px is what is actually in effect, and 140px is
   dead. box-sizing keeps the card heights (360/288/268) intact. */
.wh-service-inner-overlay {
  background-color: transparent;
  box-sizing: border-box;
  padding-top: 60px;
}

.wh-service-text {
  box-sizing: border-box;
  /* px, not % - these sit in a fixed-width card. Equal top and bottom. */
  padding: 12px;
  background-color: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.wh-service-title,
.wh-service-subtitle {
  background-color: transparent;
}

.wh-service-title {
  padding-bottom: 2px;
}

/* The theme sets line-height: 24px on 14px subtitle text - 10px of leading,
   ~5px of it below the descender, which read as extra padding under the band. */
.wh-service-subtitle {
  padding-top: 6px;
  line-height: 1.3;
}

/* an empty subtitle would otherwise add a blank strip inside the band */
.wh-service-subtitle:empty {
  display: none;
}

/* Button sits directly on the photo now the card overlay is gone, so its own
   fill carries the contrast. 16px label = normal text = 4.5:1, so 0.45
   (3.36:1) is not enough. Border matches the slider arrows. */
.wh-button-transparent-reverse {
  background-color: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.3);
}


/* ------------------------------------------------------------------
   Scroll reveal - replaces the old scrollReveal.js library and its
   left/right 200px slide-in. Subtle fade-up, cards only.
   ------------------------------------------------------------------ */

.wh-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.72s ease, transform 0.72s ease;
}

.wh-reveal.vis {
  opacity: 1;
  transform: none;
}

/* Never animate for users who have asked not to - and make sure they still
   see the cards rather than being left at opacity 0. */
@media (prefers-reduced-motion: reduce) {
  .wh-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ------------------------------------------------------------------
   Keyboard focus. The theme ships no visible focus ring at all.
   ------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #38607f;
  outline-offset: 2px;
}

/* Dark surfaces need the light ring instead */
.wh-page-base a:focus-visible,
.wh-top-bar a:focus-visible,
nav#mainnav a:focus-visible,
nav#mainnav-mobi a:focus-visible,
nav#mainnav-mobi button:focus-visible,
.slider a:focus-visible,
.wh-service-link:focus-visible,
button.mobile-button:focus-visible {
  outline: 3px solid #ffd35b;
  outline-offset: 2px;
}


/* ------------------------------------------------------------------
   div -> button conversions (mobile nav toggle, submenu toggles,
   back-to-top). Reset ONLY border/padding/appearance: style6.css depends
   on .mobile-button's right margin, .btn-submenu's FontAwesome
   family/line-height, and the .go-top fill.
   ------------------------------------------------------------------ */

button.mobile-button,
button.btn-submenu,
button.go-top {
  border: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button.mobile-button {
  background-color: transparent;
}


/* ------------------------------------------------------------------
   Visually-hidden headings. Bootstrap ships .sr-only; the explicit
   colour pair silences scanners that contrast-test hidden elements.
   ------------------------------------------------------------------ */

.sr-only,
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  color: #000000;
  background-color: #ffffff;
}