/**
 * WCAG 2.2 AA, Phase 2 (2026-10-12). Loaded by the child theme (see functions-snippet-phase2.php).
 */

/* Skip link: hidden until it takes keyboard focus, then a high-contrast chip at the top left. */
.dsol-skip-link:focus,
.dsol-skip-link:focus-visible {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	padding: .75rem 1.25rem;
	background: #000;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: underline;
	border: 2px solid #fff;
	border-radius: 4px;
	box-shadow: 0 0 0 3px #000;
}

/* Visible keyboard focus everywhere. A black ring with a white halo: shows on light and dark
   backgrounds. :focus-visible so mouse clicks do not draw it. Elements with their own, more
   specific focus rule (menu button, slider dots) keep it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}

/* Pause / Play control added to carousels that move on their own (js/a11y-phase2.js). The carousel
   is position:relative, so this sits in its bottom-left corner without changing the layout. Not the
   top (the transparent site header is drawn over the hero) and not the right (the cookie "Manage consent" tab floats there). */
.dsol-carousel-pause {
	position: absolute;
	bottom: .75rem;
	left: .75rem;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: #009da4;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 50%;
	cursor: pointer;
}
/* Owl carousels keep their slider dots at the bottom-left, so the button would sit on top of the first
   dots (axe: target-size, "partially obscured"). Bottom-right is free on them (set by the site owner on
   dev, 2026-10-12). The Bootstrap hero keeps the bottom-left spot (see above). */
.owl-loaded > .dsol-carousel-pause {
	top: auto;
	right: .75rem;
	bottom: 0;
	left: auto;
}
.dsol-carousel-pause svg {
	display: block;
	width: 16px;
	height: 16px;
	pointer-events: none;
}
.dsol-carousel-pause:hover {
	background: #0f8483;
}

/* ----------------------------------------------------------------------------------------------
   Home headings (HOME-003 / HOME-005, 2026-10-13). The Home markup now uses a lower heading level or a
   plain <p> where the old tag was h4, h5 or h6. The site's Additional CSS styles the BARE tags h2/h4/h6,
   so the new tags need the same look. Scoped to .home (the front page) so no other page is touched.
   Values copied from the Additional CSS rules for h4, h6 and h2 (base and the max-width 1024px block). */
.home h3.h4 {
	font-family: Cormorant, serif;
	letter-spacing: .01em;
	color: #363636;
	font-size: 24px;
	line-height: 1.21em;
	font-weight: 700;
	margin: 25px 0;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
}
.home #best-selling .products h3.h4 {
	margin: 10px 0;
}
/* The one H1 (teal bar) and the "we believe in" label look like the old h6. */
.home h1.h1.quentin,
.home p.h6.quentin {
	color: #FFFFFF;
	font-size: 70px;
	font-weight: 100;
	line-height: 1.2;
}
.home p.h6.quentin.text-black {
	color: #000 !important;
}
/* Hero slide text is no longer an h2: keep the h2 margin. */
.home .carousel-caption p.title.h2 {
	margin: 25px 0;
}
@media only screen and (max-width: 1024px) {
	.home h3.h4 { font-size: 21px; }
	.home h1.h1.quentin,
	.home p.h6.quentin { font-size: 54px; line-height: 1; }
}
@media only screen and (max-width: 992px) {
	.home .carousel-caption p.title.h2 { margin: 15px 0; }
}

/* Footer headings are h3.h4 now (were h4). Same look as the Additional CSS rules for h4 and ".footer-section h4". */
.footer-section h3.h4 {
	font-family: Cormorant, serif;
	letter-spacing: .01em;
	color: #363636;
	font-size: 24px;
	line-height: 1.21em;
	font-weight: 700;
	margin: 25px 0;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
}

/* ----------------------------------------------------------------------------------------------
   Color contrast, neutral colors (HOME-001, 2026-10-13). Each color is the original darkened just enough to reach
   4.5:1 (ratios calculated from the colors axe reported). The brand teal #14aeac is NOT changed here (needs sign-off).
   The selectors are a little more specific than the Additional CSS rules they override, so file order does not matter. */
