/* mobile-nav.css — Element Dental
   Shared mobile navigation styles.
   Linked from every page via <link rel="stylesheet" href="mobile-nav.css"> in <head>.
   JavaScript (mobile-nav.js) handles HTML injection and interaction.
*/

/* ── Full-screen nav overlay ── */
.mnav {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9500;
  background: #FDFCFB;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
}
.mnav.open { transform: translateY(0); }

/* Entry animations */
@keyframes mnavHeaderIn {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mnavItemIn {
  0%   { opacity: 0; transform: translateY(32px) scale(0.97); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Initial hidden state — JS resets these before animating in */
.mnav-header { opacity: 0; }
.mnav-item   { opacity: 0; }

/* ── Header ── */
.mnav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 118px;
  flex-shrink: 0;
  background: var(--taupe, #E2DCD6);
}
.mnav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mnav-brand img { height: 86px; width: auto; }
.mnav-brand-name {
  font-family: var(--font-sub, "Montserrat", sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey, #4E514E);
  line-height: 1.3;
}

/* ── Close (×) button ── */
.mnav-close {
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid var(--taupe, rgba(78,81,78,0.35));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--grey, #4E514E);
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.2s;
}
.mnav-close:hover { background: var(--grey-light, #F7F5F3); }

/* ── Nav list ── */
.mnav-list {
  list-style: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 57px 0 32px;
}
.mnav-item { border-bottom: 1px solid var(--taupe, #E2DCD6); }
.mnav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  font-family: var(--font-heading, "Playfair Display", Georgia, serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--grey, #4E514E);
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 12px;
}
.mnav-link:active { background: rgba(78,81,78,0.08); }

/* ── Chevron (accordion arrow) ── */
.mnav-chevron {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #a8a09a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s;
  margin-right: 26px;
}
.mnav-chevron svg { width: 10px; height: 10px; transition: transform 0.3s; }
.mnav-item.expanded .mnav-chevron { background: var(--grey, #4E514E); border-color: var(--grey, #4E514E); }
.mnav-item.expanded .mnav-chevron svg { transform: rotate(90deg); }
.mnav-item.expanded .mnav-chevron svg path { stroke: #fff; }

/* ── Accordion sub-items ── */
.mnav-sub {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  background: var(--grey-light, #F7F5F3);
}
.mnav-item.expanded .mnav-sub { max-height: 2600px; }
.mnav-sub li a {
  display: block;
  padding: 14px 24px 14px 36px;
  font-family: var(--font-body, "Raleway", sans-serif);
  font-size: 15px;
  font-weight: 300;
  color: #7a7d7a;
  text-decoration: none;
  border-bottom: 1px solid rgba(226,220,214,0.4);
  transition: color 0.15s, font-size 0.15s ease, padding-left 0.15s ease, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mnav-sub li:last-child a { border-bottom: none; }
.mnav-sub li a:hover,
.mnav-sub li a:active {
  color: var(--grey, #4E514E);
  font-size: 17px;
  padding-left: 42px;
  background: rgba(250,220,217,0.15);
}

/* ── Treatments scrollable panel ── */
.mnav-treat-outer {
  display: none;
  position: relative;
  height: 400px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  transition: opacity 0.3s ease;
}
.mnav-treat-outer::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to bottom, transparent, var(--grey-light, #F7F5F3) 90%);
}
.mnav-treat-scroll {
  height: 400px;
  width: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  background: var(--grey-light, #F7F5F3);
  scrollbar-width: none;
}
.mnav-treat-scroll::-webkit-scrollbar { display: none; }
.mnav-scrollbar {
  position: absolute;
  top: 8px; right: 16px; bottom: 8px;
  width: 4px;
  background: rgba(200,195,190,0.6);
  border-radius: 4px;
  pointer-events: none;
  z-index: 3;
}
.mnav-scrollbar-thumb {
  position: absolute;
  left: 0;
  width: 4px;
  background: rgba(78,81,78,0.55);
  border-radius: 4px;
  min-height: 28px;
  top: 0;
}
.mnav-treat-cat {
  padding: 13px 28px 7px;
  font-family: var(--font-sub, "Montserrat", sans-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8a8a3;
  border-top: 1px solid rgba(226,220,214,0.7);
}
.mnav-treat-cat:first-child { border-top: none; padding-top: 16px; }
.mnav-treat-link {
  display: block;
  padding: 12px 24px 12px 28px;
  font-family: var(--font-body, "Raleway", sans-serif);
  font-size: 15px;
  font-weight: 300;
  color: #7a7d7a;
  text-decoration: none;
  border-bottom: 1px solid rgba(226,220,214,0.2);
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mnav-treat-link:last-child { border-bottom: none; margin-bottom: 70px; }
.mnav-treat-link:hover {
  color: var(--grey, #4E514E);
  background: rgba(78,81,78,0.10);
}

/* ── Book CTA at bottom of nav ── */
.mnav-cta { padding: 20px 17px 36px; flex-shrink: 0; display: flex; justify-content: center; }
.mnav-cta button {
  padding: 16px 36px;
  background: var(--blush, #FADCD9);
  color: var(--grey, #4E514E);
  border: none;
  border-radius: 50px;
  font-family: var(--font-sub, "Montserrat", sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.3s, color 0.3s;
}
.mnav-cta button:hover { background: #f0c8c4; }

/* ── Hamburger open-state X animation ── */
@media (max-width: 768px) {
  .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ── Floating "Book Online" pill ── */
.float-book {
  display: block !important;
  position: fixed !important;
  bottom: max(68px, calc(env(safe-area-inset-bottom, 0px) + 56px)) !important;
  right: 52px !important;
  left: auto !important;
  z-index: 99999 !important;
  background: var(--blush, #FADCD9) !important;
  color: var(--grey, #4E514E) !important;
  font-family: var(--font-sub, "Montserrat", sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  transition: background 0.25s, box-shadow 0.25s;
  white-space: nowrap;
  opacity: 1 !important;
  visibility: visible !important;
}
.float-book:hover {
  background: #f0c8c4 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
  .float-book {
    bottom: max(83px, calc(env(safe-area-inset-bottom, 0px) + 77px)) !important;
    right: 47px !important;
    left: auto !important;
    font-size: 10px;
    padding: 13px 22px;
  }
}