/* ============================================================
   responsive.css — shared chrome breakpoints + mobile nav/sidebar drawer
   Shared layer — enqueue on EVERY page (WordPress: wp_enqueue_style global).
   ============================================================ */
@media (max-width: 720px){
.bc-inner {
      padding: 10px 16px;
      gap: 8px;
      flex-wrap: wrap;
    }
.bc-path {
      width: 100%;
      overflow-x: auto;
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 2px;
    }
.bc-path::-webkit-scrollbar { display: none; }
.bc-item {
      flex-shrink: 0;
      padding: 5px 10px;
      font-size: 12px;
      gap: 6px;
    }
.bc-item .bc-tier { font-size: 9px; padding: 1.5px 6px; }
.bc-sep { width: 12px; height: 12px; flex-shrink: 0; }
.bc-actions { width: 100%; justify-content: flex-end; font-size: 11.5px; }
}

@media (max-width: 860px){
/* Footer collapses to: brand full-width on top, all menu columns 50/50 below.
   Higher specificity (.gf .gf-*) so it BEATS the per-page base `.gf-grid`
   overrides (invoices/pricing/tickets/… each redefine 1.x fr repeat(4,1fr) and
   load AFTER responsive.css) — without that, the desktop 5-column grid leaks
   into mobile and the legal column drops to a broken second row. Global fix. */
.gf-inner { padding: 40px 18px 24px; }
.gf .gf-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.gf .gf-brand { grid-column: 1 / -1; }
.gf-bottom { padding: 22px 18px; }
}

html, body { max-width: 100%; }

img, video, iframe, svg { max-width: 100%; }

/* Clip stray horizontal overflow at the ROOT scroller. A previous
   `body { overflow-x: hidden }` is not enough: in RTL, overflow that reaches
   the viewport scroller (the <html> element) shifts the whole page sideways and
   cuts content off the right edge. `overflow-x: clip` clips without creating a
   scroll container, so the sticky header and the fixed nav drawer keep working. */
html { overflow-x: clip; }
body { overflow-x: clip; }

body.r-noscroll { overflow: hidden; }

.r-burger {
  appearance: none; border: 0; cursor: pointer;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  display: none; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}

.r-burger:hover { background: var(--bg-sunk); color: var(--ink); }

.r-burger svg { width: 20px; height: 20px; }

.r-sb-trigger {
  appearance: none; border: 0; cursor: pointer;
  width: 36px; height: 36px;
  margin-inline-end: 6px;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  display: none; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.r-sb-trigger:hover { background: var(--bg-sunk); color: var(--ink); }

.r-sb-trigger svg { width: 18px; height: 18px; }

.r-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}

.r-overlay.open { opacity: 1; pointer-events: auto; }

html[data-theme="dark"] .r-overlay { background: rgba(0,0,0,0.6); }

.r-nav-drawer {
  position: fixed;
  top: 0; bottom: 0;
  /* Anchor to physical LEFT (matches the burger's new position on mobile) */
  inset-inline-end: auto;
  inset-inline-start: 0;
  width: min(320px, 86vw);
  z-index: 100;
  background: var(--bg-elev);
  border-inline-end: 0.5px solid var(--line);
  box-shadow: 24px 0 60px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  direction: rtl;
  font-family: var(--font-body, 'Heebo', system-ui, sans-serif);
  /* Slide in from the left edge */
  transform: translateX(-100%);
  transition: transform .26s cubic-bezier(.16,1,.3,1);
  visibility: hidden;
}

html[dir="ltr"] .r-nav-drawer {
  /* LTR mirror — slide in from the right edge */
  inset-inline-start: auto; inset-inline-end: 0;
  direction: ltr;
  transform: translateX(100%);
  border-inline-end: 0;
  border-inline-start: 0.5px solid var(--line);
  box-shadow: -24px 0 60px rgba(0,0,0,0.18);
}

body.r-nav-open .r-nav-drawer { transform: none; visibility: visible; }

.r-nav-drawer .r-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 14px 8px;
  border-bottom: 0.5px solid var(--line);
}

html[dir="ltr"] .r-nav-drawer .r-drawer-head {
  padding: 16px 8px 14px 18px;
}

.r-nav-drawer .r-drawer-title {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3);
}

.r-nav-drawer .r-drawer-close {
  appearance: none; border: 0; cursor: pointer;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
}

.r-nav-drawer .r-drawer-close:hover { background: var(--bg-sunk); color: var(--ink); }

.r-nav-drawer .r-drawer-close svg { width: 18px; height: 18px; }

