/* =========================================================
   MINIMAL DARK THEME — condensed, same aesthetics
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root{
  color-scheme: light dark;
  --bg:#0b0f14;
  --surface:#0f1620;
  --surface2:#121b26;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --border:rgba(255,255,255,.12);
  --shadow:0 10px 26px rgba(0,0,0,.45);

  --link:#9ecbff;
  --linkHover:#c7ddff;

  --radius:14px;
  --max:920px;

  --font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,"Apple Color Emoji","Segoe UI Emoji";
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f8fa;
    --surface:#fff;
    --surface2:#f2f4f7;
    --text:rgba(10,15,20,.92);
    --muted:rgba(10,15,20,.70);
    --border:rgba(10,15,20,.12);
    --shadow:0 10px 26px rgba(10,15,20,.10);
    --link:#2563eb;
    --linkHover:#1d4ed8;
  }
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;

  /* LA banner background shown through the page margins */
  background-image:url("/assets/la-banner.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  background-attachment:fixed;
}

/* Center + readable width */
.wrapper,.page-content,main,.container,.content{
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  line-height:1.25;
  letter-spacing:-.01em;
  margin:1.1em 0 .55em;
}
h1{ font-size:clamp(1.9rem,3.2vw,2.35rem); }
h2{ font-size:clamp(1.35rem,2.3vw,1.65rem); }
h3{ font-size:1.15rem; }

p{ margin:.6em 0 .95em; color:var(--text); }
small,.muted{ color:var(--muted); }

a{ color:var(--link); text-decoration:none; text-underline-offset:3px; }
a:hover{ color:var(--linkHover); text-decoration:underline; }

/* ---------- Card / Buttons ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-weight:700;
  text-decoration:none !important;
  transition:transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.btn:hover{
  transform:translateY(-1px);
  background:var(--surface2);
  border-color:rgba(255,255,255,.18);
}
.btn:active{ transform:translateY(0); }
.btn-primary{ border-color:rgba(158,203,255,.35); }

/* ---------- Dropdowns (<details>) ---------- */
details{
  margin:0;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  overflow:hidden;
}

details.dropdown-section {
  margin: 0;
}

details.dropdown-section + details.dropdown-section {
  margin-top: 0;
}

details > summary{
  list-style:none;
  cursor:pointer;
  padding:18px 18px;             /* bigger bar */
  font-size:1.05rem;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background 160ms ease;
}
details > summary:hover{
  background:var(--surface2);
}
details > summary::-webkit-details-marker{ display:none; }
details > summary::after{
  content:"▾";
  color:var(--muted);
  transition:transform 160ms ease;
}
details[open] > summary::after{ transform:rotate(180deg); }
details.is-closing > summary::after{ transform:rotate(0deg); }
details[open] > summary{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

/* content padding (works for both wrapped and unwrapped content) */
details > :not(summary){ padding:14px; }
details > div{ padding:16px 18px 18px; }

/* Bullet points stay inside */
details > div ul,
details > div ol,
.page-content ul,
.page-content ol{
  margin-left:0;
  padding-left:1.4rem;
  list-style-position:outside;
}

/* Dropdown internal links/colors remain theme-driven */
details, details *{ color:var(--text); }
details small, details .muted{ color:var(--muted); }
details a{ color:var(--link); }
details a:hover{ color:var(--linkHover); }

/* ---------- Floating close button for open sections ---------- */
.floating-close-btn{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:1100;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-weight:700;
  box-shadow:var(--shadow);
  transition:transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.floating-close-btn:hover{
  transform:translateX(-50%) translateY(-1px);
  background:var(--surface2);
  border-color:rgba(255,255,255,.18);
}
.floating-close-btn:active{
  transform:translateX(-50%) translateY(0);
}
.floating-close-btn:focus-visible{
  outline:2px solid var(--link);
  outline-offset:2px;
}

/* ---------- Images ---------- */
img{
  max-width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
}
.shot{
  display:block;
  margin:14px auto;
  border:1px solid var(--border);
  background:var(--surface);
}
details img{
  display:block;
  margin:14px auto;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
}

/* ---------- Tables ---------- */
table{
  width:100%;
  border-collapse:collapse;
  margin:14px 0;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface);
}
th,td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
th{
  text-align:left;
  font-weight:800;
  color:var(--text);
  background:var(--surface2);
}
tr:last-child td{ border-bottom:none; }

/* ---------- Code ---------- */
code,pre{ font-family:var(--mono); }
code{
  padding:.12em .35em;
  border-radius:8px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
}
pre{
  padding:14px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  overflow-x:auto;
}

/* ---------- Separators / header/footer muted ---------- */
hr{ border:none; height:1px; background:var(--border); margin:22px 0; }
header,footer{ color:rgba(255,255,255,.70); }

/* =========================================================
   STICKY HEADER - Navigation stays at top when scrolling
   ========================================================= */
.site-header,
header.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.92) !important;
  color: #111 !important;
  padding: 0;
  forced-color-adjust: none;
}

.site-header *,
header.site-header *{
  forced-color-adjust: none;
}

/* Give the nav-tabs a solid background so content doesn't show through when scrolling */
.site-header .nav-tabs,
.site-header .site-nav,
.site-header .topbar-nav,
.site-header .header-nav,
.site-header .top-nav,
.site-header .nav-bar{
  background: rgba(255,255,255,0.92) !important;
  color: #111 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ---------- Nav strip (covers .site-nav, .nav-tabs, .topbar-nav) ---------- */
.site-nav,.nav-tabs,.topbar-nav{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:var(--surface);
}
.site-nav a,.nav-tab,.topbar-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  padding:12px 10px;
  font-weight:800;
  text-decoration:none;
  background:transparent;
  color:#111 !important;
}
.site-nav a + a,
.nav-tab + .nav-tab,
.topbar-link + .topbar-link{
  border-left:1px solid var(--border);
}
.site-nav a:hover,
.nav-tab:hover,
.topbar-link:hover{
  background:rgba(240,243,247,0.92) !important;
  color:#000 !important;
  text-decoration:none;
}
.site-nav a[aria-current="page"],
.nav-tab[aria-current="page"]{
  background:rgba(240,243,247,0.92) !important;
  color:#111 !important;
}

