/* ============================================================
   Phase D: Responsive Navigation (replaces Phase B.5 mobile nav)
   ============================================================ */

/* ---- Main Nav: Desktop (1 row) ---- */
#main-site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  height: 48px;
  background: color-mix(in srgb, var(--theme-surface, #fff), var(--theme-tint, white) 20%);
  color: var(--theme-nav-text, var(--theme-text, #fff));
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  overflow: visible; /* must be visible so nav dropdown panels can extend below */
}

.site-title-link,
.site-title-link:hover {
  text-decoration: none;
  color: inherit;  /* prevent global a:hover color change from cascading into SVG */
}
.site-title-link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Nav logo — always position:fixed so it sits above overlay + dropdowns.
   Default (pages WITH sub-tabs): 1px from top/bottom of 48px nav → 46px tall.
   Pages WITHOUT sub-tabs: oversized, extends below nav via overflow:visible.
   Animated: transitions between sizes when hamburger overlay opens/closes. */
#nav-logo {
  position: fixed;
  top: 1px;
  left: 12px;
  height: 46px !important;
  z-index: 9999;
  flex-shrink: 0;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Make room for the fixed-positioned logo — even spacing: 12px | logo ~67px | 12px | text */
.site-title-link {
  padding-left: 80px;
  transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pages WITHOUT sub-tabs: oversized logo extending below nav bar */
#main-site-nav.nav-large-logo {
  overflow: visible; /* let oversized logo extend below nav */
}
#main-site-nav.nav-large-logo #nav-logo {
  height: 65px !important;
  top: 1px;
}
#main-site-nav.nav-large-logo .site-title-link {
  padding-left: 108px; /* logo is ~95px wide at 65px height + 12px gap */
}

.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 1;
  transition: background 0.15s ease;
}
.nav-icon-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Account button — override marketplace.css legacy styling inside nav */
#main-site-nav .account-btn {
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
  font-size: inherit;
  color: inherit;
  position: relative;
}

/* ---- Nav Dropdown Containment (mobile) ---- */
/* Make wrapper elements non-positioned so dropdown portals reference the nav
   (position:fixed). This means top:100% = below the nav's FULL height,
   which automatically adapts when the tray expands or collapses. */
@media (max-width: 1279px) {
  #nav-wrap-messaging,
  #nav-wrap-cart,
  #nav-wrap-bookmarks,
  #nav-wrap-files,
  #nav-wrap-help,
  .color-scheme-dropdown {
    position: static !important;
  }

  .nav-dropdown-panel {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 70vh !important;
    margin-top: 0 !important;
    overflow-y: auto !important;
    border-radius: 0 0 12px 12px !important;
  }

  /* Color scheme grid: auto-size squares to fit viewport */
  #scheme-grid {
    grid-template-columns: repeat(8, 1fr) !important;
  }
  #scheme-grid button {
    width: 100% !important;
  }
  #scheme-grid .scheme-preview {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
  }
}

/* ---- Mobile/Tablet: single row, hamburger drawer ---- */
@media (max-width: 1279px) {
  #main-site-nav {
    padding: 0 4px;
    height: 44px;
    gap: 2px;
  }

  /* Hide site name on mobile, logo only */
  .site-title { display: none; }
  #nav-logo {
    height: 42px !important;
    top: 1px;
    left: 4px;
  }
  .site-title-link {
    padding-left: 64px;
  }
  /* Pages without sub-tabs: oversized on mobile */
  #main-site-nav.nav-large-logo #nav-logo {
    height: 56px !important;
    top: 1px;
  }
  #main-site-nav.nav-large-logo .site-title-link {
    padding-left: 84px;
  }

  .nav-tools {
    gap: 0;
  }
  .nav-icon-btn {
    width: 36px;
    height: 36px;
  }
}

/* ---- Mobile Landscape: tighter ---- */
@media (max-width: 479px) and (orientation: landscape) {
  #main-site-nav {
    height: 36px;
  }
  #nav-logo { height: 34px !important; top: 1px; }
  .site-title-link { padding-left: 52px; }
  #main-site-nav.nav-large-logo #nav-logo { height: 46px !important; top: 1px; }
  #main-site-nav.nav-large-logo .site-title-link { padding-left: 72px; }
  .nav-icon-btn {
    width: 32px;
    height: 32px;
  }
}

/* ---- Calendar toggle active state ---- */
html.mobile-calendar-open #book-studio-btn-nav {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

