:root{
  --bg:#000;
  --fg:#fff;
  --muted:#bbb;
  --accent:#4db8ff;
  --card:#111;
  --border:#333;
  --ok:#2ecc71;
  --warn:#f1c40f;
  --err:#e74c3c;
  --btn:#000;
  --btn-border:#fff;

  --banner-start: #1e3c72;
  --banner-end:   #2a5298;
  --hero-image: url('assets/pond_1.jpg'); /* change to your background image */
  --hero-overlay: rgba(0,0,0,.45);
}

/* ========== Base ========== */
*{box-sizing:border-box}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,Arial,sans-serif;
  margin:0;
}
.highlight{color:var(--accent)}

/* ========== Banner Header ========== */
header.banner {
  background: linear-gradient(135deg, var(--banner-start), var(--banner-end));
  color: #fff;
  padding: 2rem 1rem 1.5rem;
  margin: 0;
  width: 100%;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
header.banner h1 {
  margin: 0 0 .5rem;
  font-size: 2.2rem;
}
header.banner p {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  color: #f3f6ff;
}
header.banner .auth-bar {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-top: .5rem;
}
header .auth-bar button{
  padding:.4rem .7rem;
  border:1px solid #777;
  background:#000;
  color:#fff;
  cursor:pointer;
}
header .auth-bar .secondary{opacity:.8}
header .auth-bar .danger{border-color:#c33;color:#fff}

/* ========== Page Width Wrapper ========== */
.page-wrapper {
  max-width: 1280px;   /* keep layout centered */
  margin: 0 auto;
  padding: 0 1rem;
}

/* ========== Main Section Layout ========== */
main{padding:1rem}
.info-gallery-section{
  position: relative;
  isolation: isolate;
  padding: 1rem;
  border-radius: 10px;
  overflow: clip;

  display: grid;
  grid-template-columns: minmax(300px, 1fr) 2fr;
  gap: 1.25rem 2rem;
  align-items: start;
}
/* Background image behind info-gallery-section */
.info-gallery-section::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, var(--hero-overlay), var(--hero-overlay)),
    var(--hero-image) center/cover no-repeat fixed;
  z-index: -1;
}

/* Left column */
.site-info{
  grid-column: 1;
  background: rgba(10,10,10,.55);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  backdrop-filter: saturate(120%) blur(2px);
  padding: 1rem;
}
.site-info .card:first-child{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  margin-bottom: 1rem;
}
.site-info .card:first-child h2{margin-top:0}
.site-info .info-extra{
  margin: 0.75rem 0 0;
  padding: 0.5rem 0 0.25rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
}

/* Upload + other cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  padding:1rem;
  margin-top:1rem;
}
.card label{display:block;margin:.4rem 0}
.card input[type="file"],
.card input[type="text"],
.card select{width:100%}

/* Right column: galleries grid */
.photo-gallery{
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.photo-gallery .gallery{
  background: rgba(10,10,10,.55);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  backdrop-filter: saturate(120%) blur(2px);
  padding: 1rem;
  text-align: center;
}
.photo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:.5rem;
}
.photo-grid img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:#666;
  cursor:pointer;
  border:1px solid #2a2a2a;
}

/* Responsive layout */
@media (max-width: 1100px){
  .photo-gallery{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
}
@media (max-width: 820px){
  .info-gallery-section{ grid-template-columns: 1fr; }
  .site-info{ grid-column: 1; }
  .photo-gallery{
    grid-column: 1;
    grid-template-columns: 1fr;
  }
  .photo-grid{ grid-template-columns: repeat(2,1fr); }
}

/* ========== Buttons & Status ========== */
button{
  background:var(--btn);
  border:1px solid var(--btn-border);
  color:#fff;
  padding:.5rem 1rem;
  margin:.4rem 0;
  cursor:pointer;
}
button.secondary{background:transparent;border-color:#aaa}
button.small{font-size:.9rem;padding:.35rem .6rem}

.status{margin-top:.5rem;color:var(--muted)}
.status.ok{color:var(--ok)}
.status.warn{color:var(--warn)}
.status.err{color:var(--err)}
.muted{color:var(--muted);margin-top:-.3rem}

/* ========== Lightbox ========== */
.lightbox-modal{display:none;position:fixed;z-index:1000;inset:0;background:rgba(0,0,0,.92);padding-top:60px}
.lightbox-modal.open{display:block}
.lightbox-content{display:block;margin:auto;max-width:92%;max-height:80vh;box-shadow:0 0 0 1px #222}
.lightbox-close{position:absolute;top:24px;right:32px;font-size:40px;color:#fff;cursor:pointer}
#lightbox-caption{text-align:center;color:#ccc;margin-top:10px}

/* ========== Modals ========== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;z-index:1001;padding:1rem}
.modal.open{display:flex;align-items:center;justify-content:center}
.modal-card{background:#0c0c0c;border:1px solid #444;min-width:300px;max-width:420px;width:100%;padding:1rem}
.modal-card label{display:block;margin:.5rem 0}
.modal-card input{width:100%}

/* === Knowledge Panel (Map + Info + Links) === */
.knowledge-section{
  background:#0b0b0b;
  border:1px solid #333;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  padding:1rem;
  margin:1rem 0;

  display:grid;
  grid-template-columns: 1.4fr 1fr 0.9fr; /* map a bit wider */
  gap:1.25rem;
  align-items:start;
}

.knowledge-col h2{ margin:.2rem 0 .6rem; }
.knowledge-col .info-block{ margin:.8rem 0 1rem; }
.knowledge-col .info-block h3{ margin:.2rem 0 .3rem; }

/* Map box */
.map-box{
  background:#0d0d0d;
  border:1px solid #2a2a2a;
  padding:.5rem;
}

.map-img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #3a3a3a;
  cursor: zoom-in;
  transition: filter .2s ease;
}
.map-img:hover {
  filter: brightness(1.05);
}


/* Links list */
.resource-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.5rem;
}
.resource-list a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.15);
  padding-bottom: 2px;
}
.resource-list a:hover{ text-decoration: underline; }