/* Mobile nav stacking */
@media (max-width:520px){
  .site-nav,.nav-tabs,.topbar-nav{ grid-template-columns:1fr; }
  .site-nav a + a,
  .nav-tab + .nav-tab,
  .topbar-link + .topbar-link{
    border-left:none;
    border-top:1px solid var(--border);
  }
}

/* ---------- Footer (single definition) ---------- */
.site-footer{
  margin-top:28px;
  padding:18px 0 26px;
  border-top:1px solid var(--border);
}
.footer-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px;
  color:rgba(255,255,255,.70);
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:center;
  justify-content:space-between;
}
.footer-links a{ margin-left:12px; color:rgba(255,255,255,.70); }
.footer-links a:hover{ color:#fff; text-decoration:none; }

/* ---------- Space background readability ---------- */
/* White text for content OUTSIDE dropdowns/cards */
main > :not(details):not(.card),
.page-content > :not(details):not(.card){
  color:rgba(255,255,255,.92);
}
main > :not(details):not(.card) a,
.page-content > :not(details):not(.card) a{ color:#cfe3ff; }
main > :not(details):not(.card) a:hover,
.page-content > :not(details):not(.card) a:hover{ color:#fff; }

/* Keep content centered and show the LA banner on the sides */
.page-content .wrapper,
main .wrapper{
  max-width:980px;
  margin:0 auto;
  background:#fff;
  border-radius:18px;
  padding:32px 28px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
@media (max-width:980px){
  body{ background-attachment:scroll; }
  .page-content .wrapper,
  main .wrapper{
    border-radius:0;
    box-shadow:none;
    padding:22px 16px;
  }
}

/* ---------- Fix: site title stays visible on space ---------- */
.site-title,
.site-title:visited,
.site-title:hover,
.site-title:active{
  color:rgba(255,255,255,.95) !important;
  text-decoration:none !important;
}
.site-header a,
.site-header a:visited,
.site-header nav a,
.site-header .site-nav a,
.site-header .nav-tabs .nav-tab,
.site-header .topbar-nav .topbar-link,
.site-header .header-nav a,
.site-header .top-nav a,
.site-header .nav-bar a{
  color:#111 !important;
}

/* ---------- Fix: nav text readable on white nav strip ---------- */
.site-header .site-nav a,
.site-header .nav-tabs .nav-tab,
.site-header .topbar-nav .topbar-link,
.site-header .topbar-link,
.site-header nav a,
.site-header .header-nav a,
.site-header .top-nav a,
.site-header .nav-bar a{
  color:#111 !important;
}
.site-header .site-nav a:hover,
.site-header .nav-tabs .nav-tab:hover,
.site-header .topbar-nav .topbar-link:hover,
.site-header .topbar-link:hover,
.site-header nav a:hover,
.site-header .header-nav a:hover,
.site-header .top-nav a:hover,
.site-header .nav-bar a:hover{
  color:#000 !important;
}

/* ==============================
   Projects page card title fix
   ============================== */

/* If your cards use .card (or you add it), this covers them */
.card h1, .card h2, .card h3, .card h4,
.project-card h1, .project-card h2, .project-card h3, .project-card h4,
.project-tile h1, .project-tile h2, .project-tile h3, .project-tile h4{
  color: rgba(15,15,18,0.95) !important;
}

/* (Optional) If your "View Project" links are too light on the white cards */
.card a, .project-card a, .project-tile a{
  color: #2563eb !important;
}
.card a:hover, .project-card a:hover, .project-tile a:hover{
  color: #1d4ed8 !important;
}

/* ===== Fix: make text inside the off-white center wrapper dark ===== */
.page-content .wrapper,
main .wrapper{
  color: rgba(15,15,18,0.92) !important;
}

/* =========================================================
   ALL HEADINGS - BLACK AND PROPERLY SIZED (not blue/purple)
   ========================================================= */

/* Force ALL headings inside the wrapper to be BLACK - no gradients */
.page-content .wrapper h1,
.page-content .wrapper h2,
.page-content .wrapper h3,
.page-content .wrapper h4,
main .wrapper h1,
main .wrapper h2,
main .wrapper h3,
main .wrapper h4 {
  color: rgba(15, 15, 18, 0.95) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: rgba(15, 15, 18, 0.95) !important;
  background-clip: unset !important;
}

/* Proper heading sizes - smaller, more reasonable */
.page-content .wrapper h1,
main .wrapper h1 {
  font-size: clamp(1.6rem, 2.8vw, 2rem) !important;
  font-weight: 700;
  margin: 0.8em 0 0.5em;
}

.page-content .wrapper h2,
main .wrapper h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Project card tool-name badges (e.g. "SQL", "Excel") are also <h2> —
   exclude them from the section-title underline */
.project-card-content h2 {
  text-decoration: none !important;
}

.page-content .wrapper h3,
main .wrapper h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem) !important;
  font-weight: 600;
}

.page-content .wrapper h4,
main .wrapper h4 {
  font-size: 1rem !important;
  font-weight: 600;
}

/* Make common text elements inherit the wrapper's dark color */
.page-content .wrapper p,
.page-content .wrapper li,
.page-content .wrapper span,
.page-content .wrapper small,
.page-content .wrapper strong,
.page-content .wrapper em,
.page-content .wrapper .muted,
main .wrapper p,
main .wrapper li,
main .wrapper span,
main .wrapper small,
main .wrapper strong,
main .wrapper em,
main .wrapper .muted{
  color: inherit !important;
}

/* Links inside the wrapper: keep them readable on the light background */
.page-content .wrapper a,
main .wrapper a{
  color: #1d4ed8 !important;
}
.page-content .wrapper a:hover,
main .wrapper a:hover{
  color: #0f2f8a !important;
}

/* =========================================================
   HOMEPAGE HERO SECTION — Clean, centered, BLACK titles
   ========================================================= */

/* Center the name on homepage - BLACK, not gradient */
.page-content .wrapper h1:first-child,
main .wrapper h1:first-child {
  text-align: center;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0.5em 0 0.3em;
  color: rgba(15, 15, 18, 0.95) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: rgba(15, 15, 18, 0.95) !important;
  background-clip: unset !important;
}

/* Center the subtitle (Data Analyst) - also black */
.page-content .wrapper h1:first-child + h3,
main .wrapper h1:first-child + h3 {
  text-align: center;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem) !important;
  font-weight: 600;
  color: rgba(15, 15, 18, 0.80) !important;
  margin: 0 0 0.8em;
  letter-spacing: 0.01em;
}

/* Center the description paragraph below subtitle */
.page-content .wrapper h1:first-child + h3 + p,
main .wrapper h1:first-child + h3 + p {
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(15, 15, 18, 0.80) !important;
}

/* Modern tech font stack */
body {
  font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 
               'Segoe UI', system-ui, sans-serif;
}

code, pre {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 
               'Cascadia Code', Consolas, monospace;
}

/* =========================================================
   Clickable Project Cards (Projects page)
   - Entire card is a link
   - Hover matches header buttons + dropdown summaries
   ========================================================= */

.grid{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:14px;
  align-items: stretch;
}

.col-6{
  flex: 1 1 calc(50% - 16px);
  display:flex;
}
.col-12{ flex: 1 1 100%; }

@media (max-width: 760px){
  .col-6{ flex-basis:100%; }
}

/* Make the entire card clickable */
.project-card-link{
  display:block;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  text-decoration:none !important;
  height:100%;
  min-height:240px;

  /* same “lift + highlight” feel as .btn and <summary> hover */
  transition:transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.project-card-link:hover{
  transform:translateY(-1px);
  background:var(--surface2);
  border-color:rgba(255,255,255,.18);
  text-decoration:none !important;
}

.project-card-link:active{
  transform:translateY(0);
}

/* Ensure text doesn’t turn link-blue inside the card */
.project-card-link,
.project-card-link *{
  color: inherit !important;
}

/* Keep headings readable on the light center wrapper */
.project-card-link h1,
.project-card-link h2,
.project-card-link h3,
.project-card-link h4{
  color: rgba(15,15,18,0.95) !important;
}

/* Optional: small “Open project →” cue */
.project-card-cta{
  margin-top:auto;
  font-weight:800;
  color:#2563eb !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:170px;
  padding:10px 16px;
  text-align:center;
}

.project-card-link:hover .project-card-cta{
  color:#1d4ed8 !important;
}

/* =========================================================
   Project Cards with Background Images
   ========================================================= */

/* Base styles for cards with background images */
.sql-card,
.excel-card,
.tableau-card,
.powerbi-card,
.college-card,
.python-card,
.r-card,
.julius-card,
.looker-card,
.pipeline-card,
.supplychain-card,
.ml-card,
.car-card {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 280px;
  overflow: hidden;
}

/* Individual card backgrounds */
.sql-card {
  background-image: url("../sql-data-cleaning-project-card-image.png") !important;
}

.sql-ecommerce-card {
  background-image: url("../sql-project-card-image.png") !important;
}

.excel-card {
  background-image: url("../excel-project-card-image.png") !important;
}

.tableau-card {
  background-image: url("../tableau-project-card-image.png") !important;
}

.powerbi-card {
  background-image: url("../powerbi-project-card-image.png") !important;
}

.python-card {
  background:
    linear-gradient(rgba(20, 20, 40, 0.65), rgba(20, 20, 40, 0.65)),
    url("/assets/python-project-card-image.png") !important;
}

.r-card {
  background-image: url("../r-project-card-image.png") !important;
}

.julius-card {
  background-image: url("../juliusai-project-card-image.png") !important;
}

.looker-card {
  background-image: url("../cohort-analysis-project-card-image.png") !important;
}

.pipeline-card {
  background-image: url("../pipeline-project-card-image.png") !important;
}

.supplychain-card {
  background-image: url("../supply-chain-project-card-image.png") !important;
}

.ml-card {
  background-image: url("../ml-churn-prediction-project-card-image.png") !important;
}

.college-card {
  background-image: url("/projects/college-match-finder/assets/hero.png") !important;
}

.car-card {
  background-image: url("/projects/car-catalog/assets/home-light.png") !important;
}

/* Colored overlay using pseudo-element */
.sql-card::before,
.excel-card::before,
.tableau-card::before,
.powerbi-card::before,
.python-card::before,
.r-card::before,
.college-card::before,
.julius-card::before,
.looker-card::before,
.pipeline-card::before,
.supplychain-card::before,
.ml-card::before,
.car-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--radius);
  z-index: 1;
  transition: background 160ms ease;
}

