/* ============================================================
   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; }

/* ================================================================
   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; }
}