/* Inside css/index-styles.css */

/* ==========================================================================
   1. BASE WRAPPER & ACCELERATED SLIDESHOW ENGINE
   ========================================================================== */

/* Base wrapper utilizing hardware acceleration */
.slideshow-wrapper {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh; /* Fallback for legacy clients */
  height: 100dvh; /* Prevents address bar resizing layout shifts */
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  background-color: #000;
  transform: translate3d(0, 0, 0); /* Forces GPU layer creation */
}

/* Individual slides setup */
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: opacity; /* Hints mobile browser to optimize opacity channels */
  animation: mobileFadeSlideshow 20s ease-in-out infinite;
}

/* Mobile-First Image Asset References (Load small 640w-800w variants) */
.slide-1 { background-image: url("../pix/unnamed-3-800w.jpg"); animation-delay: 0s; }
.slide-2 { background-image: url("../pix/88064419_868170610355969_8150515796456505344_n-800w.jpg"); animation-delay: 5s; }
.slide-3 { background-image: url("../pix/10064-800w.jpg"); animation-delay: 10s; }
.slide-4 { background-image: url("../pix/10039-800w.jpg"); animation-delay: 15s; }

/* GPU-friendly Opacity Keyframes */
@keyframes mobileFadeSlideshow {
  0% { opacity: 0; }
  5% { opacity: 1; }
  30% { opacity: 1; }
  35% { opacity: 0; }
  100% { opacity: 0; }
}

/* Desktop override: Load higher resolution images ONLY for larger viewports */
@media (min-width: 769px) {
  .slide-1 { background-image: url("../pix/unnamed-3-1920w.jpg"); }
  .slide-2 { background-image: url("../pix/88064419_868170610355969_8150515796456505344_n-2880w.jpg"); }
  .slide-3 { background-image: url("../pix/10064-1280w.jpg"); }
  .slide-4 { background-image: url("../pix/10039-1280w.jpg"); }
}

/* Accessibility settings for users with motion sensitivity */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slide {
    animation: none !important;
    opacity: 0 !important;
  }
  .slide-1 {
    opacity: 1 !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   2. IFRAME CONTAINER & INNER FRAME PRODUCTION CONFIGURATION
   ========================================================================== */

.iframe-container {
  margin-top: 450px;
  margin-bottom: 0px; 
  width: 100%; 
  background: rgba(255, 255, 255, 0.05); 
  border-radius: 8px; 
  overflow: visible !important; /* Forces layout tracking to allow unclipped elements */
  display: flex;
  flex-direction: column;
}

#content-frame {
  width: 100%; 
  border: none; 
  display: block; 
  height: 1490px; 
  min-height: 1490px;
  overflow-x: hidden !important;
  overflow-y: hidden !important; 
  scrollbar-width: none; 
}

/* ==========================================================================
   3. UTILITY LINKS & STRUCTURAL COMPONENTS
   ========================================================================== */

a[href*="facebook.com"],
a[href*="instagram.com"],
a[href*="x.com"],
a[href*="youtube.com"],
a[href*="linkedin.com"],
a[href*="yelp.com"],
a[href*="google.com"] {
  display: inline-block;
  transition: transform 0.2s ease-in-out;
  will-change: transform;
  backface-visibility: hidden; /* Fixes safari sub-pixel text/image anti-aliasing shake */
}

a[href*="facebook.com"]:hover,
a[href*="instagram.com"]:hover,
a[href*="x.com"]:hover,
a[href*="youtube.com"]:hover,
a[href*="linkedin.com"]:hover,
a[href*="yelp.com"]:hover,
a[href*="google.com"]:hover {
  transform: scale(1.2);
}

html {
  scroll-behavior: smooth;
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 12px;
  border-radius: 50%;
  text-decoration: none;
  z-index: 999;
}

