/* GT7 Menu — authentic Gran Turismo 7 UI styling.
   Ported directly from cnopt/gt7-react-components (exact values), adapted into
   reusable classes for the GT7 League site rebuild.
   Fonts: real GT7 UI faces (Helvetica variants + fan-made GT series numerals)
   copied from that repo — see assets/fonts. See readme "Font substitution" for
   the licensing flag on Helvetica.
*/

/* ---------- Fonts ---------- */
@font-face { font-family: 'helv';      src: url('assets/fonts/Helv-R.otf'); }
@font-face { font-family: 'helv-md';   src: url('assets/fonts/Helv-Md.otf'); }
@font-face { font-family: 'helv-lt';   src: url('assets/fonts/Helv-Lt.otf'); }
@font-face { font-family: 'helv-bd';   src: url('assets/fonts/Helv-Bd.otf'); }
@font-face { font-family: 'helv-cond'; src: url('assets/fonts/helveticaneue-cond.otf'); }
@font-face { font-family: 'gts-num';   src: url('assets/fonts/gtseriesfont-num-001.otf'); }

/* ---------- Palette (from GT7 UI) ---------- */
:root {
  --gt-bg:        #131418; /* body */
  --gt-panel:     #090e13; /* container box */
  --gt-panel-2:   rgba(0,0,0,0.15);
  --gt-border:    #333b3f; /* 4px panel border */
  --gt-divider:   #50565a; /* table row divider */
  --gt-header-a:  #3b4247; /* table header gradient inner */
  --gt-blue:      rgb(72,118,152);  /* signature GT blue */
  --gt-blue-lt:   #67acdf;          /* toggle-on / highlight blue */
  --gt-text:      #dcdcdc;
  --gt-text-dim:  #96a1aa;
  --gt-text-head: #c0cdd6;
  --gt-text-val:  #e3f2fd; /* bright values */
  --gt-gold:      #dfbf70;
  --gt-silver:    #c4c4c7;
  --gt-bronze:    #deac93;
}

/* ---------- Base ---------- */
.gt7 {
  background-color: var(--gt-bg);
  color: var(--gt-text);
  font-family: 'helv', sans-serif;
}

/* ---------- Container box (the signature GT7 panel) ---------- */
.gt-box {
  background-color: var(--gt-panel);
  border-radius: 20px;
  box-shadow: 0 0 6px 0 rgba(0,0,0,0.4);
  border: 4px solid var(--gt-border);
}
.gt-box-upper { padding: 1rem 2rem 0; }
.gt-box-inner { padding: 1.25rem 2rem 1.5rem; }

/* Softer inset sub-panel */
.gt-subpanel {
  background-color: var(--gt-panel-2);
  border-radius: 12px;
}
.gt-subpanel-header {
  font-family: 'helv-md';
  background-color: #212121;
  font-size: 0.9em;
  border-radius: 12px 12px 0 0;
  padding: 0.4rem 1rem;
  color: var(--gt-text);
  margin: 0;
}

/* ---------- Section / info bar ---------- */
.gt-infobar { display: flex; justify-content: space-between; align-items: center; color: var(--gt-text-val); padding-bottom: 0.45rem; }
.gt-infobar .title { margin: 0; padding: 1rem 0 0.75rem; font-family: 'helv-md'; font-size: 1.1em; }
.gt-infobar .subtitle { opacity: 0.65; font-size: 0.9em; margin: 0; padding-bottom: 0.5rem; font-family: 'helv'; }
.gt-infobar .info-table { border-collapse: collapse; }
.gt-infobar .info-table td { text-align: center; font-size: 1em; border-right: 1px solid var(--gt-divider); padding: 0 0.6rem 0.4rem; font-family: 'helv'; color: var(--gt-text-val); }
.gt-infobar .info-table td:last-child { border-right: none; }
.gt-infobar .info-table td.accent { color: var(--gt-blue); }
.gt-infobar .info-table th { font-weight: lighter; font-size: 0.6em; padding: 0 0.6rem; opacity: 0.65; font-family: 'helv-lt'; text-transform: none; }