/* SQL card – MySQL blue & orange overlay */
.sql-card::before {
  background: linear-gradient(
    to bottom,
    rgba(0, 117, 143, 0.62) 0%,
    rgba(242, 145, 17, 0.75) 100%
  );
}

/* SQL ecommerce card – BigQuery blue overlay */
.sql-ecommerce-card::before {
  background: linear-gradient(
    to bottom,
    rgba(30, 75, 155, 0.75) 0%,
    rgba(30, 75, 155, 0.88) 100%
  );
}

/* Excel card – green overlay */
.excel-card::before {
  background: linear-gradient(
    to bottom,
    rgba(15, 75, 35, 0.58) 0%,
    rgba(15, 75, 35, 0.73) 100%
  );
}

/* Tableau card – darker blue overlay */
.tableau-card::before {
  background: linear-gradient(
    to bottom,
    rgba(8, 20, 80, 0.58) 0%,
    rgba(8, 20, 80, 0.73) 100%
  );
}

/* Power BI card – yellow/orange overlay */
.powerbi-card::before {
  background: linear-gradient(
    to bottom,
    rgba(242, 200, 17, 0.65) 0%,
    rgba(245, 158, 11, 0.80) 100%
  );
}

/* Python card – blue/yellow overlay */
.python-card::before {
  background: linear-gradient(
    to bottom,
    rgba(48, 105, 152, 0.60) 0%,
    rgba(255, 212, 59, 0.75) 100%
  );
}

/* R card – blue/grey overlay */
.r-card::before {
  background: linear-gradient(
    to bottom,
    rgba(30, 85, 175, 0.65) 0%,
    rgba(201, 201, 201, 0.78) 100%
  );
}

