/* ======================================================================
   header.css (Option A - best practice)
   - Header stays glass (blurred)
   - Dropdown + mobile panel are SOLID (reliable, premium)
   - Top-level nav typography tuned for readability
   ====================================================================== */

/* ==========================================================
   BRAND (restore original)
   ========================================================== */
.brand{
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  font-weight:600;
  letter-spacing:.1px;
  color:var(--text);
}

.brand-name{
  font-size:2rem;
  font-weight:600;
}

.brand-name__keyword{color:var(--yt-black)}
.brand-name__rocket{color:var(--yt-red)}

.brand-logo{
  height:calc(var(--header-min-h) - (var(--header-pad-y)*2));
  width:auto;
  object-fit:contain;
  display:block;
}

@media (max-width:720px){
  .brand-logo{height:34px}
  .brand-name{font-size:1.05rem}
  .brand{gap:.55rem}
}


/* ==========================================================
   HEADER WRAP (glass)
   ========================================================== */
.header{
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + var(--header-offset));
  left:0;
  right:0;
  z-index:100;
  background:transparent;
  pointer-events:none;
}

.header.glass .header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:nowrap;

  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  padding:var(--header-pad-y) 26px;
  min-height:var(--header-min-h);
  box-shadow:var(--glass-shadow);

  pointer-events:all;
  overflow:visible;
}

/* ==========================================================
   NAV (desktop baseline)
   ========================================================== */
.nav{
  display:flex;
  gap:.25rem;                 /* tighter, more “SaaS” */
  align-items:center;
  flex-wrap:nowrap;
}

/* ==========================================================
   NAV LINKS (TOP-LEVEL – restore original)
   ========================================================== */
.nav > a,
.nav > .nav__link,
.nav > .nav__item--dropdown > .nav__link--btn{
  padding:12px 14px;
  border-radius:var(--r-sm);

  color:var(--muted);
  font-weight:500;
  font-size:inherit;   /* <- WICHTIG: wieder globaler Font */
  line-height:1;

  background:transparent;
  border:0;

  display:inline-flex;
  align-items:center;
  gap:.45rem;

  cursor:pointer;
  transition:background .15s,color .15s,transform .12s;
}

.nav > a:hover,
.nav > .nav__link:hover,
.nav > .nav__item--dropdown > .nav__link--btn:hover{
  color:var(--text);
  background:rgba(0,0,0,.06);
}


/* ==========================================================
   TOOLS DROPDOWN (SOLID SURFACE)
   ========================================================== */
.nav__item--dropdown{position:relative}

/* Chevron (inline SVG) */
.nav__chev{
  width:18px;
  height:18px;
  opacity:.72;
  transition:transform .18s ease, opacity .18s ease;
}

.nav__item--dropdown.is-open .nav__chev{
  transform:rotate(180deg);
  opacity:1;
}

/* Dropdown panel */
.nav__dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:320px;

  padding:10px;
  border-radius:14px;

  background:rgba(255,255,255,.98);
  border:1px solid rgba(15,19,32,.10);
  box-shadow:0 18px 60px rgba(12,24,60,.18);

  z-index:1000;

  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;

  overflow:hidden;
}

.nav__item--dropdown.is-open .nav__dropdown{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* Dropdown item (icon + title + desc) */
.nav__dropdown .nav__tool{
  display:flex;
  align-items:flex-start;
  gap:12px;

  padding:12px 12px;
  border-radius:12px;

  text-decoration:none;
  background:transparent;

  transition:background .15s ease, transform .12s ease;
}

.nav__dropdown .nav__tool:hover{background:rgba(0,0,0,.06)}
.nav__dropdown .nav__tool:active{transform:translateY(1px)}

/* Icon */
.nav__tool-icon{
  width:25px;
  height:25px;
  flex:0 0 auto;
  margin-top:2px;
}

/* Text stack */
.nav__tool-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.nav__tool-title{
  color:var(--text);
  font-weight:600;
  font-size:14.5px;
  line-height:1.2;
}

.nav__tool-desc{
  color:var(--muted-2);
  font-weight:500;
  font-size:12.5px;
  line-height:1.35;
}

/* ==========================================================
   GOOGLE SLOT
   ========================================================== */
.nav__google{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:170px;
}
.nav__google > *{transform-origin:right center}

/* Google Login + Account Button */
.btn-google,
.btn-account{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  border:1px solid #fff;
  border-radius:10px;
  padding:.75rem 1.05rem;
  background:#fff;
  cursor:pointer;
  font:600 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  user-select:none;
}
.btn-google:hover,
.btn-account:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}
.btn-google:active,
.btn-account:active{transform:translateY(1px)}
.btn-google[disabled]{opacity:.6;cursor:not-allowed}
.btn-google img{width:20px;height:20px}

