/* ═══════════════════════════════════════════════════════════════════
   NAYA — BRAND LAYER
   Loads last, after every page-specific sheet.

   Scope is deliberately narrow: this file only handles what the new
   Naya Med Company lockup changed. Colour lives in the tokens at the
   top of style.css and redesign.css — not here.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* The four-point sparkle from inside the tooth, as a mask so it can
     take currentColor anywhere it is used. */
  --naya-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1Q13 10.5 19 12Q13 13.5 12 23Q11 13.5 5 12Q11 10.5 12 1Z' fill='%23000'/%3E%3C/svg%3E");
  --naya-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ─── Screen-reader utility ───────────────────────────────────────
   The lockup prints the company name in both scripts, so the nav no
   longer repeats it as text. This keeps the site name for AT and for
   anyone browsing with images off. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── The lockup ──────────────────────────────────────────────────
   The old mark was a near-square badge (1.23:1) sitting beside a text
   wordmark. This one is a bilingual lockup at 3.68:1 that carries the
   wordmark itself, so it needs height — not width — to keep both text
   lines legible, and it no longer takes a hover tilt.

   !important is unavoidable: redesign.css sets these with !important
   at lines 2414-2416. */
.nav-brand { gap: 0 !important; }
.nav-logo-img {
  height: 54px !important;
  width: auto;
  display: block;
  transition: height .45s var(--naya-ease) !important;
}
#navbar-header.scrolled .nav-logo-img { height: 46px !important; }
.nav-brand:hover .nav-logo-img { transform: none !important; }

@media (max-width: 900px) {
  .nav-logo-img { height: 44px !important; }
  #navbar-header.scrolled .nav-logo-img { height: 40px !important; }
}
@media (max-width: 420px) {
  .nav-logo-img { height: 38px !important; }
  #navbar-header.scrolled .nav-logo-img { height: 36px !important; }
}

/* In dark mode the nav sits on near-black navy, where the wordmark
   blue drops to about 4:1. Knock the lockup out to white — the same
   asset the footer already uses on its dark ground. */
[data-theme="dark"] .nav-logo-img { filter: brightness(0) invert(1); }

/* The footer image is supplied pre-knocked-out, so the old
   brightness(0) invert(1) is redundant and only chews the edges. */
.lmf-brand-logo {
  height: 62px;
  width: auto;
  object-fit: contain;
  filter: none;
  margin-bottom: 22px;
}
@media (max-width: 900px) {
  .lmf-brand-logo { height: 52px; }
}

/* ─── Section badge ───────────────────────────────────────────────
   Was a plain gold dot. Now the sparkle from the mark, at the size
   the dot occupied — same rhythm, but the marker is the identity
   rather than a generic bullet. */
.section-badge::before {
  width: 11px;
  height: 11px;
  border-radius: 0;
  background: var(--accent);
  -webkit-mask: var(--naya-sparkle) center / contain no-repeat;
          mask: var(--naya-sparkle) center / contain no-repeat;
}

/* ─── Price not yet announced ─────────────────────────────────────
   Courses with `price: null` in data.js. It sits in the same slot as
   .price-val, but shouldn't shout like a number — a quieter weight and
   the muted ink read as "not set yet" rather than "free". Sized to keep
   the card footer the same height either way, so a grid of mixed cards
   doesn't jump. */
.price-soon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.375;   /* matches .price-val's 22px * 1 */
  color: var(--muted);
  white-space: nowrap;
}
.price-soon::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--accent);
  -webkit-mask: var(--naya-sparkle) center / contain no-repeat;
          mask: var(--naya-sparkle) center / contain no-repeat;
}
[data-theme="dark"] .price-soon { color: var(--ink-soft); }

/* ─── About seal ──────────────────────────────────────────────────
   The seal core used to hold a four-digit founding year at 3.4rem.
   It now holds an Arabic word, which is far wider per character —
   at the old size it overflowed the circle. */
.abx-seal-core .yr {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  letter-spacing: -0.01em;
}
.abx-seal-core .lbl {
  max-width: 82%;
  margin-inline: auto;
  line-height: 1.5;
}

/* ─── Focus ───────────────────────────────────────────────────────
   One visible treatment everywhere, in the logo blue, offset so it
   never sits on the control's own border. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
  border-radius: 4px;
}
/* On the navy grounds the blue outline disappears — gold reads there. */
.lmf :where(a, button):focus-visible,
#topbar :where(a, button):focus-visible {
  outline-color: var(--accent-on-dark);
}