/* Accessibility rules added 2026-10-20 (Dray Web Services). Enqueued by functions.php as 'nec-a11y'. */
/* Accessibility: skip-link target added in functions.php; no focus ring on the landmark itself */
main#content:focus { outline: none; }


/* Accessibility: hero slider custom controls are real buttons (see Elementor custom code "Home page slides script") */
.new-swiper-pagination-bullets .new-swiper-pagination-bullet {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
}
.new-swiper-button {
	cursor: pointer;
}
.new-swiper-pagination-bullets .new-swiper-pagination-bullet:focus-visible,
.new-swiper-button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
}

/* JetSmartFilters hides its <legend> with display:none, which removes the group name from the accessibility tree; keep it screen-reader-only instead */
[class*="jet-smart-filters-"] fieldset > legend[style*="display:none"],
[class*="jet-smart-filters-"] fieldset > legend[style*="display: none"] {
	display: block !important;
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* WooCommerce dims the Add to cart button while it waits for a variation choice (opacity .5), which drops its text below 4.5:1; at .7 it still reads as inactive and passes */
.woocommerce button.single_add_to_cart_button.disabled,
.woocommerce button.single_add_to_cart_button:disabled,
form.cart .single_add_to_cart_button.disabled {
	opacity: 0.7 !important;
}


/* JetSmartFilters search box: contrast checkers cannot measure text over a background image, so the magnifier moves from the input's background to the wrapper (same 20px icon, same 12px offset) */
.jet-search-filter__input-wrapper {
	position: relative;
}
.jet-search-filter__input-wrapper > .jet-search-filter__input {
	background-image: none !important;
}
.jet-search-filter__input-wrapper::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
	background: url(/wp-content/uploads/2024/10/nec-search-icon.svg) no-repeat center;
	pointer-events: none;
}


/* Coffee Subscription section text sits on a photo; on tablet/desktop the photo is a flat #30221B behind the copy, so a matching solid background makes the contrast measurable without changing the look. Mobile uses a different image with artwork under the text and is left alone. */
@media (min-width: 768px) {
	.elementor-element-7dba1ab1 .elementor-widget-heading .elementor-heading-title,
	.elementor-element-7dba1ab1 .elementor-widget-text-editor .elementor-widget-container {
		background-color: #30221B;
	}
}

/* JetSmartFilters radio and checkbox inputs are display:none, so their button-styled labels cannot be reached by keyboard (and the scrolling category strip has nothing focusable). Keep them visually hidden but focusable, and show focus on the button they label. */
.jet-radio-list .jet-radio-list__item,
.jet-checkboxes-list .jet-checkboxes-list__item {
	position: relative;
}
.jet-radio-list .jet-radio-list__item .jet-radio-list__input,
.jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__input {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
	pointer-events: none;
}
.jet-radio-list .jet-radio-list__input:focus-visible ~ .jet-radio-list__button,
.jet-checkboxes-list .jet-checkboxes-list__input:focus-visible ~ .jet-checkboxes-list__button {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Our Story timeline arrows are now <button>s; the page's .arrow rule already styles them, this only neutralises button defaults and restores the focus ring that .arrow:focus removed */
.timeline-container button.arrow {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	line-height: inherit;
}
.timeline-container .arrow:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px;
}


/* reCAPTCHA badge slot: a11y.js moves Google's fixed-position badge here (after the footer) so it never covers page content while staying visible */
.nec-recaptcha-slot {
	display: flex;
	justify-content: flex-end;
	padding: 12px 16px 16px;
	background-color: #23160F;
}
.nec-recaptcha-slot .grecaptcha-badge {
	position: static !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	box-shadow: none !important;
}

/* Screen-reader-only text (used by a11y.js for the JetSmartFilters legends). The shop templates also hide two legends with ID-specific !important rules (#roast-meter--filter, #visual-filter), so those are named here to outrank them. */
.nec-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
[class*="jet-smart-filters-"] fieldset > legend.nec-sr-only,
#roast-meter--filter fieldset > legend.nec-sr-only,
#visual-filter fieldset > legend.nec-sr-only {
	display: block !important;
}


/* JetSmartFilters search box border was #F3F0EE, 1.04:1 against the cream panel (WCAG 1.4.11 needs 3:1); #837C61 is a site colour that passes on both the panel and the white field */
.jet-search-filter__input-wrapper > .jet-search-filter__input {
	border-color: #837C61 !important;
}

/* Our Story timeline arrows: Elementor global button style outranks the page's .arrow rule once they are <button>s (white pill, 12px 32px padding, 16px dark text); restate the original arrow look */
.timeline-container button.arrow,
.timeline-container button.arrow:hover,
.timeline-container button.arrow:focus {
	background-color: transparent !important;
	color: #837c61 !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 20px !important;
	font-size: 2rem !important;
	line-height: inherit !important;
	box-shadow: none !important;
	min-height: 0 !important;
}

