:root {
  --bg-dark: #0d1e17; /* Dark earthy green */
  --bg-card: rgba(18, 42, 33, 0.7);
  --text-light: #f4f7f5;
  --text-muted: #8d9a90;
  --accent-blue: #23587b; /* Earthy dark blue */
  --accent-hover: #357ca8;
  --glass-border: rgba(255, 255, 255, 0.08);
  --bg-invert: #ffffff;
  --text-invert: #16241c;
  --font-main: 'Inter', sans-serif;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.light-mode {
  --bg-dark: #f2efe9; /* Warm earthy sand backdrop */
  --bg-card: rgba(228, 225, 216, 0.85); /* Slightly darker sand for cards */
  --text-light: #16241c; /* Dark green/grey text */
  --text-muted: #4e6356;
  --accent-blue: #1c523e; /* Earthy natural green to replace the blue */
  --accent-hover: #123729;
  --glass-border: rgba(0, 0, 0, 0.1);
  --bg-invert: #123729; /* Dark earthy green/navy for light mode boxes */
  --text-invert: #ffffff;
}

/* Solid dropdown for the light theme too — see the dark-theme rule
   for rationale. */
body.light-mode .dropdown-menu,
body.light-mode .dropdown-menu-nested {
  background: #e4e1d8;
}

/* Light Mode Overrides for Stats */
body.light-mode .hero-stats {
  background: var(--bg-invert);
}
body.light-mode .stat-item h2, body.light-mode .stat-item p {
  color: var(--text-invert);
}
body.light-mode .stat-item p {
  opacity: 0.9;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-dark);
  color: var(--text-light);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header & Navigation */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
  padding: 1rem 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-light);
  text-decoration: none;
  letter-spacing: 1px;
}

.logo span {
  color: var(--accent-blue);
}

nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-item {
  position: relative;
}

.nav-link {
  color: var(--text-light);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: var(--transition);
}

.nav-link:hover, .nav-link.active {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-hover);
}

/* Dropdown */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  /* Solid background — the glass-look --bg-card alpha let hero/stat card
     content bleed through the dropdown. Fully opaque for readability. */
  background: #122a21;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  min-width: 200px;
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  /* IMPORTANT: do NOT set `transform` here. A non-none transform creates a
     new containing block for descendant `position: fixed` elements, which
     means the nested submenus would be positioned relative to (and clipped
     by) this dropdown rather than the viewport — defeating the whole reason
     they're position: fixed. Same applies to `filter`, `backdrop-filter`,
     `perspective`, etc. */
  transition: opacity 0.25s, visibility 0.25s;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  z-index: 100;
  /* Cap height + allow vertical scroll when the menu has more items than
     fit on screen. Submenus escape the resulting clip via position: fixed
     (see .dropdown-menu-nested rules below). */
  max-height: 80vh;
  overflow-y: auto;
}

/* Dropdown Custom Scrollbar — visible so users can see when a menu is scrollable. */
.dropdown-menu::-webkit-scrollbar,
.dropdown-menu-nested::-webkit-scrollbar {
  width: 8px;
}
.dropdown-menu::-webkit-scrollbar-track,
.dropdown-menu-nested::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}
.dropdown-menu::-webkit-scrollbar-thumb,
.dropdown-menu-nested::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
}
.dropdown-menu::-webkit-scrollbar-thumb:hover,
.dropdown-menu-nested::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-blue);
}
/* Firefox */
.dropdown-menu, .dropdown-menu-nested {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) rgba(0, 0, 0, 0.25);
}

.nav-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.drag-over-top {
  border-top: 2px solid #ffffff !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.dropdown-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  color: var(--text-light);
  text-decoration: none;
  border-radius: 6px;
  transition: var(--transition);
  cursor: pointer;
}

.dropdown-link:hover {
  background: var(--accent-blue);
  color: white;
}

/* Nested Submenus */
.dropdown-submenu {
  position: relative;
}

