/* =========================================================
   GPVWC 2026 — components.css
   Depends on tokens/typography/container from base.css
   ========================================================= */

/* ===== Header & Navigation ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--bd);
}
.nav-wrap{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* brand | nav | utility */
  align-items: center;
  gap: 1rem;
  padding: .75rem 0;
  position: relative;
}
.brand{ justify-self: start; display: flex; align-items: center; gap: .75rem; }
.primary-nav{ justify-self: center; }
.utility{ justify-self: end; display: flex; align-items: center; gap: .6rem; }

/* Accent line overlays; no layout shift */
.nav-accent{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--brand);
  pointer-events: none;
}

/* Menu (kept on one line desktop) */
.menu.menu-primary{
  display: flex; align-items: center;
  gap: 1rem; list-style: none; margin: 0; padding: 0;
  white-space: nowrap;
}
.menu.menu-primary a{ padding: .4rem .6rem; border-radius: var(--r-1); }

/* Dark-mode logo swap (PNG) */
.logo-img{
  display:block;
  height:auto;
  max-height:32px;
  width:auto;
}.logo-dark{ display: none; }
@media (prefers-color-scheme: dark){
  html[data-theme="auto"] .logo-light{ display: none; }
  html[data-theme="auto"] .logo-dark{ display: block; }
}
html[data-theme="dark"]  .logo-light{ display:none; }
html[data-theme="dark"]  .logo-dark { display:block; }
html[data-theme="light"] .logo-light{ display:block; }
html[data-theme="light"] .logo-dark { display:none; }

/* Mobile nav: stack menu under brand + utility, keep it always visible for now */
@media (max-width: 960px){
  .nav-wrap{
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    row-gap: .5rem;
  }

  .brand{
    grid-column: 1 / 2;
  }

  .utility{
    grid-column: 2 / 3;
    justify-self: end;
  }

  .primary-nav{
    grid-column: 1 / -1;
    display: block;
  }

  .menu.menu-primary{
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding: .25rem 0 .5rem;
  }
}


/* Admin bar spacing */
@media (min-width: 783px){ body.admin-bar .site-header{ top: 32px; } }
@media (max-width: 782px){ body.admin-bar .site-header{ top: 46px; } }

