/* === Font faces === */
@font-face {
  font-family: 'Micro Regular';
  src: url('../fonts/MicroRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Micro Bold';
  src: url('../fonts/MicroBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PixelText';
  src: url('../fonts/PixelText.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* === Global body === */
body {
  font-family: 'Micro Regular', 'Roboto', sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

.inline-headings h1 {
  margin: 0;
  white-space: nowrap;
}

.comp-red, .comp-gold, .comp-green, .comp-blue {
  font-weight: bold;
  text-shadow: 1px 1px 2px black;
}
.comp-red { color: red; }
.comp-gold { color: gold; }
.comp-green { color: green; }
.comp-blue { color: blue; }

.powered-by {
  color: magenta;
  font-size: 0.4em;
  font-weight: bold;
  margin-left: 8px;
}

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 768px) {
  table.stats-table th,
  table.stats-table td {
    font-size: 0.85em;
    padding: 0.4em;
  }

  table.stats-table th:nth-child(5),
  table.stats-table td:nth-child(5),
  table.stats-table th:nth-child(6),
  table.stats-table td:nth-child(6) {
    display: none;
  }

  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center;
    margin-bottom: 1em;
  }
}

/* Expander box: cyan 40px border */
.details-box {
  font-size: 18px;
  padding: 10px;
  background: #fff;
  border: 40px solid cyan; /* restored to 40px cyan */
  border-radius: 4px;
}

/* Expander control swap (ensure your control cell has img.expander-icon) */
td.details-control[aria-expanded="true"] img.expander-icon {
  content: url('/compilationzx/images/keyy.png');
}
td.details-control[aria-expanded="false"] img.expander-icon {
  content: url('/compilationzx/images/keyg.png');
}
.details-box strong {
  font-family: 'Micro Bold';
  font-size: 20px;
  text-transform: uppercase;
}

.top-wrapper,
.bottom-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.top-left,
.bottom-left { text-align: left; }
.top-right,
.bottom-right { text-align: right; }

/* === Meta table === */
.meta-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin-bottom: 10px;
}
.meta-table td {
  padding: 4px 8px;
  vertical-align: middle;
  font-size: 18px;
}
.meta-table td:first-child {
  width: 140px;
  text-transform: uppercase;
  font-family: 'Micro Bold';
  text-align: right;
  padding-right: 12px;
}
.meta-table td:nth-child(2) { padding-left: 12px; }
.meta-table td ul {
  margin: 0;
  padding-left: 24px;
  list-style-position: inside;
}
.meta-table td.data-cell {
  font-family: 'Micro Regular', 'Roboto', sans-serif;
  font-weight: bold;
  text-transform: none !important;
}
th.centered-header { text-align: center !important; }

/* === Compilation header === */
.compilation-header {
  font-size: 2em;
  font-weight: bold;
  text-align: center;
}
.compilation-header .powered-by {
  font-size: 0.6em;
  color: #666;
  display: block;
  margin-top: 0.25em;
  text-align: center;
  font-weight: normal;
}

/* Image stack layout */
.image-stack {
  float: right;
  margin-left: 20px;
  text-align: right;
  display: flex;
  flex-direction: column;
}

/* Normal and badge figures share the same sizing */
figure.normal-figure img,
figure.badge-figure img {
  max-width: 300px !important;
  width: auto !important;
  height: auto;
  display: block;
  margin: 0 auto 16px auto;
}

/* Normal figures keep a subtle border */
figure.normal-figure img {
  border: 2px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

/* Badge figures drop the border but keep the same width */
figure.badge-figure img {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Captions under non-badge images */
.pixel-caption {
  font-family: 'PixelText', monospace;
  font-size: 14px;
  text-align: center;
  margin-top: 4px;
}


/* === Footer === */
.spectrum-footer {
  font-family: 'PixelText', monospace;
  font-size: 30pt;
  text-align: center;
  color: #000;
  margin-top: 20px;
}

/* === Rating badge === */
.rating-badge {
  display: inline-block;
  background-color: #4CAF50;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
}

/* === Video wrapper === */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-top: 20px;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* === Expander control icon === */
.details-control img {
  height: 36px;
  transition: transform 0.2s ease;
}
.details-control:hover img { transform: scale(1.1); }
tr.shown { background-color: #eef; }
.expander-icon {
  height: 20px !important;
  width: auto !important;
  cursor: pointer;
}
td.details-control[aria-expanded="true"] img.expander-icon {
  content: url('/compilationzx/images/keyy.png');
}
td.details-control[aria-expanded="false"] img.expander-icon {
  content: url('/compilationzx/images/keyg.png');
}

/* Default table font */
#compilationTable,
#compilationTable th,
#compilationTable td,
.dataTables_wrapper {
  font-family: 'Micro Regular', 'Roboto', sans-serif !important;
  font-size: 18px;
  line-height: 1.4;
}

/* Compilation Name column (2nd column) in Micro Bold */
#compilationTable th:nth-child(2),
#compilationTable td:nth-child(2) {
  font-family: 'Micro Bold', sans-serif !important;
  font-weight: bold !important;
  text-transform: uppercase;
}



/* === Counter bar === */
#expander-counter {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin: 12px 0;
}
#digit-stack {
  display: flex;
  align-items: center;
  gap: 2px;
}
#digit-stack img,
img.animate-digit {
  height: 24px !important;
  width: auto !important;
  max-height: 24px !important;
}
@keyframes digitBounce {
  0%   { transform: scale(1); opacity: 0.5; }
  50%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
img.animate-digit { animation: digitBounce 300ms ease; }

/* === Misc wrappers === */
div.top {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
  font-size: 16px;
}
div.bottom {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  font-size: 16px;
}

/* Force COMPILATION ZX:DB rainbow heading into Micro Regular */
.inline-headings h1 {
  font-family: 'Micro Regular', sans-serif !important;
  font-weight: bolder !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}




/* === Publisher filter bar === */
#publisher-filter-bar img.publisher-filter,
#publisher-filter-bar img.archive-icon,
#publisher-filter-bar img.mia-icon {
  width: auto;
  height: 40px;
  margin: 0 8px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: border 0.2s ease;
}
#publisher-filter-bar img.publisher-filter:hover,
#publisher-filter-bar img.archive-icon:hover,
#publisher-filter-bar img.mia-icon:hover {
  border-color: #000;
}

/* Standard size for all filter bar icons */
.filter-icon {
  width: 40px;
  height: auto;
  margin: 0 6px;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.2s ease, filter 0.2s ease;
}

/* Hover effect: cyan glow + slight scale-up */
.filter-icon:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px cyan);
}


