/*!
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* Flavor Notes and Coffee Facts on individual product pages
-------------------------------------------------------------- */
.flavor_notes * {
	text-align: center;
}

.coffee_facts_container {
	padding-top: 0;
	margin-top: 0;
	margin-bottom: 50px;
}
.coffee_facts_container .coffee_facts {
	@media screen and (min-width: 768px) {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
}
.coffee_facts_container h2 {
	text-align: center;
	margin-bottom: 20px;
}
.coffee_facts_container .coffee_fact {
	margin-bottom: 20px;
	padding: 0 20px 20px 0;
	@media screen and (min-width: 768px) {
		width: 33%;
	}
}
.coffee_facts_container .coffee_fact h5 {
	/* #595959 = ~7:1 on the near-white panel (clears WCAG AA & AAA 1.4.3); was `grey` #808080 at 3.75:1 */
	border-bottom: 2px solid #595959;
	margin-bottom: 10px;
	padding-bottom: 10px;
	text-transform: uppercase;
	color: #595959;
}
.coffee_facts_container .coffee_fact h4 {
	text-align: left;
	font-size: 1em;
}

/* Visible keyboard focus indicator
-------------------------------------------------------------- */
/* Fixes WCAG 2.1 AA 2.4.7 (F78): the "Add to cart" / "Sign Up Now" submit
   buttons had an invisible keyboard focus ring. Kadence forces
   `button:focus-visible { outline: 3px solid currentColor !important }`, and
   the brand buttons use near-white text (#f8f9fa) — so the ring rendered in
   that same near-white and matched the page background.
   To override an !important declaration we must also use !important; the
   `html` prefix raises specificity above Kadence's selector so we win
   decisively. A dark outline reads on the brand-red / light buttons; the thin
   white halo (drawn in the 2px offset gap) keeps the ring visible on the
   site's dark header/footer too. :focus-visible = keyboard focus only, so
   mouse/touch interaction (and Kadence's hover/click shadow) is unchanged. */
html a:focus-visible,
html button:focus-visible,
html .button:focus-visible,
html input[type="submit"]:focus-visible,
html input[type="button"]:focus-visible,
html input[type="reset"]:focus-visible,
html [role="button"]:focus-visible {
	outline: 3px solid #1a1a1a !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #ffffff !important;
}