/**
 * Mobile Responsiveness & Navigation Upgrade: Grade A+
 * Author: Solutions Architecture Team
 * Target: Proper Desktop / Mobile Menu Isolation, Upward Popup Geometry, Touch Ergonomics
 */

/* ==========================================================================
   1. Root, Theme & Safe Area Setup
   ========================================================================== */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --theme-cream: #fff9f1;
  --theme-accent: #574123;
  --theme-accent-hover: #4a7973;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* ==========================================================================
   2. Navigation Visibility & First-Visit Intro Isolation
   ========================================================================== */
.elementor-widget-nav-menu,
.elementor-widget-nav-menu.elementor-invisible {
  visibility: visible;
  opacity: 1;
  animation: none !important;
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 1.5s ease !important;
}

.elementor-widget-nav-menu {
  z-index: 99999 !important;
}

/* Strictly hide navigation menu while first-time intro is active */
html.intro-active .elementor-widget-nav-menu,
body.intro-active .elementor-widget-nav-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   3. Desktop Menu Architecture (Screen width >= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  /* Strictly hide mobile hamburger and mobile dropdown on desktop */
  .elementor-menu-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .elementor-nav-menu--dropdown,
  .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ensure horizontal desktop navigation displays cleanly */
  .elementor-nav-menu--main {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .elementor-nav-menu--main ul.elementor-nav-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 32px !important;
  }

  .elementor-nav-menu--main .menu-item a.menu-link {
    font-size: 0.95rem !important;
    color: var(--theme-accent) !important;
    font-weight: 500 !important;
    text-transform: lowercase !important;
    letter-spacing: 0.04em !important;
    padding: 6px 12px !important;
    transition: color 0.2s ease, opacity 0.2s ease !important;
  }

  .elementor-nav-menu--main .menu-item a.menu-link:hover {
    color: var(--theme-accent-hover) !important;
    opacity: 0.8 !important;
  }
}

/* ==========================================================================
   4. Mobile Menu Architecture (Screen width <= 767px)
   ========================================================================== */