.back-to-top:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.contact-link {
  color: #ffffff;
  text-decoration: underline;
  display: inline-block;
  font-weight: bold;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.contact-link:hover {
  transform: scale(1.12);
}

.booking-button-container {
  text-align: center;
  margin: 40px auto; 
  width: 100%;
  max-width: 400px;
}

.book-now-btn {
  display: inline-block;
  background-color: #008080; 
  color: #ffffff; 
  font-family: Roboto, sans-serif;
  font-size: 18px; 
  font-weight: 700; 
  text-decoration: none;
  padding: 16px 48px; 
  border-radius: 50px; 
  box-shadow: 0 4px 15px rgba(0, 128, 128, 0.3); 
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.book-now-btn:hover {
  background-color: #00a3a3;
  transform: translateY(-2px); 
  box-shadow: 0 6px 20px rgba(0, 163, 163, 0.45);
}

.book-now-btn:active {
  transform: translateY(1px); 
}

.responsive-hours-card {
  flex: initial;
  width: max-content;
  padding-right: 30px; 
}

.open-hours-item {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 4px;
}

.open-hours-item:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   4. CONTENT WRAPPERS & RESPONSIVE LAYOUT OVERRIDES
   ========================================================================== */

/* Clean Base Form Styles (Desktop Defaults) */
/* Section wrapper to make the light blue fill all space around the box */
.dm-content-section {
    background-color: #add8e6; /* Light Blue background */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-top: 60px;
    padding-bottom: 60px;
    box-sizing: border-box;
}

/* Centralized contact container card */
.contact-container {
    max-width: 1200px; /* Limits the container width for readability */
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); /* Soft drop shadow */
    box-sizing: border-box;
}

/* Two-column responsive layout */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

.map-wrapper iframe {
    width: 100%;
    height: 350px;
    border: 0;
    border-radius: 8px;
}

.iframe-form-wrapper {
  width: 100%;
}

.iframe-form-frame {
  width: 100%; 
  display: block; 
  height: 700px; 
  border: none; 
  background: transparent;
  overflow: hidden;
}

/* Base Counter Module Layout */
.counter-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #000000;
  color: #ffffff;
  margin: 0px;
  padding: 15px 0px 25px 0px;
  width: 100%;
  clear: both;
}

.counter-container .counter-number-wrapper {
  margin: 0;
  padding: 0;
  line-height: 1.2;
  background-color: #000000;
}

.counter-container .counter, 
.counter-container .plus {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffffff;
}

.counter-container p {
  margin: 2px 0 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.8;
  color: #ffffff;
}

/* ==========================================================================
   5. MOBILE VIEWPORT OVERRIDES & SANDBOX HYBRID SIZING
   ========================================================================== */

@media screen and (max-width: 768px) {
  .responsive-hours-card {
    width: 100% !important;
    max-width: 280px !important; 
    margin: 0 auto !important; 
    padding-right: 0 !important; 
  }

  .open-hours-item {
    display: flex !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  .dm-content-section {
    height: auto !important; 
    overflow: visible !important;
    padding: 25px 15px; 
  }

  .u_fcontainer, .dmfooterresp, .dmresprow, .iframe-form-wrapper {
    height: auto !important;
    overflow: visible !important;
  }

  #content-frame {
    display: block !important;
    width: 100% !important;
    height: 1200px; 
    min-height: 1200px;
    overflow-y: auto !important; /* Allows independent vertical swiping */
  }
}

/* ==========================================================================
   6. STRUCTURAL CLEAN SLATE OVERRIDES & ZERO WHITE GAP ENGINE
   ========================================================================== */

/* Clear hidden canvas restrictions from root container layers */
.iframe-container,
.container, 
.u_fcontainer, 
.p_hfcontainer,
main {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Desktop Alignment: Locks exact layout boundaries & eliminates internal scrollbars */
@media (min-width: 769px) {
  #content-frame {
    width: 100% !important;
    height: 1490px !important; 
    min-height: 1490px !important;
    max-height: 1490px !important;
    overflow: hidden !important; 
    scrollbar-width: none !important;
  }
}

