/* V4.32: one mobile visual system, two navigation contexts.
   Public links stay commercial; a wedding's links stay wedding-specific.
   Shared visual treatment covers VNext and legacy V3 without rewriting routes. */

body.v3 {
  --zi-shared-nav-paper: var(--zi-theme-surface,#fffaf4);
  --zi-shared-nav-ink: var(--zi-theme-text,#38271e);
  --zi-shared-nav-muted: var(--zi-theme-muted,#846f60);
  --zi-shared-nav-line: var(--zi-theme-line,rgba(105,74,49,.17));
  --zi-shared-nav-accent: var(--zi-pref-accent,#a98358);
  --zi-shared-nav-orb: var(--zi-pref-accent-strong,#604229);
}
html[data-zi-theme="dark"] body.v3 {
  --zi-shared-nav-paper: var(--zi-theme-surface,#231b16);
  --zi-shared-nav-ink: var(--zi-theme-text,#faf3e9);
  --zi-shared-nav-muted: var(--zi-theme-muted,#c9b7a5);
  --zi-shared-nav-line: var(--zi-theme-line,rgba(255,239,215,.17));
  --zi-shared-nav-accent: var(--zi-pref-accent,#e2b989);
  --zi-shared-nav-orb: var(--zi-pref-accent-strong,#856044);
}

/* The same refined bottom-sheet surface for the homepage and the couple. */
body.v3 :is(.zi-nav-dialog,.zw-nav-dialog) {
  position:fixed;
  inset:auto 0 0;
  margin:0 auto;
  padding:0;
  width:min(640px,100%);
  max-width:100%;
  max-height:88vh;
  max-height:88dvh;
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid var(--zi-shared-nav-line);
  border-bottom:0;
  border-radius:26px 26px 0 0;
  background:var(--zi-shared-nav-paper);
  color:var(--zi-shared-nav-ink);
  box-shadow:0 -24px 70px rgba(29,19,12,.22);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
}
body.v3 :is(.zi-nav-dialog,.zw-nav-dialog)::backdrop {
  background:rgba(21,15,12,.60);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}
body.v3 .zi-nav-dialog:not([open]) {display:none!important;}
body.v3 :is(.zi-nav-dialog .zi-nav-sheet,.zw-nav-dialog .zw-nav-more) {
  padding:13px clamp(19px,5vw,32px) calc(26px + env(safe-area-inset-bottom,0px));
  border:0;
  border-radius:0;
  margin:0;
  max-width:none;
  background:var(--zi-shared-nav-paper);
  color:var(--zi-shared-nav-ink);
}
body.v3 .zw-nav-dialog .zw-nav-more::before,
body.v3 .zi-nav-dialog .zi-sheet-handle {
  content:"";
  display:block;
  width:40px;
  height:4px;
  border-radius:99px;
  background:var(--zi-shared-nav-line);
  margin:1px auto 24px;
}
body.v3 :is(.zi-nav-dialog .zi-nav-sheet-heading,.zw-nav-dialog .zw-nav-more-heading) {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  margin-bottom:19px;
}
body.v3 :is(.zi-nav-dialog .zi-nav-sheet-heading,.zw-nav-dialog .zw-nav-more-heading)>div {
  min-width:0;
  flex:1;
}
body.v3 :is(.zi-nav-dialog .zi-nav-sheet-heading small,.zw-nav-dialog .zw-nav-eyebrow) {
  display:block;
  font:600 9px/1.5 "DM Sans",sans-serif;
  letter-spacing:.22em;
  color:var(--zi-shared-nav-accent);
  text-transform:uppercase;
}
body.v3 :is(.zi-nav-dialog .zi-nav-sheet-heading h2,.zw-nav-dialog .zw-nav-more-heading h2) {
  margin:7px 0 0;
  color:var(--zi-shared-nav-ink);
  font:500 clamp(31px,8vw,43px)/1.04 "Cormorant Garamond",Georgia,serif;
  overflow-wrap:anywhere;
}
body.v3 :is(.zi-nav-sheet-intro,.zw-nav-more-intro) {
  margin:9px 0 0;
  color:var(--zi-shared-nav-muted);
  font:400 12px/1.6 "DM Sans",sans-serif;
}
body.v3 :is(.zi-nav-dialog .zi-dialog-close,.zw-nav-dialog .zw-nav-icon-button) {
  display:grid;
  place-items:center;
  flex:none;
  width:43px;
  height:43px;
  min-width:43px;
  padding:9px;
  border-radius:50%;
  border:1px solid var(--zi-shared-nav-line);
  background:color-mix(in srgb,var(--zi-shared-nav-paper) 78%,var(--zi-shared-nav-accent));
  color:var(--zi-shared-nav-ink);
  cursor:pointer;
}
body.v3 .zw-nav-dialog .zw-nav-icon-button[hidden] {display:none;}
body.v3 .zw-nav-dialog .zw-nav-more-grid,
body.v3 .zi-nav-dialog .zi-more-links {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  margin:0 0 21px;
}

/* Editorial rows in the sheet, whether loaded from VNext or the older shell. */
body.v3 .zw-nav-dialog .zw-nav-more-grid>.zw-nav-link,
body.v3 .zi-nav-dialog .zi-more-links>a {
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-width:0;
  min-height:70px;
  margin:0;
  padding:12px 3px;
  background:transparent;
  border:0;
  border-top:1px solid var(--zi-shared-nav-line);
  border-radius:0;
  box-shadow:none;
  color:var(--zi-shared-nav-ink);
  text-align:left;
  text-decoration:none;
}
body.v3 .zw-nav-dialog .zw-nav-more-grid>.zw-nav-link:hover,
body.v3 .zi-nav-dialog .zi-more-links>a:hover {
  background:color-mix(in srgb,var(--zi-shared-nav-accent) 7%,transparent);
  color:var(--zi-shared-nav-ink);
}
body.v3 .zi-nav-dialog .zi-more-links>a>span {
  flex:1;
  min-width:0;
  color:var(--zi-shared-nav-ink);
  font:500 clamp(23px,5vw,29px)/1.06 "Cormorant Garamond",Georgia,serif;
}
body.v3 .zi-nav-dialog .zi-more-links>a>span small {
  display:block;
  margin-top:5px;
  color:var(--zi-shared-nav-muted);
  font:400 11px/1.5 "DM Sans",sans-serif;
}
body.v3 .zi-nav-dialog .zi-more-links>a>b {
  margin-left:auto;
  flex:none;
  font:400 23px/1 "Cormorant Garamond",Georgia,serif;
  color:var(--zi-shared-nav-accent);
}
body.v3 .zw-nav-dialog .zw-nav-more-grid>.zw-nav-menu-entry {
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 19px;
  gap:14px;
}
body.v3 .zw-nav-dialog .zw-nav-menu-symbol {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--zi-shared-nav-line);
  background:color-mix(in srgb,var(--zi-shared-nav-accent) 9%,var(--zi-shared-nav-paper));
  color:var(--zi-shared-nav-accent);
}
body.v3 .zw-nav-dialog .zw-nav-menu-symbol .zi-icon {
  width:20px;
  height:20px;
  flex:none;
}
body.v3 .zw-nav-dialog .zw-nav-menu-copy {display:block;min-width:0;}
body.v3 .zw-nav-dialog .zw-nav-menu-copy strong {
  display:block;
  color:var(--zi-shared-nav-ink);
  font:500 clamp(23px,5vw,29px)/1.06 "Cormorant Garamond",Georgia,serif;
  overflow-wrap:anywhere;
}
body.v3 .zw-nav-dialog .zw-nav-menu-copy small {
  display:block;
  margin-top:5px;
  color:var(--zi-shared-nav-muted);
  font:400 11px/1.5 "DM Sans",sans-serif;
}
body.v3 .zw-nav-dialog .zw-nav-menu-arrow {
  width:18px;
  height:18px;
  flex:none;
  color:var(--zi-shared-nav-accent);
}
/* Tenant links keep their server-side permission checks and destinations. */
body.v3 .zw-nav-dialog .zw-nav-more-grid>.zw-nav-link:not(.zw-nav-menu-entry)>.zi-icon {
  display:block;
  flex:none;
  width:21px;
  height:21px;
  padding:8px;
  box-sizing:content-box;
  border:1px solid var(--zi-shared-nav-line);
  border-radius:12px;
  color:var(--zi-shared-nav-accent);
}
body.v3 .zw-nav-dialog .zw-nav-more-grid>.zw-nav-link:not(.zw-nav-menu-entry)>span {
  flex:1;
  min-width:0;
  color:var(--zi-shared-nav-ink);
  font:500 24px/1.1 "Cormorant Garamond",Georgia,serif;
}
body.v3 .zw-nav-dialog .zw-nav-more-grid>.zw-nav-link:not(.zw-nav-menu-entry)::after {
  content:"↗";
  flex:none;
  margin-left:auto;
  color:var(--zi-shared-nav-accent);
  font:400 22px/1 "Cormorant Garamond",Georgia,serif;
}
body.v3 :is(.zw-nav-dialog .zw-nav-preferences,.zi-nav-dialog .zi-more-settings) {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:55px;
  padding:14px 4px;
  margin:0;
  color:var(--zi-shared-nav-ink);
  background:transparent;
  border:0;
  border-top:1px solid var(--zi-shared-nav-line);
  cursor:pointer;
  text-align:left;
  font:500 13px/1.5 "DM Sans",sans-serif;
}
body.v3 :is(.zw-nav-dialog .zw-nav-preferences,.zi-nav-dialog .zi-more-settings):hover {
  color:var(--zi-shared-nav-accent);
}
body.v3 .zi-nav-dialog .zi-more-settings span {display:grid;gap:3px;}
body.v3 .zi-nav-dialog .zi-more-settings small {color:var(--zi-shared-nav-muted);font-size:11px;}
body.v3 .zi-nav-dialog .zi-sheet-account {gap:12px;border-top:1px solid var(--zi-shared-nav-line);}
body.v3 .zi-nav-dialog .zi-sheet-account a {color:var(--zi-shared-nav-muted);}
body.v3 .zw-nav-dialog .zw-nav-more>.zw-nav-link {
  padding:13px 4px;
  margin:4px 0;
  color:var(--zi-shared-nav-accent);
  border-radius:9px;
  font-weight:600;
}
body.v3 :is(.zw-nav-dialog,.zi-nav-dialog) :focus-visible {
  outline:2px solid var(--zi-shared-nav-accent);
  outline-offset:3px;
}
@media (prefers-reduced-motion:no-preference) {
  body.v3 :is(.zi-nav-dialog,.zw-nav-dialog)[open] {
    animation:zi-shared-nav-enter .22s cubic-bezier(.2,.75,.3,1) both;
  }
  @keyframes zi-shared-nav-enter {
    from {opacity:.8;transform:translateY(23px);}
    to {opacity:1;transform:translateY(0);}
  }
}

/* Keep the couple's elevated centre action and reuse it across public pages. */
@media (max-width:1023px) {
  body.v3[data-wedding-navigation="vnext"] .zw-nav-bottom {
    left:0!important;right:0!important;bottom:0!important;
    width:100%!important;max-width:none!important;
    margin:0!important;
    min-height:calc(70px + env(safe-area-inset-bottom,0px))!important;
    padding:4px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))!important;
    border:0!important;border-top:1px solid var(--zi-shared-nav-line)!important;
    border-radius:17px 17px 0 0!important;
    background:color-mix(in srgb,var(--zi-shared-nav-paper) 91%,transparent)!important;
    box-shadow:0 -9px 32px rgba(36,22,12,.12)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.12);
    backdrop-filter:blur(24px) saturate(1.12);
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:2px;
    z-index:1000;
  }
  body.v3[data-wedding-navigation="vnext"] .zw-nav-bottom .zw-nav-link {
    min-width:0;
    min-height:58px;
    height:58px;
    padding:5px 1px;
    gap:6px;
    border-radius:10px;
    background:transparent!important;
    color:var(--zi-shared-nav-muted)!important;
    font:500 clamp(8px,2.15vw,10px)/1.1 "DM Sans",sans-serif;
    overflow-wrap:normal;
    white-space:normal;
    text-align:center;
  }
  body.v3[data-wedding-navigation="vnext"] .zw-nav-bottom .zw-nav-link[aria-current="page"] {
    background:color-mix(in srgb,var(--zi-shared-nav-accent) 10%,transparent)!important;
    color:var(--zi-shared-nav-accent)!important;
  }
  body.v3[data-wedding-navigation="vnext"] .zw-nav-bottom .zw-nav-studios {
    justify-content:flex-end;
    padding-bottom:5px;
    gap:4px;
  }
  body.v3[data-wedding-navigation="vnext"] .zw-nav-bottom .zw-nav-studios>.zi-icon {
    flex:none;
    box-sizing:content-box;
    width:25px;
    height:25px;
    padding:10px;
    margin-top:-16px;
    border-radius:15px;
    stroke-width:1.6;
    background:linear-gradient(140deg,var(--zi-shared-nav-accent),var(--zi-shared-nav-orb));
    color:#fff;
    box-shadow:0 4px 0 var(--zi-shared-nav-paper),0 7px 18px rgba(64,39,22,.23);
  }
  body.v3[data-wedding-navigation="vnext"] .zw-nav-bottom.is-hidden {
    transform:translateY(calc(100% + 12px));
    opacity:0;
    pointer-events:none;
  }
  body.v3[data-wedding-navigation="vnext"] .zw-nav-bottom.is-keyboard {
    transform:translateY(150%);
    opacity:0;
    pointer-events:none;
  }
}
@media (max-width:900px) {
  body.v3[data-wedding-navigation="legacy"] .zi-bottom-nav {
    left:0!important;right:0!important;bottom:0!important;
    width:100%!important;max-width:none!important;
    min-height:calc(70px + env(safe-area-inset-bottom,0px))!important;
    height:calc(70px + env(safe-area-inset-bottom,0px))!important;
    padding:4px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))!important;
    border:0!important;border-top:1px solid var(--zi-shared-nav-line)!important;
    border-radius:17px 17px 0 0!important;
    background:color-mix(in srgb,var(--zi-shared-nav-paper) 91%,transparent)!important;
    box-shadow:0 -9px 32px rgba(36,22,12,.12)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.12);
    backdrop-filter:blur(24px) saturate(1.12);
  }
  body.v3[data-wedding-navigation="legacy"] .zi-bottom-nav>a,
  body.v3[data-wedding-navigation="legacy"] .zi-bottom-nav>button {
    min-width:0;
    height:58px!important;
    border-radius:10px!important;
    font:500 clamp(8px,2.15vw,10px)/1.1 "DM Sans",sans-serif;
    color:var(--zi-shared-nav-muted)!important;
  }
  body.v3[data-wedding-navigation="legacy"] .zi-bottom-nav [aria-current="page"] {
    background:color-mix(in srgb,var(--zi-shared-nav-accent) 10%,transparent)!important;
    color:var(--zi-shared-nav-accent)!important;
  }
  body.v3[data-wedding-navigation="legacy"] .zi-studio-orb {
    width:47px!important;
    height:47px!important;
    border-radius:15px!important;
    background:linear-gradient(140deg,var(--zi-shared-nav-accent),var(--zi-shared-nav-orb))!important;
    color:#fff!important;
    box-shadow:0 4px 0 var(--zi-shared-nav-paper),0 7px 18px rgba(64,39,22,.23)!important;
  }
  body.v3[data-wedding-navigation="legacy"] .zi-bottom-nav.is-hidden {
    transform:translateY(calc(100% + 10px))!important;
    opacity:0;
    pointer-events:none;
  }
}
@media (max-width:360px) {
  body.v3 :is(.zi-nav-dialog .zi-nav-sheet,.zw-nav-dialog .zw-nav-more) {
    padding-left:15px;padding-right:15px;
  }
  body.v3 :is(.zi-nav-dialog .zi-nav-sheet-heading h2,.zw-nav-dialog .zw-nav-more-heading h2) {font-size:30px;}
}
@media (prefers-reduced-motion:reduce) {
  body.v3 :is(.zi-nav-dialog,.zw-nav-dialog,.zi-bottom-nav,.zw-nav-bottom) {
    animation:none!important;
    transition:none!important;
  }
}
@media print {
  body.v3 :is(.zi-nav-dialog,.zw-nav-dialog,.zi-bottom-nav,.zw-nav-bottom) {display:none!important;}
}