/* Julius AI card – teal/purple overlay */
.julius-card::before {
  background: linear-gradient(
    to bottom,
    rgba(20, 130, 130, 0.62) 0%,
    rgba(90, 50, 160, 0.78) 100%
  );
}

/* Looker Studio card – Google blue overlay */
.looker-card::before {
  background: linear-gradient(
    to bottom,
    rgba(26, 115, 232, 0.62) 0%,
    rgba(24, 90, 188, 0.78) 100%
  );
}

/* API Pipeline card – red top, blue bottom overlay */
.pipeline-card::before {
  background: linear-gradient(
    to bottom,
    rgba(160, 25, 30, 0.62) 0%,
    rgba(20, 50, 120, 0.72) 100%
  );
}

/* Supply Chain card – Oracle red overlay */
.supplychain-card::before {
  background: linear-gradient(
    to bottom,
    rgba(199, 70, 52, 0.62) 0%,
    rgba(120, 20, 15, 0.78) 100%
  );
}

/* ML Churn Prediction card – dark blue overlay */
.ml-card::before {
  background: linear-gradient(
    to bottom,
    rgba(15, 52, 96, 0.62) 0%,
    rgba(26, 26, 46, 0.78) 100%
  );
}

/* College Match Finder card – green overlay */
.college-card::before {
  background: linear-gradient(
    to bottom,
    rgba(15, 70, 45, 0.62) 0%,
    rgba(8, 40, 25, 0.78) 100%
  );
}

/* Car Catalog card – dark navy overlay */
.car-card::before {
  background: linear-gradient(
    to bottom,
    rgba(20, 30, 50, 0.62) 0%,
    rgba(10, 18, 35, 0.82) 100%
  );
}

/* Slightly lighter overlay on hover */
.sql-card:hover::before {
  background: linear-gradient(
    to bottom,
    rgba(0, 117, 143, 0.54) 0%,
    rgba(242, 145, 17, 0.67) 100%
  );
}

.sql-ecommerce-card:hover::before {
  background: linear-gradient(
    to bottom,
    rgba(30, 75, 155, 0.62) 0%,
    rgba(30, 75, 155, 0.75) 100%
  );
}

.excel-card:hover::before {
  background: linear-gradient(
    to bottom,
    rgba(15, 75, 35, 0.50) 0%,
    rgba(15, 75, 35, 0.65) 100%
  );
}

.tableau-card:hover::before {
  background: linear-gradient(
    to bottom,
    rgba(8, 20, 80, 0.50) 0%,
    rgba(8, 20, 80, 0.65) 100%
  );
}

.powerbi-card:hover::before {
  background: linear-gradient(
    to bottom,
    rgba(242, 200, 17, 0.57) 0%,
    rgba(245, 158, 11, 0.72) 100%
  );
}

.python-card:hover::before {
  background: linear-gradient(
    to bottom,
    rgba(48, 105, 152, 0.52) 0%,
    rgba(255, 212, 59, 0.68) 100%
  );
}

.r-card:hover::before {
  background: linear-gradient(
    to bottom,
    rgba(30, 85, 175, 0.57) 0%,
    rgba(201, 201, 201, 0.70) 100%
  );
}

.julius-card:hover::before {
  background: linear-gradient(
    to bottom,
    rgba(20, 130, 130, 0.54) 0%,
    rgba(90, 50, 160, 0.70) 100%
  );
}

.looker-card:hover::before {
  background: linear-gradient(
    to bottom,
    rgba(26, 115, 232, 0.54) 0%,
    rgba(24, 90, 188, 0.70) 100%
  );
}

.pipeline-card:hover::before {
  background: linear-gradient(
    to bottom,
    rgba(160, 25, 30, 0.52) 0%,
    rgba(20, 50, 120, 0.62) 100%
  );
}

.supplychain-card:hover::before {
  background: linear-gradient(
    to bottom,
    rgba(199, 70, 52, 0.54) 0%,
    rgba(120, 20, 15, 0.70) 100%
  );
}

.ml-card:hover::before {
  background: linear-gradient(
    to bottom,
    rgba(15, 52, 96, 0.54) 0%,
    rgba(26, 26, 46, 0.70) 100%
  );
}

.college-card:hover::before {
  background: linear-gradient(
    to bottom,
    rgba(15, 70, 45, 0.54) 0%,
    rgba(8, 40, 25, 0.70) 100%
  );
}

.car-card:hover::before {
  background: linear-gradient(
    to bottom,
    rgba(20, 30, 50, 0.54) 0%,
    rgba(10, 18, 35, 0.74) 100%
  );
}

/* Content positioning above the overlay */
.project-card-content {
  position: relative;
  z-index: 2;
  display:flex;
  flex-direction:column;
  height:100%;
}

