/* Butterflies of Memory — additions for the static site, loaded after the theme stylesheets.
   1. Headings font (was Cufon)          5. Feedback slide-out tab (was tabSlideOut)
   2. Contrast fixes on yellow           6. Header slider (was Orbit)
   3. Drop-down menu (was slidemenu)      7. Home carousel (was jCarousel)
   4. Accessibility helpers              8. Image viewer (was Fancybox)   9. Content */

/* 1. Headings: Cufon drew these with Open Sans as images of text; now real text in the same font */
h1, h2, h3, h4, h5, h6, .recent_post-title, .su-service-title, .lb_heading, .su-heading-shell, .su_au_name {
	font-family: 'Open Sans', Arial, sans-serif; font-weight: 400;
}
/* the theme set line-height:0 on sidebar titles, which only worked for Cufon's images of text */
#primary .xoxo li .widget-title { line-height: 17px; }

/* 2. Contrast. Yellow text and light grey text sat on the yellow (#e1b918) title bar, footer and
      Feedback tab (1.2:1 to 2:1). Near-black text there is 8:1 (WCAG AA needs 4.5:1). */
#subhead h1.entry-title-page { color: #1a1a1a; }
.breadcrumbs, .breadcrumbs a, .breadcrumbs a:hover { color: #1a1a1a; }
.breadcrumbs a { text-decoration: underline; }
#footer-widget-area .widget-area .widget-title,
#footer-widget-area .textwidget,
#footer-widget-area a, #footer-widget-area a:hover { color: #1a1a1a; }
#footer-widget-area a { text-decoration: underline; }
#sliding-widget-area .widget-area .widget-title,
.sliding_sidebar .textwidget,
.sliding_sidebar .textwidget a, .sliding_sidebar .textwidget a:hover { color: #1a1a1a; }
.sliding_sidebar .textwidget a { text-decoration: underline; }

/* 3. Drop-down menu: opens on hover and on keyboard focus */
#horiz_m .slidemenu ul li ul { top: 58px; display: block; visibility: hidden; }
#horiz_m .slidemenu ul li:hover > ul,
#horiz_m .slidemenu ul li:focus-within > ul { visibility: visible; }
#horiz_m .slidemenu ul li ul li ul { visibility: hidden !important; }

/* 4. Accessibility helpers */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 10px; top: 10px; z-index: 100000; background: #fff; color: #1a1a1a; padding: 6px 10px; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }

/* 5. Feedback slide-out tab (same position, size and handle image as before) */
.sliding_sidebar { position: fixed; bottom: 0; right: -230px; width: 230px; height: 230px; line-height: 1; transition: right 300ms ease; }
.sliding_sidebar.open { right: -3px; }
.sliding_sidebar .handle {
	position: absolute; top: 0; left: -21px; width: 21px; height: 97px; display: block; padding: 0; border: 0; cursor: pointer;
	background: #e1b918 url(/wp-content/themes/care/images/footer_handle.png) no-repeat 0 0;
	text-indent: -99999px; overflow: hidden;
}
.sliding_sidebar .handle:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .sliding_sidebar { transition: none; } }

/* 6. Header slider */
div.orbit-wrapper[data-slider] { width: 960px !important; position: relative; }
.orbit-wrapper[data-slider] #featured.orbit { width: 960px; height: 525px; position: relative; overflow: hidden; background-image: none; }
.orbit-wrapper[data-slider] #featured > img { display: block; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1000ms ease; }
.orbit-wrapper[data-slider] #featured > img:first-child,
.orbit-wrapper.is-ready[data-slider] #featured > img.is-current { opacity: 1; z-index: 2; }
.orbit-wrapper.is-ready[data-slider] #featured > img:first-child:not(.is-current) { opacity: 0; }
.orbit-wrapper[data-slider] .orbit-bullets li { padding: 0; }
.orbit-wrapper[data-slider] .orbit-bullets button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; text-indent: -9999px; overflow: hidden; }
.orbit-wrapper:not(.is-ready) .orbit-bullets { display: none; }
@media (prefers-reduced-motion: reduce) { .orbit-wrapper[data-slider] #featured > img { transition: none; } }
@media only screen and (max-width: 959px) {
	div.orbit-wrapper[data-slider], .orbit-wrapper[data-slider] #featured.orbit { width: 100% !important; }
	.orbit-wrapper[data-slider] #featured.orbit { height: auto !important; aspect-ratio: 960 / 525; }
	.orbit-wrapper[data-slider] #featured > img { width: 100%; height: auto; }
}

/* 7. Home carousel */
.fp_carousel { width: 925px; height: 220px; }
.fp_carousel .jcarousel-clip { overflow: hidden; position: relative; }
.fp_carousel ul.jcarousel-list { display: flex; margin: 0; padding: 0; transition: transform 2200ms ease; will-change: transform; }
.fp_carousel li { flex: 0 0 224px; width: 224px; height: 220px; margin-right: 10px; float: none; }
.fp_carousel li a { display: block; width: 224px; height: 220px; }
.fp_carousel .fp_noimage { display: block; width: 224px; height: 220px; border-radius: 3px; background: #fff url(/wp-content/uploads/2013/06/BoM_logo_sm.jpg) no-repeat 50% 40% / 200px auto; box-shadow: inset 0 0 0 1px #e5e5e5; }
.fp_carousel .jcarousel-prev, .fp_carousel .jcarousel-next { border: 0; padding: 0; background-color: transparent; }
.fp_carousel .jcarousel-prev:disabled, .fp_carousel .jcarousel-next:disabled { opacity: 0.3; cursor: default; }
.fp_carousel-shell:not(.is-ready) .jcarousel-prev, .fp_carousel-shell:not(.is-ready) .jcarousel-next { display: none; }
@media (prefers-reduced-motion: reduce) { .fp_carousel ul.jcarousel-list { transition: none; } }
@media only screen and (max-width: 959px) { .fp_carousel { width: auto; } }

/* 8. Image viewer */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.85); }
.lightbox-figure { margin: 0; text-align: center; }
.lightbox-img { display: block; max-width: 90vw; max-height: 82vh; width: auto; height: auto; margin: 0 auto; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,.5); }
.lightbox-caption { color: #fff; font: 15px/1.4 Arial, sans-serif; padding: 10px 0 0; min-height: 1.4em; }
.lightbox button { position: fixed; background: rgba(0,0,0,.4); color: #fff; border: 0; cursor: pointer; font: 40px/1 Arial, sans-serif; width: 56px; height: 56px; border-radius: 28px; }
.lightbox button:hover, .lightbox button:focus-visible { background: #e1b918; color: #1a1a1a; outline: none; }
.lightbox-prev { left: 16px; top: 50%; margin-top: -28px; }
.lightbox-next { right: 16px; top: 50%; margin-top: -28px; }
.lightbox-close { right: 16px; top: 16px; font-size: 34px !important; }
.lightbox-count { position: fixed; left: 16px; top: 22px; margin: 0; color: #ccc; font: 14px Arial, sans-serif; }
.lightbox.is-single .lightbox-prev, .lightbox.is-single .lightbox-next, .lightbox.is-single .lightbox-count { display: none; }

/* 9. Content: WordPress [gallery] shortcode (WordPress printed these rules inline before each gallery) */
.entry-content .gallery { margin: auto; }
.entry-content .gallery .gallery-item { float: left; margin-top: 10px; text-align: center; width: 100%; }
.entry-content .gallery-columns-2 .gallery-item { width: 50%; }
.entry-content .gallery-columns-3 .gallery-item { width: 33%; }
.entry-content .gallery-columns-4 .gallery-item { width: 25%; }
.entry-content .gallery img { border: 2px solid #cfcfcf; }
.entry-content .gallery .gallery-caption { margin-left: 0; }
.entry-content .contact-socialize { margin: 0 0 20px; }