/* ============================================================
   Shared site header — single source of truth.

   Подключается в двух местах:
     1. `client-app/public/plugin/index.html` (static landing in <iframe>)
        — через <link rel="stylesheet" href="/shared/site-header.css">
     2. `client-app/src/index.html` (Angular main document, used by
        /account and any other Angular page) — через тот же <link>

   HTML структура должна быть одинаковой на обоих:

     <header class="site-header">
       <a class="logo" href="..." aria-label="midee">
         <img src="/plugin/assets/logo.svg" width="106" height="26" alt="midee" />
       </a>
       <nav class="site-nav" aria-label="Primary">
         <a href="/daw">Online editor</a>
         …
       </nav>
       <nav class="auth-actions">
         <button class="auth-link link" data-action="login">Log in</button>
         <a class="btn-primary auth-cta" data-action="signup">Sign up</a>
       </nav>
     </header>

   Plain CSS (не SCSS) — лежит как static asset, не проходит build.
   ============================================================ */

/* Force opsz axis to match the size the surrounding text uses (14px for
   nav links, 13px for buttons). When font-optical-sizing inherits `auto`
   from one body and `none` from another, the variable font picks a
   different opsz axis position per context → visible rendering drift
   even though family + weight + size are identical. Explicit
   font-variation-settings overrides both contexts to the same axis
   values, eliminating the drift. */
.site-header,
.site-header * {
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 14;
  text-rendering: optimizeLegibility;
}

.site-header {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px;
  gap: 24px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  /* Fixed header height — eliminates sub-pixel layout shift between the
     loading-state placeholder and the resolved auth-actions row. Before:
     placeholder min-height ~32px and resolved Log out pill ~33px gave a
     1px header bounce on each refresh. Header chrome ≤ 60px on all
     contexts (landing static, /account, /plugin-auth) — fixing total
     height here means children align: center inside a stable box. */
  min-height: 60px;
}

.site-header .logo {
  display: inline-flex;
  align-items: center;
  color: #f0eef5;
  text-decoration: none;
  line-height: 0;
}

.site-header .logo img {
  display: block;
  width: 106px;
  height: 26px;
  /* Optical nudge — DevTools-tuned: -2.5px lifts logo baseline visually
     onto the auth-actions baseline. */
  transform: translateY(-2.5px);
}

/* Primary nav — inline link group between logo and auth-actions. */
.site-header .site-nav {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-right: auto;
  margin-left: 32px;
}

.site-header .site-nav a {
  color: rgba(240, 238, 245, 0.7);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1;
  transition: color 0.2s ease;
}

.site-header .site-nav a:hover {
  color: rgba(240, 238, 245, 1);
}

@media (max-width: 720px) {
  .site-header .site-nav {
    display: none;
  }
}

.site-header .auth-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

/* Loading-state placeholder — reserves the same vertical footprint as the
   resolved auth-actions row (Log out pill = 8/18 padding + 13/600 italic
   → ~32px) so header height does not shift once authService.user()
   resolves. Empty visually (no border / no background); width also matters
   in flex space-between layout — fixed 200px is a generous approximation
   of `credits-chip + Log out` content width on /account, and leaves the
   logo + nav in place on /plugin-auth where the placeholder ends up as the
   right-edge anchor. */
.site-header .auth-actions--placeholder {
  min-height: 32px;
  min-width: 200px;
}

@media (max-width: 600px) {
  .site-header .auth-actions--placeholder {
    min-width: 0;
  }
}

.site-header .auth-link {
  color: rgba(240, 238, 245, 0.7);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.2s;
}

.site-header .auth-link:hover {
  color: rgba(240, 238, 245, 1);
  background: transparent;
}

/* Sign-up pill — landing-style lavender CTA. Same chrome on landing
   and /account: use the plain `<a class="btn-primary auth-cta">` markup
   in both places (NOT <md-button-v2>) so the CSS reaches both with one
   selector. */
.site-header .btn-primary.auth-cta {
  display: inline-flex;
  align-items: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  font-style: italic;
  padding: 8px 18px;
  min-height: 0;
  background: linear-gradient(135deg, #c4b5fd 0%, #d4c5ff 100%);
  color: #1a1a2e;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.site-header .btn-primary.auth-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(196, 181, 253, 0.22);
  background: linear-gradient(135deg, #d4c5ff 0%, #e0d5ff 100%);
}

/* Credits chip rules removed 2026-05-17 — extracted to kit component
   `<md-credits-chip>` (libs/components/.../badges/credits-chip/). Visual
   1:1 preserved in the component's own SCSS; `.site-header .credits-chip`
   styles are no longer referenced because all 4 callsites (account /
   payment-result / payment-status / plugin-auth) now use `<md-credits-chip
   [amount] [interactive] />`. Hover lives inside the kit component now,
   scoped to the `.chip--interactive` variant only. */

/* Mobile chrome — same on both. */
@media (max-width: 600px) {
  .site-header {
    padding: 12px 16px;
    gap: 12px;
  }
}