/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 1.6.2
*/

/*
 * Accessibility – ת"י 5568 / WCAG 2.0 AA (see A11Y-CHANGELOG.md).
 * Loaded after be.css, responsive.css and rtl.css.
 *
 * Removed when the child theme was activated (production runs the parent theme, so
 * these never applied there): "#Top_bar .menu > li > a span { padding: 0 8px }"
 * (changed the header layout) and "#pojo-a11y-toolbar" (plugin no longer installed).
 */

/* ---------- Visually hidden text and skip link (2.4.1) ---------- */

.screen-reader-text,
.button .button_label > span {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 10px;
	right: 10px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 20px;
	margin: 0;
	clip: auto;
	clip-path: none;
	overflow: visible;
	background: #ffffff;
	color: #1a1a1a;
	font-size: 18px;
	font-weight: 700;
	text-decoration: underline;
	white-space: normal;
}

#Content:focus {
	outline: 0;
}

/* ---------- Visible focus (2.4.7; 3:1 indicator per 2.1 1.4.11) ----------
 * be.css removes outlines on a, inputs and .slick-list. Two-tone ring: the white
 * outline shows on the dark header/footer, the blue halo on white sections. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.button:focus-visible,
.responsive-menu-toggle:focus-visible,
#atx-fab:focus-visible,
.cbl13-banner button:focus-visible,
.mfp-wrap button:focus-visible {
	outline: 3px solid #ffffff !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #1a56db !important;
}

:focus:not(:focus-visible) {
	outline: 0;
}

/* embedded YouTube players: their controls are styled by YouTube inside the
   cross-origin frame – ring the whole player while focus is inside it
   (.pi-frame-focus is set by a11y.js: Chrome does not match :focus there) */
iframe:focus,
iframe.pi-frame-focus {
	outline: 3px solid #ffffff !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #1a56db !important;
}

/* the sticky "back to top" button is opacity:0 until the page scrolls – never
   let it be focused while invisible */
#back_to_top:focus-visible {
	opacity: 1 !important;
}

/* menu links clip overflowing rings – keep the ring inside the link */
#Top_bar .menu > li > a:focus-visible {
	outline-offset: -4px;
}

/* ---------- Colour contrast (1.4.3) ---------- */

/* gallery captions: #a6a6a6 on #f8f8f8 was 2.29:1 → 6.60:1 */
.gallery .gallery-caption,
.gallery .wp-caption-text {
	color: #595959;
}

/* Formidable calculator submit: #fff on #579af6 was 2.85:1 → 6.04:1 */
.with_frm_style .frm_submit button,
.with_frm_style .frm_submit input[type="submit"],
.frm_forms .frm_button_submit {
	background-color: #1a5fc4 !important;
	border-color: #1a5fc4 !important;
	color: #ffffff !important;
}

.with_frm_style .frm_submit button:hover,
.frm_forms .frm_button_submit:hover {
	background-color: #164f9f !important;
}

/* Text over photos (measured on real pixels, text-shadow ignored).
 * Hero sections with a background photo – calculator (e96369b89) and the shared
 * product-page hero (ca544566f: /pumis/, paving, planting): white H1/lead text fell
 * to 1.5–2.9:1 on light areas of the photo. A 55% overlay in the header colour
 * keeps the photo visible and brings the worst pixels above 3:1 for large text. */
.mcb-section-e96369b89[style*="background-image"],
.mcb-section-ca544566f[style*="background-image"] {
	position: relative;
}

.mcb-section-e96369b89[style*="background-image"]::before,
.mcb-section-ca544566f[style*="background-image"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(29, 35, 39, 0.55);
	pointer-events: none;
}

.mcb-section-e96369b89[style*="background-image"] > .section_wrapper,
.mcb-section-ca544566f[style*="background-image"] > .section_wrapper {
	position: relative;
	z-index: 1;
}

/* Home hero paragraph: its last line runs over the light photo collage (worst
 * pixels 1.08:1). A backplate in the section colour is invisible over the dark
 * section and only shows where the text crosses the photos. */
.mcb-item-olw4380ma .column_attr p {
	position: relative;
	z-index: 2;
	display: inline;
	padding: 2px 6px;
	background: rgba(43, 48, 54, 0.92);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Home story boxes: the white title overlaps the bottom of the photo (1.9:1) –
 * darken the bottom of the photo only. */
.story_box .photo_wrapper {
	position: relative;
}

.story_box .photo_wrapper::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 50%;
	background: linear-gradient(to top, rgba(29, 35, 39, 0.92) 0%, rgba(29, 35, 39, 0.78) 30%, rgba(29, 35, 39, 0) 100%);
	pointer-events: none;
}

/* Contact Form 7 submit keeps the theme look; placeholder text was too light (#999-ish) */
.wpcf7 ::placeholder {
	color: #6b6b6b;
	opacity: 1;
}

/* ---------- Former headings now marked up as text (1.3.1) ----------
 * Typography copied from the computed h3/h4/h6 styles they replace, so the page
 * looks the same. */

p.mining2-heading {
	font-size: 13px;
	line-height: 25px;
	font-weight: 700;
	letter-spacing: 2px;
	color: #2b3036;
	margin-bottom: 15px;
}

.pi-h3 {
	font-size: 30px;
	line-height: 32px;
	font-weight: 500;
	margin-bottom: 15px;
}

.pi-h4 {
	font-size: 20px;
	line-height: 32px;
	font-weight: 500;
	margin-bottom: 15px;
}

/* home hero: the visible "ברוכים הבאים ל-" is now the H1 */
h1.pi-hero-title {
	font-size: 32px;
	line-height: 22px;
	font-weight: 600;
	color: #ffffff;
	margin-bottom: 15px;
}

/* contact page icon boxes: titles promoted h4 → h2, same size */
.icon_box h2.title {
	font-size: 20px;
	line-height: 32px;
	font-weight: 500;
	margin-bottom: 15px;
}

/* footer call to action: h3 → h2, h4 → p */
#Footer .footer_action h2 {
	font-size: 30px;
	line-height: 32px;
	font-weight: 500;
	color: #ffffff;
	margin-bottom: 6px;
}

#Footer .footer_action p.footer-cta-text {
	font-size: 20px;
	line-height: 32px;
	font-weight: 400;
	color: #ffffff;
	margin-bottom: 0;
}

/* ---------- Contact Form 7 visible labels (1.3.1 / 3.3.2) ---------- */

.wpcf7 label {
	display: block;
	text-align: right;
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	color: #2b3036;
	margin: 0 0 6px;
}

.wpcf7 .req {
	color: #b3261e;
}

.wpcf7 .form-note,
.column_column .form-note {
	text-align: right;
	font-size: 15px;
	color: #444444;
	margin: 0 0 12px;
}

/* ---------- Reduced motion (2.1 SC 2.3.3) ----------
 * animate.css entrance effects; content stays visible. */

@media (prefers-reduced-motion: reduce) {
	.mcb-item,
	.animate,
	.animated,
	[class*="animated"] {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	html {
		scroll-behavior: auto;
	}
}