/* MalteseX catalog -- "Watermark Auction House" theme: a connoisseur's
   reference-library look (blush/navy palette, Cormorant Garamond display
   serif over Work Sans body text, hairline rules instead of boxed cards)
   chosen from four mockups presented earlier. */

:root {
  --navy: #243352;
  --navy-soft: #4a5a7d;
  --blush: #f8f3ec;
  --blush-deep: #efe6d8;
  --ink: #243352;
  --muted: #4a5a7d;
  --line: #d8cdb9;
  --accent: #a3352b;
  --regent: #243352;
  --regent-muted: #b9c3dc;
  /* Theme tokens: --page-bg/--card-bg/--btn-bg are indirections so a
     dark theme (system preference or the manual toggle) can swap them
     without touching every rule that uses #fff or --navy directly. */
  --page-bg: var(--blush);
  --card-bg: #fff;
  --btn-bg: var(--navy);
  --radius: 4px;
  --maxw: 1180px;
  color-scheme: light dark;
}

/* Dark theme: applied automatically when the OS is in dark mode
   (unless the visitor has explicitly picked light via the toggle),
   and always when the toggle sets data-theme="dark" directly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #8fa8dd;
    --navy-soft: #98a8c7;
    --ink: #e9e4d8;
    --muted: #8b98b8;
    --line: #333f5c;
    --blush-deep: #1c2438;
    --page-bg: #10162a;
    --card-bg: #1b2540;
    --btn-bg: #3f5c9e;
  }
}
:root[data-theme="dark"] {
  --navy: #8fa8dd;
  --navy-soft: #98a8c7;
  --ink: #e9e4d8;
  --muted: #8b98b8;
  --line: #333f5c;
  --blush-deep: #1c2438;
  --page-bg: #10162a;
  --card-bg: #1b2540;
  --btn-bg: #3f5c9e;
}
:root[data-theme="light"] {
  --navy: #243352;
  --navy-soft: #4a5a7d;
  --ink: #243352;
  --muted: #4a5a7d;
  --line: #d8cdb9;
  --blush-deep: #efe6d8;
  --page-bg: var(--blush);
  --card-bg: #fff;
  --btn-bg: var(--navy);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: "Work Sans", "Verdana", "Geneva", sans-serif;
  background: var(--page-bg);
  color: var(--ink);
  line-height: 1.5;
  /* Work Sans' digits are lining figures at the same height as its
     letters, which reads cleanly next to plate numbers and corner
     letters shown together (e.g. "Plate 5" / "AB"). */
  font-variant-numeric: lining-nums;
  /* Sticky footer: on short pages (e.g. a record with few filled-in
     fields) the footer should still sit at the bottom of the viewport
     instead of riding up right under the content. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; color: var(--navy); }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

header.site-header {
  background: var(--regent);
  color: var(--blush);
  padding: 22px 0;
  border-bottom: 1px solid rgba(248, 243, 236, 0.18);
}
header.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
header.site-header a { color: var(--blush); }
header.site-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
header.site-header .brand-mark {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--blush);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.8rem;
}
header.site-header .brand-text { display: flex; flex-direction: column; line-height: 1.2; }
header.site-header .brand-text .t1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.2px;
}
header.site-header .brand-text .t2 {
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--regent-muted);
  margin-top: 2px;
}
header.site-header nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Same "pill container" treatment as the footer's donate button --
   an outlined capsule with all-caps, tracked text -- so the current
   catalog link (below) can read as a filled/selected pill against it. */
header.site-header nav a {
  margin-left: 0;
  padding: 8px 18px;
  border: 1px solid var(--blush);
  border-radius: 20px;
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.85;
}
header.site-header nav a:hover { opacity: 1; text-decoration: none; background: rgba(248, 243, 236, 0.1); }
header.site-header nav a.active {
  opacity: 1;
  background: var(--blush);
  color: var(--regent);
  border-color: var(--blush);
}

.hero {
  background: var(--blush-deep);
  color: var(--navy);
  padding: 48px 0 54px;
  text-align: center;
}
.hero h1 { font-size: 2.3rem; margin: 0 0 14px; }
.hero p { max-width: 680px; margin: 0 auto; color: var(--navy-soft); }

.catalog-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 30px 0;
}
.catalog-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 10px 24px -18px rgba(36,51,82,0.35);
}
.catalog-card h2 { margin-top: 0; }
.catalog-card .btn { margin-top: 10px; }

.btn {
  display: inline-block;
  background: var(--btn-bg);
  color: var(--blush) !important;
  padding: 11px 26px;
  border-radius: 20px;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  font-family: "Work Sans", sans-serif;
}
.btn:hover { background: var(--navy-soft); text-decoration: none; }
.btn.secondary { background: transparent; color: var(--navy) !important; border: 1px solid var(--navy); }
.btn.danger { background: var(--accent); }

main {
  padding: 30px 0 60px;
  flex: 1 0 auto;
}

