/* ============================================================
   Renn Driver — light / lifestyle theme (chrome + tokens)
   Linked by LightLayout.astro. Premium editorial direction:
   white, near-black ink, Guards Red accent, serif headlines.
   ============================================================ */

:root {
  --rd-bg:       #ffffff;
  --rd-bg-soft:  #f7f6f4;
  --rd-ink:      #14151a;
  --rd-ink-soft: #4a4d55;
  --rd-muted:    #6b6f78;
  --rd-line:     #e7e5e1;
  --rd-red:      #C0182B;
  --rd-red-dark: #9c1222;
  --rd-dark:     #14151a;
  --rd-serif:    'Playfair Display', Georgia, serif;
  --rd-sans:     'Be Vietnam Pro', sans-serif;

  /* Bento homepage tokens (light values; names mirror the old dark theme) */
  --rd-surface:   #ffffff;
  --rd-surface-2: #f6f6f4;
  --rd-border:    rgba(0,0,0,0.1);
  --rd-border-md: rgba(0,0,0,0.16);
  --rd-teal:      #C0182B;
  --rd-teal-dark: #9c1222;
  --rd-white:     #14151a;
  --rd-text:      #3a3d44;
  --rd-dim:       #9a9da4;
  --rd-display:   'Space Grotesk', 'Be Vietnam Pro', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body.rd-light {
  background: var(--rd-bg);
  -webkit-font-smoothing: antialiased;

  /* Re-point the legacy accent tokens to Guards Red (loaded after
     renndriver.css, so this wins). Headings/body keep renndriver's
     navy/grey + Poppins for comfortable article reading. */
  --ast-global-color-0: #C0182B;
  --ast-global-color-1: #9c1222;
}
body.rd-light a { color: inherit; text-decoration: none; }
body.rd-light img { max-width: 100%; height: auto; display: block; }
body.rd-light ul { list-style: none; }
body.rd-light .entry-content ul { list-style: disc; }

/* ================================================================
   NAV — clean editorial top bar
   ================================================================ */
.lnav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rd-line);
}
.lnav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 28px; height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.lnav-logo { flex-shrink: 0; display: flex; align-items: center; }
.lnav-logo img { height: 28px; width: auto; display: block; }
.lnav-links { display: flex; gap: 26px; align-items: center; }
.lnav-link {
  font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--rd-ink-soft); transition: color 0.15s; font-weight: 500;
}
.lnav-link:hover, .lnav-link--on { color: var(--rd-red); }

/* Resources dropdown */
.lnav-item { position: relative; }
.lnav-sub {
  display: none; position: absolute; top: 100%; left: -14px;
  background: #fff; border: 1px solid var(--rd-line); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08); min-width: 150px; padding: 6px 0; z-index: 50;
}
.lnav-item:hover .lnav-sub { display: block; }
.lnav-sub a {
  display: block; padding: 8px 16px; font-size: 12px; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--rd-ink-soft); white-space: nowrap; transition: color 0.15s, background 0.15s;
}
.lnav-sub a:hover { color: var(--rd-red); background: var(--rd-bg-soft); }
.lnav-mobile-sub { padding-left: 1.5rem !important; color: var(--rd-muted) !important; }
.lnav-cta {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600;
  color: #fff; background: var(--rd-red); padding: 9px 16px; border-radius: 2px;
  transition: background 0.15s; flex-shrink: 0;
}
.lnav-cta:hover { background: var(--rd-red-dark); color: #fff; }
.lnav-burger { display: none; background: none; border: none; color: var(--rd-ink); cursor: pointer; padding: 4px; }
.lnav-mobile { border-top: 1px solid var(--rd-line); padding: 14px 28px; display: flex; flex-direction: column; }
.lnav-mobile a { padding: 11px 0; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--rd-ink-soft); border-bottom: 1px solid var(--rd-line); }
.lnav-mobile a:last-child { border-bottom: none; }
.lnav-hidden { display: none; }

/* ================================================================
   FOOTER — grounded dark band
   ================================================================ */
.lfoot { background: var(--rd-dark); color: #b9bcc4; margin-top: 64px; }
.lfoot-main {
  max-width: 1280px; margin: 0 auto; padding: 44px 28px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.lfoot-logo { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: #fff; }
.lfoot-tag { font-size: 13px; color: #8a8d94; margin-top: 8px; max-width: 280px; line-height: 1.6; }
.lfoot-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.lfoot-nav a { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #b9bcc4; transition: color 0.15s; }
.lfoot-nav a:hover { color: var(--rd-red); }
.lfoot-social { display: flex; gap: 16px; }
.lfoot-social a { color: #8a8d94; transition: color 0.15s; }
.lfoot-social a:hover { color: #fff; }
.lfoot-copy { border-top: 1px solid rgba(255,255,255,0.08); }
.lfoot-copy p { max-width: 1280px; margin: 0 auto; padding: 16px 28px; font-size: 11px; color: #6a6d74; }

@media (max-width: 960px) {
  .lnav-links { display: none; }
  .lnav-burger { display: block; }
  .lfoot-main { flex-direction: column; gap: 24px; }
}

/* Scrollable wrapper for multi-column spec tables.
   renndriver.css mobile (≤767px) sets:
     table { display: block; overflow-x: auto }  — collapses table, adds self-scroll
     thead/tbody/tr { display: table; width: 100% }  — fluid rows that fill 100% of block
   The self-scroll on the table is the key problem: a table with overflow-x: auto
   establishes its own scroll context and stops overflowing its parent wrapper div.
   We override everything with !important so the wrapper div scrolls, not the table. */
/* Article-body links. Tailwind's reset sets `a { color: inherit; text-decoration: none }`,
   so without this every in-content link renders as plain body text — invisible as a link.
   Scope to .entry-content so nav/TOC/footer keep their own styling. Brand teal + underline. */
.entry-content p a,
.entry-content li a,
.entry-content td a,
.entry-content th a {
  color: #2997AA;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.entry-content p a:hover,
.entry-content li a:hover,
.entry-content td a:hover,
.entry-content th a:hover { color: #1f7d8c; }
/* Leave the in-content table of contents looking like navigation, not body links. */
.entry-content #toc_container a { color: inherit; text-decoration: none; }

.entry-content .table-scroll,
.entry-content .responsive-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.entry-content .table-scroll table,
.entry-content .responsive-table-wrapper table {
  display: table !important;
  width: auto !important;
  overflow-x: visible !important;
}
.entry-content .table-scroll table thead,
.entry-content .responsive-table-wrapper table thead { display: table-header-group !important; width: auto !important; }
.entry-content .table-scroll table tbody,
.entry-content .responsive-table-wrapper table tbody { display: table-row-group !important; width: auto !important; }
.entry-content .table-scroll table tr,
.entry-content .responsive-table-wrapper table tr { display: table-row !important; width: auto !important; }
.entry-content .table-scroll table td,
.entry-content .table-scroll table th,
.entry-content .responsive-table-wrapper table td,
.entry-content .responsive-table-wrapper table th {
  display: table-cell !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

@media (max-width: 640px) {
  .entry-content table th:first-child,
  .entry-content table td:first-child { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
  .entry-content ul { padding-left: 1.5em; }
}