/* White text for cards with background images */
.sql-card .project-card-content,
.excel-card .project-card-content,
.tableau-card .project-card-content,
.powerbi-card .project-card-content,
.python-card .project-card-content,
.r-card .project-card-content,
.julius-card .project-card-content,
.looker-card .project-card-content,
.pipeline-card .project-card-content,
.supplychain-card .project-card-content,
.ml-card .project-card-content,
.college-card .project-card-content,
.car-card .project-card-content,
.sql-card .project-card-content *,
.excel-card .project-card-content *,
.tableau-card .project-card-content *,
.powerbi-card .project-card-content *,
.python-card .project-card-content *,
.r-card .project-card-content *,
.julius-card .project-card-content *,
.looker-card .project-card-content *,
.pipeline-card .project-card-content *,
.supplychain-card .project-card-content *,
.ml-card .project-card-content *,
.college-card .project-card-content *,
.car-card .project-card-content * {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Tool name (h2) styling - high specificity to override earlier rules */
.project-card-link.sql-card .project-card-content h2,
.project-card-link.excel-card .project-card-content h2,
.project-card-link.tableau-card .project-card-content h2,
.project-card-link.powerbi-card .project-card-content h2,
.project-card-link.python-card .project-card-content h2,
.project-card-link.r-card .project-card-content h2,
.project-card-link.julius-card .project-card-content h2,
.project-card-link.pipeline-card .project-card-content h2,
.project-card-link.looker-card .project-card-content h2,
.project-card-link.supplychain-card .project-card-content h2,
.project-card-link.ml-card .project-card-content h2,
.project-card-link.college-card .project-card-content h2,
.project-card-link.car-card .project-card-content h2 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 0 0.3em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Project title (h3) styling - high specificity to override earlier rules */
.project-card-link.sql-card .project-card-content h3,
.project-card-link.excel-card .project-card-content h3,
.project-card-link.tableau-card .project-card-content h3,
.project-card-link.powerbi-card .project-card-content h3,
.project-card-link.python-card .project-card-content h3,
.project-card-link.r-card .project-card-content h3,
.project-card-link.julius-card .project-card-content h3,
.project-card-link.pipeline-card .project-card-content h3,
.project-card-link.looker-card .project-card-content h3,
.project-card-link.supplychain-card .project-card-content h3,
.project-card-link.ml-card .project-card-content h3,
.project-card-link.college-card .project-card-content h3,
.project-card-link.car-card .project-card-content h3 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 0.5em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Description paragraph */
.sql-card .project-card-content p,
.excel-card .project-card-content p,
.tableau-card .project-card-content p,
.powerbi-card .project-card-content p,
.python-card .project-card-content p,
.r-card .project-card-content p,
.julius-card .project-card-content p,
.pipeline-card .project-card-content p,
.looker-card .project-card-content p,
.supplychain-card .project-card-content p,
.ml-card .project-card-content p,
.college-card .project-card-content p,
.car-card .project-card-content p {
  color: rgba(255, 255, 255, 0.90) !important;
  font-size: 0.95rem;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* CTA link styling for image cards */
.sql-card .project-card-cta,
.excel-card .project-card-cta,
.tableau-card .project-card-cta,
.powerbi-card .project-card-cta,
.python-card .project-card-cta,
.r-card .project-card-cta,
.julius-card .project-card-cta,
.pipeline-card .project-card-cta,
.looker-card .project-card-cta,
.supplychain-card .project-card-cta,
.ml-card .project-card-cta,
.college-card .project-card-cta,
.car-card .project-card-cta {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.sql-card:hover .project-card-cta,
.excel-card:hover .project-card-cta,
.tableau-card:hover .project-card-cta,
.powerbi-card:hover .project-card-cta,
.python-card:hover .project-card-cta,
.r-card:hover .project-card-cta,
.julius-card:hover .project-card-cta,
.pipeline-card:hover .project-card-cta,
.looker-card:hover .project-card-cta,
.supplychain-card:hover .project-card-cta,
.ml-card:hover .project-card-cta,
.college-card:hover .project-card-cta,
.car-card:hover .project-card-cta {
  color: #fff !important;
}

/* ── FP&A Financial Model card (Skechers) — image background + blue overlay ── */
.fpa-card {
  position: relative;
  background-image: url("/projects/skechers-fpa-model/images/kpi-dashboard.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 280px;
  overflow: hidden;
}

/* Blue overlay (Skechers blue, top → deeper blue bottom) so white text stays readable */
.fpa-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--radius);
  z-index: 1;
  transition: background 160ms ease;
  background: linear-gradient(
    to bottom,
    rgba(0, 86, 179, 0.66) 0%,
    rgba(10, 35, 92, 0.82) 100%
  );
}

.fpa-card:hover::before {
  background: linear-gradient(
    to bottom,
    rgba(0, 86, 179, 0.58) 0%,
    rgba(10, 35, 92, 0.74) 100%
  );
}

/* Card content sits above the overlay */
.fpa-card .project-card-content {
  position: relative;
  z-index: 2;
}

/* All content text white (matches the other image cards) */
.fpa-card .project-card-content,
.fpa-card .project-card-content * {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Tool name (h2) — high specificity to beat the earlier dark-heading rule */
.project-card-link.fpa-card .project-card-content h2 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 0 0.3em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Project title (h3) — high specificity */
.project-card-link.fpa-card .project-card-content h3 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 0.5em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Description (p) */
.fpa-card .project-card-content p {
  color: rgba(255, 255, 255, 0.90) !important;
  font-size: 0.95rem;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* CTA ("Open project →") */
.fpa-card .project-card-cta {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.fpa-card:hover .project-card-cta {
  color: #fff !important;
}

/* ── College Match Finder card ── */
.college-card {
  background: linear-gradient(135deg, #0a2e1a 0%, #1a4a3a 40%, #2d6b4a 100%);
}

/* ── Coming Soon shared styles ── */
.coming-soon-card {
  cursor: default;
  position: relative;
  opacity: 0.85;
}

.coming-soon-card:hover {
  transform: none;
  box-shadow: none;
}

.coming-soon-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* =========================================================
   SKIP NAVIGATION — accessible shortcut, visible on :focus
   ========================================================= */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 10px 18px;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--link);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  z-index: 9999;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 8px;
}


/* =========================================================
   BACK TO PROJECTS — link at top of individual project pages
   ========================================================= */
.back-to-projects {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 14px;
  min-height: 44px; /* mobile touch-target minimum */
}

/* =========================================================
   BACK-TO-TOP BUTTON — fixed, appears after 400px scroll
   ========================================================= */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1050;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.15s ease;
  cursor: pointer;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}
.back-to-top:hover {
  transform: translateY(-2px);
  background: var(--surface2);
}

/* ===== Dropdown bars: full-width, panel-colored, thin separators ===== */
:root {
  --panel-bg: rgba(15, 22, 32, 0.98);
  --divider: rgba(255, 255, 255, 0.12);
}

@media (prefers-color-scheme: light) {
  :root {
    --panel-bg: rgba(245, 247, 250, 0.98);
    --divider: rgba(0, 0, 0, 0.12);
  }
}

.page-content .wrapper details,
main .wrapper details,
details.dropdown-section {
  width: 100%;
  margin: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  padding-left: 0;
  padding-right: 0;
  border: 0;
  border-bottom: 1px solid var(--divider);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.page-content .wrapper details:last-of-type,
main .wrapper details:last-of-type,
details.dropdown-section:last-of-type {
  border-bottom: 1px solid var(--divider);
}

.page-content .wrapper details > summary,
main .wrapper details > summary,
details.dropdown-section > summary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel-bg);
  padding: 18px 24px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--divider);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  list-style: none;
}

.page-content .wrapper details > summary::-webkit-details-marker,
main .wrapper details > summary::-webkit-details-marker,
details.dropdown-section > summary::-webkit-details-marker {
  display: none;
}

.page-content .wrapper details > summary::after,
main .wrapper details > summary::after,
details.dropdown-section > summary::after {
  margin-left: auto;
}

.page-content .wrapper details > div,
main .wrapper details > div,
details.dropdown-section .dropdown-content {
  background: var(--panel-bg);
  padding: 0 20px 18px 20px;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.page-content .wrapper details > summary:hover,
main .wrapper details > summary:hover,
details.dropdown-section > summary:hover {
  filter: brightness(0.985);
}

/* When details is open, keep the border on summary */
.page-content .wrapper details[open] > summary,
main .wrapper details[open] > summary,
details.dropdown-section[open] > summary {
  border-bottom: 1px solid var(--divider);
}

/* =========================================================
   FOCUS STYLES — visible ring for keyboard nav (WCAG 2.1 AA)
   ========================================================= */
a:focus-visible,
button:focus-visible,
details > summary:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
/* Nav bar uses light background — keep focus ring readable */
.site-header .nav-tab:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.back-to-top:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* ===== Slim Header Navigation Bar ===== */

header {
  padding: 0;
  margin: 0;
}

header nav {
  display: flex;
  align-items: stretch;
  height: 50px;   /* reduced from ~70px */
  margin: 0;
  padding: 0;
}

header nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 35px;   /* horizontal only */
  font-size: 15px;   /* slightly smaller text */
}

/* ===== Full-Width Dropdown Bars (Project Pages) ===== */

/* Remove horizontal padding from dropdown summary bars */
.project-section details summary {
  margin-left: -40px;   /* must match container horizontal padding */
  margin-right: -40px;  /* must match container horizontal padding */
  padding: 18px 40px;   /* restore inner padding */
  width: calc(100% + 80px);
  box-sizing: border-box;
  border-bottom: 1px solid #dcdcdc;
}

/* Remove rounded look */
.project-section details summary {
  border-radius: 0;
}

/* Remove extra gap between sections */
.project-section details {
  margin: 0;
}

/* ===== Remove extra transparent space around the header nav ===== */
header,
.site-header,
.header,
.top-header,
.nav-wrapper,
.nav-container,
.nav-bar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: normal !important;
}

