/* nav.css - canonical site-nav styling (sprint #791, 2026-09-07).
 *
 * nav.js injects ONE canonical <nav> markup into every page that has a <nav>
 * element. Its CSS, however, lived only inside styles.css, so a page that
 * carries its own stylesheet instead of styles.css got the canonical markup
 * with none of its styling: /website-vorschau/ rendered the links run together
 * and unstyled, the logo wrapped onto two lines, and the hamburger button
 * stretched the full width of the bar as a solid green pill (every viewport,
 * mobile AND desktop).
 *
 * These rules are copied verbatim out of styles.css - do not edit them here in
 * isolation, keep the two in sync. Link this file BEFORE a page's own <style>
 * block so the page can still override nav geometry (height, padding, sticky vs
 * fixed) exactly as it does today.
 *
 * Pages that already load styles.css must NOT load this file too.
 */

/* --- host-page reset guard (#791) ---------------------------------------
 * A page that brings its own stylesheet instead of styles.css can carry blanket
 * ELEMENT rules that the injected nav markup then inherits. /website-vorschau/
 * has  button { width: 100%; background: var(--emerald); border-radius: 12px; }
 * and that turned the hamburger into a full-width green pill. A class rule only
 * wins for the properties it actually declares, and no nav rule declares width,
 * so re-assert it here.
 *
 * The specificity is deliberate: `nav button` (0,0,2) outranks a bare `button`
 * (0,0,1) wherever the host rule sits in the cascade, while every .nav-* rule
 * below (0,1,0 or higher) still outranks THIS block. Keep it to properties that
 * no nav rule sets, so it can never override the real styling.
 */
nav button, nav a { width: auto; min-width: 0; max-width: none; }

/* ============ NAV ============ */
nav {position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 0 40px; transition: all 0.4s var(--ease);}
nav.scrolled {background: rgba(5,5,5,0.85); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border);}
.nav-inner {max-width: 1200px; margin: 0 auto; height: 72px;
    display: flex; align-items: center; justify-content: space-between;}
.nav-logo {display: flex; align-items: center; gap: 10px;
    color: var(--text); text-decoration: none;
    font-family: 'Space Grotesk'; font-weight: 700; font-size: 18px; letter-spacing: -0.02em;}
.nav-links {display: flex; gap: 32px;}
.nav-links a {color: var(--text-dim); text-decoration: none;
    font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
    transition: color 0.3s;
    position: relative;}
.nav-links a::after {content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 1px; background: var(--emerald);
    transition: width 0.3s var(--ease);}
.nav-links a:hover {color: var(--emerald);}
.nav-links a:hover::after {width: 100%;}
.nav-cta {padding: 7px 24px; background: var(--emerald); color: var(--bg);
    border: 1px solid var(--emerald); border-radius: 999px;
    font-size: 13px; font-weight: 600; text-decoration: none; letter-spacing: 0.02em;
    transition: all 0.3s var(--ease);}
.nav-cta:hover {background: #0d8a64; border-color: #0d8a64;}
.nav-auth {display: flex; align-items: center; gap: 6px;}
.nav-login-link {color: var(--emerald);
    font-size: 13px; font-weight: 500; text-decoration: none;
    letter-spacing: 0.02em;
    padding: 8px 4px;
    transition: color 0.3s var(--ease);}
.nav-login-link:hover {color: #0d8a64;}
.nav-separator {color: var(--text-dim); font-size: 14px; font-weight: 400;
    user-select: none;}
.nav-link-mobile {display: none;}
/* ============ NAV: FREE TOOLS DROPDOWN (sprint #685) ============ */
/* Grouped free-tools menu injected by nav.js. Matches the dark nav design system;
   open/closed state is driven by the .open class (see nav.js), never :hover alone,
   so hover, click, and keyboard all share one source of truth. */
.nav-dropdown {position: relative; display: inline-flex; align-items: center;}
.nav-dd-toggle {display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--text-dim); font-family: inherit;
    font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
    transition: color 0.3s;}
.nav-dd-toggle:hover,
.nav-dd-toggle.active,
.nav-dropdown.open .nav-dd-toggle {color: var(--emerald);}
.nav-dd-caret {flex-shrink: 0; transition: transform 0.3s var(--ease);}
.nav-dropdown.open .nav-dd-caret {transform: rotate(180deg);}
.nav-dd-menu {display: none; position: absolute; top: calc(100% + 16px); left: 50%;
    transform: translateX(-50%); min-width: 232px; padding: 8px;
    background: rgba(9,9,9,0.98); backdrop-filter: blur(20px);
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.5); z-index: 1100;}
/* invisible bridge over the gap so hover-intent survives the toggle→panel travel */
.nav-dd-menu::before {content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px;}
.nav-dropdown.open .nav-dd-menu {display: block;}
.nav-dd-menu a {display: block; padding: 11px 14px; border-radius: 9px;
    color: var(--text); text-decoration: none;
    font-size: 13px; font-weight: 500; letter-spacing: 0.01em; text-transform: none;
    transition: background 0.2s, color 0.2s;}