/* Table tweaks */
#compilationTable td,
#compilationTable th { padding-left: 12px; }
#compilationTable th:nth-child(2) {
  font-family: 'Micro Bold', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}
#compilationTable td:empty::before { content: ''; }

/* Stats block */
.stats-block {
  margin-bottom: 3em;
  padding: 1em;
  background-color: #111;
  border: 2px solid #FFD700;
  border-radius: 6px;
}
.stats-block h2 {
  font-family: 'PixelText', monospace;
  color: #FFD700;
  margin-bottom: 1em;
}
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'PixelText', monospace;
}
.stats-table th, .stats-table td {
  border: 1px solid #555;
  padding: 6px 10px;
  text-align: left;
  color: #eee;
}
.stats-table th {
  background-color: #333;
  color: #FFD700;
}

/* Expander button */
.expander-icon {
  height: 20px !important;
  width: auto !important;
  cursor: pointer;
}

/* Ensure empty cells show nothing, winning against theme rules */
table.dataTable tbody td:empty::before,
.dataTables_wrapper table.dataTable tbody td:empty::before,
#compilationTable.dataTable tbody td:empty::before,
#compilationTable tbody td:empty::before {
  content: '' !important;
}
/* Nuclear option if the theme uses a broader selector */
table.dataTable tbody td::before {
  content: none !important;
}

/* Filter bar layout */
#publisher-filter-bar.czx-bar {
  display: flex;
  align-items: center;
  justify-content: center;   /* centre the whole bar */
  gap: 20px;
  flex-wrap: wrap;
  margin: 20px auto;
  width: fit-content;        /* shrink to content width */
}

.czx-bar-group {
  display: flex;
  align-items: center;
  gap: 10px;                 /* space between Archive and MIA */
}

.czx-bar-divider {
  width: 2px;
  height: 40px;
  background: #999;          /* single divider line */
}