/* Ensure the nav itself doesn’t add extra vertical spacing */
header nav,
.site-header nav {
  margin: 0 !important;
  padding: 0 !important;
}

/* If there is a “floating bar” background container, remove its extra padding */
header .nav-inner,
.site-header .nav-inner,
header .navbar,
.site-header .navbar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

/* ===== Fix project dropdown extra gap + extra line under summary ===== */

/* Target all <details><summary> dropdowns used on project pages */
details summary {
  margin: 0 !important;
  padding-top: 16px;
  padding-bottom: 16px;
  line-height: 1.2;
  border-bottom: 0 !important;   /* removes the extra line under the title bar */
  box-shadow: none !important;
  background-image: none !important;
}

/* If any theme adds a pseudo-element line under summary, kill it */
details summary::after,
details summary::before {
  content: none !important;
  display: none !important;
}

/* Remove the default top-gap that often comes from the first element inside the open panel */
details > :not(summary):first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Also remove top margin on common elements inside dropdown content */
details > :not(summary) p:first-child,
details > :not(summary) ul:first-child,
details > :not(summary) ol:first-child,
details > :not(summary) h1:first-child,
details > :not(summary) h2:first-child,
details > :not(summary) h3:first-child {
  margin-top: 0 !important;
}

/* ===== Remove white strip under opened dropdown summaries ===== */

