/* ==========================================================
   VIJAY ENTERPRISES
   FULL-WIDTH GOOGLE MAPS SECTION

   Website:
   https://vijayenterprises1986.in/

   Dependencies:
   - sections/location-map.html
   - css/style.css

   Original design preserved:
   - Full-width edge-to-edge Google Map
   - No outer container margins
   - No border or rounded corners
   - Original responsive map heights

   Improvements:
   - Reliable responsive iframe dimensions
   - No horizontal overflow
   - Stable layout during iframe loading
   - Accessible iframe focus
   - Reduced-motion compatibility
   - Print fallback

   Important:
   Map coordinates and directions URLs
   must be verified before production.
========================================================== */


/* ==========================================================
   01. MAP SECTION
========================================================== */

.ve-location-map {
  position: relative;

  display: block;

  width: 100%;
  max-width: 100%;

  margin: 0;
  padding: 0;

  background: #e9eef4;

  overflow: hidden;

  scroll-margin-top: 90px;
}


/* ==========================================================
   02. BOX SIZING
========================================================== */

.ve-location-map,
.ve-location-map *,
.ve-location-map *::before,
.ve-location-map *::after {
  box-sizing: border-box;
}


/* ==========================================================
   03. MAP FRAME

   The frame reserves its full height before
   the Google Maps iframe finishes loading.

   This helps prevent layout shifts.
========================================================== */

.ve-location-map-frame {
  position: relative;

  display: block;

  width: 100%;
  max-width: 100%;

  height: 390px;
  min-height: 390px;

  margin: 0;
  padding: 0;

  background: #e9eef4;

  border: 0;
  border-radius: 0;

  overflow: hidden;

  isolation: isolate;
}


/* ==========================================================
   04. GOOGLE MAPS IFRAME
========================================================== */

.ve-location-map-frame iframe {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  max-width: 100%;

  margin: 0;
  padding: 0;

  background: #e9eef4;

  border: 0;
  border-radius: 0;

  vertical-align: middle;
}


/* ==========================================================
   05. MAP FOCUS ACCESSIBILITY

   Visitors can navigate into the Google
   Maps iframe using the keyboard.

   Provide a visible focus indicator.
========================================================== */

.ve-location-map-frame iframe:focus-visible {
  outline: 3px solid #203f83;

  outline-offset: -4px;
}


/* ==========================================================
   06. LINK ACCESSIBILITY

   Reserved for possible future accessible
   map fallback links.

   No visible link is introduced by this CSS.
========================================================== */

.ve-location-map a:focus-visible {
  outline: 3px solid #203f83;

  outline-offset: 3px;
}


/* ==========================================================
   07. LARGE DESKTOP
   1600px AND ABOVE
========================================================== */

@media (min-width: 1600px) {

  .ve-location-map-frame {
    height: 430px;
    min-height: 430px;
  }

}


/* ==========================================================
   08. LAPTOP
   BELOW 1200px
========================================================== */

@media (max-width: 1199.98px) {

  .ve-location-map-frame {
    height: 370px;
    min-height: 370px;
  }

}


/* ==========================================================
   09. TABLET
   BELOW 992px
========================================================== */

@media (max-width: 991.98px) {

  .ve-location-map {
    scroll-margin-top: 75px;
  }

  .ve-location-map-frame {
    height: 340px;
    min-height: 340px;
  }

}


/* ==========================================================
   10. MOBILE
   BELOW 768px
========================================================== */

@media (max-width: 767.98px) {

  .ve-location-map-frame {
    height: 300px;
    min-height: 300px;
  }

}


/* ==========================================================
   11. SMALL MOBILE
   BELOW 481px
========================================================== */

@media (max-width: 480px) {

  .ve-location-map-frame {
    height: 270px;
    min-height: 270px;
  }

}


/* ==========================================================
   12. EXTRA SMALL VIEWPORT
   BELOW 361px

   Keep the map usable on narrow screens
   without introducing horizontal scrolling.
========================================================== */

@media (max-width: 360px) {

  .ve-location-map-frame {
    height: 260px;
    min-height: 260px;
  }

}


/* ==========================================================
   13. REDUCED MOTION

   The iframe is controlled by Google Maps.

   This rule only affects animations or
   transitions defined by our own website.
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .ve-location-map,
  .ve-location-map-frame,
  .ve-location-map-frame iframe {
    animation: none !important;
    transition: none !important;
  }

}


/* ==========================================================
   14. PRINT SUPPORT

   Embedded maps cannot be relied upon
   to print correctly in every browser.

   Hide the interactive iframe on print.
   Office address remains available in
   the contact section.
========================================================== */

@media print {

  .ve-location-map {
    display: none !important;
  }

}


/* ==========================================================
   END OF LOCATION MAP STYLESHEET
========================================================== */