/* === Minimal fixes to preserve original look, while solving mobile issues === */

/* 1) Mobile nav: keep original sizes & colors, just guarantee visibility and scrollability */
@media (max-width: 768px) {
  nav ul {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  nav li { flex: 0 0 auto !important; }
}

/* Never hide items inside <nav> via generic "hidden" utilities */
nav [class*="hidden"], nav [class~="sr-only"] {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 2) Home title/slogan centering (likely within a .hero) */
.hero h1, .hero h2 { text-align: center !important; margin-left:auto !important; margin-right:auto !important; }

/* 3) Accordions: hidden by default; JS controls open state */
.panel, .accordion-panel { display: none; }
.accordion.open + .panel,
.accordion.active + .panel,
.accordion[aria-expanded="true"] + .panel { display: block; }

/* 4) Normalize content image sizing (does not touch logos in nav/footer) */
main img, .content img, .tab-content img, .page-section img, .service img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Safety: never clip nav content via fixed heights */
nav, nav ul, nav li { height: auto !important; min-height: 0 !important; }

/* === Android horizontal scroll reliability for header nav === */
nav, nav ul {
  /* Allow horizontal panning without vertical hijack */
  touch-action: pan-x pinch-zoom;
  overscroll-behavior-x: contain;
}

nav ul {
  /* Ensure left-to-right flow and no gradient masks intercepting touches */
  direction: ltr !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scrollbar-width: none; /* Firefox hide scrollbar track */
}
nav ul::-webkit-scrollbar { display: none; } /* Chrome/Safari */

nav .nav-overlay, nav::before, nav::after,
nav ul::before.overlay, nav ul::after.overlay {
  pointer-events: none !important; /* overlays should never block drag */
}

/* Disable overly-aggressive snapping on very small screens */
@media (max-width: 480px) {
  nav ul { scroll-snap-type: x proximity; }
}

/* === v5: Android scroll fallback buttons and robust overflow === */
nav {
  position: sticky;
  top: 0;
  z-index: 1000;
}
nav .nav-rail-wrap {
  position: relative;
}
nav ul {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: none; /* avoid sticky snap blocking fine control */
  touch-action: pan-x pinch-zoom; /* allow horizontal gestures */
}

/* Hide scrollbars for a cleaner look */
nav ul::-webkit-scrollbar { display: none; }
nav ul { scrollbar-width: none; }

/* Scroll buttons (Android-only injected) */
.nav-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,0.35);
  color: #fff;
  display: none; /* shown only on Android via JS if overflow exists */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
.nav-scroll-btn.left  { left: 4px; }
.nav-scroll-btn.right { right: 4px; }
.nav-scroll-btn:focus { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }

/* Make sure the rail has some side padding so first/last tabs aren't under the buttons */
nav ul { padding-left: 44px; padding-right: 44px; }

/* === v6: Robust fixes === */

/* Prevent nav items (including logo) from shrinking or sticking */
nav ul { display: flex; flex-wrap: nowrap; }
nav li, nav a { flex: 0 0 auto; min-width: auto; }
nav li, nav a, nav img, nav svg { position: static !important; transform: none !important; }

/* Logo should keep natural aspect ratio; don't let flex shrink it */
nav img, nav .logo, .site-logo {
  max-height: 56px;
  height: auto;
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Buttons float over content; don't reserve padding in the rail */
nav ul { padding-left: 8px; padding-right: 8px; }

/* Keep overflow horizontal only; no snap */
nav ul {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: touch;
}

/* Ensure nothing blocks pointer/touch on the left side */
nav::before, nav::after { pointer-events: none !important; }

/* === v7: Respect original desktop logo size and left-align tabs on mobile === */

/* 1) Left-align on small screens so earliest tabs (logo/Home/Acupuncture) are reachable */
@media (max-width: 900px) {
  nav ul {
    justify-content: flex-start !important;
    align-items: center !important;
  }
}

/* 2) Restore original logo sizing: 150px desktop, 54px under 900px */
nav li.logo-li img.logo {
  max-height: none !important;
  width: auto !important;
  height: 150px !important;
}
@media (max-width: 900px) {
  nav li.logo-li img.logo { height: 54px !important; }
}

/* 3) Ensure horizontal scroll still active */
@media (max-width: 900px) {
  nav ul {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
  }
}

/* === v8: Desktop-only breathing room for logo on the left === */
@media (min-width: 1024px) {
  /* Add a bit of inner padding so the logo isn't flush with the viewport edge */
  nav { padding-left: 24px; }
  /* If another rule zeroes UL padding, ensure a small buffer on wide screens */
  nav ul { padding-left: 16px; }
}

/* === v9: Olive-green space to left of logo (desktop only) === */
@media (min-width: 1024px) {
  header, nav {
    background-color: #556B2F; /* Olive green tone */
  }
  nav {
    position: relative;
  }
  /* Create a pseudo-element that extends olive green space on the left */
  nav::before {
    content: "";
    position: absolute;
    left: -40px;
    top: 0;
    bottom: 0;
    width: 40px; /* width of olive green margin */
    background-color: #556B2F;
    z-index: 0;
  }
  /* Ensure logo and nav items are above the pseudo background */
  nav * {
    position: relative;
    z-index: 1;
  }
}

/* === v10: Desktop logo inset via margin on the logo item (no cropping) === */

/* Undo v8/v9 padding/pseudo-element tricks on desktop */
@media (min-width: 1024px) {
  nav { padding-left: 0 !important; overflow: visible !important; }
  nav ul { padding-left: 0 !important; }
  nav::before { display: none !important; }
  /* Give the logo's list item an inset margin instead */
  nav li.logo-li { margin-left: 24px !important; }
  /* Keep logo image margins as originally defined; no clipping */
  nav li.logo-li img.logo { margin-left: 0 !important; }
}

/* === v11: More olive-green space to the left of the logo on desktop === */
@media (min-width: 1024px) {
  nav { overflow: visible !important; }
  nav ul { padding-left: 0 !important; }
  /* Give a bit more breathing room (adjustable) */
  nav li.logo-li { margin-left: 40px !important; } /* was 24px */
  /* Keep logo image un-cropped */
  nav li.logo-li img.logo { display: block; height: 150px !important; width: auto !important; }
}

/* === v12: Desktop left spacer inside the tab rail (no cropping) === */
@media (min-width: 1024px) {
  nav { overflow: visible !important; }
  nav ul {
    position: relative;
    display: flex;
  }
  /* Add a flex spacer before the first item to create olive space on the left */
  nav ul::before {
    content: "";
    flex: 0 0 32px; /* adjust spacing here (e.g., 24/32/40px) */
  }
  /* Ensure the spacer doesn't interfere with scroll/taps on smaller screens (desktop only rule) */
}