/* Small gray labels: #8e8987 was 3.45:1 on white, 2.67:1 on cream. #5f5b5a is 6.71:1 on white, 5.20:1 on cream. */
body .text-gray,
body p.subtitle {
	color: #5f5b5a;
}
/* Footer text and links on light gray: #6f6f6f on #ededed was 4.29:1. #595959 is 5.98:1. */
html .footer-section p,
html .footer-section p a,
html .footer-section #fmenu li p a {
	color: #595959;
}
/* Body text on the pale green and gray bands: #6f6f6f was 3.98:1 and 3.35:1. #595959 is 5.55:1 and 4.68:1. */
.bg-fgreen p.text,
.bg-d3d3d3 p.text {
	color: #595959;
}
/* Cookie banner (Complianz). The sage #ccdec4 stays as the button color; its text goes dark (11.22:1) and the policy
   links get a dark sage (6.47:1). The long-term home for this is Complianz > Cookie banner > colors. */
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
	color: #222222 !important;
}
.cmplz-cookiebanner a.cmplz-link {
	color: #55624f !important;
}
/* The same gray (#6f6f6f) is also used in the slide-out menu panel (light gray #ededed): "Follow Us" and the social links. */
html #menu li p,
html #menu li p a {
	color: #595959;
}

/* Brand teal, option C (client choice, 2026-10-13): only the two bars that carry white text change, from #14aeac to #009da4.
   White on #009da4 is 3.30:1. That passes for large text (3:1), so the promo bar text is made large: bold at 19px (WCAG large
   text = 14pt bold = 18.67px or more). The H1 band is 70px, already large. Teal anywhere else on the site is unchanged.
   The promo bar sets its color inline in the header partial, hence !important. */
.top-header {
	background-color: #009da4 !important;
}
section.bg-teal.teal-bar {
	background: #009da4;
}
html .top-header p {
	font-size: 19px;
}

/* Social links, big pale script words (HOME-004, 2026-10-13). They are 80px wide-ish decorative text; below about 360px
   they stuck out past the screen edge (page 357px wide at 320px) and were clipped. min() keeps 80px on anything wider than
   400px and scales the words down on narrow screens, so nothing sticks out. */
html .socials-tag {
	font-size: min(80px, 20vw);
}

/* HOME-007 (2026-10-13): the 2nd and 3rd Home sections that shared id="formulas" are now #formulas-2 and #formulas-3. The Home
   page's own CSS styles #formulas (cream background, 7% padding, 30vh video band), so the new ids get the same rules. */
#formulas-2,
#formulas-3 {
	padding: 7% 0;
	background: #F1E1C0;
}
/* In the page this is inside @media (max-width: 500px) only. */
@media only screen and (max-width: 500px) {
	#formulas-2 .min-vh-100,
	#formulas-3 .min-vh-100 {
		min-height: 30vh !important;
	}
}

/* Carousel controls in the brand teal (client request, 2026-10-13). The pause/play button is #009da4 with its white icon
   (3.30:1, above the 3:1 that icons need) and goes to the deeper #0f8483 on hover. The slider dots (Owl) use the same teal for
   the ring and for the filled (active or hovered) dot; a teal ring on white is 3.30:1 against the page, above the 3:1 minimum.
   The selectors are more specific than the Additional CSS dot rules, so file order does not matter. */
html .owl-carousel .owl-dots button.owl-dot span {
	border-color: #009da4;
}
html .owl-carousel .owl-dots button.owl-dot.active span,
html .owl-carousel .owl-dots button.owl-dot:hover span {
	background: #009da4;
}

/* Footer text links are at least 24px tall (WCAG 2.5.8, audit QUIZ-006). They were inline text 19px tall. Each footer row grows
   by about 3px so the 24px boxes do not overlap. */
footer p a,
footer .find-consultant a,
footer .corporate-links a {
	display: inline-block;
	line-height: 24px;
}

/* The footer line "*or give us a call to schedule" is a link to "#" in Bootstrap blue (#0d6efd): 3.17:1 on the sage band. Dark navy is
   about 10:1. (The link itself goes nowhere; whether it should be a phone link is a content decision.) */
