/* =========================
   Vars
   ========================= */
:root{
  --line: rgba(255,255,255,.18);   /* subtle line over hero */
  --text: #ffffff;                 /* header text over hero */
  --pad-x: clamp(16px, 4vw, 40px);
  --brand: clamp(18px, 2.1vw, 26px);
  --logo-h: clamp(50px, 6.4vw, 65px);
  --burger: 40px;                  /* toggle size */
  --panel-bg: rgba(255,255,255,.96);
}

/* =========================
   Header bar
   ========================= */
header{
  position: absolute; top: 0; left: 0; width: 100%;
  z-index: 10000;
  background: transparent;
}

.nav{
  position: relative;
  display: flex; align-items: center;
  gap: 16px;
  padding: 14px var(--pad-x);
  /* reserve room so brand doesn't run under the burger */
  padding-right: calc(var(--pad-x) + var(--burger) + 16px);
  border-bottom: 1px solid var(--line);
}

/* =========================
   Brand (single line, truncates)
   ========================= */
.brand{
  flex: 1 1 auto;           /* can grow/shrink */
  min-width: 0;             /* critical for ellipsis in flex */
}

.brand a{
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: var(--brand); letter-spacing: .3px;
  color: var(--text); text-decoration: none; line-height: 1.2;
}

.brand-logo{
  height: var(--logo-h); width: auto; object-fit: contain; flex: 0 0 auto;
}

.brand-text{
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* =========================
   Desktop links / actions
   ========================= */
.nav-links{
  display: none;                     /* hidden on mobile */
  align-items: center;
  gap: clamp(30px, 1.3vw, 40px);
  margin-left: auto;
}
.nav-links a{
  color: var(--text); text-decoration: none; font-weight: 500; line-height: 1;
}
.nav-links a:hover,
.nav-links a:focus-visible{ text-decoration: underline; outline: none; }

.with-caret{ display: inline-flex; align-items: center; gap: 6px; }
.with-caret svg{ width: 14px; height: 14px; display: block; opacity: .8; }

.nav-actions{
  display: none;                     /* hidden on mobile */
  align-items: center; gap: 12px; margin-left: 8px;
}
.nav-actions button{
  background: none; border: none; color: var(--text);
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.nav-actions button:focus-visible{
  outline: 3px solid #0ea5e9; outline-offset: 2px;
}

/* =========================
   Mobile toggle (checkbox hack)
   ========================= */
#menu-check{ position: absolute; opacity: 0; pointer-events: none; }

.nav-toggle{
  position: absolute;
  top: 50%; right: var(--pad-x); transform: translateY(-50%);
  display: grid; place-items: center;
  width: var(--burger); height: var(--burger);
  border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; z-index: 1001; background: rgba(0,0,0,.12);
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle .bar{
  width: 20px; height: 2px; background: var(--text); position: relative; border-radius: 2px;
}
.nav-toggle .bar::before,
.nav-toggle .bar::after{
  content: ""; position: absolute; left: 0; width: 100%; height: 100%;
  background: var(--text); border-radius: 2px;
}
.nav-toggle .bar::before{ transform: translateY(-6px); }
.nav-toggle .bar::after{  transform: translateY( 6px); }
.nav-toggle:focus-visible{ outline: 3px solid #0ea5e9; outline-offset: 2px; }

/* =========================
   Mobile dropdown
   ========================= */
.mobile-panel{
  display: none;
  border-top: 1px solid var(--line);
  background: var(--panel-bg);
  backdrop-filter: blur(4px);
}
.mobile-panel .mobile-links{
  display: grid; gap: 14px; padding: 12px var(--pad-x);
}
.mobile-panel a{
  color: #111; text-decoration: none; font-weight: 600; line-height: 1.2;
}
.mobile-panel a:hover,
.mobile-panel a:focus-visible{ text-decoration: underline; outline: none; }

/* show mobile panel when checked */
#menu-check:checked ~ .mobile-panel{ display: block; }

/* =========================
   Breakpoints
   ========================= */
@media (max-width: 420px){
  :root{
    --brand: clamp(16px, 4.2vw, 18px);
    --logo-h: clamp(16px, 6vw, 22px);
  }
}

/* Desktop hover effect */
@media (min-width: 768px) {
  header:hover {
    background: #000; /* black background on hover */
    transition: background 0.3s ease;
  }
}


@media (min-width: 768px){
  /* desktop/tablet: show links & actions, hide burger/panel */
  .nav{ padding-right: var(--pad-x); }     /* no need to reserve burger space */
  .nav-links{ display: flex; }
  .nav-actions{ display: flex; }
  .nav-toggle{ display: none; }
  .mobile-panel{ display: none !important; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}