/* =========================================================
   Azubi-World – Navbar (v0.7.0)
   modular, responsive, tag-basiert (data-tags)
   ========================================================= */

:root{
    --nav-h: 56px;
}

/* ---------- Container ---------- */
.aw-nav {
    position: sticky; top: 0; z-index: 50;
    height: var(--nav-h);
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 12px;
    background: linear-gradient(180deg, var(--bg), color-mix(in oklch, var(--bg) 70%, transparent));
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(140%) blur(6px);
    padding: 0 16px;
}

/* ---------- Brand ---------- */
.aw-brand {
    display:flex; align-items:center; gap:10px; min-width:0;
    font-weight: 800; letter-spacing:.2px; text-decoration: none; color: var(--text);
}
.aw-brand .aw-logo {
    width: 28px; height: 28px; border-radius:8px;
    background: color-mix(in oklch, var(--accent) 40%, transparent);
    border:1px solid color-mix(in oklch, var(--accent) 55%, var(--border));
}
.aw-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Links (Mitte/Links) ---------- */
.aw-links { display:flex; gap: 10px; align-items:center; }
.aw-links a,
.aw-links .aw-link {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 10px; border-radius:10px; text-decoration:none; color:var(--text);
    border:1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.aw-links a:hover,
.aw-links .aw-link:hover {
    background: color-mix(in oklch, var(--accent) 8%, transparent);
}
.aw-links a[aria-current="page"],
.aw-links .aw-link[aria-current="page"]{
    background: color-mix(in oklch, var(--accent) 14%, transparent);
    border-color: color-mix(in oklch, var(--accent) 25%, var(--border));
}

/* ---------- Tag-basiertes Styling (via data-tags) ---------- */
.aw-links .aw-link[data-tags~="primary"] {
    background: color-mix(in oklch, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--border));
}
.aw-links .aw-link[data-tags~="warning"] {
    background: color-mix(in oklch, #c9a907 10%, transparent);
    border: 1px solid color-mix(in oklch, #c9a907 30%, var(--border));
}
.aw-links .aw-link[data-tags~="external"]::after {
    content: "↗";
    margin-left: 6px;
    font-size: 0.9em;
    opacity: 0.8;
}
.aw-links .aw-link[data-tags~="muted"] {
    opacity: 0.85;
}
.aw-links .aw-link[data-tags~="admin"] {
    outline: 1px dashed color-mix(in oklch, var(--accent) 45%, var(--border));
    outline-offset: 2px;
}

/* Optionaler Divider (vor allem für Mobile-Menü sinnvoll) */
.aw-sep { display: none; }

/* ---------- Actions (rechts) ---------- */
.aw-actions { display:flex; gap:8px; align-items:center; }
.aw-avatar {
    width:30px; height:30px; border-radius:999px; display:inline-block;
    background: color-mix(in oklch, var(--accent) 25%, transparent);
    border:1px solid color-mix(in oklch, var(--accent) 45%, var(--border));
}
.aw-user-name { color: var(--text); }

/* Buttons */
.aw-btn {
    border:1px solid var(--border); background: var(--chip); color:var(--text);
    padding:8px 12px; border-radius:10px; cursor:pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
}
.aw-btn:hover { filter: brightness(1.05); }

/* Theme-Toggle im Header */
.aw-btn-theme { display:inline-flex; gap:8px; align-items:center; }
.aw-btn-theme .theme-icon { font-size:1.1rem; }

/* ---------- Hamburger (Mobile) ---------- */
.aw-ham {
    display:none; width:36px; height:36px; border-radius:8px;
    border:1px solid var(--border); background:var(--chip); color:var(--text);
    justify-content:center; align-items:center; cursor:pointer;
}

/* ---------- Mobile Layout ---------- */
@media (max-width: 860px){
    .aw-nav{ grid-template-columns:auto auto 1fr; }

    .aw-links{
        position: fixed; left:0; right:0; top: var(--nav-h);
        background: var(--panel); border-bottom:1px solid var(--border);
        transform: translateY(-16px); opacity:0; pointer-events:none;
        transition: transform .2s ease, opacity .2s ease;
        padding:10px; gap:6px; flex-wrap:wrap; z-index:49;
    }
    .aw-nav.is-open .aw-links{ transform: translateY(0); opacity:1; pointer-events:auto; }

    .aw-ham{ display:inline-flex; }

    .aw-sep {
        display: inline-block;
        width: 100%; height: 1px;
        background: var(--border);
        margin: 6px 0;
    }
}

/* ---------- Fokus / A11y ---------- */
.aw-links a:focus-visible,
.aw-links .aw-link:focus-visible,
.aw-btn:focus-visible,
.aw-ham:focus-visible,
.aw-brand:focus-visible {
    outline: 2px solid color-mix(in oklch, var(--accent) 60%, #2a6c7d 20%);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Logo als Bild */
.aw-logo-img {
    height: 28px;
    width: auto;
    border-radius: 6px;
    object-fit: contain;
    display: block;
}

/* Wenn du den Text daneben etwas trennen willst: */
.aw-brand .aw-title {
    margin-left: 6px;
}