/*
Theme Name: Carra Auto
Theme URI: https://carraauto.com
Author: Carra Auto LLC
Description: Custom lightweight theme for Carra Auto with a built-in sell-your-car offer form and lead manager.
Version: 1.5.0
Requires at least: 6.4
Requires PHP: 7.4
License: Proprietary
Text Domain: carra
*/

:root{
  --ink:#141414; --muted:#6d6a64; --line:#e4dfd6;
  --paper:#f8f6f2; --card:#ffffff; --accent:#a8875a; --accent-ink:#8a6c43;
  --dark:#0f0f0f; --dark-line:#2c2a27; --dark-text:#bdb7ad; --dark-muted:#8f897f;
  --ok:#2f6b46; --err:#9b2c2c;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:-.01em}
h2{font-size:clamp(34px,4vw,48px)}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:10px 16px;z-index:100}
.skip:focus{left:16px;top:16px}
.screen-reader-text,.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.btn{display:inline-block;padding:15px 28px;border-radius:2px;font:600 14px var(--sans);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn.ghost{background:transparent;color:#fff;border-color:#555}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}

/* header */
.site-header{position:absolute;top:0;left:0;right:0;z-index:20}
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.logo{font-family:var(--serif);font-size:28px;color:#fff;letter-spacing:.14em;white-space:nowrap}
.logo span{font-family:var(--sans);font-size:11px;letter-spacing:.3em;color:var(--accent);margin-left:8px;vertical-align:middle}
.custom-logo{max-height:52px;width:auto}
.primary-nav ul{display:flex;gap:36px;list-style:none}
.primary-nav a{color:#d9d4cb;font-size:14px;letter-spacing:.04em}
.primary-nav a:hover,.primary-nav .current-menu-item a{color:#fff}
.nav-cta{color:#fff;border:1px solid rgba(255,255,255,.35);padding:10px 18px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.nav-cta:hover{border-color:var(--accent);color:var(--accent)}
.menu-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;cursor:pointer}

/* dark bands */
.hero,.page-band{background:radial-gradient(ellipse at 75% 30%,#2a2620 0%,var(--dark) 60%);color:#fff;position:relative;overflow:hidden}
.hero::after,.page-band::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.6}
.hero{padding:150px 0 110px}
.page-band{padding:160px 0 80px}
.page-band h1{font-size:clamp(40px,5vw,64px);margin-top:14px}
.page-band p{color:var(--dark-text);font-size:18px;max-width:560px;margin-top:16px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
.hero h1{font-size:clamp(44px,6vw,76px);margin:18px 0 22px}
.hero h1 em{font-style:italic;color:var(--accent)}
.lead{color:var(--dark-text);font-size:18px;max-width:480px}
.trust{display:flex;flex-wrap:wrap;gap:36px;margin-top:44px;padding-top:28px;border-top:1px solid var(--dark-line)}
.trust strong{display:block;font-family:var(--serif);font-size:30px;font-weight:500;color:#fff}
.trust span{font-size:13px;color:var(--dark-muted)}

/* offer form */
.offer{background:var(--card);color:var(--ink);padding:36px;border-radius:2px;box-shadow:0 30px 80px rgba(0,0,0,.45);scroll-margin-top:110px}
.offer .offer-title,.offer h3{font-size:30px;margin:0 0 4px;color:var(--ink)}
.offer .sub{color:var(--muted);font-size:14px;margin-bottom:22px}
.mode-toggle{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin-bottom:16px}
.mode-toggle button{background:none;border:0;padding:11px;font:500 13px var(--sans);letter-spacing:.05em;color:var(--muted);cursor:pointer}
.mode-toggle button.on{background:var(--ink);color:#fff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row.three{grid-template-columns:1fr 1fr 1fr}
.offer label,.field-label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field{margin-bottom:14px}
.offer input,.offer select,.offer textarea{width:100%;border:1px solid var(--line);background:#fcfbf9;padding:12px 14px;font:15px var(--sans);color:var(--ink);border-radius:2px;outline:none;transition:border-color .15s}
.offer input:focus,.offer select:focus,.offer textarea:focus{border-color:var(--accent);background:#fff}
.offer textarea{min-height:80px;resize:vertical}
.offer select:disabled{color:var(--muted);cursor:not-allowed}
.vin-decoded{margin-top:8px;font-size:14px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.vin-decoded strong{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink)}
.vin-decoded.ok::before{content:"\2713";color:var(--ok);font-weight:700}
.vin-decoded.warn{color:var(--muted)}
.vin-decoded button{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--accent-ink);text-decoration:underline;cursor:pointer}
.more-btn{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-top:1px solid var(--line);padding:16px 0 4px;font:600 13px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);cursor:pointer;text-align:left}
.more-btn .plus{width:20px;height:20px;border:1px solid var(--accent);display:grid;place-items:center;transition:transform .2s;flex:none}
.more-btn[aria-expanded="true"] .plus{transform:rotate(45deg)}
.more-btn small{margin-left:auto;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
.more-panel{padding-top:14px}
.drop{display:block;border:1px dashed #cfc7b9;padding:20px;text-align:center;font-size:14px;color:var(--muted);cursor:pointer;background:#fcfbf9;text-transform:none!important;letter-spacing:0!important}
.drop:hover,.drop.over{border-color:var(--accent);color:var(--ink)}
.offer .btn{width:100%;margin-top:10px}
.fine{font-size:12px;color:var(--muted);margin-top:12px;text-align:center}
.notice-box{padding:12px 14px;font-size:14px;margin-bottom:16px;border-left:3px solid var(--err);background:#fbf1f1;color:var(--err)}
.done{text-align:center;padding:40px 10px}
.done h3{margin:8px 0 10px}

/* sections */
.block{padding:110px 0}
.block.tight-top{padding-top:0}
.head{max-width:620px;margin-bottom:60px}
.head p{color:var(--muted);margin-top:16px;font-size:17px}
.head h2{margin-top:14px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--paper);padding:44px 36px}
.step .num{font-family:var(--serif);font-size:56px;color:var(--accent);line-height:1}
.step h3{font-size:26px;margin:18px 0 10px}
.step p{color:var(--muted)}
.why{background:var(--card)}
.why-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:center}
.feature{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid var(--line)}
.feature:first-of-type{border-top:1px solid var(--line)}
.feature .ic{width:44px;height:44px;border:1px solid var(--accent);display:grid;place-items:center;color:var(--accent);font-size:14px}
.feature h3{font-size:22px;margin-bottom:4px}
.feature p{color:var(--muted);font-size:15px}
.panel{background:var(--dark);color:#fff;padding:56px;position:relative}
.panel::before{content:"";position:absolute;inset:14px;border:1px solid #33302b;pointer-events:none}
.panel blockquote{font-family:var(--serif);font-size:30px;line-height:1.3;font-style:italic}
.panel cite{display:block;margin-top:22px;font-style:normal;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.buy{display:flex;flex-wrap:wrap;gap:12px;list-style:none}
.buy li{border:1px solid var(--line);padding:10px 18px;font-size:14px;background:var(--card)}
.buy-note{color:var(--muted);margin-top:28px}
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{font-family:var(--serif);font-size:23px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-family:var(--sans);font-weight:300}
.faq details[open] summary::after{content:"\2013"}
.faq details p{color:var(--muted);margin-top:12px;max-width:680px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.contact-list{list-style:none}
.contact-list li{padding:22px 0;border-bottom:1px solid var(--line)}
.contact-list li:first-child{border-top:1px solid var(--line)}
.contact-list .field-label{margin-bottom:4px}
.contact-list a,.contact-list strong{font-family:var(--serif);font-size:26px;font-weight:500}
.contact-list a:hover{color:var(--accent-ink)}

/* generic content */
.entry{max-width:760px;font-size:17px}
.entry > * + *{margin-top:1.1em}
.entry h2{font-size:36px;margin-top:1.6em}
.entry h3{font-size:26px;margin-top:1.4em}
.entry a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.entry ul,.entry ol{padding-left:1.4em}
.entry blockquote{border-left:2px solid var(--accent);padding-left:20px;font-family:var(--serif);font-size:24px;font-style:italic}

/* cta + footer */
.cta{background:var(--dark);color:#fff;text-align:center;padding:100px 0}
.cta h2{margin:14px 0 18px}
.cta p{color:#a9a399;margin-bottom:34px}
.cta .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.site-footer{background:#0a0a0a;color:var(--dark-muted);padding:60px 0 36px;font-size:14px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid #222}
.foot h2{color:#fff;font:600 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
.foot ul{list-style:none}
.foot li{margin-bottom:8px}
.foot a:hover{color:#fff}
.legal{padding-top:24px;display:flex;justify-content:space-between;gap:16px;font-size:12px}
.legal a:hover{color:#fff}

@media(max-width:900px){
  .menu-toggle{display:block}
  .primary-nav{display:none;position:absolute;top:84px;left:0;right:0;background:#0f0f0f;border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line)}
  .nav-open .primary-nav{display:block}
  .primary-nav ul{flex-direction:column;gap:0;padding:8px 24px}
  .primary-nav a{display:block;padding:14px 0;font-size:16px}
  .hero{padding:120px 0 80px}
  .hero-grid,.why-grid,.contact-grid{grid-template-columns:1fr;gap:48px}
  .steps{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .offer{padding:26px 20px}
  .row.three{grid-template-columns:1fr 1fr}
  .block{padding:80px 0}
  .page-band{padding:130px 0 60px}
  .panel{padding:40px 30px}
}
@media(max-width:480px){
  .wrap{padding:0 16px}
  .row,.row.three{grid-template-columns:1fr}
  .trust{gap:20px}
  .nav-cta{display:none}
  .legal{flex-direction:column;gap:8px}
}