.dropdown-menu-nested {
  /* Fixed positioning so the submenu escapes the parent's overflow clip
     when the parent is scrollable. Coordinates AND max-height are written
     by installSubmenuPositioning() in app.js on each mouseenter, based on
     the parent item's bounding rect plus available viewport space. */
  position: fixed;
  /* Match the parent dropdown's solid background. */
  background: #122a21;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  min-width: 180px;
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  /* No `transform` for the same containing-block reason explained on
     .dropdown-menu — a transformed level-1 submenu would clip its
     own level-2 submenu (Zoos / Wild → Region → Country → State). */
  transition: opacity 0.25s, visibility 0.25s;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  margin-left: 0.25rem;
  overflow-y: auto;
  /* Above the parent dropdown so it isn't covered by the scrollable
     parent's content. */
  z-index: 110;
}

/* Direct-child combinator (>) is intentional. With a plain descendant
   selector, hovering a deeply-nested wrapper (e.g. Italy inside Europe)
   keeps EVERY .dropdown-menu-nested under Europe visible — including the
   state submenus of every sibling country (Spain, Croatia, …). The result
   is that an Italian state flyout opened by an earlier hover stays stuck
   on screen when the user mouses over to Spain. Limiting the match to the
   immediate child means each .dropdown-submenu only shows its own one
   level, so siblings hide as soon as the user moves to a different one. */
.dropdown-submenu:hover > .dropdown-menu-nested {
  opacity: 1;
  visibility: visible;
}

/* Admin Button */
.admin-btn {
  background: transparent;
  border: 1px solid var(--accent-blue);
  color: var(--accent-blue);
  padding: 0.5rem 1.25rem;
  border-radius: 20px;
  font-size: 0.9rem;
  text-decoration: none;
  transition: var(--transition);
}

.admin-btn:hover {
  background: var(--accent-blue);
  color: white;
}

/* Stats Section */
.hero-stats {
  max-width: 800px;
  margin: 4rem auto;
  background: white;
  border-radius: 24px;
  padding: 3rem;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  transform: translateY(0);
  transition: var(--transition);
  animation: fadeInDown 0.8s ease-out forwards;
}

.hero-stats:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(59, 130, 246, 0.2);
}

.stats-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 2rem;
}

.stat-item h2 {
  font-size: 4rem;
  font-weight: 800;
  color: var(--accent-blue);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-item p {
  color: #475569;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Main Content Area */
main {
  flex: 1;
  padding: 2rem 5%;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-light);
  text-align: center;
}

#class-title {
  font-size: clamp(1.4rem, 4.5vw, 2.5rem);
  line-height: 1.3;
  margin: 0 auto 1.5rem auto;
  word-wrap: break-word;
}

.section-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.1rem;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  padding: 1rem 0;
  align-items: start;
}

/* Scattered Collage Layout for Homepage Favorites */
.collage-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 3rem 1rem;
}

.collage-card {
  width: 400px;
  max-width: 90vw;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  padding: 1rem 1rem 2rem 1rem;
  border-radius: 4px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  z-index: 1;
}

.collage-card img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 2px;
}

.collage-info {
  margin-top: 1rem;
  text-align: center;
}

.collage-card h4 {
  color: var(--text-light);
  font-family: 'Handwriting', var(--font-main);
  font-size: 1.2rem;
  font-weight: 700;
}

.collage-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.collage-card:hover {
  transform: scale(1.1) rotate(0deg) !important;
  z-index: 100;
  box-shadow: 0 25px 50px rgba(59, 130, 246, 0.4);
}

/* Big Category Cards */
.category-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  transition: var(--transition);
  transform-origin: center;
}

.category-card:hover {
  transform: scale(1.03);
  box-shadow: 0 20px 30px rgba(0,0,0,0.4);
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.category-card:hover img {
  transform: scale(1.1);
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0) 60%);
  display: flex;
  align-items: flex-end;
  padding: 2rem;
}

.card-overlay h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Zoo Header Area */
.zoo-header {
  margin-top: 4rem;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.zoo-header h2 {
  font-size: 2rem;
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Photo Cards */
.photo-card {
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  transition: var(--transition);
}

.photo-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-blue);
}

.photo-card img {
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: contain;
  display: block;
  background: rgba(0,0,0,0.3);
  cursor: zoom-in;
}

.photo-info {
  padding: 1rem;
}

.photo-info h4 {
  margin-bottom: 0.25rem;
  font-size: 1.1rem;
}

.photo-info p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Admin Form */
.admin-container {
  max-width: 800px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 3rem;
  backdrop-filter: blur(10px);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-muted);
}

