/* ================= HEADER ================= */
header{
  position: sticky;
  top: 0;
  background: #000;
  padding: 18px 40px;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
  border-bottom: 3px solid #c40000;
  z-index: 1000;
}

/* ================= LOGO ================= */
.logo{
  font-family: 'Bebas Neue';
  font-size: 32px;
  flex: 1;
  min-width: 0;
  letter-spacing: 2px;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================= DESKTOP NAV ================= */
nav{
  z-index: 999;
}
nav a{
  color: white;
  text-decoration: none;
  margin-left: 25px;
  font-weight: 600;
}
nav a:hover{
  color: #ff3c3c;
}

/* ================= HAMBURGER ICON ================= */
.menu-toggle{
  display: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
}

/* ================= MOBILE (PORTRAIT + LANDSCAPE) ================= */
@media (max-width:700px){

  header{
    padding: 10px 15px;
  }

  .logo{
    font-size: clamp(18px, 4vw, 22px);
    max-width: calc(100% - 50px);
  }

  .menu-toggle{
    display: block;
    font-size: 26px;
  }

  nav{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
    background: #000;
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }

  nav.active{
    max-height: 300px;
    opacity: 1;
  }

  nav a{
    padding: 12px;
    border-top: 1px solid #222;
    text-align: center;
    margin-left: 0;
    white-space: nowrap;
  }
}

/* ================= DESKTOP ================= */
@media (min-width:701px) {
  .menu-toggle{
    display: none;
  }

  nav{
    display: flex !important;
    flex-direction: row;
    position: static;
    max-height: none;
    opacity: 1;
    gap: 25px;
  }

  nav a{
    padding: 0;
    border: none;
    text-align: left;
    margin-left: 25px;
    white-space: nowrap;
  }
}

/* ================= MOBILE LANDSCAPE AUTO-SCALE ================= */
@media (max-width:700px) and (orientation: landscape) {

  header {
    padding: 10px 15px;
  }

  .logo {
    font-size: clamp(16px, 4vw, 22px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 50px); /* leave space for hamburger */
    flex-shrink: 1;
    min-width: 0;
  }

  .menu-toggle{
    display: block;  /* always use hamburger in landscape */
  }

  nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
    background: #000;
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }

  nav.active{
    max-height: 300px;
    opacity: 1;
  }

  nav a{
    font-size: clamp(12px, 2.5vw, 16px);
    white-space: nowrap;
    text-align: center;
    margin-left: 0;
    padding: 12px;
  }
}