/* =========================================================
   Track Day Buddy — Index page
   Clean rebuild
   - Mobile first
   - 3-part desktop header: brand / tracks / search
   - Tracks menu opens by JS click
   - No duplicate nav/header rules
========================================================= */

/* =========================================================
   1) TOKENS
========================================================= */
:root{
  --bg:#fff;
  --fg:#111;
  --muted:#6b6b6b;
  --line:#e9e9e9;
  --soft:#f6f6f6;
  --focus:#1a73e8;

  --max:1200px;
  --lane:1040px;

  --tap:36px;
  --t:120ms;

  --facetRadius:8px;
  --facetH:160px;
  --shadow:0 10px 26px rgba(0,0,0,.05);
}

/* =========================================================
   2) BASE / RESET
========================================================= */
*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:14px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 12px;
}

.main{
  padding:18px 12px 10px;
}

.lane{
  width:100%;
}

.muted{
  color:var(--muted);
  margin:0;
}

.small{
  color:var(--muted);
  font-size:12px;
  margin-top:6px;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.skip:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:10px 12px;
  background:#fff;
  border:2px solid var(--focus);
  border-radius:12px;
  z-index:50;
}

/* =========================================================
   3) HEADER
========================================================= */
.header{
  border-bottom:1px solid var(--line);
  background:#fff;
}

.header__row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:14px 0;
}

/* Brand */
.brand{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}

.brand:hover{
  text-decoration:none;
}

.logo{
  font-weight:950;
  letter-spacing:-.02em;
  font-size:18px;
  line-height:1.05;
}

.tag{
  color:var(--muted);
  margin-top:2px;
  font-size:12px;
}

/* Header actions */
.header__actions{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
}

/* Search */
.search{
  min-width:0;
  width:100%;
}

.search input{
  height:44px;
  width:100%;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 12px;
  background:#fff;
  transition:border-color var(--t) ease, box-shadow var(--t) ease;
  font-size:16px;
}

.search input:focus{
  outline:none;
  border-color:var(--focus);
  box-shadow:0 0 0 4px rgba(26,115,232,.12);
}

/* =========================================================
   4) BUTTONS
========================================================= */
.btn{
  height:var(--tap);
  padding:0 12px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  border-radius:4px;
  cursor:pointer;
  font-weight:800;
  transition:transform var(--t) ease, box-shadow var(--t) ease;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}

.btn:active{
  transform:none;
  box-shadow:none;
}

.btn--ghost{
  background:#fff;
  color:#111;
  border-color:var(--line);
}

.btn--ghost:hover{
  border-color:#d5d5d5;
}

/* =========================================================
   5) NAV / TRACKS MENU
   JS controls open/close with:
   .nav__panel[data-open="true"]
========================================================= */
.nav{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:auto;
}

.nav__item,
.nav__dropdown{
  position:relative;
}

.nav__link{
  height:44px;
  padding:0 18px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:#111;
  font:inherit;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.nav__link:hover{
  border-color:#d5d5d5;
}

.nav__link[aria-expanded="true"]{
  border-color:#111;
}

.nav__chev{
  font-size:12px;
  opacity:.7;
}

.nav__panel{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:320px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:10px;
  z-index:1000;
}

.nav__panel[data-open="true"]{
  display:block;
}

.nav__list{
  list-style:none;
  padding:0;
  margin:0;
  max-height:420px;
  overflow:auto;
}

.nav__list li{
  margin:0;
  list-style:none;
}

.nav__list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 10px;
  border-radius:10px;
  text-decoration:none;
  color:#111;
  font-weight:800;
}

.nav__list a:hover{
  background:var(--soft);
}

.nav__loading{
  list-style:none;
  padding:10px;
  color:var(--muted);
  font-weight:700;
}

.nav__divider{
  height:1px;
  background:#eee;
  margin:8px 0;
}

.nav__all{
  font-weight:900;
}

.nav__flag{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

/* =========================================================
   6) FILTERS
========================================================= */
.filters{
  margin-top:8px;
}

#tdb-filters{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  align-items:start;
  width:100%;
}

#tdb-filters > .facet[data-key="organiser"],
#tdb-filters > .facet[data-key="venue"]{
  grid-column:1 / -1;
}

@media (max-width:340px){
  #tdb-filters{
    grid-template-columns:1fr;
  }
}

.facet{
  border:1px solid var(--line);
  border-radius:var(--facetRadius);
  background:#fff;
  padding:7px 9px;
  min-width:0;
}

.facet__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 6px;
}

.facet__title{
  margin:0;
  font-weight:900;
  letter-spacing:-.01em;
  font-size:13px;
}

