/* PodcaCity - shared hamburger menu drawer.
   Used by all three phone apps (active-session, studio-booking, sessions).
   Lives in the standing chrome, outside the swapped view region, and is toggled
   client-side by assets/js/pc-menu.js. Ported from the Studio Booking design's
   menu; only the menu was taken. */

@keyframes pcMenuIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.pc-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 80;
  overflow: hidden;
  background: rgba(4,6,9,0.75);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.pc-menu[hidden] { display: none; }

/* Tap anywhere off the panel to close. */
.pc-menu__scrim {
  position: absolute;
  inset: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.pc-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 270px;
  background: #0D1117;
  border-left: 1px solid #1E2530;
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
  padding: 28px 22px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 28px);
  display: flex;
  flex-direction: column;
  animation: pcMenuIn .25s ease;
}

.pc-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  margin-bottom: 34px;
}
.pc-menu__logo { font-family: 'Exo 2', sans-serif; font-weight: 900; font-size: 20px; line-height: 1; }
.pc-menu__podca,
.pc-menu__city {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pc-menu__podca { background-image: linear-gradient(135deg,#00E5FF,#00AACC); }
.pc-menu__city  { background-image: linear-gradient(135deg,#FF2D8C,#CC1A6B); }

.pc-menu__close {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 10px;
  background: #131920;
  border: 1px solid #1E2530;
  color: #8899AA;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ── Live session widget ─────────────────────────────────────────────────────
   The sessions screen's headline card (.se-live) at the drawer's scale: the
   same glow, pulse and equaliser, every size a step down so the whole card sits
   in 226px without wrapping. The card is one link - on a phone there is no
   room for a separate button to be the target, so all of it is. Its keyframes
   are its own: the app stylesheets each define their pcGlow/pcWave at slightly
   different heights, and this must look the same in every drawer. */
@keyframes pcMenuPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes pcMenuGlow  { 0%,100%{box-shadow:0 0 14px rgba(0,229,255,.26),0 0 36px rgba(0,229,255,.09)} 50%{box-shadow:0 0 20px rgba(0,229,255,.42),0 0 50px rgba(0,229,255,.15)} }
@keyframes pcMenuWave  { 0%,100%{height:4px} 50%{height:13px} }

.pc-live {
  display: block;
  flex: none;
  margin-bottom: 18px;
  padding: 13px 14px 14px;
  border-radius: 14px;
  background: #0D1117;
  border: 1px solid rgba(0,229,255,.45);
  color: #F0F4F8;
  text-decoration: none;
  animation: pcMenuGlow 2.6s ease-in-out infinite;
}
.pc-live__top { display: flex; align-items: center; justify-content: space-between; }
.pc-live__status { display: flex; align-items: center; gap: 7px; }
.pc-live__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #00E5FF;
  box-shadow: 0 0 8px rgba(0,229,255,.9);
  animation: pcMenuPulse 1.4s ease-in-out infinite;
}
.pc-live__label { font-size: 11px; font-weight: 700; color: #00E5FF; letter-spacing: .06em; }

.pc-live__eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; direction: ltr; }
.pc-live__bar {
  width: 2.5px;
  border-radius: 2px;
  background: #00E5FF;
  box-shadow: 0 0 5px rgba(0,229,255,.6);
  animation: pcMenuWave 1.1s ease-in-out infinite;
}
.pc-live__bar:nth-child(2) { animation-delay: .15s; }
.pc-live__bar:nth-child(3) { animation-delay: .3s; }
.pc-live__bar:nth-child(4) { animation-delay: .45s; }
.pc-live__bar:nth-child(5) { animation-delay: .6s; }

.pc-live__dur { font-size: 15px; font-weight: 800; margin-top: 8px; }
.pc-live__when { display: flex; align-items: baseline; gap: 6px; margin-top: 1px; white-space: nowrap; }
.pc-live__range { font-family: 'Space Mono', monospace; font-size: 11px; color: #A3B2C2; direction: ltr; }
.pc-live__sep { font-size: 11px; color: #7C8CA0; }
.pc-live__left { font-size: 11px; color: #A3B2C2; }
.pc-live__remain { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; color: #00E5FF; direction: ltr; }

.pc-live__enter {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 11px;
  padding: 10px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg,#00E5FF 0%,#8B2FFF 50%,#FF2D8C 100%);
  box-shadow: 0 4px 18px rgba(0,229,255,.25);
}
.pc-live__enter svg { flex: none; }

/* The app's screens and the home page's sections, one under the other - six
   items, and on a short phone with the live card above them that is more than
   the panel holds, so the list scrolls between the head and the footer rather
   than pushing either out of the drawer. */
.pc-menu__list { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; }

/* ── Live session strip (desktop top bar) ──────────────────────────────────
   The drawer's card laid flat, for the 56px top bar a computer shows instead
   of the hamburger (see includes/live-bar.php). Nothing on a phone: there the
   drawer carries the card. Where it sits in the bar is pc-header.css's. */
.pc-livebar { display: none; }

@media (min-width: 1024px) {
  .pc-livebar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 5px 6px 5px 12px;
    border-radius: 999px;
    background: #0D1117;
    border: 1px solid rgba(0,229,255,.45);
    color: #F0F4F8;
    font-size: 12.5px;
    white-space: nowrap;
    text-decoration: none;
    animation: pcMenuGlow 2.6s ease-in-out infinite;
    transition: border-color .16s ease;
  }
  .pc-livebar:hover { border-color: rgba(0,229,255,.8); }

  .pc-livebar__dot {
    flex: none;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #00E5FF;
    box-shadow: 0 0 8px rgba(0,229,255,.9);
    animation: pcMenuPulse 1.4s ease-in-out infinite;
  }
  .pc-livebar__label { font-weight: 700; color: #00E5FF; letter-spacing: .04em; }

  .pc-livebar__eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; direction: ltr; }
  .pc-livebar__bar {
    width: 2.5px;
    border-radius: 2px;
    background: #00E5FF;
    box-shadow: 0 0 5px rgba(0,229,255,.6);
    animation: pcMenuWave 1.1s ease-in-out infinite;
  }
  .pc-livebar__bar:nth-child(2) { animation-delay: .15s; }
  .pc-livebar__bar:nth-child(3) { animation-delay: .3s; }
  .pc-livebar__bar:nth-child(4) { animation-delay: .45s; }
  .pc-livebar__bar:nth-child(5) { animation-delay: .6s; }

  .pc-livebar__left { color: #A3B2C2; }
  .pc-livebar__remain { font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; color: #00E5FF; direction: ltr; }

  .pc-livebar__enter {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12.5px;
    color: #fff;
    background: linear-gradient(135deg,#00E5FF 0%,#8B2FFF 50%,#FF2D8C 100%);
    box-shadow: 0 3px 14px rgba(0,229,255,.25);
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
  }
  .pc-livebar__enter svg { flex: none; }
  .pc-livebar:hover .pc-livebar__enter {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 5px 20px rgba(0,229,255,.38);
  }
}

.pc-menu__item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  border-radius: 12px;
  padding: 16px 18px;
  font-family: 'Heebo', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-align: right;
  cursor: pointer;
  background: #131920;
  border: 1px solid #1E2530;
  color: #8899AA;
}
.pc-menu__item.is-active {
  background: rgba(0,229,255,0.1);
  border-color: rgba(0,229,255,0.35);
  color: #00E5FF;
  font-weight: 700;
}
.pc-menu__icon { flex: none; }

/* Bottom section: the site's footer, drawer layout (assets/css/pc-footer.css). */

/* No focus ring, matching the rest of the apps. */
.pc-menu :focus, .pc-menu :focus-visible { outline: none; }

/* ── Desktop hint (see includes/desktop-notice.php) ─────────────────────────
   Hidden on phones; on a computer it pops up recommending mobile. Width alone
   would not do: a phone asked for the desktop site, or a tablet held sideways,
   reports ≥1024px too. hover/pointer describe the input device, so the notice
   is gated on a real mouse as well and cannot reach a touch screen.
   Dismiss is the checkbox: once checked, the sibling overlay stops matching. */
.pc-dtop { display: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .pc-dtop__toggle:not(:checked) ~ .pc-dtop {
    display: flex;
    position: fixed; inset: 0; z-index: 200;
    align-items: center; justify-content: center; padding: 24px;
    background: rgba(4,6,9,0.82);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
}
.pc-dtop__box {
  width: 100%; max-width: 380px; text-align: center;
  background: #0D1117; border: 1px solid #1E2530; border-radius: 18px;
  padding: 30px 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.pc-dtop__logo { font-family: 'Exo 2', sans-serif; font-weight: 900; font-size: 22px; line-height: 1; }
.pc-dtop__podca, .pc-dtop__city { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pc-dtop__podca { background-image: linear-gradient(135deg,#00E5FF,#00AACC); }
.pc-dtop__city  { background-image: linear-gradient(135deg,#FF2D8C,#CC1A6B); }
.pc-dtop__icon {
  width: 56px; height: 56px; margin: 20px auto 0;
  border-radius: 16px; background: rgba(0,229,255,0.1); border: 1px solid rgba(0,229,255,0.3);
  color: #00E5FF; display: flex; align-items: center; justify-content: center;
}
.pc-dtop__text { margin: 16px 0 0; font-size: 16px; font-weight: 700; color: #F0F4F8; line-height: 1.6; }
.pc-dtop__btn {
  display: inline-block; margin-top: 22px; cursor: pointer;
  background: #131920; border: 1px solid #1E2530; color: #8899AA;
  border-radius: 10px; padding: 11px 26px; font-size: 14px; font-weight: 700;
}

/* ── Loading (pc-nav.js sets .pc-loading on <html> while a tap's answer is on
   its way) ─────────────────────────────────────────────────────────────────
   A line runs along the top of the window at once; a small "one moment" pill
   joins it a third of a second later, so a swap that lands quickly never
   shows more than the line, and one that takes its time says so plainly
   without taking the screen over. Both are the document's own pseudo-elements,
   so every app screen gets them from this one sheet. */
@keyframes pcLoadRun  { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes pcLoadShow { to { opacity: 1; transform: translate(-50%, 0); } }
html.pc-loading body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 4px;
  background: linear-gradient(90deg, transparent, #00E5FF 30%, #8B2FFF 60%, #FF2D8C 85%, transparent);
  box-shadow: 0 0 10px rgba(0,229,255,.45);
  animation: pcLoadRun 1.1s linear infinite;
  pointer-events: none;
}
html.pc-loading body::after {
  content: 'רק רגע…';
  position: fixed;
  top: 14px; left: 50%;
  z-index: 1000;
  transform: translate(-50%, -6px);
  padding: 7px 16px;
  border-radius: 999px;
  background: #0D1117;
  border: 1px solid rgba(0,229,255,.45);
  color: #F0F4F8;
  font: 600 13px/1.3 'Heebo', sans-serif;
  box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 0 14px rgba(0,229,255,.18);
  opacity: 0;
  animation: pcLoadShow .2s ease .35s forwards;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  html.pc-loading body::before { animation: none; transform: none; }
  html.pc-loading body::after  { animation: none; opacity: 1; transform: translate(-50%, 0); }
}

/* Support address - two anchors, one shown at a time (see pc_support_mail()
   in includes/functions.php). A mouse gets the Gmail compose page in a new
   tab; a touch device gets the mailto:, which the phone hands to its mail
   app instead of loading the Gmail website in the browser. */
.pc-mail--app { display: none; }
@media (hover: none) {
  .pc-mail--web { display: none; }
  .pc-mail--app { display: inline; }
}