/* carbids.ai — light theme (AutoTrader-style) */

:root{
  color-scheme: light;

  /* Surfaces */
  --c-bg: #ffffff;
  --c-fg: #1a2332;
  --c-fg-soft: #2b3645;
  --c-muted: #6b7689;
  --c-border: #e5e8ee;
  --c-border-2: #eef0f4;
  --c-surface: #f8f9fb;
  --c-surface-2: #f1f3f7;

  /* Brand — pulled from logo: teal primary, navy secondary */
  --c-primary: #00c2a8;         /* teal "Bids" / car icon — main brand */
  --c-primary-600: #00a991;
  --c-primary-700: #008d79;
  --c-primary-50:  #e6faf7;

  --c-secondary: #1a2332;       /* navy "Car" — text + dark surfaces */
  --c-secondary-600: #0f1a2c;
  --c-secondary-50: #eef1f6;

  --c-warning: #f59e0b;
  --c-danger:  #dc2626;
  --c-success: #16a34a;

  --c-deal-great:  #16a34a;
  --c-deal-good:   #65a30d;
  --c-deal-fair:   #f59e0b;
  --c-deal-high:   #ea580c;
  --c-deal-over:   #dc2626;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px;

  --shadow-1: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-2: 0 4px 14px rgba(16,24,40,.06);
  --shadow-3: 0 16px 40px rgba(16,24,40,.10);

  --container: 1200px;

  --t-h1: clamp(2.1rem, 3.6vw + 1rem, 3.4rem);
  --t-h2: clamp(1.5rem, 1.4vw + 1rem, 2.1rem);
  --t-h3: 1.2rem;

  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--c-bg);color:var(--c-fg)}
body{
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}
img,svg,video{max-width:100%;display:block}
a{color: var(--c-primary-700); text-decoration:none}
a:hover{text-decoration:underline}
button{font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit}
hr{border:0; border-top:1px solid var(--c-border); margin: var(--s-5) 0}
h1,h2,h3,h4{margin: 0 0 var(--s-3); line-height: 1.18; letter-spacing:-.01em; color: var(--c-fg)}
h1{font-size: var(--t-h1); font-weight:800}
h2{font-size: var(--t-h2); font-weight:700}
h3{font-size: var(--t-h3); font-weight:700}
p{margin: 0 0 var(--s-3); color: var(--c-fg-soft)}
ul{padding:0; margin:0; list-style:none}