/* ---- Hamburger Overlay ---- */
#mobile-hamburger-overlay {
  display: none;
  position: fixed;
  top: var(--nav-total-height, 48px);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--theme-background, #f5f5f5);
  z-index: 8998; /* below nav (9000) + sub-tabs (8999) so header + logo stay on top */
  overflow: hidden; /* grid scrolls, not the overlay itself */
}
#mobile-hamburger-overlay.open {
  display: flex;
  flex-direction: column;
}

.mobile-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  border-bottom: 1px solid var(--theme-border, #e5e7eb);
  flex-shrink: 0;
}
.mobile-overlay-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--theme-text, #111);
}
.mobile-overlay-close {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--theme-text-secondary, #666);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.mobile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  padding: 16px;
  flex: 1;
  align-content: start;
  container-type: inline-size;
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Watermark logo — centered inside the grid (position:relative parent).
   Uses z-index:0 so grid items (z-index:1) paint on top. */
.overlay-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  width: 70% !important;
  height: 70% !important;
}
.overlay-watermark svg {
  width: 100% !important;
  height: 100% !important;
  opacity: 0.1 !important;
  mix-blend-mode: soft-light !important;
}
@media (max-width: 479px) and (orientation: portrait) {
  .overlay-watermark {
    width: 95% !important;
    height: 95% !important;
  }
}
/* Grid items sit above watermark */
.mobile-grid-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 4px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--theme-text, #333);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-grid-item:hover,
.mobile-grid-item:active,
.mobile-grid-item.active {
  text-decoration: none;
}
/* Hover: scale up */
.mobile-grid-item:hover {
  transform: scale(1.12);
}

/* Label: accent color on hover */
.mobile-grid-label {
  transition: color 0.3s ease;
}
.mobile-grid-item:hover .mobile-grid-label {
  color: var(--theme-accent, #43e97b);
}

/* Icon: gentle rock on hover (no scale — parent handles that) */
.mobile-grid-icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-grid-item:hover .mobile-grid-icon {
  animation: icon-rock 2s ease-in-out infinite;
}

@keyframes icon-rock {
  0%   { transform: rotate(3.5deg); }
  50%  { transform: rotate(-3.5deg); }
  100% { transform: rotate(3.5deg); }
}

/* Press feedback */
.mobile-grid-item:active {
  transform: scale(0.95);
}
/* Remove focus/tap rectangle outlines */
.mobile-grid-item:focus,
.mobile-grid-item:focus-visible {
  outline: none;
}

.mobile-grid-icon {
  font-size: 28px;
  line-height: 1;
}
.mobile-grid-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Grid separator between main nav items and utility/facets */
.mobile-grid-separator {
  border: none;
  border-top: 1px solid var(--theme-border, #e5e7eb);
  margin: 0 16px;
}

/* Marketplace facet items — optionally hidden on small mobile */
.facet-item {
  opacity: 0.85;
}

/* ---- Sub-tab bar positioning ---- */
#sub-tab-bar {
  position: fixed;
  top: var(--nav-bar-height, 48px);
  left: 0;
  right: 0;
  z-index: 8999;
  transition: top 0.2s ease;
}

/* ---- Desktop: nav + sub-tabs + overlay respect calendar sidebar ---- */
@media (min-width: 480px) {
  #main-site-nav {
    right: var(--month-card-width, 416px);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.calendar-hidden #main-site-nav {
    right: 0;
  }

  #sub-tab-bar {
    right: var(--month-card-width, 416px);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.calendar-hidden #sub-tab-bar {
    right: 0;
  }

  #mobile-hamburger-overlay {
    right: var(--month-card-width, 416px);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.calendar-hidden #mobile-hamburger-overlay {
    right: 0;
    bottom: 0;
  }

  /* Desktop grid — fixed 6 columns, distribute rows through available height */
  .mobile-grid {
    grid-template-columns: repeat(6, 1fr);
    padding: 0 20px;
    align-content: space-evenly;
  }
  .mobile-grid-item {
    gap: 4px;
    padding: 4px 6px;
    font-size: max(13px, 1.3cqi);
  }
  .mobile-grid-icon {
    font-size: max(38px, 3.8cqi);
  }
}

/* ---- Wide desktop: overlay covers everything below nav ---- */
@media (min-width: 1280px) {
  #mobile-hamburger-overlay {
    bottom: 0;
  }
}

/* ---- Bottom Sheet (kept for calendar overlay) ---- */
#mobile-bottom-sheet {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60vh;
  background: var(--theme-surface, #fff);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  z-index: 9200;
  overflow: hidden;
  transition: height 0.3s ease;
}
#mobile-bottom-sheet.open { display: block; }
#mobile-bottom-sheet.fullscreen { height: 100vh; border-radius: 0; }

