:root{
  --nav-bg: #c62828; /* red */
  --nav-text: #ffffff;
  --nav-hover: #b71c1c;
  --mobile-break: 720px;
  --nav-height: 56px;
  --z: 1000;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}

.navbar{
  background:var(--nav-bg);
  color:var(--nav-text);
  position:relative;
  z-index:var(--z);
}

.logo{
  height:50px;
  width:auto;
}

.navbar .container{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--nav-height);
  padding:0 12px;
  gap:12px;
}

.navbar .brand{
  font-weight:600;
  color:var(--nav-text);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.05rem;
}

/* Desktop menu */
.navbar nav{
  display:flex;
  gap:6px;
  align-items:center;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.lang-pill{
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:7px 10px;
  line-height:1;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:.04em;
}

.lang-pill.active{
  background:rgba(255,255,255,.18);
}

.navbar ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:6px;
  align-items:center;
}

.navbar a{
  color:var(--nav-text);
  text-decoration:none;
  padding:10px 12px;
  display:inline-block;
  border-radius:6px;
  transition:background .12s;
  font-size:0.95rem;
}

.navbar a:hover,
.navbar a:focus{
  background:var(--nav-hover);
  outline:none;
}

/* Dropdown */
.dropdown{
  position:relative;
}

.dropdown-toggle{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.dropdown-menu{
  position:absolute;
  top:calc(var(--nav-height) + 6px);
  left:0;
  min-width:180px;
  background:var(--nav-bg);
  border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  padding:6px;
  display:none;
  flex-direction:column;
  z-index:var(--z);
}

.dropdown-menu a{
  padding:8px 10px;
  border-radius:4px;
}

.dropdown-menu a:hover{ background:var(--nav-hover); }

/* Show dropdown when parent has .open (JS toggles it) */
.dropdown.open .dropdown-menu{ display:flex; }

/* Mobile: simple toggle */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  color:var(--nav-text);
  font-size:1.1rem;
  cursor:pointer;
  padding:8px;
}

/* Mobile menu panel */
.mobile-panel{
  display:none;
  flex-direction:column;
  gap:6px;
  padding:8px 12px 12px;
  background:var(--nav-bg);
}

@media (max-width:720px){
  .nav-toggle{ display:inline-flex; align-items:center; gap:6px; }
  .navbar nav{ display:none; }
  .nav-actions{ gap:6px; }
  .lang-pill{ padding:6px 9px; }
  .mobile-panel{ display:flex; }
  .mobile-panel.collapsed{ display:none; }
  .dropdown-menu{ position:static; box-shadow:none; top:auto; left:auto; background:transparent; padding:0; }
  .dropdown-menu a{ padding-left:18px; }
}