/* ARAYA mobile hamburger + Facebook-style PUSH drawer (founder-approved spec, iterated
   through 2026-07-14 rounds 1-3):
   - round 1 slide-over had a z-index bug (fixed/sticky elements outside '.an-header'
     covered the drawer) -> replaced with a PUSH model: '.an-page' itself slides right to
     reveal the menu permanently mounted underneath it.
   - round 2: push amount and menu width MUST be identical (72%/72vw) or a blank strip
     shows past the menu's edge; cream background needed everywhere (incl. overscroll).
   - round 3 (FINAL): the ☰ button lives INSIDE '.an-page' (rides away with the page when
     open) but is fully hidden while open — closing is done by tapping the shifted/dimmed
     page (or Esc), no ✕ anywhere. Button itself is a bare icon: no box/background/border,
     with breathing room before the brand logo.

   NEW, STANDALONE stylesheet — do NOT merge into front.css/inner.css/style.css (a parallel
   team owns those files). Enqueued with filemtime versioning. Desktop (>=900px) is
   completely unaffected: the hamburger/drawer never render there and '.an-page' keeps its
   normal (non-positioned) box, so this file changes NOTHING above 900px. */

/* ---------- '.an-page' becomes the "page" layer that sits ON TOP of the drawer while
   closed, and gets pushed aside (72%) to reveal it — mobile/tablet only (<900px). It must
   be explicitly positioned+z-indexed: a non-positioned box always paints BELOW any
   positioned sibling regardless of z-index, so without this the drawer (position:fixed)
   would show through underneath even while "closed". ---------- */
@media (max-width: 899.98px) {
  /* cream everywhere behind the page — no white must ever show, incl. iOS overscroll bounce */
  /* !important: the parent Hestia theme's style.css sets `body { background-color:#e5e5e5 }`
     at the same specificity — load order alone isn't reliable, so force this to win. */
  html, body { background: var(--an-cream, #faf6f1) !important; }

  .an-page {
    position: relative;
    z-index: 2;
    background: var(--an-cream, #faf6f1);
    transition: transform .28s ease;
    min-height: 100vh;
  }
  /* push amount MUST equal the drawer's own width (both 72%/72vw) or a blank gap shows
     past the menu's right edge on wider phones/tablets within this breakpoint */
  html.an-drawer-open .an-page { transform: translateX(72%); }
  /* dim the pushed-aside page; also the tap target that closes the drawer (JS) */
  html.an-drawer-open .an-page::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20, 8, 10, .45);
    z-index: 5;
  }
  /* KNOWN SIDE EFFECT (accepted, matches the Facebook pattern): the transform on
     '.an-page' creates a new containing block, so fixed-position descendants of it
     (.an-mobilebar, any sticky jump-bar) move/behave relative to '.an-page' itself
     while open instead of the viewport. They are still visually attached to the pushed
     page, which reads correctly, and everything restores the instant the class is
     removed (no inline styles are left behind). */
  html.an-drawer-open { overflow: hidden; }
}

/* ---------- hamburger button: a bare icon (no box/background/border), first item in the
   slim mobile bar, WITH breathing room before the brand. Lives inside '.an-wrap' (i.e.
   inside '.an-page') so it rides away with the page when pushed — but round 3 (FINAL)
   hides it completely while open (see the html.an-drawer-open rule below); closing is
   done by tapping the shifted page, not by a ✕ on the button. ---------- */
.an-hbtn {
  display: none;
  order: -1;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-direction: column;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  box-shadow: none;
  padding: 0;
  cursor: pointer;
  margin-right: 6px; /* + .an-wrap gap below = ~16-18px breathing room before the brand */
}
.an-hbtn span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--an-maroon, #5e1b26);
}
/* Founder round 3 (FINAL): button disappears entirely while the drawer is open — no ✕ state. */
html.an-drawer-open .an-hbtn { display: none !important; }

/* ---------- drawer panel: permanently mounted at left:0, LOW z-index — it is only ever
   revealed by the page above it sliding away, never slid/raised over the top. Width MUST
   equal the page's push percentage (72vw <-> translateX(72%)) so no blank gap appears. ---------- */
.an-drawer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 72vw;
  background: var(--an-cream, #faf6f1);
  z-index: 1;
  flex-direction: column;
  padding: 18px 22px 26px;
  overflow-y: auto;
}

.an-drawer-head {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(94, 27, 38, .12);
  margin-bottom: 10px;
}
.an-drawer-brand { display: flex; flex-direction: column; line-height: 1.1; color: var(--an-maroon, #5e1b26); }
.an-drawer-brand .t1 { font-family: var(--an-font-display, serif); font-size: 20px; letter-spacing: .12em; }
.an-drawer-brand .t2 { font-size: 9px; letter-spacing: .22em; color: var(--an-taupe, #8a6a54); margin-top: 2px; }

.an-drawer-nav { display: flex; flex-direction: column; }
.an-drawer-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 4px;
  text-decoration: none;
  color: var(--an-ink, #2a2024);
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid rgba(94, 27, 38, .06);
}
.an-drawer-nav a:hover,
.an-drawer-nav a:focus-visible { color: var(--an-maroon, #5e1b26); }

.an-drawer-divider { height: 1px; background: rgba(94, 27, 38, .12); margin: 14px 0; }

.an-drawer-lang { display: flex; align-items: center; gap: 6px; }
.an-drawer-lang a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--an-radius-pill, 999px);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--an-ink-soft, #4a3a3e);
  background: rgba(94, 27, 38, .07);
}
.an-drawer-lang a.on { background: var(--an-maroon, #5e1b26); color: var(--an-cream, #faf6f1); }

/* ---------- breakpoint: mobile/tablet <900px gets the slim bar + drawer ---------- */
@media (max-width: 899.98px) {
  .an-header .an-nav { display: none !important; }
  .an-header .an-langpill { display: none !important; }
  .an-header .an-auth-one { display: none !important; }
  .an-header .an-wrap { padding: 10px 14px; gap: 16px; flex-wrap: nowrap; }
  .an-hbtn { display: inline-flex; }
  .an-drawer { display: flex; }
}

/* ---------- desktop (>=900px): hamburger/drawer never show, .an-page untouched ---------- */
@media (min-width: 900px) {
  .an-hbtn { display: none !important; }
  .an-drawer { display: none !important; }
}

/* FB-mobile proportions (founder 2026-07-14): compact top bar ~52px, small bare burger,
 * scaled-down brand — measured against Facebook mobile's header density. */
@media (max-width: 599px) {
  .an-header .an-wrap { padding: 6px 12px; gap: 10px; min-height: 52px; align-items: center; }
  .an-burger { width: 34px; height: 34px; padding: 6px; }
  .an-burger span, .an-burger i, .an-burger .bar { height: 2px; }
  .an-burger svg { width: 20px; height: 20px; }
  .an-header .an-brand { gap: 7px; }
  /* the logo is a sprite crop (41x38 window over a 131x131 img shifted -37/-45) — scale the WHOLE sprite ~0.79x */
  .an-header .an-brand-logo { width: 32px; height: 30px; }
  .an-header .an-brand-logo img { width: 103px !important; height: 103px !important; margin: -29px 0 0 -35px !important; }
  .an-header .an-brand-name .t2 { white-space: nowrap; }
  .an-header .an-brand-name .t1 { font-size: 17px; letter-spacing: .10em; }
  .an-header .an-brand-name .t2 { font-size: 8.5px; letter-spacing: .14em; }
}