/* Empvr member nav -- the ONLY copy of these rules.
   Loaded by php/lib/render.php (ea_nav_head) for the member app's own pages
   AND injected by php/read.php into the gated reads, so the menu follows the
   member into the library instead of stranding them there. Kept out of
   style.css deliberately: that file's bare `body {}` rule would restyle a
   read page. Originally ported VERBATIM from the public WordPress theme's
   .empvr-nav block -- if the public theme's nav changes, re-port it here in
   the same shape rather than "improving" these values in isolation. */
:root { --ea-gold-deep: #7a5f33; }

/* Site chrome — ported VERBATIM from the public WordPress theme's
   .empvr-nav block (wp-content/themes/empvr/style.css) so a visitor who
   crosses from the public site into the member app never sees the header
   change under them. Do not "improve" these values in isolation: if the
   public theme's nav changes, re-port it here in the same shape.
   Additions below the ported block (.empvr-nav__group / __sub / __lock /
   __avatar) are the member-only menu entries, which live UNDER the same
   hamburger rather than on a detached surface. */
.empvr-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: #fff;
  border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 1000;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.empvr-nav__logo img { height: 40px; width: auto; display: block; }
.empvr-nav__links { display: flex; gap: 24px; align-items: center; }
.empvr-nav__links a {
  font-size: 15px; font-weight: 500; color: #444; text-decoration: none;
  transition: color .2s; white-space: nowrap;
}
.empvr-nav__links a:hover { color: #1e2a4a; }
.empvr-nav__links a.active { color: #4a8b8b; }
.empvr-nav__links a.empvr-nav__cta {
  background: #1e2a4a; color: #fff; padding: 8px 20px;
  border-radius: 6px; font-weight: 600; font-size: 14px; transition: background .2s;
}
.empvr-nav__links a.empvr-nav__cta:hover { background: #2d3d5e; }
.empvr-nav__links a.empvr-nav__member {
  color: #b08d57; font-weight: 600; border: 1px solid #b08d57;
  padding: 7px 16px; border-radius: 6px; transition: background .2s, color .2s;
  display: inline-flex; align-items: center; gap: 7px;
}
.empvr-nav__links a.empvr-nav__member:hover { background: #b08d57; color: #fff; }
.empvr-nav__links a.empvr-nav__ghost { color: #6b7280; border-color: #d6d3cd; }
.empvr-nav__links a.empvr-nav__ghost:hover { background: #6b7280; color: #fff; }
.empvr-nav__toggle {
  display: none; background: none; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: #1e2a4a; padding: 4px 8px;
}

/* member-only entries, inside the same menu */
.empvr-nav__group {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ea-gold-deep); white-space: nowrap;
}
.empvr-nav__links a.empvr-nav__sub { font-size: 14px; color: #555; }
.empvr-nav__links a.empvr-nav__sub:hover { color: #1e2a4a; }
.empvr-nav__lock { color: #8a6d3a; font-size: 12px; }
.empvr-nav__avatar {
  width: 22px; height: 22px; border-radius: 50%; background: #b8956e; color: #fff;
  font-size: 11px; font-weight: 800; display: inline-flex; align-items: center;
  justify-content: center; flex: 0 0 auto;
}

@media (max-width: 768px) {
  .empvr-nav__toggle { display: block; }
  .empvr-nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid #eee;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .empvr-nav__links.open { display: flex; }
  .empvr-nav__links a {
    padding: 16px 24px; border-top: 1px solid #f0f0f0; font-size: 16px;
  }
  .empvr-nav__links a.empvr-nav__cta {
    background: #1e2a4a; color: #fff; border-radius: 0;
    padding: 16px 24px; text-align: left;
  }
  .empvr-nav__links a.empvr-nav__member {
    border: 0; border-top: 1px solid #f0f0f0; border-radius: 0;
    padding: 16px 24px; justify-content: flex-start;
  }
  .empvr-nav__group { padding: 14px 24px 6px; border-top: 1px solid #f0f0f0; background: #faf9f6; }
  .empvr-nav__links a.empvr-nav__sub { padding-left: 24px; }
}

/* Signed-in nav ALWAYS collapses into the hamburger (2026-08-02).
   Measured on the live deployment before the fix: signed out the row is 5
   entries / 571px and fits a 1280px laptop fine; signed in it becomes TWELVE
   entries / 1670px, so its right edge landed at x=1815 on a 1280-wide window
   and "Sign out" was clipped off-screen. There is no laptop breakpoint that
   fixes this -- 1670px of links + the 160px logo + 48px padding needs a
   ~1880px window -- so the member entries live under the same hamburger at
   every width instead of a made-up breakpoint that still clips on most
   screens. The SIGNED-OUT nav is untouched and still renders as the identical
   horizontal row the public site shows, which is the state a visitor actually
   compares across the seam. */
.empvr-nav--member .empvr-nav__toggle { display: block; }
.empvr-nav--member .empvr-nav__links {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; align-items: stretch; gap: 0;
  background: #fff; border-bottom: 1px solid #eee;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  max-height: calc(100vh - 70px); overflow-y: auto;
}
.empvr-nav--member .empvr-nav__links.open { display: flex; }
.empvr-nav--member .empvr-nav__links a {
  padding: 16px 24px; border-top: 1px solid #f0f0f0; font-size: 16px;
}
.empvr-nav--member .empvr-nav__links a.empvr-nav__cta {
  background: #1e2a4a; color: #fff; border-radius: 0;
  padding: 16px 24px; text-align: left;
}
.empvr-nav--member .empvr-nav__links a.empvr-nav__member {
  border: 0; border-top: 1px solid #f0f0f0; border-radius: 0;
  padding: 16px 24px; justify-content: flex-start;
}
.empvr-nav--member .empvr-nav__group {
  padding: 14px 24px 6px; border-top: 1px solid #f0f0f0; background: #faf9f6;
}
.empvr-nav--member .empvr-nav__links a.empvr-nav__sub { padding-left: 24px; }


/* ---- ONE "My Empvr" section -> My Results / My Library (2026-08-02 21:51) ----
   Ramesh, via the Hub with a screenshot: "in my empvr section there should be
   my results and my library and clicking on either should open up subsections
   underneath each... there is no need for two sections under the menu which is
   your empvr library and my empvr button which is not only redundant but it
   also takes us to separate part which is very confusing."

   So: one group label (My Empvr), two accordions, and the Media/Tools split
   survives as LABELS INSIDE the My Library panel rather than as a second level
   of tapping -- every destination stays two taps away (hamburger, then the
   group), which is what it was before, instead of three.

   Real <button>s, not click-handled divs, so Enter/Space activation and the
   focus ring come from the platform instead of being re-implemented. White +
   Inter per the 2026-08-02 Option B standard: no cream canvas, no serif. The
   chevron is the open/closed affordance; navy and teal only -- never red or
   green (protanopia). .empvr-nav__links already caps at calc(100vh - 70px)
   with overflow-y:auto, so opening both groups scrolls the menu instead of
   pushing "Sign out" off the bottom of the screen. */
.empvr-nav__acc {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; box-sizing: border-box; background: none; border: 0;
  border-top: 1px solid #f0f0f0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 16px; font-weight: 600; color: #1e2a4a;
  padding: 16px 24px; line-height: 1.2;
}
.empvr-nav__acc:hover,
.empvr-nav__acc[aria-expanded="true"] { color: #3f7a7a; }
.empvr-nav__acc:focus-visible { outline: 2px solid #4a8b8b; outline-offset: -2px; }
.empvr-nav__chev {
  font-size: 13px; color: #4a8b8b; margin-left: 12px;
  display: inline-block; transition: transform .18s ease;
}
.empvr-nav__acc[aria-expanded="true"] .empvr-nav__chev { transform: rotate(90deg); }
.empvr-nav__panel { display: flex; flex-direction: column; background: #fbfbfa; }
.empvr-nav__panel[hidden] { display: none; }
.empvr-nav__links .empvr-nav__panel a.empvr-nav__sub,
.empvr-nav--member .empvr-nav__links .empvr-nav__panel a.empvr-nav__sub {
  padding-left: 44px; font-size: 15px;
}

/* "Our Community" — a member-only TOP-LEVEL destination sitting directly above
   the My Empvr section (Ramesh, 2026-08-03 01:00). It is a link, not an
   accordion, so it must not read as part of the public row above it (#444/500,
   which is what `.empvr-nav__links a` would give it) nor wear a chevron it has
   no panel for. Matched to .empvr-nav__acc's navy/600/16px instead, so the two
   member entries read as peers and the eye sees one member block. The selector
   is doubled on .empvr-nav--member to out-specify that state's own `a` rule. */
.empvr-nav__links a.empvr-nav__memberlink,
.empvr-nav--member .empvr-nav__links a.empvr-nav__memberlink {
  font-size: 16px; font-weight: 600; color: #1e2a4a;
  padding: 16px 24px; border-top: 1px solid #f0f0f0;
}
.empvr-nav__links a.empvr-nav__memberlink:hover,
.empvr-nav--member .empvr-nav__links a.empvr-nav__memberlink:hover { color: #3f7a7a; }

/* Media / Tools inside the My Library panel. Quieter than the section label
   above them (.empvr-nav__group) so the hierarchy reads section > group >
   item without a third tap. */
.empvr-nav__subgroup {
  display: block; padding: 12px 24px 4px 44px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ea-gold-deep);
}
.empvr-nav__panel .empvr-nav__subgroup:first-child { padding-top: 8px; }

/* A non-link line inside a panel -- "Personality results — coming after..." and
   the empty My Results state. Deliberately NOT an <a>: there is nowhere to go
   yet, and a dead link that does nothing on tap is worse than plain text. */
.empvr-nav__note {
  display: block; padding: 12px 24px 12px 44px; font-size: 13.5px;
  line-height: 1.45; color: #5b6472; background: #fbfbfa;
}