/* The hamburger menu, shared by the landing page, every Reflections page and
   the Terms and Privacy pages. Mirrors the app: MenuOverlay.jsx (the list),
   MenuPageHeader.jsx (the icons) and the transition classes in the app's
   src/index.css. The overlay itself is built by /menu.js. */

.wol-menu-btn,
.wol-home-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}

/* Three 1.6px lines, two 4px gaps, 6px padding - the app's hamburger box. */
.wol-menu-btn {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.wol-menu-btn > span:not(.wol-x-box) {
  display: block;
  width: 20px;
  height: 1.6px;
  background: #fff;
}

/* On the landing page the icon floats in the corner, so nothing else on the
   page moves. */
.wol-menu-btn.wol-corner {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top, 0px));
  left: 26px;
  z-index: 10;
}

.wol-home-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* The app's menu-page header: hamburger on the left, Home on the right, and
   an optional title between them. Used by every page that is not the landing
   page. */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.page-header .title {
  flex: 1;
  margin: 0;
  text-align: center;
  /* 24px, a little smaller only on the very narrowest phones so that
     "Terms of Service" stays on one line between the two icons. */
  font-size: clamp(20px, 7vw, 24px);
  font-weight: 500;
  line-height: normal;
  color: #fff;
  letter-spacing: -0.01em;
  /* The hamburger is 32px wide and the home icon 36px, so the space between
     them sits 2px left of the page's centre line. Nudge the words back onto
     it, in line with the centred headings below. */
  position: relative;
  left: 2px;
}

/* The copyright line, the same on every page: centred, at the bottom of the
   screen, or straight after the content when the page is longer than the
   screen. The page makes <body> a column at least one screen tall and puts
   this last; the page template adds it, so no page forgets it. */
.wol-footer {
  margin-top: auto;
  width: 100%;
  padding: 0 0 calc(clamp(20px, 3.5svh, 36px) + env(safe-area-inset-bottom, 0px));
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.35);
}

.wol-menu-btn:focus-visible,
.wol-home-btn:focus-visible,
.wol-menu-item:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The overlay: full screen, black, list centred vertically, text left. */
.wol-menu {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #000;
  display: flex;
  flex-direction: column;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 26px
    calc(40px + env(safe-area-inset-bottom, 0px));
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

.wol-menu[hidden] {
  display: none;
}

/* menu.js parks focus here after a tap or swipe; it must never draw a box. */
.wol-menu:focus {
  outline: none;
}

/* The X sits exactly where the hamburger was (placed by menu.js), in the
   same 20 x 12.8 box, so the icon does not jump when the menu opens. */
.wol-menu .wol-menu-btn {
  position: fixed;
  z-index: 21;
  top: calc(20px + env(safe-area-inset-top, 0px));
  left: 26px;
}

.wol-menu .wol-x-box {
  width: 20px;
  height: 12.8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wol-menu-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 420px;
}

.wol-menu-item {
  display: block;
  padding: 18px 2px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* App transitions: the menu slides in from the left and back out to it
   (240ms ease-out); pages grow from and shrink to the centre (300ms). */
@keyframes wol-fade-from-left {
  from { opacity: 0; transform: translateX(-15px); }
  to { opacity: 1; transform: none; }
}
@keyframes wol-fade-to-left {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(-15px); }
}
@keyframes wol-fade-from-centre {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: none; }
}
@keyframes wol-fade-to-centre {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(0); }
}

.wol-menu-fade-in { animation: wol-fade-from-left 240ms ease-out both; }
.wol-menu-fade-out { animation: wol-fade-to-left 240ms ease-out both; }

/* Set on <html> by the inline script in each page's head when the visit came
   from a menu tap or the Home icon, so only in-site moves animate; someone
   arriving from Instagram sees the page straight away. */
/* "backwards", not "both": a filled-forwards transform keeps the body a
   containing block after the animation ends, so the fixed full-screen menu
   was sized to the whole page instead of the screen and, on a long page
   (Terms, Privacy), its list landed thousands of pixels down. */
html.wol-enter body {
  animation: wol-fade-from-centre 300ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
html.wol-leave body {
  animation: wol-fade-to-centre 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .wol-menu-fade-in,
  .wol-menu-fade-out,
  html.wol-enter body,
  html.wol-leave body {
    animation-duration: 1ms;
  }
}