.r-nav-drawer .r-drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex; flex-direction: column; gap: 2px;
}

.r-nav-drawer .r-drawer-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  border-radius: 12px;
  font-size: 15px; font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
}

.r-nav-drawer .r-drawer-nav a:hover {
  background: var(--bg-sunk); color: var(--ink); text-decoration: none;
}

.r-nav-drawer .r-drawer-nav a.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

.r-nav-drawer .r-drawer-nav a svg {
  width: 18px; height: 18px;
  color: var(--ink-3);
  flex-shrink: 0;
}

.r-nav-drawer .r-drawer-nav a.active svg { color: var(--accent); }

@media (max-width: 1280px){
.gh-inner,
  .bc-inner,
  .mh-inner,
  .gf-inner,
  .pf-inner,
  .legal-inner,
  .pr-inner,
  .a-inner,
  .tu-inner { padding-inline: 24px !important; }
.gh-search { width: 200px !important; }
}

@media (max-width: 1024px){
.r-burger { display: inline-flex; }
.gh-nav { display: none !important; }
.gh-streak { display: none !important; }
.gh-search { display: none !important; }
.gh-avatar-text { display: none !important; }
.gh-avatar { padding: 4px !important; }
html[dir="rtl"] .sb {
    inset-inline-start: auto; inset-inline-end: 0;
    transform: translateX(100%);
    box-shadow: -24px 0 60px rgba(0,0,0,0.18);
  }
body.r-sb-open .sb { transform: none !important; }
.main-bar .r-sb-trigger { display: inline-flex; }
.gh-inner { justify-content: flex-start; }
.gh-logo { margin-inline-end: auto; }
.gh-avatar { margin-inline-start: auto; }
.bc-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding-block: 12px !important;
  }
.bc-path {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }
.bc-path::-webkit-scrollbar { display: none; }
.bc-actions {
    width: 100%;
    justify-content: flex-end !important;
  }
}

@media (max-width: 640px){
.gh-inner,
  .bc-inner,
  .mh-inner,
  .gf-inner,
  .pf-inner,
  .legal-inner,
  .pr-inner,
  .a-inner,
  .tu-inner { padding-inline: 16px !important; }
.gh { height: auto; }
.gh-inner { height: 56px !important; gap: 8px !important; }
.gh-logo-name { font-size: 14.5px !important; }
.gh-logo-mark { width: 28px !important; height: 28px !important; font-size: 12px !important; }
.gh-iconbtn { width: 34px !important; height: 34px !important; }
.gh-iconbtn svg { width: 16px !important; height: 16px !important; }
/* Guest auth CTAs: shrink so both ("פתחו חשבון" + "התחברו") fit beside the
   logo + burger without the primary spilling off the (RTL) left edge. */
html[data-viewer="guest"] .gh-guest-cta { padding: 7px 11px !important; font-size: 12px !important; gap: 5px !important; }
.r-nav-drawer { width: min(320px, 92vw); }
.bc-path { font-size: 12.5px !important; }
.bc-path .bc-sep { width: 12px !important; height: 12px !important; }
.bc-path .bc-tier { padding: 2px 7px !important; font-size: 10px !important; }
.bc-actions { display: none !important; }
.gf-newsletter { grid-column: auto !important; }
table.r-stack,
  .iv-table table,
  .invoices-table {
    display: block !important;
    border: 0 !important;
  }
table.r-stack thead,
  .iv-table thead,
  .invoices-table thead { display: none !important; }
table.r-stack tr,
  .iv-table tbody tr,
  .invoices-table tbody tr {
    display: block !important;
    margin-bottom: 12px !important;
    border: 0.5px solid var(--line) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    background: var(--bg-elev) !important;
  }
table.r-stack td,
  .iv-table tbody td,
  .invoices-table tbody td {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    border: 0 !important;
    padding: 6px 0 !important;
    text-align: end !important;
    font-size: 13px !important;
  }
table.r-stack td::before,
  .iv-table tbody td::before,
  .invoices-table tbody td::before {
    content: attr(data-label);
    font-size: 11.5px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-inline-end: auto;
  }
.gf-bottom { flex-direction: column !important; gap: 12px !important; text-align: center !important; }
.gh-iconbtn, .r-burger, .r-sb-trigger,
  button.cta, .pr-cta, .nav-btn {
    min-height: 40px;
  }
}

@media (max-width: 380px){
.gh-inner, .bc-inner, .mh-inner, .gf-inner,
  .pf-inner, .legal-inner, .pr-inner, .a-inner,
  .tu-inner { padding-inline: 12px !important; }
.gh-logo-name { display: none !important; }
}