/* ---------------------------------------
   Shared Site Menu Module
   File: /assets/css/site_menu.css
---------------------------------------- */

:root{
  --menu-ink:#2f2430;
  --menu-muted:#7b6b73;
  --menu-card:#ffffff;
  --menu-line:rgba(236,214,226,0.9);

  --menu-accent:#e39bb8;
  --menu-accent-soft:#f6c7da;

  --menu-shadow:0 26px 56px rgba(85,57,77,0.45);
  --menu-radius:18px;
}

/* prevent iOS auto text resizing */
html{ -webkit-text-size-adjust:100%; }

/* lock background scroll when any modal open */
body.modal-open{ overflow:hidden; }

/* hidden backdrops must not intercept scroll */
.modal-backdrop[hidden],
.note-modal-backdrop[hidden]{
  display:none !important;
  pointer-events:none !important;
}

/* ---------- emoji container (entities) ---------- */
.menu-emoji{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  min-width:22px;
  height:22px;
  font-size:18px;
  line-height:1;
  margin-top:1px;
}
.menu-emoji--search{
  width:26px;
  min-width:26px;
  height:26px;
  font-size:18px;
}

/* ---------- hamburger (optional: your page.css may also style it) ---------- */
.hamburger{
  position:absolute;
  top:16px;
  right:16px;
  width:38px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(148,112,136,0.38);
  background:rgba(255,255,255,0.96);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
  box-shadow:0 10px 22px rgba(148,112,136,0.18);
  z-index:30;
}
.hamburger:hover{ transform:translateY(-1px); background:#fff; }
.hamburger-lines{ width:18px; height:12px; display:flex; flex-direction:column; justify-content:space-between; }
.hamburger-lines span{ display:block; height:2px; border-radius:999px; background:var(--menu-muted); }

/* ---------- modal shell ---------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,10,15,0.42);
  z-index:40;
}

.modal-panel{
  position:relative;
  background:var(--menu-card);
  border-radius:var(--menu-radius);
  width:min(520px,92vw);

  /* IMPORTANT: stable height so it never shrinks when filtering */
  height:min(86vh, 720px);

  border:1px solid rgba(255,255,255,0.95);
  box-shadow:var(--menu-shadow);
  padding:18px 18px 14px;
  overflow:hidden;

  display:flex;
  flex-direction:column;
}

.modal-header{
  flex:0 0 auto;
  margin-bottom:.6rem;
  padding-right:28px;
}

.modal-eyebrow{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--menu-muted);
  margin-bottom:.25rem;
}

.modal-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.95rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--menu-ink);
}

/* key detail: min-height:0 allows scroll inside */
.modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding-top:.35rem;
  color:var(--menu-ink);
  font-size:.92rem;
}

.modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(148,112,136,0.40);
  background:rgba(255,255,255,0.95);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  color:var(--menu-muted);
  box-shadow:0 8px 18px rgba(148,112,136,0.22);
  padding:0;
}
.modal-close:hover{ background:#fff; }

/* ---------- search block ---------- */
.menu-sr{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.menu-search{
  margin:0 0 .95rem;
  padding:10px 10px 8px;
  border-radius:16px;
  border:1px solid var(--menu-line);
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(253,238,246,.85));
  box-shadow:0 10px 20px rgba(148,112,136,.10);
}

.menu-search-row{
  display:flex;
  align-items:center;
  gap:8px;
}

/* iPhone zoom fix: MUST be >= 16px */
.menu-search-input{
  flex:1;
  width:100%;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--menu-line);
  background:rgba(255,255,255,0.95);
  color:var(--menu-ink);
  font-size:16px; /* critical */
  line-height:1.2;
  outline:none;
  -webkit-appearance:none;
}

.menu-search-input:focus{
  border-color:rgba(227,155,184,.85);
  box-shadow:0 0 0 3px rgba(227,155,184,.22);
}

