/* ===========================================================
   GLOBAL RESET
   =========================================================== */
html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, Arial, sans-serif;
}

 body {
            background-color: #000000; /* Replace with your desired color */
        }


/* ===========================================================
   PAGE CONTAINER
   =========================================================== */
.page-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  background: #393939;
  border: 1px solid #000000;
}

/* ===========================================================
   HEADER
   =========================================================== */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #525252;
  border-bottom: 1px solid #000000;
}

.logo {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .4px;
  color: #ffffff; /* white text */
}

/* ===========================================================
   NAVIGATION
   Matches index.html nav styling
   =========================================================== */
.nav {
  display: flex;
  gap: 12px;
}

.nav a {
  background: #0b3d91;         /* blue */
  color: #fff;                 /* white text */
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}

/* Hover on non-active link = orange */
.nav a:hover {
  background: #ffbf00;         /* orange on hover */
  color: #111;                 /* dark text */
}

/* Active page (aria-current) = stays orange */
.nav a[aria-current="page"] {
  background: #ffbf00;
  color: #111;
}
.nav a[aria-current="page"]:hover {
  background: #ffbf00;         /* no change */
  color: #111;
}

/* ===========================================================
   MAIN GALLERY LAYOUT
   =========================================================== */
.gallery {
  display: grid;
  grid-template-columns: 300px 600px; /* aside fixed | viewer fixed */
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid #95bdf7;
}

/* ===========================================================
   THUMBNAILS
   =========================================================== */
.thumbs {
  border: 1px solid #000000;
  background: #525252; /* light gray background */
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, 75px);
  gap: 10px;
  align-content: start;
}

.thumb {
  width: 75px;
  height: 75px;
  object-fit: cover;
  border: 1px solid #000000;
  cursor: pointer;
  transition: border-color .2s ease;
}

.thumb:hover {
  border-color: #0b3d91; /* blue hover border */
}

.thumb.active {
  border-color: #ffb300; /* orange active border */
}

/* ===========================================================
   VIEWER (Large image display)
   =========================================================== */
.viewer {
  height: 420px;
  width: 100%;
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid #000000;
  background: #f7f7f7; /* fallback background */
}

.viewer img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* crop to fill box */
  display: block;
  border: 1px solid #000000;
  background-color: #000000;   /* dark background for letterboxing if using contain */
}

/* ===========================================================
   FOOTER
   =========================================================== */
.footer {
  padding: 16px 20px;
  text-align: right;
  background: #525252;
  border-top: 1px solid #000000;
  color: #393939; /* light gray text */
  font-size: 14px; /* smaller text */
}