/* Remove any default spacing that creates a "blank bar" right under the summary */
details[open] > summary + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* If your dropdown content is wrapped in a div, this catches it too */
details[open] > summary + div {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Also remove top spacing on the first actual content element inside the dropdown */
details[open] > :not(summary):first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Common first elements that often add a top margin */
details[open] > :not(summary) > p:first-child,
details[open] > :not(summary) > ul:first-child,
details[open] > :not(summary) > ol:first-child,
details[open] > :not(summary) > h1:first-child,
details[open] > :not(summary) > h2:first-child,
details[open] > :not(summary) > h3:first-child {
  margin-top: 0 !important;
}

/* =========================================================
   DARK MODE OVERRIDES
   When the user's OS/browser is set to dark mode, invert the
   header bar, content wrapper, and text colors accordingly.
   ========================================================= */
@media (prefers-color-scheme: dark) {

  /* --- Header bar: black background, white text --- */
  .site-header,
  header.site-header {
    background: rgba(0, 0, 0, 0.95) !important;
    color: #fff !important;
  }

  .site-header .nav-tabs,
  .site-header .site-nav,
  .site-header .topbar-nav,
  .site-header .header-nav,
  .site-header .top-nav,
  .site-header .nav-bar {
    background: rgba(0, 0, 0, 0.95) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }

  .site-nav,
  .nav-tabs,
  .topbar-nav {
    background: #000 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
  }

  /* Nav link text: white */
  .site-nav a,
  .nav-tab,
  .topbar-link,
  .site-header a,
  .site-header a:visited,
  .site-header nav a,
  .site-header .site-nav a,
  .site-header .nav-tabs .nav-tab,
  .site-header .topbar-nav .topbar-link,
  .site-header .header-nav a,
  .site-header .top-nav a,
  .site-header .nav-bar a {
    color: #fff !important;
  }

  /* Nav link hover */
  .site-nav a:hover,
  .nav-tab:hover,
  .topbar-link:hover,
  .site-header .site-nav a:hover,
  .site-header .nav-tabs .nav-tab:hover,
  .site-header .topbar-nav .topbar-link:hover,
  .site-header .topbar-link:hover,
  .site-header nav a:hover,
  .site-header .header-nav a:hover,
  .site-header .top-nav a:hover,
  .site-header .nav-bar a:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
  }

  /* Active page nav link */
  .site-nav a[aria-current="page"],
  .nav-tab[aria-current="page"] {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
  }

  /* Nav link separator borders */
  .site-nav a + a,
  .nav-tab + .nav-tab,
  .topbar-link + .topbar-link {
    border-left-color: rgba(255, 255, 255, 0.15) !important;
  }

  /* --- Content wrapper: black background, white text --- */
  .page-content .wrapper,
  main .wrapper {
    background: rgba(0, 0, 0, 0.95) !important;
    color: rgba(255, 255, 255, 0.92) !important;
  }

  /* Headings inside wrapper: white */
  .page-content .wrapper h1,
  .page-content .wrapper h2,
  .page-content .wrapper h3,
  .page-content .wrapper h4,
  main .wrapper h1,
  main .wrapper h2,
  main .wrapper h3,
  main .wrapper h4 {
    color: rgba(255, 255, 255, 0.95) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  }

  /* Homepage hero name */
  .page-content .wrapper h1:first-child,
  main .wrapper h1:first-child {
    color: rgba(255, 255, 255, 0.95) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  }

  /* Subtitle and description */
  .page-content .wrapper h1:first-child + h3,
  main .wrapper h1:first-child + h3 {
    color: rgba(255, 255, 255, 0.80) !important;
  }

  .page-content .wrapper h1:first-child + h3 + p,
  main .wrapper h1:first-child + h3 + p {
    color: rgba(255, 255, 255, 0.80) !important;
  }

  /* Body text inside wrapper: white */
  .page-content .wrapper p,
  .page-content .wrapper li,
  .page-content .wrapper span,
  .page-content .wrapper small,
  .page-content .wrapper strong,
  .page-content .wrapper em,
  .page-content .wrapper .muted,
  main .wrapper p,
  main .wrapper li,
  main .wrapper span,
  main .wrapper small,
  main .wrapper strong,
  main .wrapper em,
  main .wrapper .muted {
    color: inherit !important;
  }

  /* Links inside wrapper in dark mode */
  .page-content .wrapper a,
  main .wrapper a {
    color: #9ecbff !important;
  }
  .page-content .wrapper a:hover,
  main .wrapper a:hover {
    color: #c7ddff !important;
  }

  /* --- Project cards: dark background, white text --- */
  .project-card-link {
    background-color: var(--surface) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  .project-card-link:hover {
    background-color: var(--surface2) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
  }

  .project-card-link,
  .project-card-link * {
    color: rgba(255, 255, 255, 0.92) !important;
  }

  .project-card-link h1,
  .project-card-link h2,
  .project-card-link h3,
  .project-card-link h4 {
    color: rgba(255, 255, 255, 0.95) !important;
  }

  /* Card title fix classes */
  .card h1, .card h2, .card h3, .card h4,
  .project-card h1, .project-card h2, .project-card h3, .project-card h4,
  .project-tile h1, .project-tile h2, .project-tile h3, .project-tile h4 {
    color: rgba(255, 255, 255, 0.95) !important;
  }

  .card a, .project-card a, .project-tile a {
    color: #9ecbff !important;
  }
  .card a:hover, .project-card a:hover, .project-tile a:hover {
    color: #c7ddff !important;
  }

  /* Footer links in dark mode */
  .footer-links a {
    color: rgba(255, 255, 255, 0.70) !important;
  }
  .footer-links a:hover {
    color: #fff !important;
  }
}

/* =========================================================
   AUTOMATED SYSTEMS — reusable components
   Used by Bot Bought and the upcoming news / weather pipeline
   pages. Includes: _includes/tech-badges.html,
   _includes/pipeline-diagram.html, _includes/project-callout.html
   ========================================================= */

/* Section heading on the Projects page */
.page-content .wrapper h2.projects-section-heading,
main .wrapper h2.projects-section-heading {
  margin: 8px 0 4px;
}

/* Space between one section's grid and the next section's heading */
.page-content .wrapper .grid + h2.projects-section-heading,
main .wrapper .grid + h2.projects-section-heading {
  margin-top: 36px;
}

/* A lone last card in a row (odd card count) keeps the normal half width
   instead of stretching across the grid. Also covers a single-card grid. */
.grid > .col-6:last-child:nth-child(odd) {
  flex-grow: 0;
  flex-basis: calc(50% - 8px); /* same width as a paired card (half minus half the 16px gap) */
}

@media (max-width: 760px){
  .grid > .col-6:last-child:nth-child(odd) { flex-basis: 100%; }
}

/* ---- Card: gradient background, no image ----
   Add a color modifier per project, e.g.
   .newsbot-card { --system-card-gradient: linear-gradient(...); } */
.botbought-card {
  --system-card-gradient: linear-gradient(135deg, #0b1a2b 0%, #0f3b4a 50%, #13706b 100%);
}
.newsbot-card { --system-card-gradient: linear-gradient(135deg, #1f0b12 0%, #4a1522 50%, #8a2b2b 100%); }
.wxbot-card { --system-card-gradient: linear-gradient(135deg, #0b1530 0%, #1d3b7a 50%, #3b6fb6 100%); }

.project-card-link.system-card,
.project-card-link.system-card:hover {
  background-image: var(--system-card-gradient, linear-gradient(135deg, #0b1a2b 0%, #1e3a5f 100%)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  min-height: 280px;
}

.project-card-link.system-card:hover {
  filter: brightness(1.1);
}

.project-card-link.system-card .project-card-content h2 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 800;
  font-size: 1.1rem !important;
  margin: 0 0 0.3em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.project-card-link.system-card .project-card-content h3 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 700;
  font-size: 1.25rem !important;
  margin: 0 0 0.5em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.project-card-link.system-card .project-card-content p {
  color: rgba(255, 255, 255, 0.90) !important;
  font-size: 0.95rem;
  line-height: 1.5;
}

.project-card-link.system-card .project-card-cta,
.project-card-link.system-card:hover .project-card-cta {
  color: #fff !important;
}

/* ---- Tech badges ---- */
.page-content .wrapper ul.tech-badges,
main .wrapper ul.tech-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 4px 0 16px;
  padding: 0;
}

.tech-badges li {
  margin: 0;
  padding: 4px 12px;
  border: 1px solid rgba(15, 15, 18, 0.15);
  border-radius: 999px;
  background: #f2f4f7;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
}

/* ---- Callout ---- */
.project-callout {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin: 0 0 22px;
  padding: 12px 16px;
  border: 1px solid rgba(180, 120, 0, 0.35);
  border-left: 4px solid #b47800;
  border-radius: 8px;
  background: #fff8e6;
  color: rgba(15, 15, 18, 0.92);
  font-weight: 600;
}

/* ---- Pipeline diagram ---- */
.pipeline-flow {
  margin: 16px 0 8px;
}

.pipeline-flow ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.pipeline-flow li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--divider);
  border-top: 3px solid #13706b;
  border-radius: 10px;
  background: var(--surface);
}

/* Arrow between stages (points right on wide screens) */
.pipeline-flow li:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  color: #13706b;
}

.pipeline-step {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.7;
}

.pipeline-detail {
  font-size: 0.85rem;
  line-height: 1.45;
  opacity: 0.85;
}

/* Stage not built yet (status: planned) */
.pipeline-flow li.is-planned {
  border-style: dashed;
  border-top: 3px dashed rgba(120, 120, 130, 0.6);
  background: transparent;
  opacity: 0.75;
}

.pipeline-tag {
  align-self: flex-start;
  padding: 1px 8px;
  border: 1px dashed currentColor;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pipeline-flow figcaption {
  margin-top: 16px;
  font-size: 0.92rem;
  opacity: 0.85;
}

/* No arrow off the end of a row (4 stages per row) */
.pipeline-flow li:nth-child(4n)::after {
  content: none;
}

/* Stack vertically on narrow screens; arrows point down */
@media (max-width: 760px) {
  .pipeline-flow ol {
    grid-template-columns: 1fr;
  }
  .pipeline-flow li:not(:last-child)::after {
    content: "↓";
    right: auto;
    left: 50%;
    top: auto;
    bottom: -20px;
    transform: translateX(-50%);
  }
}

/* ---- Results tables: right-align numbers ---- */
.results-table td:not(:first-child),
.results-table th:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.results-table td[colspan] {
  text-align: center;
  white-space: normal;
}

/* Let numeric cells wrap on phones */
@media (max-width: 760px) {
  .results-table td:not(:first-child),
  .results-table th:not(:first-child) {
    white-space: normal;
  }
}

@media (prefers-color-scheme: dark) {
  .tech-badges li {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
  }
  .project-callout {
    background: rgba(180, 120, 0, 0.15);
    border-color: rgba(255, 196, 64, 0.35);
    border-left-color: #e0a000;
    color: rgba(255, 255, 255, 0.92);
  }
  .pipeline-flow li {
    border-top-color: #2fb5a6;
  }
  .pipeline-flow li:not(:last-child)::after {
    color: #2fb5a6;
  }
}

/* =========================================================
   HOMEPAGE HERO — small photo on the left, intro on the right
   ========================================================= */
.home-hero {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 8px 0 28px;
}

.home-hero-photo {
  flex: 0 0 auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 6px 18px rgba(15, 15, 18, 0.18);
}

.home-hero-text {
  flex: 1 1 auto;
  min-width: 0;
}

.page-content .wrapper .home-hero h1,
main .wrapper .home-hero h1 {
  text-align: left;
  margin: 0 0 0.15em;
}

.page-content .wrapper .home-hero-role,
main .wrapper .home-hero-role {
  margin: 0 0 0.5em;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1d4ed8 !important;
}

.page-content .wrapper .home-hero-tagline,
main .wrapper .home-hero-tagline {
  margin: 0 0 1.1em;
  max-width: 520px;
  color: rgba(15, 15, 18, 0.75) !important;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-content .wrapper .home-hero-actions .btn,
main .wrapper .home-hero-actions .btn {
  padding: 9px 22px;
  font-size: 0.98rem;
  background: #fff;
  border: 1px solid rgba(15, 15, 18, 0.22);
  color: rgba(15, 15, 18, 0.9) !important;
}

.page-content .wrapper .home-hero-actions .btn:hover,
main .wrapper .home-hero-actions .btn:hover {
  background: #f2f4f7;
  border-color: rgba(15, 15, 18, 0.35);
}

.page-content .wrapper .home-hero-actions .btn-primary,
main .wrapper .home-hero-actions .btn-primary {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff !important;
}

.page-content .wrapper .home-hero-actions .btn-primary:hover,
main .wrapper .home-hero-actions .btn-primary:hover {
  background: #1e40af;
  border-color: #1e40af;
  color: #fff !important;
}

/* Phones: stack and center */
@media (max-width: 600px) {
  .home-hero {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .home-hero-photo {
    width: 128px;
    height: 128px;
  }
  .page-content .wrapper .home-hero h1,
  main .wrapper .home-hero h1 {
    text-align: center;
  }
  .page-content .wrapper .home-hero-tagline,
  main .wrapper .home-hero-tagline {
    margin-left: auto;
    margin-right: auto;
  }
  .home-hero-actions {
    justify-content: center;
  }
}

@media (prefers-color-scheme: dark) {
  .home-hero-photo {
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  }
  .page-content .wrapper .home-hero-role,
  main .wrapper .home-hero-role {
    color: #9ecbff !important;
  }
  .page-content .wrapper .home-hero-tagline,
  main .wrapper .home-hero-tagline {
    color: rgba(255, 255, 255, 0.78) !important;
  }
  .page-content .wrapper .home-hero-actions .btn,
  main .wrapper .home-hero-actions .btn {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.92) !important;
  }
  .page-content .wrapper .home-hero-actions .btn:hover,
  main .wrapper .home-hero-actions .btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.5);
  }
  .page-content .wrapper .home-hero-actions .btn-primary,
  main .wrapper .home-hero-actions .btn-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff !important;
  }
  .page-content .wrapper .home-hero-actions .btn-primary:hover,
  main .wrapper .home-hero-actions .btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
  }
}