.czx-bar-publishers {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Icon sizing */
#publisher-filter-bar img {
  height: 40px !important;
  width: auto !important;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: border 0.2s ease;
}
#publisher-filter-bar img:hover { border-color: #000; }
#publisher-filter-bar img.active {
  outline: 2px solid #c00;
  outline-offset: 2px;
}

/* Base button */
.czx-nav .czx-btn {
  display:inline-block;
  padding:8px 16px;
  margin:4px;
  font-weight:bold;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:4px;
  color:#fff;
  border:3px solid #000;   /* ✅ heavier border */
}

/* ZX Spectrum rainbow colours */
.czx-nav .czx-btn.zx-red     { background:#e6194B !important; }
.czx-nav .czx-btn.zx-yellow  { background:#ffe119 !important; color:#000 !important; }
.czx-nav .czx-btn.zx-green   { background:#3cb44b !important; }
.czx-nav .czx-btn.zx-cyan    { background:#42d4f4 !important; color:#000 !important; }
.czx-nav .czx-btn.zx-magenta { background:#f032e6 !important; }

/* Optional: hover effect */
.czx-nav .czx-btn:hover {
  filter:brightness(1.1);
  border-color:#333; /* subtle change on hover */
}
/* Default body text */
body {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--wp--preset--color--contrast);
}

/* Headers and site title/navigation */
h1, h2, h3, h4, h5, h6,
.wp-block-site-title,
.wp-block-site-title a,
.wp-block-site-tagline,
.wp-block-navigation,
.wp-block-heading {
  font-family: 'Micro Regular', 'Roboto', sans-serif;
  font-weight: normal; /* Micro Regular handles weight */
}

/* Optional: ensure powered-by captions and filter banners stay consistent */
.powered-by,
#filterBanner {
  font-family: 'Micro Regular', 'Roboto', sans-serif;
}


/* Landscape advisory message for /zxdb-viewer */
#landscape-message {
  display: none; /* hidden by default */
  text-align: center;
  background: #ffeb3b;
  color: #000;
  font-family: 'Micro Regular', 'Roboto', sans-serif;
  font-size: 16px;
  padding: 10px;
  margin: 0 0 10px;
  border-radius: 4px;
}

/* Show only on mobile portrait */
@media screen and (max-width: 768px) and (orientation: portrait) {
  #landscape-message {
    display: block;
  }
}

/* Desktop default: keep everything in one line */
#publisher-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap; /* force single line on desktop */
}

.czx-bar-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.czx-bar-publishers {
  display: flex;
  flex-wrap: nowrap;   /* logos stay in one row on desktop */
  align-items: center;
  gap: 10px;
}

/* Ensure publisher filter images remain clickable */
img.publisher-filter {
  width: 72px;
  height: 60px;
  margin: 5px;
  object-fit: contain;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: border 0.2s ease;
}
img.publisher-filter:hover { border-color: #000; }
img.publisher-filter.active { outline: 2px solid #c00; outline-offset: 2px; }

/* Mobile-only: stack filters above logos and allow wrapping */
@media screen and (max-width: 768px) {
  #publisher-filter-bar {
    flex-wrap: wrap;              /* allow wrapping only on mobile */
    align-items: flex-start;
    justify-content: center;
    width: 100%;
  }

  #publisher-filter-bar .czx-bar-group {
    flex: 1 1 100%;
    justify-content: center;
    margin-bottom: 12px;          /* spacing before logos */
  }

  #publisher-filter-bar .czx-bar-publishers {
    flex: 1 1 100%;               /* drop to new line on mobile */
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
}

/* mobile expander buttons issue fixes */
/* Kill all pseudo-elements for responsive controls */
td.dtr-control::before,
th.dtr-control::before,
td.dt-control::before,
th.dt-control::before {
  content: none !important;
}

.compilation-header {
  text-align: center;       /* center the whole heading */
  white-space: normal;      /* allow wrapping on mobile */
  word-break: break-word;   /* break long strings if needed */
}

.compilation-header .powered-by {
  display: block;           /* force onto its own line */
  margin-top: 0.5em;        /* spacing below DB */
  font-size: 0.4em;         /* smaller size relative to main heading */
  color: #333;              /* match your style */
}

.dataTables_wrapper {
  overflow-x: auto;              /* allow horizontal scroll */
  -webkit-overflow-scrolling: touch; /* smooth swipe on iOS */
}

.dataTables_scrollBody {
  overflow-x: auto !important;   /* override theme restrictions */
}