.menu-search-clear{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid var(--menu-line);
  background:rgba(255,255,255,.95);
  cursor:pointer;
  color:#6b5a63;
  font-size:18px;
  line-height:1;
  padding:0;
  flex:0 0 auto;
}
.menu-search-clear:hover{ background:#fff; border-color:rgba(246,199,218,.95); }

.menu-search-meta{
  margin-top:6px;
  font-size:.78rem;
  color:var(--menu-muted);
}

.menu-no-results{
  margin-top:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(236,214,226,.95);
  color:var(--menu-muted);
  background:rgba(253,238,246,.55);
}

/* ---------- sections + links ---------- */
.menu-list-section{ margin-bottom:.9rem; }

.menu-list-section-title{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--menu-muted);
  margin-bottom:.25rem;
}

.menu-list{ list-style:none; padding:0; margin:0; }
.menu-empty{ font-size:.9rem; color:var(--menu-muted); padding:10px 8px; }

.menu-link{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  border-radius:999px;
  padding:8px 12px;
  font-size:.88rem;
  text-decoration:none;
  color:var(--menu-ink);
  background:rgba(255,255,255,0.92);
  border:1px solid var(--menu-line);
  margin-bottom:6px;
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}

.menu-link:hover{
  background:#fff8fc;
  border-color:rgba(246,199,218,.90);
  transform:translateY(-1px);
}

.menu-link--active{
  border-color:rgba(227,155,184,.95);
  background:#fdeef6;
}

.menu-link-main{ flex:1; min-width:0; }
.menu-link-title{ display:block; line-height:1.25; }

/* Capsules (topic style) */
.tag{
  display:inline-flex;
  align-items:center;
  margin-top:6px;
  padding:2px 10px;
  border-radius:999px;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  line-height:1.35;
  border:1px solid rgba(236,214,226,.95);
  background:rgba(253,238,246,.65);
  color:var(--menu-muted);
}
.tag--topic{
  border-color:rgba(227,155,184,.45);
  background:rgba(253,238,246,.90);
  color:#5b3a4a;
}

/* ---------- floating menu button ---------- */
.floating-menu-btn{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:45;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:110px;
  padding:9px 18px;
  border-radius:999px;
  border:1px solid rgba(244,114,182,.28);
  background:
    radial-gradient(circle at 20% 0%, #ffffff 0, #fff8fc 44%, #fdeef6 86%),
    linear-gradient(135deg, #fff8fc, #fdeef6);
  box-shadow:
    0 10px 20px rgba(148,112,136,.20),
    0 0 0 1px rgba(255,255,255,.60) inset;
  color:#4b1f35;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  cursor:pointer;
  transition:transform 150ms ease-out, box-shadow 150ms ease-out, filter 150ms ease-out;
}

.floating-menu-btn:hover{
  transform:translateX(-50%) translateY(-1px) scale(1.02);
  box-shadow:
    0 14px 26px rgba(148,112,136,.26),
    0 0 0 1px rgba(255,255,255,.75) inset;
  filter:brightness(1.02);
}

.floating-menu-btn:active{
  transform:translateX(-50%) translateY(0) scale(.99);
  box-shadow:
    0 8px 16px rgba(148,112,136,.22),
    0 0 0 1px rgba(255,255,255,.55) inset;
}

/* CSS hamburger icon in the floating button */
.floating-menu-icon{
  width:18px;
  height:12px;
  position:relative;
  display:inline-block;
}
.floating-menu-icon::before,
.floating-menu-icon::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius:999px;
  background:#6b5a63;
}
.floating-menu-icon::before{ top:0; box-shadow:0 5px 0 #6b5a63; }
.floating-menu-icon::after{ bottom:0; }

@media (max-width:600px){
  .modal-backdrop{ align-items:flex-end; }
  .modal-panel{
    width:100%;
    border-radius:18px 18px 0 0;
    height:88vh; /* stable */
    padding:16px 16px 12px;
  }
}

@media (max-width:480px){
  .floating-menu-btn{
    min-width:96px;
    padding:8px 14px;
    font-size:.78rem;
    bottom:14px;
  }
}