/* =========================================================
   UK Song Search - Responsive CSS (new semantic HTML)
   Uses: site_logo.jpg (in same folder as this css file)
   ========================================================= */

/* ---------- Base / Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --container: 1100px; /* try 1100 or 1200 */
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font: 13px/1.6 Arial, Helvetica, sans-serif;
  background: #636363;              /* outer grey like screenshot */
  color: #333;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* Skip link (keyboard users) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: #fff;
  color: #000;
  padding: 8px 10px;
  border: 2px solid #000;
  z-index: 9999;
}
.skip-link:focus {
  left: 10px;
}

/* ---------- Page width (desktop look) ---------- */
.layout,
.site-footer {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Header ---------- */
.site-header {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;

  /* The header “photo” area */
  background: #fff url("site_logo.png") no-repeat left top;
  height: 100px;                    /* matches old header height */
  position: relative;
  overflow: hidden;
}

/* Logo text positioned over the header image (like old) */
.logo {
  position: absolute;
  left: 19px;
  top: 41px;
}
.logo a {
  text-decoration: none;
  font-size: 150%;
  letter-spacing: .2em;
  color: #EA8916;                   /* orange brand text */
  text-transform: none;
}

/* ---------- Nav Bar (dark bar under image) ---------- */
.site-nav {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;

  /* Dark grey gradient bar similar to screenshot */
  background: linear-gradient(#4b4b4b, #2f2f2f);
  border-top: 1px solid #5e5e5e;
  border-bottom: 1px solid #1e1e1e;
}

/* Menu list */
.main-menu {
  list-style: none;
  margin: 0;
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
}

.main-menu__item {
  margin: 0;
  padding: 0;
}

.main-menu__item a {
  display: block;
  padding: 10px 12px;
  font-size: 0.9em;
  text-transform: uppercase;
  text-decoration: none;
  color: #e8e8e8;
  border-right: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}

.main-menu__item a:hover {
  background: rgba(255,255,255,0.08);
}

.main-menu__item a[aria-current="page"],
.main-menu__item a.is-active {
  /* “selected tab” look */
  background: linear-gradient(#f3c06b, #d28b1f);
  color: #3a2a12;
  font-weight: bold;
}

/* ---------- Main Layout ---------- */
.layout {
  background: #ffffff;
  display: flex;
  align-items: stretch;
  min-height: 200px;
}

/* Main content (left) */
.primary {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 19px 20px 19px;
}

/* Sidebar (right) */
.sidebar {
  flex: 0 0 230px;                  /* visually close to screenshot */
  background: #5f5f5f;
  border-left: 1px solid #4a4a4a;
}

/* Sidebar header strip */
.sbihead {
  padding: 6px 12px;
  background: linear-gradient(#f3c06b, #d28b1f);
  color: #3a2a12;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: .08em;
}

.sbihead h2 {
  margin: 0;
  font-size: 0.95em;
}

/* Sidebar content */
.sbicontent {
  padding: 10px 12px 14px 12px;
  color: #ffffff;
}

.sbicontent h2 {
  margin: 6px 0 6px 0;
  font-size: 0.95em;
  color: #ffffff;
}

.muted {
  opacity: 0.85;
}

/* ---------- Headings / Typography ---------- */
.primary h1 {
  margin: 0 0 12px 0;
  padding: 10px 0 6px 0;
  color: #EA8916;
  font-size: 1.8em;
  font-weight: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid #CAAE90;
}

.primary h2 {
  margin: 18px 0 6px 0;
  color: #4a4a4a;
  font-size: 1.1em;
  font-weight: bold;
}

.primary h3 {
  margin: 14px 0 4px 0;
  font-size: 1em;
  font-weight: bold;
}

.primary p {
  margin: 0 0 12px 0;
}

/* ---------- Quick Search (match screenshot: label left, input right) ---------- */
.quick-search {
  margin: 12px 0 18px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
}

.quick-search__fields {
  flex: 1 1 380px;

  display: grid;
  grid-template-columns: 160px 1fr; /* label column, input column */
  gap: 8px 10px;
  align-items: center;
}

.quick-search__fields label {
  font-weight: normal;
  color: #333;
}

.quick-search__fields input[type="text"] {
  width: 100%;
  padding: 6px 8px;
  font-size: 1em;
  border: 1px solid #666;
  background: #fff;
}

.quick-search__actions {
  flex: 0 0 auto;
}

.quick-search__actions button {
  padding: 4px 10px;
  font-size: 1em;
  border: 1px solid #666;
  background: #efefef;
  cursor: pointer;
}

.quick-search__actions button:hover {
  background: #e2e2e2;
}

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(#4b4b4b, #2f2f2f);
  border-top: 1px solid #5e5e5e;
  border-bottom: 1px solid #1e1e1e;
  color: #e8e8e8;
  text-align: center;
  padding: 10px 12px;
}

.site-footer p {
  margin: 0;
}

/* ---------- Mobile ---------- */
@media (max-width: 820px) {

  /* Header becomes flexible height; image area still visible */
  .site-header {
    height: 100px;                 /* stay 100px */
    background-position: center top;
  }

  .logo {
    position: absolute;            /* keep logo overlay */
    left: 14px;
    top: 18px;
    padding: 0;
  }

  .site-nav {
    position: static;              /* nav is a normal block below header */
  }

  /* Make menu more tappable and wrap nicely */
  .main-menu {
    padding: 0 6px;
  }

  .main-menu__item a {
    padding: 12px 10px;
    font-size: 0.95em;
  }

  /* Stack sidebar under content (or flip if you prefer) */
  .layout {
    flex-direction: column;
  }

  .sidebar {
 adv-lab   flex: 0 0 auto;
    border-left: 0;
    border-top: 1px solid #4a4a4a;
  }

  /* Form becomes stacked */
  .quick-search__fields {
    grid-template-columns: 1fr;
  }

  .quick-search__actions {
    width: 100%;
  }

  .quick-search__actions button {
    width: 100%;
    padding: 10px 12px;
  }
}

/* Extra small phones */
@media (max-width: 420px) {
  .logo a {
    font-size: 1.2em;
    letter-spacing: .12em;
  }
}

/* ==========================
   Advanced Search form layout
   ========================== */

.advanced-search__fieldset {
  border: 1px solid #999;
  padding: 12px;
  margin: 8px 0 14px 0;
}

.advanced-search__fieldset legend {
  padding: 0 6px;
}

/* 4-column grid like the old table: [check] [label] [select] [input] */
.adv-row {
  display: grid;
  grid-template-columns: 18px 90px 90px 1fr;
  gap: 8px 10px;
  align-items: center;
  margin: 6px 0;
}

.adv-check { display: flex; justify-content: center; }

/* inline “between … and …” rows */
.adv-control--inline {
  grid-column: 3 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.adv-control--inline input {
  width: 90px;
}

.adv-text {
  white-space: nowrap;
}

.adv-row--exclude .adv-lab--span {
  grid-column: 2 / -1;
}

/* Group radios */
.adv-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin: 8px 0 10px 0;
}

.adv-actions button {
  padding: 4px 10px;
  font-size: 1em;
  border: 1px solid #666;
  background: #efefef;
  cursor: pointer;
}

.adv-actions button:hover {
  background: #e2e2e2;
}

/* Mobile: stack to one column */
@media (max-width: 820px) {
  .adv-row {
    grid-template-columns: 18px 1fr;
  }

  .adv-lab {
    grid-column: 2 / -1;
  }

  .adv-control {
    grid-column: 2 / -1;
  }

  .adv-input {
    grid-column: 2 / -1;
  }

  .adv-control--inline {
    grid-column: 2 / -1;
  }
}

/* Allow grid children to shrink instead of crushing the label column */
.adv-row > * {
  min-width: 0;
}

/* Make the label column real and readable */
.adv-row {
  grid-template-columns: 18px 140px 110px minmax(220px, 1fr);
}

/* “Between … and …” rows: keep them on one line when possible */
.adv-control--inline {
  grid-column: 3 / -1;
  min-width: 0;
}

/* ==========================
   Search Results tables
   ========================== */

.results-meta {
  margin: 0 0 10px 0;
  font-size: 0.95em;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 18px 0;
}

/* Base table */
table.search {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

/* Hide caption visually (your heading row already shows it) */
table.search caption {
  position: absolute;
  left: -9999px;
}

/* Big heading row (artist/title + Pos/Wks) */
table.search thead tr.search__title th {
  font-family: arial, sans-serif;
  font-weight: normal;
  letter-spacing: .2em;
  color: #f59a1b;
  background: #fff;
  padding: 12px 10px 8px 10px;
  border-bottom: 1px solid #f59a1b;
}

/* The left big heading cell */
table.search thead th.search__heading {
  text-align: left;
}

/* Pos / Wks headings on the right */
table.search thead th.position,
table.search thead th.weeks {
  text-align: right;
  width: 56px;
  white-space: nowrap;
}

/* Column headings row */
table.search thead tr.search__cols th {
  font-size: 0.9em;
  font-weight: bold;
  color: #555;
  background: #fff;
  padding: 8px 10px;
  border-bottom: 1px solid #ddd;
}

/* Cells */
table.search td {
  padding: 8px 10px;
  vertical-align: top;
  font-size: 0.95em;
}

/* Zebra rows (you already output rowgrey/rowwhite) */
table.search tr.rowgrey td { background: #efefef; }
table.search tr.rowwhite td { background: #ffffff; }

/* Column alignment */
table.search td.date {
  width: 80px;
  white-space: nowrap;
  color: #444;
}

table.search td.topten {
  width: 46px;
  text-align: center;
}

table.search td.position,
table.search td.weeks {
  width: 56px;
  text-align: right;
  white-space: nowrap;
  color: #444;
}

table.search td.title {
  color: #333;
}

/* Subtext (e.g. reached #1 info) */
table.search .subtext {
  margin-top: 2px;
  font-size: 0.85em;
  color: #666;
  font-style: italic;
}

/* Mobile: tighten table + allow the main text to wrap well */
@media (max-width: 820px) {
  table.search thead tr.search__title th {
    padding: 10px 8px 6px 8px;
    letter-spacing: .12em;
  }

  table.search thead tr.search__cols th,
  table.search td {
    padding: 7px 8px;
  }

  table.search td.date { width: 72px; }
  table.search td.topten { width: 38px; }
  table.search td.position,
  table.search td.weeks { width: 46px; }

  /* If you want, you can hide the Top 10 column on very small screens */
}

@media (max-width: 520px) {
  /* Optional: hide Top 10 column to save space */
  table.search th:nth-child(2),
  table.search td:nth-child(2) {
    display: none;
  }
}