/* Page titles promoted to h1 (checker: no H1 on the page). A site-wide h1 font-family rule would switch them to the display font; keep the look they had as h2. The Our Story hero title also keeps the h2 uppercase. */
.elementor-element-2a8a44d1 h1.elementor-heading-title,
.elementor-element-53089a00 h1.elementor-heading-title,
.elementor-element-6d8fba80 h1.elementor-heading-title,
.elementor-element-2605dd64 h1.elementor-heading-title,
.elementor-element-189b93c8 h1.elementor-heading-title,
.elementor-element-683d466 h1.elementor-heading-title {
	font-family: Montserrat, sans-serif !important;
}
.elementor-element-660eafa5 h1.elementor-heading-title {
	text-transform: uppercase;
}

/* Our Story timeline year labels: #8D8D8D bold 20px sits over each year's photo (65% black overlay) and can drop to 2.1:1 on lighter areas; #D2D2D2 is 4.6:1 even against the lightest background that overlay allows. Active/hover keep the cream colour (more specific rules in the widget). */
.timeline-container .year-label {
	color: #D2D2D2;
}

/* JetElements tile buttons (foodservice pages, 68 instances, one shared scheme): label #C9842A on the #FDF5D5 tile is 2.8:1 and the hover state (white on #C9842A) 3.1:1. #9C5E12 keeps the amber hue at 4.8:1 for the label and 5.2:1 for white on the hover fill. */
.elementor-jet-button .jet-button__state-normal .jet-button__label {
	color: #9C5E12 !important;
}
.elementor-jet-button .jet-button__plane-hover,
.elementor-jet-button .jet-button__instance:hover,
.elementor-jet-button .jet-button__instance:focus-visible {
	background-color: #9C5E12 !important;
}

/* reCAPTCHA badge now renders inline inside the captcha field (functions.php part 13); give it a little room. The .nec-recaptcha-slot rules above are no longer used. */
.ginput_recaptcha .grecaptcha-badge {
	margin: 8px 0 0;
}

/* Cart drawer dialog (a11y.js): the drawer itself receives focus programmatically, so no ring on the panel; the close control is now a keyboard button and needs a visible ring. */
.elementor-menu-cart__container:focus {
	outline: none;
}
.elementor-menu-cart__close-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Mini-cart remove button: Elementor's default hover only fades the red x to light grey, and the link inside the circle is invisible so keyboard focus showed nothing. Hover and focus fill the circle; focus also gets a ring. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove:hover,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove:focus-within {
	background-color: #FF0000;
	border-color: #FF0000;
	transform: scale(1.1);
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove:hover::before,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove:hover::after,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove:focus-within::before,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove:focus-within::after {
	background: #FFFFFF;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove:focus-within {
	outline: 2px solid #48281C;
	outline-offset: 2px;
}

/* Mini-cart remove button focus state restated with !important: the hover rules above apply, but the same :focus-within declarations were out-cascaded in the live page. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove:focus-within {
	background-color: #FF0000 !important;
	border-color: #FF0000 !important;
	transform: scale(1.1) !important;
	outline: 2px solid #48281C !important;
	outline-offset: 2px !important;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove:focus-within::before,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove:focus-within::after {
	background: #FFFFFF !important;
}

/* Header keyboard access: one consistent focus ring on the header controls, and Elementor's mega-menu toggle (zero width because no icon is configured) becomes a visible chevron while it has keyboard focus. */
.elementor-location-header a:focus-visible,
.elementor-location-header button:focus-visible,
.elementor-location-header [role="button"]:focus-visible {
	outline: 2px solid #48281C !important;
	outline-offset: 3px;
}
.elementor-widget-n-menu .e-n-menu-dropdown-icon:focus-visible {
	width: 20px !important;
	min-width: 20px;
	margin-inline-start: 6px;
}
.elementor-widget-n-menu .e-n-menu-dropdown-icon:focus-visible .e-n-menu-dropdown-icon-closed,
.elementor-widget-n-menu .e-n-menu-dropdown-icon:focus-visible .e-n-menu-dropdown-icon-opened {
	width: 20px !important;
	height: 20px;
	align-items: center;
	justify-content: center;
}
.elementor-widget-n-menu .e-n-menu-dropdown-icon:focus-visible .e-n-menu-dropdown-icon-closed::before,
.elementor-widget-n-menu .e-n-menu-dropdown-icon:focus-visible .e-n-menu-dropdown-icon-opened::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}
.elementor-widget-n-menu .e-n-menu-dropdown-icon:focus-visible .e-n-menu-dropdown-icon-closed::before {
	transform: translateY(-2px) rotate(45deg);
}
.elementor-widget-n-menu .e-n-menu-dropdown-icon:focus-visible .e-n-menu-dropdown-icon-opened::before {
	transform: translateY(2px) rotate(-135deg);
}