/* ===== Cards ===== */
.card{
  background: var(--card);
  border: var(--bd);
  border-radius: var(--r-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.03) inset;
}
.card-media{ aspect-ratio: 16/9; background:#111; }
.card-body{ padding: var(--s-4); }
.card-title{ margin: 0 0 .25rem; }
.card-meta { margin: 0 0 .5rem; }

/* ===== Tables ===== */
.table-wrap{
  overflow-x: auto;
  border: var(--bd);
  border-radius: var(--r-2);
  background: var(--card);
}
.table-wrap table{ width: 100%; border-collapse: collapse; }
.table-wrap th, .table-wrap td{ padding: .6rem .75rem; border-bottom: var(--bd); }
.table-wrap tr:hover{ background: rgba(255,255,255,.03); }

/* ===== Tabs ===== */
.tabs .tablist{ display:flex; gap:.25rem; margin-bottom: var(--s-4); }
.tabs [role="tab"]{
  border: var(--bd); background: var(--card);
  padding: .5rem .75rem; border-radius: var(--r-1); cursor: pointer;
}
.tabs [role="tab"][aria-selected="true"]{ background: var(--brand); color: #fff; }
.tabs .home-series-tab[aria-selected="true"].home-series-tab--sl1{ background: var(--sl1-bg); color: var(--sl1-fg); border-color: var(--sl1-fg); }
.tabs .home-series-tab[aria-selected="true"].home-series-tab--sl2{ background: var(--sl2-bg); color: var(--sl2-fg); border-color: var(--sl2-fg); }
.tabs .home-series-tab[aria-selected="true"].home-series-tab--fs1{ background: var(--fs1-bg); color: var(--fs1-fg); border-color: var(--fs1-fg); }
.tabs .home-series-tab[aria-selected="true"].home-series-tab--fs2{ background: var(--fs2-bg); color: var(--fs2-fg); border-color: var(--fs2-fg); }
.tabs .home-series-tab[aria-selected="true"].home-series-tab--aca{ background: var(--aca-bg); color: var(--aca-fg); border-color: var(--aca-fg); }
.tabs .home-series-tab[aria-selected="true"].home-series-tab--generic{ background: var(--brand-ghost); color: var(--text); }
.tab-panel[hidden]{ display:none; }

/* ===== Alerts ===== */
.alert{
  display:flex; gap:.6rem; align-items:center;
  border-radius: var(--r-1); padding: .75rem .9rem;
  background: var(--elev); border: var(--bd);
}
.alert .alert-dot{ width:.6rem; height:.6rem; border-radius:999px; display:inline-block; }
.alert-info .alert-dot{ background: var(--info); }
.alert-warn .alert-dot{ background: var(--warn); }
.alert-success .alert-dot{ background: var(--ok); }

/* ===== Responsive Embeds ===== */
.embed-16x9{ position:relative; padding-top:56.25%; width:100%; }
.embed-16x9 iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.embed-1x1{ position:relative; padding-top:100%; width:100%; }
.embed-1x1 iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }

/* ===== Grids & helpers ===== */
.grid{ display:grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 960px){ .grid-3{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .grid-3{ grid-template-columns: 1fr; } }

.grid-4{ display:grid; gap: var(--s-4); grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width:1200px){ .grid-4{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 960px){ .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .grid-4{ grid-template-columns: 1fr; } }

/* Plain ordered list used in standings cards */
.list-plain{ margin:0; padding-left:1.25rem; }
.list-plain li{ margin:.35rem 0; }

/* ===== Standings accents ===== */
.home-standings__card,
.home-standings__summary-card{
  border: 1px solid var(--bd);
  background: var(--card);
}

.home-standings__card--sl1,
.home-standings__summary-card--sl1{ border-color: var(--sl1-fg); background: var(--sl1-bg); }
.home-standings__card--sl2,
.home-standings__summary-card--sl2{ border-color: var(--sl2-fg); background: var(--sl2-bg); }
.home-standings__card--fs1,
.home-standings__summary-card--fs1{ border-color: var(--fs1-fg); background: var(--fs1-bg); }
.home-standings__card--fs2,
.home-standings__summary-card--fs2{ border-color: var(--fs2-fg); background: var(--fs2-bg); }
.home-standings__card--aca,
.home-standings__summary-card--aca{ border-color: var(--aca-fg); background: var(--aca-bg); }
.home-standings__card--generic,
.home-standings__summary-card--generic{ border-color: var(--brand-ink); background: var(--brand-ghost); }

/* ===== Standings summary layout (homepage) ===== */

.home-standings__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.home-standings__summary[hidden] {
  display: none;
}

@media (max-width: 960px) {
  .home-standings__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .home-standings__summary {
    grid-template-columns: 1fr;
  }
}

.home-standings__summary-card {
  border-radius: var(--r-2);
  padding: var(--s-4);
  box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.03) inset;
}

/* Titles inside cards */
.home-standings__summary-title {
  margin: 0 0 .75rem;
  font-size: var(--fs-1);
  font-weight: 600;
}

/* List of rows */
.home-standings__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-standings__list-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .25rem 0;
  border-bottom: var(--bd);
  font-size: .95rem;
}

.home-standings__list-item:last-child {
  border-bottom: 0;
}

/* Columns inside a row */
.home-standings__pos {
  font-weight: 700;
  min-width: 1.6rem;
}

.home-standings__name {
  flex: 1 1 auto;
}

.home-standings__team,
.home-standings__points {
  white-space: nowrap;
  font-weight: 500;
  opacity: .9;
}

.home-standings__empty {
  margin: 0;
  font-size: .9rem;
  opacity: .85;
}


/* ===== YouTube Grid ===== */
.yt-grid{ display:grid; gap: var(--s-4); grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width:960px){ .yt-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .yt-grid{ grid-template-columns: 1fr; } }
.yt-card{ display:flex; flex-direction:column; gap:.5rem; }
.yt-thumb{ aspect-ratio:16/9; background:#111; border-radius: var(--r-2); overflow:hidden; border: var(--bd); display:block; }
.yt-thumb img, .yt-thumb iframe{ width:100%; height:100%; object-fit:cover; display:block; }
.yt-title{ font-size: var(--fs-1); line-height:1.3; margin:0; }

/* ===== Instagram widget polish ===== */
.ig-section iframe.lightwidget-widget{
  width:100%; border:0; overflow:hidden;
  border-radius: var(--r-2);
  margin-top: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* ===== Badges & Flags (used in upcoming/events) ===== */
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .5rem; border-radius:999px;
  font-weight:600; font-size:.75rem;
}
.badge-race{ background: var(--brand); color:#fff; }
.badge-test{ background:#fff; border:1px solid var(--brand); color: var(--brand); }

.flag{
  display:inline-block; width:20px; height:14px; vertical-align:middle;
  border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.08); object-fit:cover;
}

/* ==== Header: utility + search layout ==== */

.gpvwc-header-search {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

/* Dark-mode toggle: fixed size, no shrinking */
.gpvwc-header-search-logo {
    flex: 0 0 auto;
    width: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Make the WordPress search form flex nicely */
.gpvwc-header-search .search-form {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* Input takes remaining space */
.gpvwc-header-search .search-field {
    flex: 1 1 auto;
    min-width: 0;              /* important: prevents overflow on narrow screens */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Submit button: fixed; doesn't wrap */
.gpvwc-header-search .search-submit {
    flex: 0 0 auto;
    white-space: nowrap;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ==== Small screens: avoid ugly squashing ==== */

@media (max-width: 768px) {
    .gpvwc-header-search {
        gap: 0.5rem;
    }

    .gpvwc-header-search .search-field,
    .gpvwc-header-search .search-submit {
        font-size: 0.875rem;
        padding-inline: 0.5rem;
    }

    /* If it still feels cramped, you can switch to vertical stacking:
    .gpvwc-header-search {
        flex-direction: column;
        align-items: stretch;
    }

    .gpvwc-header-search .search-form {
        width: 100%;
    }
    */
}

/* ACTIVE TAB STYLES */
.tabs .home-series-tab[aria-selected="true"].home-series-tab--sl1 {
  background: var(--sl1-bg) !important;
  color: var(--sl1-fg) !important;
  border-color: var(--sl1-bg);
}

.tabs .home-series-tab[aria-selected="true"].home-series-tab--sl2 {
  background: var(--sl2-bg) !important;
  color: var(--sl2-fg) !important;
  border-color: var(--sl2-bg);
}

.tabs .home-series-tab[aria-selected="true"].home-series-tab--fs1 {
  background: var(--fs1-bg) !important;
  color: var(--fs1-fg) !important;
  border-color: var(--fs1-bg);
}

.tabs .home-series-tab[aria-selected="true"].home-series-tab--fs2 {
  background: var(--fs2-bg) !important;
  color: var(--fs2-fg) !important;
  border-color: var(--fs2-bg);
}

.tabs .home-series-tab[aria-selected="true"].home-series-tab--aca {
  background: var(--aca-bg) !important;
  color: var(--aca-fg) !important;
  border-color: var(--aca-bg);
}

/* Base state: coloured text + border per series */
.tabs .home-series-tab.home-series-tab--sl1 {
  border-color: #0fb9a5 !important;
  color: #0fb9a5 !important;
}

.tabs .home-series-tab.home-series-tab--sl2 {
  border-color: #10b3dc !important;
  color: #10b3dc !important;
}

.tabs .home-series-tab.home-series-tab--fs1 {
  border-color: #e81e36 !important;
  color: #e81e36 !important;
}

.tabs .home-series-tab.home-series-tab--fs2 {
  border-color: #ff7d00 !important;
  color: #ff7d00 !important;
}

.tabs .home-series-tab.home-series-tab--aca {
  border-color: #7927a8 !important;
  color: #7927a8 !important;
}

/* Selected state: filled pill */
.tabs .home-series-tab[aria-selected="true"].home-series-tab--sl1 {
  background-color: #0fb9a5 !important;
  color: #ffffff !important;
}

.tabs .home-series-tab[aria-selected="true"].home-series-tab--sl2 {
  background-color: #10b3dc !important;
  color: #ffffff !important;
}

.tabs .home-series-tab[aria-selected="true"].home-series-tab--fs1 {
  background-color: #e81e36 !important;
  color: #ffffff !important;
}

.tabs .home-series-tab[aria-selected="true"].home-series-tab--fs2 {
  background-color: #ff7d00 !important;
  color: #ffffff !important;
}

.tabs .home-series-tab[aria-selected="true"].home-series-tab--aca {
  background-color: #7927a8 !important;
  color: #ffffff !important;
}