/* =============================================
   63ChevyII.com — HTML5 Conversion
   Faithful recreation of original Flash layout
   ============================================= */

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

body {
  background-color: #000000;
  font-family: Arial, Helvetica, sans-serif;
}

/* ── SITE WRAPPER (matches original 800px wide) ── */
.site-wrapper {
  width: 800px;
  margin: 0 auto;
  background: #f6f5f6;
}

/* ══════════════════════════════════════════
   HEADER — exact recreation of Flash header
   800×209px total
   ══════════════════════════════════════════ */
.site-header {
  display: block;
  width: 800px;
  background: #000;
  line-height: 0;
  font-size: 0;
}

/* Top bar: 800×48 */
.header-top {
  display: block;
  width: 800px;
  height: 48px;
}

/* Middle row: car photo (608×124) + nav buttons (192×124) */
.header-middle {
  display: flex;
  width: 800px;
  height: 124px;
}

.header-car {
  display: block;
  width: 608px;
  height: 124px;
  flex-shrink: 0;
}

/* Nav button column — stacked clickable image links */
.header-nav {
  display: flex;
  flex-direction: column;
  width: 192px;
  flex-shrink: 0;
}

.header-nav a {
  display: block;
  line-height: 0;
  font-size: 0;
}

.header-nav a img {
  display: block;
  width: 192px;
}

/* Hover swap: show _f2 image on hover */
/* Nav image swap handled by JS (header-wide headlight effect) */
.header-nav a img.nav-normal { display: block; }
.header-nav a img.nav-hover  { display: none; }

/* Bottom bar: 800×37 */
.header-bottom {
  display: block;
  width: 800px;
  height: 37px;
}

/* ── CONTENT AREA ── */
.content-area {
  background: #f6f5f6;
  padding: 0 0 10px 0;
}

.content-inner {
  width: 95%;
  margin: 0 auto;
  padding: 10px 0;
}

/* ── TYPOGRAPHY (matches original CSS classes) ── */
a:link    { font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; color: #000066; }
a:visited { font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; color: #2E0854; }
a:hover   { font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; color: #b8cdbc; }

.Nova_Title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-decoration: underline;
  display: block;
  margin: 14px 0 4px;
}

.Nova_Secondary_Title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  display: block;
  margin: 8px 0 2px;
}

.Nova_Secondary_Title a:link    { color: #000066; }
.Nova_Secondary_Title a:visited { color: #2E0854; }
.Nova_Secondary_Title a:hover   { color: #b8cdbc; }

.Nova_Restore {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #000000;
}

.Nova_Restore ul { margin-left: 20px; margin-top: 4px; }
.Nova_Restore ul li { margin-bottom: 3px; }
.Nova_Restore a:link    { color: #000066; }
.Nova_Restore a:visited { color: #2E0854; }
.Nova_Restore a:hover   { color: #b8cdbc; }

.Nova_Photography_Gallery {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  font-style: italic;
  color: #000000;
}

.Nova_Photography_Gallery a:link    { color: #000066; }
.Nova_Photography_Gallery a:visited { color: #2E0854; }
.Nova_Photography_Gallery a:hover   { color: #b8cdbc; }

/* ── HERO IMAGE ── */
.hero-image { text-align: center; margin: 8px 0 14px; }
.hero-image img { max-width: 100%; height: auto; }

/* ── GALLERY GRID (photos.htm) ── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.gallery-card { background: #fff; border: 1px solid #ccc; }
.gallery-card a { text-decoration: none; display: block; color: inherit; }
.gallery-card:hover { border-color: #000066; }

.gallery-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: #ddd;
}

.gallery-thumb-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #aaa;
}

.gallery-card-label {
  padding: 5px 7px 2px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #000066;
  line-height: 1.3;
}

.gallery-card-meta {
  padding: 0 7px 6px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  color: #666;
  font-style: italic;
}

/* ── FOOTER ── */
.site-footer {
  width: 800px;
  min-height: 159px;
  background-image: url('../footer.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.footer-nav {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-nav a {
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
}
.footer-nav a:hover { color: #aaaaaa !important; }
.footer-nav span { color: #ffffff; font-weight: bold; }

.footer-copy {
  margin-top: 10px;
  text-align: center;
}
.footer-copy a {
  color: #999999 !important;
  font-family: Arial, sans-serif;
  font-size: 11px;
  text-decoration: none;
}

/* ── LIGHTBOX ── */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.93);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.lightbox-overlay.active { display: flex; }

.lightbox-img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  transition: opacity 0.2s;
}
.lightbox-img.fading { opacity: 0; }

.lb-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  font-size: 2rem;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 2px;
}
.lb-btn:hover { background: rgba(255,255,255,0.25); }
#lb-prev { left: 12px; }
#lb-next { right: 12px; }

.lb-close {
  position: absolute;
  top: 14px;
  right: 20px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 2rem;
  cursor: pointer;
}
.lb-close:hover { color: #fff; }

.lb-counter {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.6);
  font-family: Arial, sans-serif;
  font-size: 12px;
  background: rgba(0,0,0,0.4);
  padding: 3px 12px;
  border-radius: 20px;
}

/* ── STORE ── */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: 16px;
  margin-top: 12px;
}
.store-item { background:#fff; border:1px solid #ccc; padding:10px; text-align:center; }
.store-item img { max-width:100%; height:auto; margin-bottom:6px; }
.store-item h3 { font-family:Arial,sans-serif; font-size:12px; font-weight:bold; color:#000066; margin-bottom:4px; }
.store-item p { font-family:Arial,sans-serif; font-size:11px; color:#555; }
.store-item a.btn {
  display:inline-block; margin-top:8px; padding:4px 12px;
  background:#000066; color:#fff; font-family:Arial,sans-serif;
  font-size:11px; font-weight:bold; text-decoration:none;
}
.store-item a.btn:hover { background:#2E0854; color:#fff; }

/* ── LINK SECTIONS ── */
.link-section { margin-bottom: 16px; }
.link-section h2 { font-family:Arial,sans-serif; font-size:14px; font-weight:bold; text-decoration:underline; margin-bottom:6px; }
.link-section a { display:block; font-family:Arial,sans-serif; font-size:12px; color:#000066; font-weight:bold; padding:2px 0; text-decoration:none; }
.link-section a:hover { color:#b8cdbc; }

/* ── GALLERY VIEWER PAGE ── */
.gallery-header-bar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.back-link {
  display:inline-block; padding:4px 10px; border:1px solid #ccc;
  background:#f0f0f0; font-family:Arial,sans-serif; font-size:11px;
  font-weight:bold; color:#000066; text-decoration:none;
}
.back-link:hover { background:#000066; color:#fff; }
.album-title-bar h2 { font-family:Arial,sans-serif; font-size:14px; font-weight:bold; text-decoration:underline; }
.album-title-bar p  { font-family:Arial,sans-serif; font-size:11px; color:#666; margin-top:2px; font-style:italic; }

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px,1fr));
  gap: 6px;
}
.thumb-item { cursor:pointer; overflow:hidden; border:2px solid transparent; aspect-ratio:1; background:#ddd; }
.thumb-item:hover { border-color:#000066; }
.thumb-item img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── RESPONSIVE ── */
@media (max-width: 820px) {
  .site-wrapper, .site-footer { width: 100%; }
  .site-header { width: 100%; }
  .header-top, .header-bottom { width: 100%; height: auto; }
  .header-middle { width: 100%; }
  .header-car { flex: 1; width: auto; height: auto; }
  .header-nav { width: 192px; }
  .header-nav a img { width: 192px; }
}