/* Responsive stacking */
@media (max-width: 1100px){
  .knowledge-section{
    grid-template-columns: 1fr 1fr; /* map + info on first row, links below */
  }
  .knowledge-section .links-col{ grid-column: 1 / -1; }
}
@media (max-width: 820px){
  .knowledge-section{
    grid-template-columns: 1fr; /* stack all three */
  }
  .map-placeholder{ height: 300px; }
}


/* ========== Admin Panel ========== */
.admin-panel{
  background:#0b0b0b;
  border:1px solid #333;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  padding:1rem;
  margin:1rem 0;
}
.pending-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:10px;
  margin-top:10px
}
.pending-card{
  border:1px solid #444;
  background:#0c0c0c;
  padding:.6rem
}
.pending-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border:1px solid #222
}
.category-badge{
  background:#2a4a2a;
  color:#8f8;
  padding:.2rem .4rem;
  border-radius:3px;
  font-size:.8rem;
  font-weight:bold;
  text-align:center;
  margin:.3rem 0;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.gallery-selection{
  margin:.5rem 0;
}
.gallery-selection label{
  display:block;
  font-size:.8rem;
  color:#888;
  margin-bottom:.2rem;
}
.gallery-select{
  width:100%;
  background:#1a1a1a;
  border:1px solid #444;
  color:#fff;
  padding:.3rem;
  border-radius:3px;
  font-size:.8rem;
}
.gallery-select:focus{
  outline:none;
  border-color:#666;
}
.pending-actions{
  display:flex;
  gap:.5rem;
  justify-content:space-between;
  margin-top:.5rem
}

/* ========== Footer ========== */
footer{
  background:#111;
  text-align:center;
  padding:2rem 1rem;
  border-top:1px solid #333;
}
footer .footer-content{
  max-width: 960px;
  margin: 0 auto;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--muted);
}
footer .footer-content a{
  color: var(--accent);
  text-decoration: none;
}
footer .footer-content a:hover{
  text-decoration: underline;
}
footer .footer-content .legal{
  margin-top: 1rem;
  font-size: .8rem;
  color: #777;
}

footer .privacy-note {
  margin-top: .5rem;
  font-size: .9rem;
  color: #aaa;
  font-style: italic;
}


/* === Auto-color species names === */
.watersnakes {
  color: orange;
  font-weight: 700;
}
.gartersnakes {
  color: limegreen;
  font-weight: 700;
}

/* Make species links inherit the highlight colors */
.species-link[href*="Gartersnake"] {
  color: limegreen !important;
  font-weight: 700;
}
.species-link[href*="Nerodia"] {
  color: orange !important;
  font-weight: 700;
}


/* opt-out: add this class to any container to disable auto-highlighting inside it */
.no-auto-highlight * {
  color: inherit !important;
}

/* Links for first instances */
.species-link {
  text-decoration: none;
  font-weight: 700;
}

.species-link:hover { text-decoration: underline; }

.upload-consent {
  font-size: 0.9rem;
  color: #666;
  margin: 0.5rem 0 1rem;
  font-style: italic;
}


.consent-check {
  display: block;
  margin: 0.5rem 0 1rem;
  font-size: 0.9rem;
}

main.wrapper.panel ul {
  margin: 0.5rem 0 1rem 1.5rem;
  list-style-type: disc;
}

.back-link {
  margin-top: 2rem;
}

.back-link a {
  color: var(--accent-color, steelblue);
  text-decoration: none;
}

.back-link a:hover {
  text-decoration: underline;
}