/* Mobile Alignment: Locks exact stacked vertical list metrics & eliminates internal scrollbars */
@media (max-width: 768px) {
  #content-frame {
    width: 100% !important;
    height: 3890px !important; 
    min-height: 3890px !important;
    max-height: 3890px !important;
    overflow: hidden !important; 
    scrollbar-width: none !important;
  }
}

/* Complete destruction of internal cross-iframe webkit scrollbar tracks */
#content-frame::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ==========================================================================
   ULTIMATE FOOTER-ONLY BLACK OVERRIDE
   ========================================================================== */

/* 1. Force the footer and EVERY element nested inside it to black */
footer#site-footer,
footer#site-footer *,
footer#site-footer *::before,
footer#site-footer *::after {
  background-color: #000000 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 2. Force text and headings inside the footer to white */
footer#site-footer,
footer#site-footer *:not(hr) {
  color: #ffffff !important;
}

/* 3. Ensure links retain text visibility */
footer#site-footer a {
  color: #ffffff !important;
  text-decoration: underline;
}

/* 4. Fix translucent divider lines */
footer#site-footer hr,
footer#site-footer .dmDivider {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
}

/* 5. Eliminate external bottom margins on elements right above the footer 
   that might create a white gap between sections */
.dm-content-section,
.iframe-container,
#content-frame {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   COMPACT FOOTER EXTENSION & ZERO-GAP BOTTOM SHIELD
   ========================================================================== */

/* 1. Ensure body remains transparent so slideshow shows through */
body {
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Full-width horizontal expansion with tight bottom padding */
#site-footer {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-bottom: 0 !important;
  padding-top: 40px !important;
  padding-bottom: 20px !important; /* Reduced bottom padding to eliminate excess space */
  background-color: #000000 !important;
  box-sizing: border-box !important;
}

/* 3. Internal container & counter resets */
#site-footer .dmRespRow,
#site-footer .dmRespColsWrapper,
#site-footer .footer-override-row,
#site-footer .counter-container,
#site-footer .footer-scripts-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background-color: #000000 !important;
  box-sizing: border-box !important;
}

/* Compact padding for counter box at the bottom of footer */
#site-footer .counter-container {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* 4. Bottom Extension Shield: Reaches below the footer to prevent white background bleed */
#site-footer::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;
  height: 200px !important; /* Prevents white space without adding visible page scroll */
  background-color: #000000 !important;
  z-index: 999 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   FINAL COMBINED FOOTER & SCROLLBAR OVERRIDES
   ========================================================================== */

/* 1. Ensure body remains transparent so fixed slideshow shows through */
body {
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Full-width horizontal expansion with compact bottom padding */
#site-footer {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-bottom: 0 !important;
  padding-top: 40px !important;
  padding-bottom: 20px !important;
  background-color: #000000 !important;
  box-sizing: border-box !important;
}

/* 3. Internal container & counter layout resets */
#site-footer .dmRespRow,
#site-footer .dmRespColsWrapper,
#site-footer .footer-override-row,
#site-footer .counter-container,
#site-footer .footer-scripts-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background-color: #000000 !important;
  box-sizing: border-box !important;
}

/* Compact padding for counter box */
#site-footer .counter-container {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* 4. Bottom Extension Shield (Covers space below footer without extra scroll) */
#site-footer::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;
  height: 200px !important;
  background-color: #000000 !important;
  z-index: 999 !important;
  pointer-events: none !important;
}

/* 5. Restore visible main page scrollbar with dark theme styling */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: block !important;
  width: 10px !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #000000 !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: #333333 !important;
  border-radius: 5px !important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: #555555 !important;
}

html, body {
  scrollbar-width: auto !important;
  scrollbar-color: #333333 #000000 !important;
}

/* Override position offsets for elements sitting beneath the header */
.iframe-container,
#content-frame,
.dm-content-section,
.container + div {
  position: relative !important;
  top: 80px !important; /* Pushes the lower section down by 80px */
}