.btn-account__avatar,
.btn-account__circle{
  width:24px;height:24px;border-radius:50%;
  flex-shrink:0;
  display:grid;place-items:center;
}
.btn-account__avatar{overflow:hidden;background:#e5e7eb}
.btn-account__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.btn-account__circle{
  background:#f1f5ff;
  font-weight:800;
  font-size:12px;
  color:#012863;
}
@media (max-width:520px){
  .btn-account span.label{display:none}
}

/* ==========================================================
   Account credits state (uses tokens.css)
   - normal: default white card
   - warn:   yellow tint
   - danger: red tint
   ========================================================== */

.btn-account{
  /* smooth state transitions */
  transition:
    transform .06s ease,
    box-shadow .2s ease,
    opacity .2s ease,
    background-color .18s ease,
    border-color .18s ease;
}

/* YELLOW (low credits, but not zero) */
.btn-account.is-credits-warn{
  background: rgba(250, 204, 21, .16);           /* ~ --yellow-400 tint */
  border-color: rgba(234, 179, 8, .55);          /* ~ --yellow-500 */
  box-shadow:
    0 2px 8px rgba(0,0,0,.06),
    0 10px 26px rgba(234,179,8,.18);
}

.btn-account.is-credits-warn .label{
  color: var(--text);
}

/* RED (zero credits) */
.btn-account.is-credits-danger{
  background: rgba(255, 26, 26, .12);            /* ~ --yt-red-500 tint */
  border-color: rgba(227, 0, 0, .55);            /* ~ --yt-red-600 */
  box-shadow:
    0 2px 8px rgba(0,0,0,.06),
    0 10px 26px rgba(255,26,26,.18);
}

.btn-account.is-credits-danger .label{
  color: var(--text);
}

/* ==========================================================
   GOOGLE SPACING (desktop polish)
   ========================================================== */
@media (min-width:721px){
  .nav__google{
    margin-left:14px; /* fein, hochwertig – nicht zu luftig */
  }
}


/* ==========================================================
   NAV TOGGLE (mobile)
   ========================================================== */
.nav-toggle{
  display:none;
  border:0;
  background:transparent;
  padding:0;
  border-radius:999px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  width:calc(var(--header-min-h) - (var(--header-pad-y)*2));
  height:calc(var(--header-min-h) - (var(--header-pad-y)*2));
  transition:background .16s ease, transform .22s ease;
}
.nav-toggle__icon{width:70%;height:70%;display:block}
.nav-toggle:hover{background:transparent}
.nav-toggle.is-open{transform:rotate(90deg)}

@media (min-width:721px){
  .nav-toggle{display:none}
}

@media (max-width:720px){
  .nav-toggle{display:inline-flex;width:34px;height:34px}

  .nav{
    position:absolute;
    top:calc(100% + 10px);
    right:16px;

    display:flex;
    flex-direction:column;
    gap:6px;
    padding:14px 14px;

    background:rgba(255,255,255,.98);
    border:1px solid rgba(15,19,32,.10);
    border-radius:var(--r-lg);
    box-shadow:0 18px 60px rgba(12,24,60,.18);

    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .16s ease, transform .16s ease;
    z-index:99;

    width:280px;
    align-items:stretch;
  }

  .nav > a,
  .nav > .nav__item--dropdown > .nav__link--btn{
    width:100%;
    justify-content:space-between;
  }

  .nav.is-open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  /* Inline dropdown inside mobile panel */
  .nav__dropdown{
    position:static;
    min-width:0;
    width:100%;
    margin-top:6px;

    transform:none;
    display:none;
    opacity:0;
    pointer-events:none;

    background:rgba(255,255,255,.98);
    border:1px solid rgba(15,19,32,.10);
    box-shadow:0 10px 30px rgba(12,24,60,.12);
  }

  .nav__item--dropdown.is-open .nav__dropdown{
    display:block;
    opacity:1;
    pointer-events:auto;
  }

  .nav__google > *{transform:scale(.92)}

  .nav__google{
    width:100%;
    margin-top:6px;
  }

  .nav__google > *{
    width:100%;
    justify-content:center;
  }

  .btn-google,
  .btn-account{
    height:48px;
  }
}

.nav__credits{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:10px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.05);
  font-size:.82rem;
  font-weight:600;
}

.nav__credits-value{
  color:var(--text);
}

.nav__credits-label{
  color:var(--muted);
  font-weight:500;
}

.nav__credits.is-hidden{
  display:none;
}