/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* -------------------------
  Global responsive helpers
---------------------------*/

/* Fluid typography */
:root{
  --base-font: 16px;
  --max-site-width: 1200px;
  --container-padding: 20px;
}

html { font-size: 100%; }
body { 
  font-size: clamp(14px, 1.4vw + 0.5rem, 18px); /* fluid size between devices */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

/* Make all images/videos scale nicely */
img, picture, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Make all Elementor widget containers responsive */
.elementor, .elementor-section, .elementor-row, .elementor-column, .elementor-widget {
  box-sizing: border-box;
}

/* Constrain main content and center */
.site, .container, .wrap, .site-content {
  max-width: var(--max-site-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Ensure columns wrap responsively if layout uses flex */
.elementor-row, .elementor-section .elementor-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Default behavior for elementor columns (responsive) */
.elementor-column {
  min-width: 0; /* prevents overflow */
  flex: 1 1 0;  /* allow columns to shrink/grow */
}

/* Make inner widget content adaptive */
.elementor-widget-container {
  width: 100%;
}

/* Buttons - make them wrap and scale */
.elementor-button, .elementor-widget-button a, button, .btn {
  display: inline-block;
  padding: 0.6em 1.2em;
  font-size: clamp(14px, 1.2vw + 0.1rem, 16px);
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  max-width: 100%;
}

/* Forms and inputs full width on small screens */
input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea, select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Make hero/background images cover but responsive */
.elementor-section-wrap .elementor-background, .elementor-section .elementor-container {
  background-size: cover;
  background-position: center;
}

/* Fix common overflow issues from long words/URLs */
p, h1, h2, h3, h4, h5, h6, .elementor-widget {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Utility to hide unused large spacing on small screens */
@media (max-width: 1024px) {
  :root { --container-padding: 18px; }
  .elementor-column .elementor-widget {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

/* Tablet adjustments */
@media (max-width: 768px) {
  :root { --container-padding: 16px; }
  .elementor-row, .elementor-section .elementor-container {
    gap: 14px;
    flex-direction: row; /* allow columns to wrap below */
  }
  /* If you used fixed px side paddings in sections, reduce them */
  .elementor-section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  /* Typical two-column -> single stacked layout */
  .elementor-column {
    flex: 1 1 100%; 
    min-width: 100%;
  }
  .elementor-widget > .elementor-widget-container {
    padding: 10px 0;
  }
  .menu-toggle, .mobile-menu-toggle { display: inline-block; }
  nav.main-navigation { display: none; } /* show mobile menu instead (if exists) */
}

/* Mobile adjustments */
@media (max-width: 480px) {
  :root { --container-padding: 12px; }
  body { font-size: clamp(13px, 2.5vw, 15px); }
  h1 { font-size: clamp(20px, 6vw, 30px); }
  h2 { font-size: clamp(18px, 5vw, 24px); }
  .elementor-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex-basis: 100% !important;
  }
  .elementor-widget {
    margin-bottom: 12px;
  }
  .elementor-button { padding: 0.55em 0.9em; width: 100%; box-sizing: border-box; }
  /* Reduce large hero paddings on mobile */
  .elementor-hero, .hero, .elementor-section.hero-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  /* Make header compact */
  header.site-header, .site-header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* Accessibility: ensure focus outlines visible on keyboard use */
:focus {
  outline: 3px solid rgba(21, 156, 228, 0.6);
  outline-offset: 2px;
}

/* Prevent common overflow from iframes (maps/videos) */
.responsive-embed, .embed-responsive, iframe {
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
}

/* Optional: Improve how background parity displays on small screens */
.elementor-section[data-settings*="stretch_section"], .elementor-section-stretched {
  width: 100%;
  left: 0;
  right: 0;
  box-sizing: border-box;
}

/* Tweak for menus that stay horizontal on small screens (force stacking) */
.primary-menu li, .main-navigation ul li {
  white-space: normal;
}

/* End of responsive helper CSS */