/* Responsive fixes for the PHP build (loaded after site.css and page CSS). */

/* Small laptop header (tablet 768-1024px is handled in tablet.css): the email
   button was squeezed into a narrow column and wrapped onto 2-3 lines.
   Let the menu column flex and keep the email on one line. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.elementor-84 .elementor-element.elementor-element-3bdee26 { width: auto; flex: 0 0 auto; }
	.elementor-84 .elementor-element.elementor-element-84754e5 { width: auto; flex: 1 1 auto; min-width: 0; }
	.elementor-84 .elementor-element-3bdee26 > .elementor-widget-wrap { flex-wrap: nowrap; }
	.elementor-84 .elementor-element.elementor-element-22b6daa { width: auto; max-width: none; }
	.elementor-84 .elementor-element-22b6daa .vamtam-btn-text { white-space: nowrap; }
}

/* Small laptops (1025-1199px): the full desktop menu plus the email address
   didn't fit, so the menu wrapped onto two rows. Show only the envelope icon here. */
@media (min-width: 1025px) and (max-width: 1199px) {
	.elementor-84 .elementor-element.elementor-element-22b6daa { display: none; }
}

/* Header showed nothing for ~1s on every page load: the theme fades the sticky
   header in from opacity 0 (vamtam-sticky-header-fadein). Show it immediately. */
body:not(.elementor-editor-active) .vamtam-sticky-header > .elementor-container {
	opacity: 1;
	-webkit-animation: none;
	animation: none;
}

/* Horizontal scrollbar (most visible on Windows, where scrollbars take space):
   the pink skewed stripes in the page-hero template sit at right:-200px and
   stuck out past the viewport. Clip them at their section, and never let the
   page scroll sideways. overflow-x: clip (not hidden) keeps sticky headers working. */
.elementor-top-section:has(.elementor-10889) { overflow: hidden; }
html, body { overflow-x: clip; }

/* Footer "Write us at" email was dark grey (#5F6567) on the black footer and
   nearly invisible. Match the other footer text (white). */
.elementor-961 .elementor-element.elementor-element-2115a58 .elementor-heading-title,
.elementor-961 .elementor-element.elementor-element-2115a58 .elementor-heading-title a { color: #FFFFFF; }
.elementor-961 .elementor-element.elementor-element-2115a58 .elementor-heading-title a:hover,
.elementor-961 .elementor-element.elementor-element-2115a58 .elementor-heading-title a:focus { text-decoration: underline; }