.mobile-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 8px;
  cursor: grab;
}
.mobile-sheet-handle-bar {
  width: 40px;
  height: 4px;
  background: var(--theme-border, #d1d5db);
  border-radius: 2px;
}
.mobile-sheet-content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: calc(100% - 20px);
}
.mobile-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 9100;
}
.mobile-sheet-backdrop.visible { display: block; }

/* ---- Calendar on mobile ---- */
@media (max-width: 479px) {
  #calendar-shell-persist {
    clip-path: inset(100%) !important;
    pointer-events: none !important;
  }
  html, body {
    overflow: auto !important;
    height: auto !important;
  }
  #continue.cta-float, #continue {
    clip-path: inset(100%) !important;
    pointer-events: none !important;
  }
  html.mobile-calendar-open, html.mobile-calendar-open body {
    overflow: hidden !important;
    height: 100vh !important;
  }
  html.mobile-calendar-open #calendar-shell-persist {
    clip-path: none !important;
    pointer-events: auto !important;
  }
  html.mobile-calendar-open #continue {
    clip-path: none !important;
    pointer-events: auto !important;
  }
  html.mobile-calendar-open #mobile-home-landing { display: none !important; }
  html.mobile-calendar-open #page-content-container { display: none !important; }
  html.mobile-calendar-open footer { display: none !important; }
  html.mobile-calendar-open .ssm-wrap {
    top: calc(var(--nav-total-height, 48px) + env(safe-area-inset-top, 0px)) !important;
  }
  html.mobile-calendar-open #mainPanel {
    top: calc(var(--nav-total-height, 48px) + env(safe-area-inset-top, 0px)) !important;
  }
  html.mobile-calendar-open #weekCard {
    top: calc(var(--main-panel-height, 316px) + var(--nav-total-height, 48px) + env(safe-area-inset-top, 0px)) !important;
  }

  /* Page content: viewport-filling with padding for nav/footer.
     Content never moves when header/footer hide — they slide OVER the padding. */
  #page-content-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* Top padding clears nav + logo overflow + gap. Static value, no JS.
       Tray overlaps — user scrolls up to see covered content.
       Background transparent so first section's bg extends into padding area. */
    padding: 66px 16px calc(var(--footer-height, 32px) + env(safe-area-inset-bottom, 0px) + 8px) !important;
    background: transparent;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  /* Pages with sub-tabs need extra top padding to clear the fixed tab bar */
  body:has(#sub-tab-bar a) #page-content-container {
    padding-top: 102px !important; /* 66px base + ~36px sub-tab bar */
  }
  #page-content-container::-webkit-scrollbar {
    display: none;
  }

  /* Footer needs visible bg since content scrolls behind it — match nav */
  .site-footer {
    background: color-mix(in srgb, var(--theme-surface, #fff), var(--theme-tint, white) 20%) !important;
  }

  /* Alternating hour row backgrounds — subtle zebra stripe */
  .weekcol .w-hours .hrow:nth-child(odd) {
    background: rgba(0, 0, 0, 0.03);
  }
  .weekcol .w-timeline .tl-hour:nth-child(odd) {
    background: rgba(0, 0, 0, 0.03);
  }
}

/* ---- Mobile/Tablet: search expanded state ---- */
/* When search opens inline, hide other nav tools and let search fill the row */
@media (max-width: 1279px) {
  #main-site-nav.nav-search-open .site-title-link {
    flex: 0 0 auto;
    padding-left: 50px;
    transition: padding-left 0.2s ease;
  }
  /* Shrink logo to sub-tab size regardless of nav-large-logo */
  #main-site-nav.nav-search-open #nav-logo {
    height: 42px !important;
    transition: height 0.2s ease;
  }
  #main-site-nav.nav-search-open .nav-tools {
    flex: 1;
  }
  /* Hide tray items, tray toggle, and account — keep search + hamburger */
  #main-site-nav.nav-search-open [data-nav-group="tray"],
  #main-site-nav.nav-search-open #nav-tray-toggle,
  #main-site-nav.nav-search-open #account-btn-nav {
    display: none !important;
  }
}

/* ---- Help dropdown items ---- */
.help-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--theme-text, #333);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease;
}
.help-dropdown-item:hover {
  background: var(--theme-background, #f0f0f0);
  color: var(--theme-primary, #667eea);
  text-decoration: none;
}
.help-dropdown-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* ---- Hide BOOK NOW CTA + footer when overlay is open ---- */
body.mobile-overlay-open #continue {
  display: none !important;
}
body.mobile-overlay-open .site-footer {
  display: none !important;
}

/* ---- Mobile overlay body lock ---- */
body.mobile-overlay-open {
  overflow: hidden !important;
}
body.mobile-sheet-open {
  overflow: hidden !important;
}