/* -----------------------------------------------------------------
   nav.css
   ----------------------------------------------------------------- */

.nav-menu {
  display: flex;
  gap: 20px;
}
.nav-menu a {
  text-decoration: none;
  color: #ff5a5f;
  font-size: 10px;
}
.nav-menu a:hover { color: #ff5a5f; }

.nav-link {
  text-decoration: none;
  color: white;
  border: 1px solid #ff5a5f;
  background-color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 30px;
  font-weight: bold;
  transition: background-color 0.3s, box-shadow 0.3s;
  position: static;
}

/* Logout and pill must not inherit the 30px nav-link size */
#logoutBtn {
  font-size: 13px;
  line-height: 1;
}
.nav-link:hover {
  background-color: #e14e50;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

#customNavLink,
#accountNavLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* always hide the old user-id div — pill replaces it */
#user-id { display: none !important; }

/* -----------------------------------------------------------------
   Desktop
   ----------------------------------------------------------------- */
@media (min-width: 769px) {

  /* The nav-menu is the single fixed bar — one row, top-right */
  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin: 0;
    background: transparent;
  }

  /* Every element in the bar: same height, same vertical centre */
  .nav-menu > *,
  .nav-menu .nav-link,
  #customNavLink,
  #accountNavLink,
  #user-name-pill {
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
  }

  /* Icon-only buttons */
  #accountBtn.nav-link,
  #custom.nav-link,
  #maritimecalendar.nav-link {
    width: 32px;
    padding: 0;
    font-size: 16px;
    border-radius: 8px;
    background: #fff;
    color: #ff5a5f;
    border: 1px solid rgba(255,90,95,0.35);
  }
  #accountBtn.nav-link:hover,
  #custom.nav-link:hover,
  #maritimecalendar.nav-link:hover {
    background: #ff5a5f;
    color: #fff;
  }

  /* Logout */
  #logoutBtn {
    padding: 0 12px;
    font-size: 13px !important;
    font-weight: 700;
    background: #fff;
    color: #ff5a5f;
    border: 1px solid #ff5a5f;
    border-radius: 8px;
  }
  #logoutBtn:hover { background: #ff5a5f; color: #fff; }

  /* Username pill */
  #user-name-pill {
    padding: 0 12px;
    font-size: 13px;
    font-weight: 700;
    background: #fff1f1;
    color: #e14e50;
    border: 1px solid rgba(255,90,95,0.3);
    border-radius: 9999px;
    white-space: nowrap;
  }

  /* Logged-out buttons */
  #signupBtn,
  #loginBtn {
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    white-space: nowrap;
  }
  #signupBtn { background: #fff; color: #ff5a5f; border: 1px solid #ff5a5f; }
  #signupBtn:hover { background: #ff5a5f; color: #fff; }
  #loginBtn  { background: #ff5a5f; color: #fff; border: 1px solid #ff5a5f; }
  #loginBtn:hover { background: #e14e50; }
}

/* -----------------------------------------------------------------
   Mobile
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
  #logoutBtn {
    position: fixed;
    top: 10px;
    right: 12px;            /* FIX: was position:relative; left:270px, which
                              pushed the button past the right edge and
                              widened the page. Anchor to the right instead. */
    left: auto;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    width: auto !important;
    min-width: 0;
    height: 26px;
    padding: 0 10px;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    border: 1px solid #ff5a5f;
    background: #fff;
    color: #ff5a5f;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
  }

  #custom.nav-link {
    position: fixed;
    bottom: 0;
    left: 0 !important;
    width: 33.333vw;
    background-color: #fff;
    color: #ff5a5f;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.25);
    z-index: 1000;
  }
  #custom.nav-link:hover { background-color: #e14e50; }

  #maritimecalendar.nav-link {
    position: fixed;
    bottom: 0;
    left: 33.333vw !important;   /* FIX: was 128px + 33vw, which didn't tile to
                                   the screen and could overflow on narrow phones */
    width: 33.333vw;
    background-color: #fff;
    color: #ff5a5f;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.25);
    z-index: 1000;
  }
  #maritimecalendar.nav-link:hover { background-color: #e14e50; }

  #accountBtn.nav-link {
    position: fixed;
    bottom: 0;
    left: 66.666vw !important;   /* FIX: was 256px + 33vw = past the right edge
                                   on phones < ~388px, causing horizontal scroll */
    width: 33.333vw;
    background-color: #fff;
    color: #ff5a5f;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.25);
    z-index: 1000;
  }
  #accountBtn.nav-link:hover { background-color: #e14e50; }

  body { padding-bottom: 60px; }

  #user-name-pill {
    position: fixed;
    top: 10px;
    right: 80px;
    z-index: 1100;
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 9999px;
    background: #fff1f1;
    color: #e14e50;
    border: 1px solid rgba(255,90,95,0.3);
    display: inline-flex;
    align-items: center;
  }
}

/* Neutralise the inherited 30px font-size that pushes logout text off-centre */
@media (min-width: 769px) {
  /* ✅ FIX: removed "display: inline-flex !important" here — it was
     forcing logout visible at all times regardless of login state,
     overriding both the CSS default and auth.js's own toggle.
     align-items still applies whenever the element IS shown
     (by auth.js setting display to inline-flex directly). */
  #logoutBtn {
    font-size: 13px !important;
    line-height: 32px !important;
    height: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
  }
}

/* -------------------------------------------------------------
   ✅ FIX: !important on display was beating auth.js's inline
   style toggles (inline styles cannot override !important rules,
   it's the other way around). That's why Logout never appeared
   and Sign Up/Login never disappeared even when logged in.

   Replaced with plain (non-!important) rules so auth.js's
   `element.style.display = '...'` calls always win, while still
   preventing any flash-of-wrong-state on first paint via the
   default values below.
   ------------------------------------------------------------- */
#logoutBtn {
  display: none;   /* default: hidden until auth.js confirms login */
}

#signupBtn,
#loginBtn {
  display: inline-flex;   /* default: visible until auth.js confirms login */
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Admin nav button — distinct coral/dark style */
.nav-link-admin {
  background-color: #222 !important;
  border-color: #222 !important;
  color: #ff5a5f !important;
}
.nav-link-admin:hover {
  background-color: #ff5a5f !important;
  color: #fff !important;
}