/* ==========================================================================
   Global - overflow, footer text, section spacing (Point B)
   ==========================================================================

   Migrated out of the Customizer's "Additional CSS" field, which lives only in
   the database: not in git, not deployed by pushing code, and installed only by
   running a per-feature script on each target. That is why five unrelated
   features silently reverted on www.mmspecs.com - the PHP that depends on this
   CSS shipped, and the CSS did not. See CLAUDE.md, "Site CSS lives in git".

   Edit these files, commit, push. There is no install step.
   ========================================================================== */

/* Point B - defensive fix for site-wide mobile horizontal overflow (page zooms out / shifts left while scrolling). Root cause not yet identified; this clips any overflowing element instead of letting it widen the viewport. */
html,
body {
	/* clip, not hidden: `hidden` turns these into scroll containers, which
	   stops position:sticky working for anything inside them (it broke the
	   sticky header - see Point HEADER-STICKY). `clip` clips identically
	   without establishing a scrollport. */
	overflow-x: clip;
	max-width: 100%;
}

/* Point B - root cause 1: footer copyright text is rendered inside a <pre> tag,
   which never wraps by default and was forcing the whole page wider on mobile.
   Desktop has plenty of room for one line, so only allow wrapping on mobile
   where it's actually needed - forcing normal wrap everywhere made it wrap
   awkwardly to 2 lines on desktop too. */
.ast-footer-copyright pre {
	font-family: inherit;
	margin: 0;
}
@media (min-width: 768px) {
	.ast-footer-copyright pre {
		white-space: nowrap;
	}
}
@media (max-width: 767px) {
	.ast-footer-copyright pre {
		white-space: normal;
		word-wrap: break-word;
	}
}

/* Point B - root cause 2: "Designed for Effortless Control" section has a fixed
   76px left margin with no mobile override, pushing its content (and the
   "Learn More" button) past the right edge of small screens. Also has
   padding-bottom:0 on mobile, so the button sits flush against the edge -
   giving it some breathing room. */
@media (max-width: 767px) {
	.elementor-element-678335b {
		margin-left: 0 !important;
		padding-bottom: 30px !important;
	}
}

/* Point B - "Designed for Everyday Presence" section background (bg-01.jpg,
   1920x774, aspect ratio 0.403). With background-size:cover the glasses always
   sit vertically centered in whatever height the section has - no amount of
   position/height tweaking moves that, since cover always exactly matches the
   container's height for this very wide image. Fix: stop stretching the image
   to cover the whole section. Instead show it at its true proportions as a
   full-width strip pinned to the bottom (background-size:100% auto), and
   reserve exactly that much space below the text with padding-bottom in vw
   (which scales with the same ratio as the image), so text stays untouched at
   the top and the image appears as its own strip below the button. */
@media (max-width: 767px) {
	.elementor-element-50c29e1 {
		padding-bottom: 41vw !important;
	}
	.elementor-element-50c29e1:not(.elementor-motion-effects-element-type-background) {
		background-size: 100% auto !important;
		background-position: center bottom !important;
		background-repeat: no-repeat !important;
	}
}

/* Point B - About Us page: "Technology, refined." column has padding:0 on all
   sides unconditionally (desktop and mobile alike), so the heading touches the
   left edge. Giving it breathing room on both breakpoints. */
.elementor-element-18b6d08 {
	padding-left: 5% !important;
	padding-right: 5% !important;
}

/* Point B - About Us page: image widget below "Technology, refined." has an
   intentional negative top margin (-50px desktop, -30px tablet, inherited on
   mobile too) pulling it up to overlap the heading. Overriding to a small
   positive gap instead, on both breakpoints. */
.elementor-element-c9f680d {
	margin-top: 20px !important;
}