/* /public/assets/css/header.css */

:root{
  --qmk-header-h: 56px;

  /* Match Startseite Erdbebenliste (Panel Look) */
  --qmk-panel-bg: rgba(14,16,22,.60);
  --qmk-panel-border: rgba(255,255,255,.10);
}

/* ===== Header ===== */
.qmk-header{
  position: sticky;
  top: 0;
  z-index: 1200;
  width: 100%;

  /* SAME as list panel (bg + border) */
  background: var(--qmk-panel-bg);
  border-bottom: 1px solid var(--qmk-panel-border);

  /* Blur / glass effect */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.qmk-header__inner{
  height: var(--qmk-header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left spacer | centered brand | right controls */
  align-items: center;
  padding: 0 12px;
  gap: 10px;
}

.qmk-header__left{ height: 1px; }

.qmk-header__brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  justify-self: center;
  min-width: 0;
}

.qmk-header__logo{ height: 28px; width: auto; display: block; }
.qmk-header__wordmark{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
}

.qmk-header__right{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  justify-self: end;
}

/* ===== Buttons / icons ===== */
.qmk-hbtn{
  height: 38px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
}
.qmk-hbtn:hover{ background: rgba(255,255,255,0.09); }
.qmk-hbtn:active{ transform: translateY(1px); }
.qmk-hbtn--icon{ width: 40px; padding: 0; }

.qmk-ico{
  width: 18px;
  height: 18px;
  display: block;
  color: #fff;
}

.qmk-caret{ opacity: .85; margin-left: 2px; }

/* ===== Flags / language pill ===== */
.qmk-langpill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qmk-flag{
  width: 18px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.20);
}

/* ===== Dropdown ===== */
.qmk-dd{ position: relative; }
.qmk-dd-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  border-radius: 14px;
  background: rgba(14,16,22,.96);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 70px rgba(0,0,0,.40);
  padding: 8px;
  display: none;
  z-index: 1300;
}
.qmk-dd.open .qmk-dd-menu{ display: block; }

.qmk-dd-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}
.qmk-dd-item:hover{ background: rgba(255,255,255,.08); }

/* ===== Hamburger drawer (right side) ===== */
.qmk-hamb{ position: relative; }

.qmk-hamb-backdrop{
  position: fixed;
  inset: 0;
  z-index: 1290;
  background: rgba(0,0,0,.55);
  display: none;
}

.qmk-hamb-menu{
  position: fixed;
  top: 0;
  right: 0;
  height: 100svh;
  width: min(420px, 100vw);
  z-index: 1300;

  background: rgba(14,16,22,.98);
  border-left: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: -24px 0 70px rgba(0,0,0,.50);
  padding: 14px;

  transform: translateX(101%);
  transition: transform .18s ease-out;
  display: block;
}

.qmk-hamb.open .qmk-hamb-backdrop{ display: block; }
.qmk-hamb.open .qmk-hamb-menu{ transform: translateX(0); }

.qmk-hamb-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.qmk-hamb-title{ font-weight: 900; color: #fff; }
.qmk-hamb-body{ display: grid; gap: 8px; }

.qmk-hamb-link{
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  font-weight: 800;
}
.qmk-hamb-link:hover{ background: rgba(255,255,255,0.09); }

/* ===== Search modal (hidden unless .is-open) ===== */
.qmk-searchmodal{
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: none;
}
.qmk-searchmodal.is-open{ display: block; }

.qmk-searchmodal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.qmk-searchmodal__panel{
  position: absolute;
  left: 50%;
  top: calc(var(--qmk-header-h) + 14px);
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 20px));
  border-radius: 16px;
  background: rgba(14,16,22,.96);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  overflow: hidden;
}

.qmk-searchmodal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.qmk-searchmodal__title{ font-weight: 900; color: #fff; }

.qmk-searchmodal__body{ padding: 12px; }
.qmk-searchmodal__body input{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 0 12px;
  outline: none;
}
.qmk-searchmodal__hint{
  margin-top: 8px;
  font-size: 12px;
  opacity: .7;
  color: #fff;
}

/* ===== Mobile tweaks ===== */
@media (max-width: 980px){
  .qmk-header__wordmark{ font-size: 15px; }
}
@media (max-width: 520px){
  .qmk-header__wordmark{ display: none; }
  .qmk-dd-menu{ width: 220px; }
}