a.text-decoration-none[href$="#"] {
	color: #142331;
}

/* Testimonial arrows (Owl nav, audit HOME-001, WCAG 2.5.8). The Home page's own CSS sets a 60px font on the arrow buttons, but the
   buttons stayed 13 x 26px, and the two were 23px apart. Each button is now a 44 x 44px target with the arrow centred across it.
   The arrow keeps its size, color and height on the page (its line-height is left alone). The selector matches the one in the
   page's own rule and adds "html", so file order does not matter. */
html .owl-carousel .owl-nav button.owl-prev,
html .owl-carousel .owl-nav button.owl-next {
	display: inline-block;
	width: 44px;
	height: 44px;
	padding: 0;
	text-align: center;
	vertical-align: top;
}

/* Testimonials: previous arrow, dots, pause button, next arrow in one centred row. js/a11y-carousel.js moves the dots and the pause
   button into Owl's arrow box (between the two arrows), so the Tab order is the order on screen. The box is a centred flex row; the
   pause button (normally at the bottom right) becomes a dot-sized teal circle after the dots. Only #recipeCarousel (the
   testimonials) is affected. Without the script the arrows sit together, centred, with the dots below them. */
html #recipeCarousel .owl-nav {
	display: flex;
	align-items: center;
	justify-content: center;
}
html #recipeCarousel .owl-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0;
}
html #recipeCarousel .owl-nav > .dsol-carousel-pause {
	position: static;
	width: 24px;
	height: 24px;
	margin: 0 5px;
	border: 0;
}
html #recipeCarousel .dsol-carousel-pause svg {
	width: 10px;
	height: 10px;
}

/* Slider arrows use the same teal as the dots and the pause button: #009da4 is 3.30:1 on white (3:1 is the minimum for icons), and
   the deeper #0f8483 on hover, as the pause button does. */
html .owl-carousel .owl-nav button.owl-prev,
html .owl-carousel .owl-nav button.owl-next {
	color: #009da4;
}
html .owl-carousel .owl-nav button.owl-prev:hover,
html .owl-carousel .owl-nav button.owl-next:hover {
	color: #0f8483;
}

/* Footer bottom bar, "*or give us a call to schedule T: (303) ..." (audit HOME-004 / QUIZ-001). The phone number is now a tel: link
   inside the sentence (it used to be the whole sentence as a link to "#"). Dark gray like the other footer phone link: on the quiz
   page the link was Bootstrap blue (#0d6efd), 3.17:1 on the sage band; #363636 is about 8.5:1. */
html .bottom-bar a[href^="tel:"] {
	color: #363636;
}

/* Home slider, slide bn3 ("game changing ingredients", the serum dropper image on peach #FFC2B3). The caption was white, about 1.5:1 on
   that peach (needs 4.5:1 for the small line, 3:1 for the large title). Black is about 13.6:1. Only this slide; the other slides keep
   white text over their dark photos. The "Shop now" button keeps its own colors. */
html #header-banner .carousel-item.bn3 .carousel-caption,
html #header-banner .carousel-item.bn3 .carousel-caption .tagline,
html #header-banner .carousel-item.bn3 .carousel-caption .title {
	color: #000;
}

/* Home slider arrows on the peach slide bn3 (audit HOME-006, WCAG 1.4.11). The arrows are white at 50% opacity, about 1.3:1 on that
   peach (#FFC2B3); 3:1 is the minimum. While bn3 is the showing slide they turn black at full strength (about 13:1). The other slides
   keep the white arrows over their dark photos. Needs a browser that supports :has() (all current ones); in an older one the arrows
   simply stay white, as before. */
html #header-banner:has(.carousel-item.bn3.active) .carousel-control-prev,
html #header-banner:has(.carousel-item.bn3.active) .carousel-control-next {
	opacity: 1;
}
html #header-banner:has(.carousel-item.bn3.active) .carousel-control-prev-icon,
html #header-banner:has(.carousel-item.bn3.active) .carousel-control-next-icon {
	filter: invert(1);
}