.form-control {
  width: 100%;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--glass-border);
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 1rem;
  font-family: var(--font-main);
  transition: var(--transition);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.upload-area {
  border: 2px dashed var(--glass-border);
  border-radius: 12px;
  padding: 3rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 1.5rem;
}

.upload-area:hover, .upload-area.dragover {
  border-color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.05);
}

.upload-area i {
  font-size: 3rem;
  color: var(--accent-blue);
  margin-bottom: 1rem;
}

.btn-primary {
  background: var(--accent-blue);
  color: white;
  border: none;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  transition: var(--transition);
}

.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}

.btn-invert {
  background: var(--bg-invert) !important;
  color: var(--text-invert) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  border: none !important;
}

.btn-invert span, .btn-invert strong {
  color: var(--text-invert) !important;
}

.btn-invert:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

/* Breadcrumbs for Zoos */
.breadcrumbs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 2rem;
  color: var(--text-muted);
}

.breadcrumb-item {
  cursor: pointer;
  transition: var(--transition);
}

.breadcrumb-item:hover {
  color: var(--accent-blue);
}

.breadcrumb-separator {
  color: #475569;
}

.breadcrumb-item.current {
    cursor: default;
    color: var(--text-light);
    font-weight: 600;
}

.breadcrumb-item.current:hover {
    color: var(--text-light);
}
/* Animations */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeInDown 0.6s ease-out forwards;
}

/* Map specific styles */
#map-container {
  height: 600px;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
}

/* Camera Shutter Theme Transition */
.shutter-top, .shutter-bottom {
  position: fixed;
  left: 0;
  width: 100vw;
  height: 0;
  background-color: #000;
  z-index: 9999;
  transition: height 0.4s cubic-bezier(0.8, 0, 0.2, 1);
  pointer-events: none;
}

.shutter-top {
  top: 0;
  border-bottom: 2px solid var(--accent-blue);
}

.shutter-bottom {
  bottom: 0;
  border-top: 2px solid var(--accent-blue);
}

.shutter-top.animating, .shutter-bottom.animating {
  height: 50vh;
}

/* Utilities */
.hidden {
  display: none !important;
}

/* Lightbox Styles */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.92);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(10px);
}

.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.lightbox.active img {
  transform: scale(1);
}

.lightbox-caption {
  color: white;
  margin-top: 15px;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 3rem;
  cursor: pointer;
  z-index: 10001;
  transition: color 0.2s;
  line-height: 1;
}

.lightbox-close:hover {
  color: var(--accent-blue);
}

.tree-drop-target {
  background: rgba(59, 130, 246, 0.4) !important;
  box-shadow: inset 0 0 0 2px var(--accent-blue);
  border-radius: 4px;
}

.text-center {
  text-align: center;
}

/* Map loading state */
.map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 1.2rem;
}

/* Search box at top of dropdown menus */
.dropdown-search {
  padding: 0.5rem 0.75rem 0.75rem;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 0.25rem;
}
.dropdown-search input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: rgba(15, 23, 42, 0.5);
  color: var(--text-light);
  font-family: var(--font-main);
  font-size: 0.9rem;
}
.dropdown-search input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.dropdown-suggestions {
  margin-top: 0.5rem;
  max-height: 220px;
  overflow-y: auto;
  display: none;
}
.dropdown-suggestions.open { display: block; }

.dropdown-suggestion {
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}
.dropdown-suggestion:hover {
  background: var(--accent-blue);
  color: white;
}

.dropdown-loading {
  padding: 0.6rem 0.75rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

.dropdown-heading {
  padding: 0.4rem 0.75rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* For dropdown-link elements that have a submenu, show a › indicator */
.dropdown-link.has-submenu::after {
  content: '›';
  opacity: 0.5;
  font-size: 1.1em;
  margin-left: 0.5rem;
}

/* Lightbox navigation arrows */
.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: 0.2s;
    user-select: none;
}
.lightbox-arrow:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.85);
    border-color: white;
    transform: translateY(-50%) scale(1.05);
}
.lightbox-arrow:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}
.lightbox-prev { left: 2rem; }
.lightbox-next { right: 2rem; }

/* Hide arrows on small screens — swipe-to-navigate is a future enhancement */
@media (max-width: 600px) {
    .lightbox-arrow {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
    .lightbox-prev { left: 0.5rem; }
    .lightbox-next { right: 0.5rem; }
}