/* =========================================================
   THAIRE SHARED SITE MENU
   File: /assets/css/site_menu.css
   Used by index.php, page.php, articles.php and any page including inc/site_menu.php
   ========================================================= */

#pageFloatingMenuButton,
.float-menu,
.floating-menu,
.page-floating-menu {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(40px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  z-index: 2147483000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 7px 18px !important;
  border: 1.5px solid rgba(239,191,216,.78) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255,250,253,.94), rgba(255,240,248,.90)) !important;
  color: #4a2f2f !important;
  box-shadow: 0 12px 34px rgba(145,81,117,.18) !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: .15em !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.float-menu span,
#pageFloatingMenuButton span {
  font-size: .95rem !important;
  letter-spacing: 0 !important;
}

.menu-button,
.icon-menu,
.articles-top-menu-button,
.js-menu-open,
.js-open-menu {
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.menu-backdrop,
.js-menu-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483100 !important;
  display: none !important;
  background: rgba(35,31,39,.42) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  cursor: pointer !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .2s ease, visibility .2s ease !important;
}

.menu-backdrop.open,
.menu-backdrop.is-open,
.js-menu-backdrop.open,
.js-menu-backdrop.is-open {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.menu-backdrop[hidden],
.js-menu-backdrop[hidden] {
  display: none !important;
}

.menu-panel,
.js-menu-panel {
  position: fixed !important;
  z-index: 2147483200 !important;
  left: 50% !important;
  top: 18px !important;
  bottom: calc(62px + env(safe-area-inset-bottom)) !important;
  width: min(92vw, 470px) !important;
  padding: 18px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(239,191,216,.46) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,246,251,.92)),
    radial-gradient(circle at top right, rgba(255,226,240,.32), transparent 17rem) !important;
  box-shadow: 0 24px 70px rgba(68,39,55,.20) !important;
  overflow: auto !important;
  transform: translateX(-50%) translateY(110%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: transform .24s ease, opacity .22s ease, visibility .22s ease !important;
}

.menu-panel[aria-hidden="false"],
.js-menu-panel[aria-hidden="false"],
.menu-panel.open,
.menu-panel.is-open,
.js-menu-panel.open,
.js-menu-panel.is-open {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.menu-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 16px !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

.menu-kicker {
  color: #9b7d8d !important;
  text-transform: uppercase !important;
  letter-spacing: .22em !important;
  font-size: .66rem !important;
  font-weight: 800 !important;
  margin: 0 0 5px !important;
}

.menu-head h2,
#site-menu-title {
  color: #3f2d2d !important;
  font-size: 1.12rem !important;
  text-transform: uppercase !important;
  letter-spacing: .10em !important;
  margin: 0 !important;
}

.close-menu,
.js-close-menu,
.js-menu-close {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(239,191,216,.62) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.88) !important;
  color: #704545 !important;
  cursor: pointer !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  box-shadow: 0 10px 26px rgba(145,81,117,.12) !important;
}

.menu-search {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 11px 12px !important;
  margin-bottom: 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(239,191,216,.42) !important;
  background: linear-gradient(135deg, rgba(255,244,250,.72), rgba(255,255,255,.66)) !important;
}

.menu-search input {
  width: 100% !important;
  min-height: 38px !important;
  border: 1px solid rgba(239,191,216,.48) !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  background: rgba(255,255,255,.88) !important;
  color: #3f2d2d !important;
  outline: none !important;
  font-size: .9rem !important;
}

.menu-search small,
.js-menu-count {
  grid-column: 1 / -1 !important;
  color: #8b687a !important;
  font-size: .76rem !important;
  line-height: 1.3 !important;
  margin-top: 2px !important;
}

.menu-list {
  display: grid !important;
  gap: 8px !important;
}

.menu-section {
  margin: 11px 0 4px !important;
  color: #9b7d8d !important;
  text-transform: uppercase !important;
  letter-spacing: .2em !important;
  font-size: .63rem !important;
  font-weight: 850 !important;
}

.menu-link,
.profile-link {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 49px !important;
  padding: 9px 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(221,192,207,.58) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,248,252,.74)) !important;
  text-decoration: none !important;
  color: #3f2d2d !important;
}

.menu-link i,
.profile-link i {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 11px !important;
  background: rgba(255,245,210,.75) !important;
  font-style: normal !important;
  font-size: .95rem !important;
}

.menu-link strong,
.profile-link strong {
  font-size: .9rem !important;
  line-height: 1.25 !important;
}

.menu-link.hidden,
.menu-link.is-hidden,
.profile-link.hidden,
.profile-link.is-hidden {
  display: none !important;
}

.menu-capsules {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  margin-top: 6px !important;
}

.menu-topic-capsule,
.menu-date-capsule {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  margin: 0 !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  letter-spacing: .10em !important;
  font-size: .55rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  font-style: normal !important;
}

.menu-topic-capsule {
  background: rgba(255,239,247,.92) !important;
  color: #8b687a !important;
}

.menu-date-capsule {
  background: linear-gradient(135deg, rgba(255,243,184,.96), rgba(255,226,205,.92)) !important;
  color: #9b5c28 !important;
  border: 1px solid rgba(246,198,111,.38) !important;
  box-shadow: 0 8px 18px rgba(255,177,92,.08) !important;
}

body.menu-open {
  overflow: hidden !important;
}

body.menu-open #pageFloatingMenuButton,
body.menu-open .float-menu,
body.menu-open .floating-menu,
body.menu-open .page-floating-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 700px) {
  #pageFloatingMenuButton,
  .float-menu,
  .floating-menu,
  .page-floating-menu {
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }

  .menu-panel,
  .js-menu-panel {
    top: 10px !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    width: min(94vw, 470px) !important;
    border-radius: 22px !important;
  }
}