/* Layout */
.container{
  width: 100%; max-width: var(--container);
  margin: 0 auto; padding: 0 var(--s-5);
}
.section{padding: var(--s-9) 0}
.section-alt{background: var(--c-surface)}
.section-head{display:flex; justify-content:space-between; align-items:end; gap: var(--s-4); margin-bottom: var(--s-6)}
.muted{color: var(--c-muted)}
.small{font-size: .875rem}
.mt-2{margin-top: var(--s-2)} .mt-3{margin-top: var(--s-3)}
.link{color: var(--c-primary-700); font-weight:600}
.grad{
  background: linear-gradient(90deg, var(--c-secondary), var(--c-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Buttons */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: 12px 18px;
  border-radius: var(--r-md);
  font-weight: 600; font-size: .95rem;
  white-space: nowrap;
  transition: transform .04s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  border: 1px solid transparent;
  text-decoration: none !important;
  line-height: 1;
}
.btn:active{transform: translateY(1px)}
.btn-sm{padding: 8px 14px; font-size: .875rem}
.btn-block{display:flex; width:100%}
.btn-primary{background: var(--c-primary); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.08)}
.btn-primary:hover{background: var(--c-primary-600)}
.btn-secondary{background: var(--c-secondary); color: #fff}
.btn-secondary:hover{background: var(--c-secondary-600)}
.btn-ghost{color: var(--c-fg); border-color: transparent}
.btn-ghost:hover{background: var(--c-surface)}
.btn-outline{border-color: var(--c-border); color: var(--c-fg); background:#fff}
.btn-outline:hover{background: var(--c-surface)}

/* Header */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
}
.header-row{display: flex; align-items: center; gap: var(--s-5); height: 72px}
.brand{display:inline-flex; align-items:center; gap: var(--s-2); color: var(--c-fg); text-decoration:none}
.brand:hover{text-decoration:none}
.brand-logo{
  height: 38px;
  width: auto;
  display: block;
}
.site-footer .brand-logo{height: 42px}
@media (max-width: 880px){
  .brand-logo{height: 30px}
}

.nav-desktop{margin-left: var(--s-5)}
.nav-desktop .nav-list{display:flex; gap: var(--s-6)}
.nav-desktop a{color: var(--c-fg); font-weight: 500}
.nav-desktop a:hover{color: var(--c-primary-700); text-decoration:none}

.header-actions{margin-left: auto; display: flex; align-items: center; gap: var(--s-2)}

.hamburger{
  display: none;
  width: 40px; height: 40px;
  border-radius: 8px;
  align-items:center; justify-content:center;
  flex-direction: column; gap: 4px;
}
.hamburger span{display:block; width: 22px; height: 2px; background: var(--c-fg); border-radius: 2px}
.hamburger:hover{background: var(--c-surface)}

@media (max-width: 880px){
  .nav-desktop{display:none}
  .hide-mobile{display:none}
  .hamburger{display:flex}
}

/* Mobile nav drawer */
.mobile-nav{position: fixed; inset: 0; z-index: 100}
.mobile-nav[hidden]{display:none}
.mobile-nav-overlay{position:absolute; inset:0; background: rgba(16,24,40,.4); animation: fade .15s ease both}
.mobile-nav-panel{
  position:absolute; top:0; right:0; bottom:0;
  width: min(86vw, 360px);
  background: #fff;
  box-shadow: var(--shadow-3);
  display:flex; flex-direction:column;
  animation: slideIn .2s ease both;
}
.mobile-nav-head{display:flex; align-items:center; justify-content:space-between; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-border)}
.icon-btn{width:40px; height:40px; border-radius:8px; display:inline-grid; place-items:center}
.icon-btn:hover{background: var(--c-surface)}
.mobile-nav-body{display:flex; flex-direction:column; gap: var(--s-1); padding: var(--s-4) var(--s-5)}
.mobile-nav-body a{color: var(--c-fg); font-weight: 600; padding: 12px 8px; border-radius: 8px}
.mobile-nav-body a:hover{background: var(--c-surface); text-decoration:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}

/* Hero */
.hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 9vw, 120px) 0 clamp(96px, 12vw, 160px);
  background:
    linear-gradient(180deg, rgba(8,16,32,.55) 0%, rgba(8,16,32,.40) 38%, rgba(8,16,32,.65) 100%),
    url('/assets/img/hero_bg.jpg') center / cover no-repeat;
  color: #fff;
}
.hero::before{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 70% at 50% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 100%);
  z-index: -1;
  pointer-events: none;
}
.hero-divider{
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: clamp(40px, 5vw, 72px);
  display: block;
  pointer-events: none;
}
.hero-inner{position: relative; max-width: 920px; margin: 0 auto; text-align:center; z-index: 1}
.hero-title{margin-bottom: var(--s-3); color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.25)}
.hero-title .grad{
  background: linear-gradient(90deg, #ffffff, #00c2a8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub{font-size: 1.15rem; color: rgba(255,255,255,.92); margin-bottom: var(--s-6); text-shadow: 0 1px 6px rgba(0,0,0,.25)}
.ai-prompt{
  display:flex; align-items:center; gap: var(--s-2);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 6px 8px 6px 18px;
  box-shadow: var(--shadow-2);
  max-width: 760px; margin: 0 auto;
}
.ai-prompt:focus-within{border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-50)}
.ai-prompt-icon{display:inline-grid; place-items:center; color: var(--c-primary-700); flex: 0 0 auto}
.ai-prompt input{
  flex: 1 1 auto; min-width: 0;
  border:0; background: transparent;
  padding: 14px 8px; font-size: 1rem; color: var(--c-fg);
  outline: none;
}
.ai-prompt input::placeholder{color: var(--c-muted)}
.ai-prompt button{flex: 0 0 auto}

.quick-chips{margin-top: var(--s-5); display:flex; flex-wrap:wrap; gap: var(--s-2); justify-content:center}
.chip{
  display:inline-block;
  padding: 8px 14px;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
}
.chip:hover{background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.45); color: #fff; text-decoration:none}
/* On non-hero pages chips sit on white surfaces — keep a light variant available */
.section .chip{background: var(--c-surface); color: var(--c-fg); border-color: var(--c-border-2); backdrop-filter:none}
.section .chip:hover{background:#fff; border-color: var(--c-primary); color: var(--c-primary-700)}

/* Card grid */
.card-grid{
  display:grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.car-card{
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.car-card:hover{transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--c-border)}
.car-card-img{
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--c-surface-2), var(--c-surface));
  position: relative;
}
.car-card-body{padding: var(--s-4)}
.car-card-title{font-weight:700; margin-bottom: var(--s-1); color: var(--c-fg)}
.car-card.placeholder{opacity:.95}

/* Three-up + two-up */
.three-up{display:grid; gap: var(--s-6); grid-template-columns: repeat(3, 1fr)}
.two-up{display:grid; gap: var(--s-6); grid-template-columns: repeat(2, 1fr)}
@media (max-width: 880px){
  .three-up{grid-template-columns: 1fr}
  .two-up{grid-template-columns: 1fr}
}
.feature{padding: var(--s-6); background: #fff; border:1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-1)}
.feature-icon{font-size: 1.6rem; margin-bottom: var(--s-2)}
.cta > div{padding: var(--s-7); background: #fff; border:1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-1)}

/* Deal score badge */
.deal-badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.8rem; font-weight:700; color:#fff}
.deal-great{background: var(--c-deal-great)}
.deal-good {background: var(--c-deal-good)}
.deal-fair {background: var(--c-deal-fair); color:#1a1a1a}
.deal-high {background: var(--c-deal-high)}
.deal-over {background: var(--c-deal-over)}

/* Forms */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom: var(--s-4)}
.field label{font-weight:600; font-size:.9rem; color: var(--c-fg)}
.input, .select, .textarea{
  width: 100%;
  padding: 12px 14px;
  border:1px solid var(--c-border);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--c-fg);
  font: inherit;
}
.input:focus, .select:focus, .textarea:focus{outline:none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-50)}

/* Footer */
.site-footer{margin-top: 0; border-top: 1px solid var(--c-border); padding: var(--s-8) 0 var(--s-5); background: #fff}
.footer-grid{display:grid; gap: var(--s-6); grid-template-columns: 2fr repeat(3, 1fr)}
.footer-grid h4{font-size:.95rem; margin-bottom: var(--s-2); color: var(--c-fg)}
.footer-grid a{color: var(--c-muted); font-weight:500}
.footer-grid a:hover{color: var(--c-fg); text-decoration:none}
.footer-grid li{padding: 4px 0}
.footer-bottom{padding-top: var(--s-5); margin-top: var(--s-5); border-top: 1px solid var(--c-border-2)}
@media (max-width: 880px){
  .footer-grid{grid-template-columns: 1fr 1fr}
}

/* Errors */
.error-page{padding: var(--s-9) 0; text-align:center}
.error-page h1{font-size: 4rem; margin-bottom: var(--s-3)}