.nav-dd-menu a::after {display: none;}
/* cancel the .nav-links a underline pseudo */
.nav-dd-menu a:hover,
.nav-dd-menu a:focus-visible {background: var(--emerald-dim); color: var(--emerald);}
.nav-dd-menu a[aria-current="page"] {color: var(--emerald);}
.nav-dd-toggle:focus-visible,
.nav-dd-menu a:focus-visible {outline: 2px solid var(--emerald); outline-offset: 2px;}
/* --- page-geometry adjustment (#793) -------------------------------------
 * NOT part of the styles.css copy above: a rule this page needs and styles.css
 * does not, so it lives in its own block rather than silently diverging from the
 * verbatim section.
 *
 * #793 made the nav language follow <html lang>, so /website-vorschau/ - a German
 * page outside /de/ - finally renders the German nav instead of an English one.
 * Its own stylesheet narrows .nav-inner to 1100px (styles.css pages get 1200px),
 * which leaves 733px between the logo and the auth block. The six German labels
 * measure 602px and need 762px at gap:32px, so every one of them shrank and
 * wrapped onto two lines above 1280px (below 1280 the narrow-band rule nav.js
 * injects already tightens the gap to 20px, which is why only wide screens broke).
 *
 * 20px is that same value, so the bar now reads identically at every desktop
 * width: 602 + 5x20 = 702px inside 733px. Only this file loads on this page, so
 * nothing else on the site is affected.
 */
.nav-links {gap: 20px;}

/* ============ HAMBURGER ============ */
.nav-hamburger {display: none; background: none; border: none; cursor: pointer;
    flex-direction: column; gap: 5px;
    /* #791 tap target: 8px padding made this 38x32, under the 44x44 minimum, and
       it is the most-tapped control on mobile. 14/12 padding takes it to 44x44;
       the negative right margin puts the burger icon back on the same pixels. */
    padding: 14px 12px; margin-right: -4px;}
.nav-hamburger span {display: block; width: 22px; height: 2px; background: var(--text);
    transition: all 0.3s var(--ease);}
.nav-hamburger.active span:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);}
.nav-hamburger.active span:nth-child(2) {opacity: 0;}
.nav-hamburger.active span:nth-child(3) {transform: rotate(-45deg) translate(5px, -5px);}
/* ============ NAV COLLAPSE (hamburger) — sprint #676 ============ */
/* Raised from 768px → 1000px: at 770–950px the seven desktop labels + language
   toggle + auth block crowd and wrap, so the menu now collapses to the hamburger
   before that band. Kept as its own block (the rest of the ≤768 rules below are
   layout-only and stay at 768). The nav.js language-toggle @media matches 1000px. */
@media (max-width: 1000px) {nav { padding: 0 20px; }
    .nav-hamburger { display: flex; }
    .nav-auth { display: none; }
    .nav-link-mobile { display: block; }
    .nav-links {
        display: none; position: absolute; top: 72px; left: 0; right: 0;
        background: rgba(5,5,5,0.95); backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
        flex-direction: column; padding: 20px 24px; gap: 0;
    }
    .nav-links.mobile-open { display: flex; }
    .nav-links a {
        padding: 14px 0; border-bottom: 1px solid var(--border);
        font-size: 14px;
    }
    .nav-links a:last-child { border-bottom: none; }

    /* Free Tools dropdown inside the collapsed menu: full-width tap-to-expand row,
       menu renders as a static indented list (not the floating desktop panel). */
    .nav-dropdown { display: block; width: 100%; }
    .nav-dd-toggle {
        width: 100%; justify-content: space-between;
        padding: 14px 0; border-bottom: 1px solid var(--border);
        font-size: 14px;
    }
    .nav-dd-menu {
        position: static; transform: none; min-width: 0; margin: 0;
        padding: 2px 0 10px 16px;
        background: none; backdrop-filter: none; border: none;
        border-bottom: 1px solid var(--border); border-radius: 0;
        box-shadow: none;
    }
    .nav-dd-menu::before { display: none; }
    .nav-dd-menu a {
        padding: 12px 0; border-radius: 0; font-size: 13.5px; color: var(--text-dim);
    }
    .nav-dd-menu a:hover,
    .nav-dd-menu a:focus-visible { background: none; color: var(--emerald); }}