/* ============ Not Just Survival - Global Styles ============ */
/* Color system */
:root{
  --bg:            #96A025;   /* page background */
  --text:          #FFFFFF;   /* default text */
  --link:          #FFD788;   /* link color with good contrast on darks */
  --card-bg:       #513B1C;   /* home-card & card-like panels */
  --btn-fg:        #FFFFFF;   /* button text */
  --btn-border:    #4D4D4F;   /* bubble/border around buttons */
  --btn-bg:        #242124;   /* default button fill (distinct from card) */
  --btn-hover-bg:  #4D4D4F;   /* hover fill */
  --shadow-soft:   0 2px 10px rgba(0,0,0,.25);
}

/* Reset-ish + smooth, readable typography */
*{ box-sizing:border-box; }
html, body{ height:100%; }

html{
  font-size: clamp(16px, 1.2vw + 0.5rem, 20px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Links */
a{ color:var(--link); text-decoration:none; }
a:hover, a:focus{ text-decoration:underline; }

/* Layout container for page content */
.container{
  width:min(100% - 2rem, 1200px);
  margin-inline:auto;
  padding-block: clamp(8px, 2vw, 20px);
}

/* ============ Header / Banner ============ */
.site-header{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:clamp(8px,2vw,16px);
}

/* Banner link wraps the image */
.brand-link{
  display:block;
  width:min(100%, 1200px);
}

/* Responsive banner image */
.brand-link img{
  display:block;
  width:100%;
  height:auto;
  image-rendering:auto;
}

/* Auth bar under the banner (Login/Register OR Dashboard/Logout) */
.auth-bar{
  display:flex;
  justify-content:center;   /* centered under banner (FIXED) */
  gap:.5rem;
  padding: .5rem 1rem;
}
@media (max-width:640px){
  .auth-bar{
    justify-content:center;
    flex-wrap:wrap;
  }
}

/* ============ Generic content styles ============ */
h1, h2, h3{ line-height:1.25; margin:.5em 0 .25em; }
p, ul, ol{ margin:0 0 1em; }
ul, ol{ padding-left:1.25em; }
img, svg, video, canvas{ max-width:100%; height:auto; }

/* Tables */
table{ width:100%; border-collapse:collapse; }
th, td{ padding:.6em; border-bottom:1px solid rgba(255,255,255,0.15); }

/* ============ Buttons (shared) ============ */
.button, button, input[type="submit"], .home-btn, .footer-btn, .auth-btn{
  appearance:none;
  border:2px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--btn-fg);
  padding:.7em 1.1em;
  border-radius:12px;
  cursor:pointer;
  text-decoration:none;
  font-weight:600;
  box-shadow: var(--shadow-soft);
  transition: transform .06s ease, opacity .2s ease, background-color .2s ease, border-color .2s ease;
}
.button:hover, button:hover, input[type="submit"]:hover,
.home-btn:hover, .footer-btn:hover, .auth-btn:hover{
  background-color:var(--btn-hover-bg);
  text-decoration:none;
}
.button:active, button:active, input[type="submit"]:active,
.home-btn:active, .footer-btn:active, .auth-btn:active{
  transform: translateY(1px);
}

/* ============ Home card & stacks (reusable) ============ */
.home-card{
  width:100%;
  max-width:560px;
  margin:0 auto;
  padding:2rem;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  background-color:var(--card-bg);
}
.btn-stack{ display:grid; gap:.75rem; }
.home-title{ text-align:center; margin:0 0 1.25rem 0; }

/* ============ Forms & Cards ============ */
.card,
.form-card{
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding:2rem;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  background-color:var(--card-bg);
}

.form-grid{
  display:grid;
  gap:1rem;
}

.form-grid label{
  display:grid;
  gap:.4rem;
  font-weight:600;
}

.form-control,
.form-grid input,
.form-grid select,
.form-grid textarea{
  appearance:none;
  width:100%;
  padding:.75rem .9rem;
  border-radius:12px;
  border:2px solid var(--btn-border); /* bubble */
  background:#2E2A26;                /* distinct from card */
  color:var(--btn-fg);
  box-shadow: var(--shadow-soft);
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus{
  border-color:var(--btn-hover-bg);
  box-shadow:0 0 0 3px rgba(77,77,79,.35);
}

.actions{
  display:flex;
  gap:.5rem;
  align-items:center;
  justify-content:flex-start;
  margin-top:.5rem;
}

/* Alerts */
.alert{
  background: rgba(255,120,120,0.12);
  border: 2px solid rgba(255,120,120,0.35);
  color:#fff;
  border-radius:12px;
  padding:.9rem 1rem;
  margin:0 0 1rem 0;
}
.alert ul{ margin:.5rem 0 0 1.2rem; }

/* ============ Footer ============ */
.site-footer{
  padding: clamp(8px,2vw,16px) 0;
}
.footer-btn{
  /* inherits shared button style */
}

/* Accessibility niceties */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:static; width:auto; height:auto;
  padding:.5rem 1rem; background:#222; color:#fff; border-radius:8px;
}

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