@media (max-width: 767px) {
  /* Hide desktop horizontal menu */
  .elementor-nav-menu--main {
    display: none !important;
    visibility: hidden !important;
  }

  /* Fix Widget to Right-Side Bottom Corner */
  .elementor-widget-nav-menu,
  .elementor-element.elementor-widget-nav-menu {
    position: fixed !important;
    bottom: max(20px, var(--safe-bottom)) !important;
    right: max(20px, var(--safe-right)) !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 99999 !important;
  }

  /* Hamburger Toggle: Pure Minimalist Icon in Corner */
  .elementor-menu-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--theme-accent) !important;
    transition: transform 0.15s ease, opacity 0.15s ease !important;
    user-select: none;
    -webkit-user-select: none;
    z-index: 100000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .elementor-menu-toggle:active {
    transform: scale(0.88) !important;
    opacity: 0.65 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  .elementor-menu-toggle i,
  .elementor-menu-toggle svg {
    font-size: 26px !important;
    color: inherit !important;
    pointer-events: none;
  }

  /* Mobile Dropdown: CLOSED State (Zero ghost box, zero phantom borders) */
  .elementor-nav-menu--dropdown[aria-hidden="true"],
  .elementor-nav-menu--dropdown:not([aria-hidden="false"]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Mobile Dropdown: OPEN State (Opens UPWARDS above the bottom-right corner button) */
  .elementor-nav-menu--dropdown[aria-hidden="false"],
  .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    bottom: calc(max(20px, var(--safe-bottom)) + 58px) !important; /* Anchors right above corner button */
    right: max(20px, var(--safe-right)) !important;
    left: auto !important;
    top: auto !important;
    width: min(240px, calc(100vw - 40px)) !important;
    max-width: 250px !important;
    background: rgba(255, 249, 241, 0.98) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(87, 65, 35, 0.15) !important;
    box-shadow: 0 16px 40px -8px rgba(87, 65, 35, 0.24),
                0 4px 12px rgba(0, 0, 0, 0.05) !important;
    padding: 8px !important;
    margin: 0 !important;
    z-index: 999999 !important;
    transform: none !important;
    animation: menuSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  @keyframes menuSlideUp {
    from {
      opacity: 0;
      transform: translateY(10px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Mobile Menu Link Items */
  .elementor-nav-menu--dropdown ul.elementor-nav-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .elementor-nav-menu--dropdown .menu-item {
    width: 100% !important;
  }

  .elementor-nav-menu--dropdown .menu-item a.menu-link,
  .elementor-nav-menu--dropdown .menu-item a.elementor-item {
    min-height: 48px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 12px 18px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: capitalize !important;
    color: var(--theme-accent) !important;
    border-radius: 10px !important;
    border: none !important;
    touch-action: manipulation !important;
    transition: background-color 0.15s ease,
                color 0.15s ease,
                transform 0.12s ease !important;
  }

  .elementor-nav-menu--dropdown .menu-item a:hover,
  .elementor-nav-menu--dropdown .menu-item a:focus {
    background-color: rgba(87, 65, 35, 0.08) !important;
    color: var(--theme-accent) !important;
  }

  .elementor-nav-menu--dropdown .menu-item a:active {
    transform: scale(0.97) !important;
    background-color: rgba(87, 65, 35, 0.14) !important;
  }
}

/* ==========================================================================
   5. Fluid Typography & Content Scaling
   ========================================================================== */
@media (max-width: 768px) {
  /* Comprehensive Mobile Content Centering */
  body,
  #content,
  .site-content,
  .ast-container,
  .elementor-page,
  .elementor-section-wrap,
  .elementor-text-editor,
  .entry-content {
    text-align: center !important;
  }

  /* Text & Heading Centering */
  h1, h2, h3, h4, h5, h6,
  p,
  .entry-content p,
  .elementor-text-editor p,
  .elementor-heading-title,
  .entry-title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Centered Blockquotes */
  blockquote,
  .entry-content blockquote {
    border-left: none !important;
    border-top: 1px solid rgba(87, 65, 35, 0.15) !important;
    border-bottom: 1px solid rgba(87, 65, 35, 0.15) !important;
    padding: 16px 20px !important;
    margin: 24px auto !important;
    max-width: 90% !important;
    text-align: center !important;
    font-style: italic !important;
  }

  blockquote p {
    text-align: center !important;
    margin-bottom: 0 !important;
  }

  /* Centered Sections and Columns */
  .elementor-section:not(.elementor-section-stretched) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .elementor-section-height-full,
  .elementor-section-items-middle {
    min-height: calc(100vh - 80px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .elementor-section > .elementor-container,
  .elementor-row {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .elementor-column {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .elementor-column-wrap,
  .elementor-widget-wrap {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .elementor-widget:not(.elementor-widget-nav-menu) {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .elementor-widget-container {
    width: 100% !important;
    text-align: center !important;
  }

  /* Centered Icons, Images & Dividers */
  .elementor-icon-wrapper,
  .elementor-widget-icon,
  .elementor-image,
  .elementor-divider {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* Swiper / Slides Content Centering */
  .elementor-slide-contents,
  .swiper-slide-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 90% !important;
  }

  /* Typography Fluid Sizing */
  h1, .entry-content h1 {
    font-size: clamp(2rem, 7vw, 3.2rem) !important;
    line-height: 1.22 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  h2, .entry-content h2 {
    font-size: clamp(1.65rem, 5.5vw, 2.4rem) !important;
    line-height: 1.28 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  h3, .entry-content h3, .elementor-heading-title {
    font-size: clamp(1.35rem, 4.6vw, 1.85rem) !important;
    line-height: 1.35 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  p, .entry-content p {
    font-size: clamp(1rem, 2.8vw, 1.125rem) !important;
    line-height: 1.68 !important;
  }

  .elementor-slide-description {
    font-size: clamp(1.35rem, 4.8vw, 2.1rem) !important;
    line-height: 1.45 !important;
    padding: 0 16px !important;
    text-align: center !important;
    color: var(--theme-accent) !important;
  }
}

/* ==========================================================================
   6. Form Usability & Preventing iOS Safari Auto-Zoom
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
  font-size: 16px !important;
  min-height: 48px !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  touch-action: manipulation !important;
  box-sizing: border-box !important;
}

button,
input[type="submit"],
input[type="button"],
.elementor-button,
.ast-button {
  min-height: 48px !important;
  min-width: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  touch-action: manipulation !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, opacity 0.15s ease !important;
}

button:active,
.elementor-button:active,
input[type="submit"]:active {
  transform: scale(0.97) !important;
}

/* ==========================================================================
   7. Container Containment & Touch Scroll
   ========================================================================== */
.ast-container,
.elementor-container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: clamp(14px, 4vw, 24px) !important;
  padding-right: clamp(14px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

img, video, iframe {
  max-width: 100% !important;
  height: auto !important;
}

.elementor-swiper,
.swiper-container {
  touch-action: pan-y !important;
  width: 100% !important;
}

/* ==========================================================================
   8. Contact Form Notices & Spam Protection States
   ========================================================================== */
.elementor-message {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 16px !important;
  padding: 12px 18px !important;
  border-radius: 8px !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  text-align: center !important;
  line-height: 1.5 !important;
  animation: noticeFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.elementor-message-success {
  background-color: #f0fdf4 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
}

.elementor-message-danger {
  background-color: #fef2f2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
}

@keyframes noticeFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}