.facet__list{
  max-height:140px;
  overflow:auto;
}

/* Facet rows */
.facetrow{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  text-align:left;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  font:inherit;
  position:relative;
  padding-right:18%;
}

.facetrow:last-child{
  border-bottom:0;
}

.facetrow:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.facetrow__left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.facetrow__tick{
  width:16px;
  height:16px;
  border-radius:5px;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  font-size:11px;
  color:transparent;
  flex:0 0 auto;
}

.facetrow[aria-selected="true"] .facetrow__tick{
  background:#111;
  border-color:#111;
  color:#fff;
}

.facetrow__name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
}

.facetrow__count{
  position:absolute;
  right:6%;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

/* =========================================================
   7) MOBILE FACETS
========================================================= */
@media (max-width:979px){
  .facet__head{
    cursor:pointer;
    padding:6px 0;
  }

  .facet .facet__list{
    display:none;
  }

  .facet[data-open="true"] .facet__list{
    display:block;
  }

  .facet__title::after{
    content:"▾";
    float:right;
    opacity:.6;
  }

  .facet[data-open="true"] .facet__title::after{
    content:"▴";
  }
}

/* =========================================================
   8) META
========================================================= */
.meta{
  margin:10px 0 6px;
}

.meta__left{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* =========================================================
   9) RESULTS — MOBILE CARDS
========================================================= */
.cards{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:grid;
  gap:12px;
}

.card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:#fff;
  transition:transform var(--t) ease, box-shadow var(--t) ease, border-color var(--t) ease;
}

.card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow);
  border-color:#dadada;
}

.card__top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}

.card h3{
  margin:0;
  font-size:16px;
  line-height:1.2;
}

.price{
  font-weight:900;
  border:1px solid #111;
  border-radius:10px;
  padding:8px 10px;
  white-space:nowrap;
  font-size:13px;
}

.card img,
.card svg{
  max-width:100%;
  height:auto;
}

.card .trackwrap{
  width:100%;
  height:140px;
  margin:12px 0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:14px;
  background:#fff;
}

.card .trackwrap img,
.card .trackwrap svg{
  width:100%;
  max-width:520px;
  height:100%;
  max-height:140px;
  object-fit:contain;
  display:block;
}

.card .trackwrap svg{
  width:100% !important;
  height:100% !important;
}

.venuelink{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.15);
}

.venuelink:hover{
  border-bottom-color:rgba(0,0,0,.5);
}

.tracklink{
  display:inline-flex;
}

.tracklink:hover{
  opacity:.9;
}

/* =========================================================
   10) RESULTS — DESKTOP TABLE
========================================================= */
.tablewrap{
  display:none;
  width:100%;
  margin-top:8px;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  table-layout:fixed;
  background:#fff;
}

.table thead th{
  text-align:left;
  font-size:12px;
  color:var(--muted);
  background:var(--soft);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
  padding:8px 10px;
  line-height:1.1;
  position:relative;
}

.table thead th:not(:last-child)::after{
  content:"";
  position:absolute;
  top:8px;
  bottom:8px;
  right:0;
  width:1px;
  background:var(--line);
  opacity:.9;
}

.table td{
  padding:8px 10px;
  line-height:1.15;
  vertical-align:middle;
}

.table th,
.table td{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.table tr:hover td{
  background:#fafafa;
}

.table tbody tr:last-child td{
  border-bottom:none;
}

.num{
  font-variant-numeric:tabular-nums;
}

.book{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  border-radius:4px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  text-decoration:none;
  font-weight:900;
  font-size:12px;
  transition:transform var(--t) ease, box-shadow var(--t) ease;
}

.book:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}

.book:active{
  transform:none;
  box-shadow:none;
}

/* =========================================================
   11) TOOLTIP
========================================================= */
.th-db{
  white-space:nowrap;
  position:relative;
}

.dbinfo{
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  margin-left:6px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:#111;
  font-weight:900;
  font-size:12px;
  cursor:help;
}

.dbinfo:hover{
  border-color:#cfcfcf;
}

.tdb-tooltip{
  position:fixed;
  max-width:280px;
  background:#111;
  color:#fff;
  padding:10px 12px;
  border-radius:8px;
  font-size:12px;
  line-height:1.25;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  z-index:99999;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity 120ms ease, transform 120ms ease;
  pointer-events:none;
}

.tdb-tooltip[data-show="true"]{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   12) PAGER
========================================================= */
.resultsPager{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin:10px 0 0;
}

