/* ============================================================
   Kulud Academy — header account control
   run_id KACAD_LOGINBTN_20260805

   Styles the Log in button and the signed-in account menu wherever
   inc/account-nav.php renders them: the home template's nav bar, Eduma's
   site-wide header menu, and Eduma's mobile menu.

   Colours come from the design-system tokens with literal fallbacks, so the
   control still looks right on any page where the token layer has not loaded.
   ============================================================ */

/* ── Log in button ────────────────────────────────────────────
   White ground, Kulud green border and text. Measured 4.81:1 against white,
   which passes AA for normal text and for the border as a UI component.
   Inverting on hover keeps the same pair, so the hover state passes too. */
.kla-login-btn,
.kla-account__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* 44px is the minimum comfortable touch target. min-height rather than
     height so a longer label can grow the button instead of clipping it. */
  min-height: 44px;
  padding: 0 22px;
  margin: 0;

  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;

  color: var(--kla-primary, #00843d);
  background: #ffffff;
  border: 2px solid var(--kla-primary, #00843d);
  border-radius: var(--kla-radius-pill, 999px);
  cursor: pointer;

  /* The whole point of the layout fix: action buttons never shrink, so the
     menu gives up space instead of pushing them off the header. */
  flex: 0 0 auto;
  flex-shrink: 0;

  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.kla-login-btn:hover,
.kla-login-btn:focus,
.kla-account__btn:hover,
.kla-account__btn:focus {
  color: #ffffff;
  background: var(--kla-primary, #00843d);
  border-color: var(--kla-primary, #00843d);
  text-decoration: none;
}

/* Visible keyboard focus. Eduma removes outlines in places, so this is set
   explicitly rather than left to the UA default. */
.kla-login-btn:focus-visible,
.kla-account__btn:focus-visible {
  outline: 3px solid var(--kla-primary-mid, #a8dcc0);
  outline-offset: 2px;
}

/* ── Signed-in account chip ───────────────────────────────────
   Same shape as the Log in button so the header does not jump between the
   two states, with an avatar disc and a caret to say it opens something. */
.kla-account {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.kla-account__btn { padding-inline: 12px 16px; }

.kla-account__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--kla-primary, #00843d);
}

.kla-account__btn:hover .kla-account__avatar,
.kla-account__btn:focus .kla-account__avatar {
  color: var(--kla-primary, #00843d);
  background: #ffffff;
}

.kla-account__name {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kla-account__caret {
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .18s ease;
}

.kla-account__btn[aria-expanded="true"] .kla-account__caret { transform: rotate(180deg); }

/* ── Account dropdown ─────────────────────────────────────────
   IMPORTANT: the panel ships with the `hidden` attribute, and `hidden` is
   only a UA-stylesheet rule. Any author display value beats it, so this rule
   is what actually keeps the panel closed. Leaving it out is the exact bug
   that made the home page category filter look dead in 2.4.0. */
.kla-account__menu[hidden] { display: none; }

.kla-account__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;

  display: flex;
  flex-direction: column;
  min-width: 208px;
  padding: 8px;

  background: #ffffff;
  border: 1px solid var(--kla-border, #e5e7eb);
  border-radius: var(--kla-radius-sm, 10px);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
}

/* No-JS fallback: tabbing into the control opens the panel, so the log-out
   link is reachable even if account-nav.js never runs.

   Gated on html:not(.kla-js) — the script adds that class the moment it
   loads. Without the gate the two mechanisms fight: clicking the button
   leaves focus ON it, so :focus-within would force the panel back open the
   instant JS closed it, and the control would look stuck. */
html:not(.kla-js) .kla-account:focus-within .kla-account__menu[hidden] { display: flex; }

.kla-account__link {
  display: block;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--kla-text, #1a1a2a);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
}

.kla-account__link:hover,
.kla-account__link:focus {
  color: var(--kla-primary-dark, #00632e);
  background: var(--kla-primary-tint, #e8f4ee);
  text-decoration: none;
}

.kla-account__link--logout {
  margin-top: 4px;
  border-top: 1px solid var(--kla-border, #e5e7eb);
  border-radius: 0 0 8px 8px;
  color: var(--kla-muted, #6b7280);
}

/* ── Inside Eduma's site-wide header menu ─────────────────────
   The control is appended to the primary menu as a normal <li>, so Eduma's
   own link styling would otherwise repaint it. These rules neutralise that
   for this one item and nothing else.

   The wide left margin is what visually separates the action from the nav
   links, since Eduma lays its header out as a table cell rather than a flex
   row and margin-left:auto has nothing to push against there. */
.menu-item.kla-account-item {
  display: flex;
  align-items: center;
  margin-left: 18px;
  padding: 0;
  float: none;
}

.menu-item.kla-account-item > a,
.menu-item.kla-account-item .kla-account__btn {
  padding-top: 0;
  padding-bottom: 0;
}

/* Eduma paints menu links on hover; the button owns its own hover state. */
.menu-item.kla-account-item > a::before,
.menu-item.kla-account-item > a::after { display: none; }

/* ── Eduma's mobile menu ──────────────────────────────────────
   The item is appended last in the markup because that is where it belongs
   on desktop. On mobile the brief asks for it near the TOP of the opened
   panel, so the list becomes a flex column and the item is ordered first.

   Scoped to the list's DIRECT child <ul> only: nested sub-menus stay in
   normal flow, so the accordion behaviour Eduma ships is untouched. */
.mobile-menu-container > ul.nav {
  display: flex;
  flex-direction: column;
}

.mobile-menu-container > ul.nav > li.kla-account-item {
  order: -1;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--kla-border, #e5e7eb);
}

.mobile-menu-container > ul.nav > li.kla-account-item .kla-login-btn,
.mobile-menu-container > ul.nav > li.kla-account-item .kla-account,
.mobile-menu-container > ul.nav > li.kla-account-item .kla-account__btn {
  width: 100%;
}

/* In a narrow panel the dropdown has nowhere to hang, so it sits inline. */
@media (max-width: 860px) {
  .mobile-menu-container .kla-account__menu {
    position: static;
    min-width: 0;
    margin-top: 8px;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kla-login-btn,
  .kla-account__btn,
  .kla-account__caret { transition: none; }
}