/**
 * Mobile button sizing — ONE place, ≤767px only.
 *
 * Every CTA on the site was authored at its 1920px Figma size and carried
 * that size all the way down: 18px text in a 51-57px tall pill, and 60-120px
 * circular icon buttons, on a 360px screen. Next to body copy that steps
 * 18px -> 16px at this breakpoint, the buttons end up visually louder than
 * the content they belong to.
 *
 * ONE mobile button size for every text CTA, rather than a per-button guess:
 *
 *     label    14px          matches the mobile body step and the platform
 *                            conventions (Material 14px, HIG 15pt)
 *     padding  12px 24px     vertical stays generous, horizontal tightens
 *                            because width is the scarce axis on a phone
 *     height   44px min      WCAG 2.5.5 / Apple HIG minimum tap target —
 *                            the LABEL shrinks, the touch area does not
 *
 * Circular icon buttons get their own scale (48px standard, 64px for the
 * hero-scale video play button), since their size is the diameter, not text.
 *
 * Nothing outside the media query, so desktop, laptop and tablet are
 * untouched. Enqueued after spacing.css so it wins over the per-page files
 * that set these sizes.
 *
 * @package MRB
 */

@media (max-width: 767px) {

	/* ====================================================================
	   TEXT CTAs — all land on the same 14px / 12x24 / 44px size
	   ==================================================================== */

	/* Home hero CTA — was 16px / 16x38 */
	.home-hero-section .elementor-widget-button .elementor-button,
	/* Theme primary buttons — .bs-pr-btn-2 was 18px / 11x31,
	   .bs-pr-btn-3 was 16px / 15x28 */
	.bs-pr-btn-2,
	.bs-pr-btn-3 {
		padding: 12px 24px;
		font-size: 14px;
		line-height: 1.2;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* The theme indents .bs-pr-btn-2 by 16px; no room for a decorative
	   offset at this width. */
	.bs-pr-btn-2 {
		margin-left: 0;
	}

	/* .bs-pr-btn-2 renders its label three times (.text plus the two
	   crop-mark pseudo-clones) and the hover swap misaligns unless all
	   three move together. home.css sets 18px on the About and
	   Certification instances, so those are re-declared here to win. */
	.bs-pr-btn-2 .text,
	.bs-pr-btn-2 .text::before,
	.bs-pr-btn-2 .text::after,
	.aboutus-container .bs-pr-btn-2 .text,
	.aboutus-container .bs-pr-btn-2 .text::before,
	.aboutus-container .bs-pr-btn-2 .text::after,
	.certification-container .bs-pr-btn-2 .text,
	.certification-container .bs-pr-btn-2 .text::before,
	.certification-container .bs-pr-btn-2 .text::after {
		font-size: 14px;
	}

	/* ====================================================================
	   CIRCULAR ICON BUTTONS (home page)
	   ==================================================================== */

	/* Blog card arrow — 60x60 with a 16px glyph, and it overhangs the card
	   edge by 32px. At 360px that circle is a sixth of the screen width.
	   The overhang shrinks with it so it stays visually hooked to the card
	   corner. */
	.bs-blog-4-item .item-btn {
		width: 48px;
		height: 48px;
		font-size: 14px;
		margin-right: 20px;
		margin-top: -24px;
	}

	/* Video play button — the theme already steps 120px -> 80px here, but
	   80px is still 22% of a 360px viewport. 64px reads as a play control
	   rather than a second focal point, and clears the 44px floor easily. */
	.bs-play-btn-5 {
		width: 64px;
		height: 64px;
		font-size: 18px;
	}

	/* ====================================================================
	   FORM SUBMITS
	   Both are (or should be) full-width here. A full-width bar reads as
	   one deliberate element rather than an oversized pill, so the
	   tightening is vertical only.
	   ==================================================================== */
	.mrb-footer-custom .mrb-footer-form input[type='submit'],
	.mrb-footer-custom .mrb-footer-form .wpcf7-submit {
		min-width: 0;
		min-height: 48px;
		font-size: 14px;
	}

	.contact-page-form-container .wpcf7-submit {
		min-height: 48px;
		padding: 15px 46px 15px 22px;
		background-position: right 22px center;
		font-size: 14px;
	}

	/* Home "Get In Touch" CTA. The orange box, the size and the crop-mark
	   corners live on the wrapper span, not the input, so the sizing is set
	   there; the input only carries the label. Figma's 191x51 block becomes
	   the same full-width bar as the other form submits, and the 16px
	   decorative indent goes for the same reason .bs-pr-btn-2 loses its. */
	.home-contact-container .mrb-ff-submit {
		width: 100%;
		min-width: 0;
		max-width: none;
		height: auto;
		min-height: 48px;
		margin-left: 0;
	}

	.home-contact-container .wpcf7-submit {
		height: 48px;
		line-height: 48px;
		font-size: 14px;
	}

	/* Search-results CTA */
	.mrb-btn-contact-fallback {
		padding: 12px 24px;
		font-size: 14px;
		min-height: 44px;
	}
}