/* ---------- GT Table (regulations / spec list) ---------- */
.gt-table { margin: 0 0 0.75rem; padding: 0; color: var(--gt-text-dim); width: 100%; border-collapse: collapse; }
.gt-table .caption {
  color: var(--gt-text-head); text-align: center; font-family: 'helv'; font-size: 0.72em; font-weight: lighter;
  padding: 0.25rem 0; letter-spacing: 0.03em;
  background: radial-gradient(circle, var(--gt-header-a) 65%, rgba(22,24,25,0.5) 100%);
  text-transform: uppercase;
}
.gt-table .row { display: flex; padding: 0.5rem 0; border-bottom: 1px solid var(--gt-divider); justify-content: space-between; align-items: center; }
.gt-table .row:last-child { border-bottom: none; }
.gt-table .k { opacity: 0.65; font-size: 0.78em; text-align: left; font-family: 'helv-lt'; letter-spacing: 0.01rem; }
.gt-table .v { text-align: right; color: var(--gt-text-val); font-family: 'helv-md'; font-size: 0.82em; }
.gt-table .v.check::after { content: "✓"; margin-left: 0.7rem; margin-right: 0.2rem; opacity: 0.4; }
.gt-table .v.prohibited { color: #c98b8b; }

/* ---------- Buttons ---------- */
.gt-btn {
  border-radius: 25px; padding: 0.7rem 2rem;
  background: linear-gradient(180deg, rgba(37,45,49,1) 0%, rgb(5,6,7) 100%);
  box-shadow: 0 0 6px 0 rgba(0,0,0,0.4);
  border: 3px solid var(--gt-border); color: #d9d9d9; cursor: pointer;
  font-family: 'helv-md'; font-size: 0.82em; transition: border-color 0.15s;
}
.gt-btn:hover { border-color: #c4c6c7; }
.gt-btn.primary { background: linear-gradient(180deg, rgba(72,118,152,0.95) 0%, rgba(40,70,95,1) 100%); border-color: #4a6f8f; color: #eaf4fb; }
.gt-btn.primary:hover { border-color: var(--gt-blue-lt); }
.gt-btn:disabled { opacity: 0.4; cursor: default; }
.gt-btn:disabled:hover { border-color: var(--gt-border); }

/* ---------- Notice strip ---------- */
.gt-notice { width: 100%; display: block; text-align: center; margin: 0; }
.gt-notice p { padding: 0.5rem 0; font-family: 'helv'; font-size: 0.8em; margin: 0; color: #d4e4f0; background: radial-gradient(circle, rgba(72,118,152,1) 60%, rgba(22,24,25,0.5) 100%); }
.gt-notice.dark p { color: var(--gt-text-dim); background: radial-gradient(circle, var(--gt-header-a) 60%, rgba(22,24,25,0.4) 100%); }

/* ---------- PP badge (white pill) ---------- */
.gt-pp { font-family: 'helv-md'; font-size: 0.8em; padding: 0.15rem 0.75rem; color: #000; background: #fff; border-radius: 50px; display: inline-block; white-space: nowrap; }
.gt-pp::before { content: "PP "; }
.gt-pp.outline { color: var(--gt-text); background: transparent; border: 1px solid rgba(255,255,255,0.6); }

/* ---------- Select / input (GT7 style) ---------- */
.gt-select {
  font-family: 'helv'; width: 100%;
  background: linear-gradient(160deg, rgba(78,72,68,1) 0%, rgb(58,54,51) 100%);
  color: rgb(224,222,216); border-radius: 7px; padding: 0.5rem 0.7rem;
  box-shadow: 0 0 6px 0 rgba(0,0,0,0.4); outline: none; border: none; font-size: 0.85em; cursor: pointer;
}
.gt-select option { color: rgb(224,222,216); background-color: #383432; }
.gt-field-label { font-size: 0.72em; color: rgb(224,222,216); font-family: 'helv'; opacity: 0.8; margin-bottom: 0.4rem; display: block; }

/* ---------- Toggle switch (GT7 radio) ---------- */
.gt-switch { position: relative; display: inline-block; width: 38px; height: 20px; flex-shrink: 0; }
.gt-switch input { opacity: 0; width: 0; height: 0; }
.gt-switch .slider { position: absolute; cursor: pointer; inset: 0; border: 1px solid rgba(255,255,255,0.8); border-radius: 34px; transition: 0.15s; }
.gt-switch .slider:before { position: absolute; content: ""; height: 11px; width: 11px; left: 4px; bottom: 3px; border: 1px solid rgba(255,255,255,0.8); border-radius: 50%; transition: 0.15s; }
.gt-switch input:checked + .slider { background-color: var(--gt-blue-lt); }
.gt-switch input:checked + .slider:before { transform: translateX(17px); background-color: #fff; box-shadow: 2px 1px 9px rgba(0,0,0,0.5); }

/* ---------- Numerals ---------- */
.gt-num { font-family: 'gts-num', 'helv-md', monospace; }
.gt-cond { font-family: 'helv-cond', 'helv-md', sans-serif; }

/* ---------- Trophy/position tint ---------- */
.pos-gold   { color: var(--gt-gold); }
.pos-silver { color: var(--gt-silver); }
.pos-bronze { color: var(--gt-bronze); }

/* ---------- Responsive (phones) ---------- */
.gt-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gt-scroll-x > .gt-scroll-inner { min-width: 44rem; }

@media (max-width: 700px) {
  body { padding: 0.75rem !important; }
  .gt-box { border-radius: 14px; border-width: 3px; }
  .gt-box-upper { padding: 0.5rem 1rem 0; }
  .gt-box-inner { padding: 0.9rem 1rem 1.1rem; }

  .gt-header { flex-wrap: wrap; gap: 0.5rem 1rem !important; }
  .gt-header .gt-nav { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gt-header .gt-season { margin-left: auto; }

  .gt-infobar { flex-wrap: wrap; gap: 0.25rem 1rem; }
  .gt-infobar .info-table { margin-bottom: 0.5rem; }

  .gt-home-main { flex-direction: column; gap: 1rem !important; padding: 0.5rem 1rem 1.25rem !important; }
  .gt-home-side { width: 100% !important; }
  .gt-home-side img { max-width: 12rem; }

  .gt-strip { flex-wrap: wrap; gap: 0.6rem 1.25rem !important; padding: 0.9rem 1rem !important; }
  .gt-strip .gt-strip-leaders { flex-wrap: wrap; gap: 0.6rem 1.25rem !important; }

  .gt-vote-grid { grid-template-columns: 1fr !important; }

  .gt-table .v { max-width: 55%; text-align: right; }
}