.search-form {
  background: transparent;
  border: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 22px 0;
  margin-bottom: 28px;
}
.search-form .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px 20px;
  align-items: end;
}
.search-form label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin-bottom: 6px;
}
.search-form select, .search-form input[type=text] {
  width: 100%;
  padding: 6px 2px;
  border: none;
  border-bottom: 1px solid var(--navy);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--navy);
}
/* Plate Number and Letters are the only fields with placeholder text
   ("1" / "AA") -- keep it visibly lighter than typed content so it
   never looks like a pre-filled value. */
input[type=text]::placeholder {
  color: var(--muted);
  opacity: 0.55;
}
.search-form .actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: 6px; }

.result-meta { color: var(--navy-soft); margin-bottom: 16px; font-size: 0.85rem; font-style: italic; }

.grid-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 30px 24px;
}
.grid-item {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  display: block;
  color: var(--ink) !important;
  text-decoration: none !important;
}
.grid-item .thumb-wrap {
  aspect-ratio: 1 / 1;
  background-color: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: 0 10px 20px -16px rgba(36,51,82,0.35);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.grid-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.35s ease;
}
/* A subtle "loupe" zoom on hover -- clipped by the frame's own
   overflow:hidden above -- hints that the stamp can be opened. */
.grid-item .thumb-wrap:hover img { transform: scale(1.08); }
.grid-item .cap { padding: 14px 4px 0; font-size: 0.82rem; text-align: center; }
.grid-item .cap .plate {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--navy);
}
.grid-item .cap .letters {
  display: block;
  margin-top: 5px;
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--navy-soft);
}
.grid-item .cap .letters strong { color: var(--navy); font-weight: 600; text-transform: none; }

.pagination { display: flex; gap: 8px; margin: 26px 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: transparent;
  color: var(--navy);
}
.pagination .current { background: var(--btn-bg); color: var(--blush); border-color: var(--btn-bg); }

.record-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr);
  gap: 30px;
}
.record-detail .image-pane {
  background-color: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 18px;
  box-shadow: 0 10px 24px -18px rgba(36,51,82,0.35);
}
/* The photo itself is wrapped in a plain <button> so it can open the
   full-size lightbox -- reset button chrome so it still just looks
   like the image, with a hint (cursor + hover fade) that it's
   clickable. */
.image-zoom-trigger {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  margin: 0 0 14px;
  cursor: zoom-in;
}
.image-zoom-trigger img { transition: opacity 0.15s ease; }
.image-zoom-trigger:hover img { opacity: 0.88; }
.view-full-btn { width: 100%; }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 26, 38, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  z-index: 1000;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  border: none;
  background: transparent;
  color: var(--blush);
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 12px;
}
.lightbox-close:hover { opacity: 0.8; }
.record-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; }
.record-detail dt { color: var(--navy-soft); font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase; }
.record-detail dd { margin: 0; }

@media (max-width: 800px) {
  .record-detail { grid-template-columns: 1fr; }
}

footer.site-footer {
  background: var(--regent);
  border-top: 1px solid rgba(248, 243, 236, 0.18);
  padding: 26px 0;
  color: var(--regent-muted);
  font-size: 0.85rem;
}
footer.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
footer.site-footer a { color: var(--blush); }
footer.site-footer .btn.secondary { color: var(--blush) !important; border-color: var(--blush); }
footer.site-footer .footer-copyright { margin: 0; font-size: 0.75rem; opacity: 0.75; }

.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 0.92rem; }
.flash.success { background: #e6f4e6; border: 1px solid #b7dfb7; color: #205020; }
.flash.error { background: #fbe7e5; border: 1px solid #f0b8b2; color: #7a241c; }

.empty-state { padding: 40px 0; text-align: center; color: var(--navy-soft); }

/* Dark-mode toggle button, sits in the header nav next to the catalog
   pills. Same outlined-pill visual language, just circular. */
.theme-toggle {
  border: 1px solid var(--blush);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--blush);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  line-height: 1;
}
.theme-toggle:hover { background: rgba(248, 243, 236, 0.1); }

/* Scroll-reveal for search result cards. The "reveal" class (and its
   starting hidden state) is only ever added by JavaScript right
   before the item is observed, so with JS off or IntersectionObserver
   unsupported every card is simply visible immediately -- no
   permanently-invisible content. */
.grid-item.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.grid-item.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Print stylesheet -- tuned for printing a single record's reference
   sheet (image + fields), but the chrome it hides (nav, footer,
   search form, pagination) applies site-wide. */
@media print {
  header.site-header,
  footer.site-footer,
  .search-form,
  .pagination,
  .view-full-btn,
  .theme-toggle,
  .lightbox,
  .no-print {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    display: block;
  }
  main { padding: 0; }
  .record-detail { display: block; }
  .record-detail .image-pane {
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: 340px;
  }
  .image-zoom-trigger { cursor: default; }
  .record-detail dt { color: #444; }
  a { color: #000; text-decoration: none; }
}