.pagernums{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.pagebtn,
.pagerbtn{
  height:28px;
  min-width:28px;
  padding:0 10px;
  border-radius:4px;
  border:1px solid var(--line);
  background:#fff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.pagebtn[aria-current="page"]{
  border-color:#111;
  background:#111;
  color:#fff;
}

.pagerbtn:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.pagedots{
  padding:0 8px;
  opacity:.6;
  font-weight:700;
}

#tdb-pages{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
}

.is-hidden{
  display:none !important;
}

.is-hidden-slot{
  visibility:hidden;
  pointer-events:none;
}

.pagebtn.is-gap{
  cursor:default;
}

/* =========================================================
   13) DESKTOP
========================================================= */
@media (min-width:980px){
  .lane{
    max-width:var(--lane);
    margin:0 auto;
  }

  .header__row{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:16px;
    padding:14px 0;
  }

  .nav{
    justify-self:center;
    justify-content:center;
  }

  .header__actions{
    width:auto;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
  }

  .search{
    width:auto;
  }

  .search input{
    height:var(--tap);
    width:min(520px, 48vw);
    border-radius:4px;
    font-size:14px;
  }

  .nav__panel{
    left:50%;
    transform:translateX(-50%);
    min-width:460px;
    max-height:320px;
    border-radius:8px;
  }

  .cards{
    display:none;
  }

  .tablewrap{
    display:block;
    margin-top:0;
  }

  .facet__list{
    max-height:104px;
  }

  #tdb-filters{
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap:10px;
    align-items:start;
    margin-bottom:-26px;
  }

  #tdb-filters > .facet[data-key="country"]   { grid-column:1 / span 2;  grid-row:1; }
  #tdb-filters > .facet[data-key="trackType"] { grid-column:3 / span 2;  grid-row:1; }
  #tdb-filters > .facet[data-key="db"]        { grid-column:5 / span 2;  grid-row:1; }
  #tdb-filters > .facet[data-key="month"]     { grid-column:7 / span 2;  grid-row:1; }
  #tdb-filters > .facet[data-key="day"]       { grid-column:9 / span 2;  grid-row:1; }
  #tdb-filters > .facet[data-key="price"]     { grid-column:11 / span 2; grid-row:1; }

  #tdb-filters > .facet[data-key="organiser"] { grid-column:3 / span 4; grid-row:2; }
  #tdb-filters > .facet[data-key="venue"]     { grid-column:7 / span 4; grid-row:2; }

  #tdb-filters > .facet{
    height:var(--facetH);
    display:flex;
    flex-direction:column;
  }

  #tdb-filters > .facet .facet__list{
    flex:1;
    max-height:none;
    overflow:auto;
  }

  #tdb-filters > .facet[data-key="organiser"],
  #tdb-filters > .facet[data-key="venue"]{
    height:132px;
  }

  .filters{
    margin-bottom:14px;
  }

  .meta{
    margin:4px 0 4px;
  }

  .table thead th:nth-child(7),
  .table td:nth-child(7){
    text-align:center;
  }

  .table thead th:nth-child(8),
  .table td:nth-child(8){
    text-align:center;
  }

  td.trackcell{
    width:110px;
    padding:0 !important;
    vertical-align:middle;
  }

  .trackwrap{
    width:110px;
    height:64px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
    border-radius:0;
    background:transparent;
  }

  .trackwrap svg,
  .trackwrap img{
    width:90px;
    height:52px;
    display:block;
  }

  .trackwrap img{
    object-fit:contain;
  }

  #tdb-table{
    table-layout:fixed;
    width:100%;
  }

  #tdb-table th:nth-child(1),
  #tdb-table td:nth-child(1){
    width:18%;
    white-space:normal;
  }

  #tdb-table th:nth-child(2),
  #tdb-table td:nth-child(2){width:8%}

  #tdb-table th:nth-child(3),
  #tdb-table td:nth-child(3){width:130px}

  #tdb-table th:nth-child(4),
  #tdb-table td:nth-child(4){width:14%}

  #tdb-table th:nth-child(5),
  #tdb-table td:nth-child(5){width:14%}

  #tdb-table th:nth-child(6),
  #tdb-table td:nth-child(6){width:12%}

  #tdb-table th:nth-child(7),
  #tdb-table td:nth-child(7){width:6%}

  #tdb-table th:nth-child(8),
  #tdb-table td:nth-child(8){width:8%}

  #tdb-table th:nth-child(9),
  #tdb-table td:nth-child(9){
    width:100px;
    padding-left:8px;
    padding-right:12px;
  }

  .table td:nth-child(3),
  .table th:nth-child(3){
    padding-left:6px;
    padding-right:6px;
  }
}