/* Bond For Sale v0.3
   Self-contained content styling. The header is intentionally controlled here
   because the For Sale area may be served from a different directory depth. */
:root{
  --fs-green:#2f5d3a;--fs-green-dark:#24492d;--fs-ink:#1f2822;
  --fs-muted:#687169;--fs-line:#e2e9e6;--fs-soft:#f4f7f6;
  --fs-cream:#f5f3ed;--fs-white:#fff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fs-soft);color:var(--fs-ink);font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:400}
.fs-site-header{background:#fff}
.fs-header-inner{max-width:1100px;height:170px;margin:0 auto;padding:18px 20px;display:flex;align-items:center;justify-content:space-between}
.fs-logo{display:block;max-width:245px;width:100%;height:auto}
.fs-contact{text-align:right;line-height:1.8;color:var(--fs-ink);font-size:16px}
.fs-contact a{color:var(--fs-green-dark)}
.fs-nav{background:#383838}
.fs-nav-inner{max-width:1100px;margin:0 auto;min-height:56px;padding:0 20px;display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.fs-nav a{color:#fff;text-decoration:none;font-size:15px;letter-spacing:.02em;padding:18px 0;white-space:nowrap}
.fs-nav a:hover,.fs-nav a.active{color:#dceadf}
.fs-wrap{max-width:1100px;margin:0 auto;padding:34px 20px 60px}
.breadcrumb{font-size:.9rem;margin-bottom:24px;color:var(--fs-muted)}
.breadcrumb a{color:var(--fs-green-dark)}
.panel{background:#fff;border:1px solid var(--fs-line);border-radius:14px;box-shadow:0 8px 28px rgba(31,40,34,.055);padding:28px;margin:0 0 24px}
.eyebrow{font-size:.72rem;letter-spacing:.14em;font-weight:700;color:var(--fs-green);margin:0 0 8px}
.panel h1,.panel h2,.panel h3{color:var(--fs-ink)}
.panel h1{font-size:2.25rem;margin:.15rem 0 1rem}
.panel h2{margin-top:.2rem}
.fs-intro{padding:38px}
.fs-intro p:not(.eyebrow),.confidence p{max-width:760px;line-height:1.75;color:var(--fs-muted)}
.section-heading{margin:34px 0 14px}
.vehicle-card{display:grid;grid-template-columns:42% 58%;padding:0;overflow:hidden}
.vehicle-image{min-height:360px;background:#e9eeeb}
.vehicle-image img,.advert-hero img{width:100%;height:100%;object-fit:cover;display:block}
.vehicle-copy{padding:30px}
.status{display:inline-block;font-size:.7rem;letter-spacing:.1em;font-weight:800;color:var(--fs-green);background:#edf4ef;border-radius:999px;padding:7px 10px}
.status.reserved{color:#7a5b13;background:#f8f0d9}
.status.sold{color:#6b3a3a;background:#f3e8e8}
.status.draft,.status.hidden{color:#626862;background:#eef0ee}
.vehicle-copy h2{font-size:1.8rem;margin:14px 0 8px}
.vehicle-summary,.lead,.advert-copy{color:var(--fs-muted);line-height:1.7}
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}
.spec-grid div{background:var(--fs-soft);border-radius:9px;padding:12px}
.spec-grid .spec-box{position:relative;padding-left:42px;min-height:54px}
.spec-icon{position:absolute;left:12px;top:13px;width:21px;height:21px;color:var(--fs-green)}
.spec-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.spec-box>span:not(.spec-icon){display:block;font-size:.68rem;color:var(--fs-muted);text-transform:uppercase;letter-spacing:.06em}
.spec-box strong{display:block;margin-top:4px}
.spec-grid span{display:block;font-size:.68rem;color:var(--fs-muted);text-transform:uppercase;letter-spacing:.06em}
.spec-grid strong{display:block;margin-top:4px}
.feature-row{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 24px}
.feature-row span{border:1px solid var(--fs-line);border-radius:999px;padding:7px 11px;font-size:.82rem}
.button{display:inline-block;background:var(--fs-green);color:#fff!important;padding:11px 18px;border-radius:8px;text-decoration:none;font-weight:700;border:0;cursor:pointer}
.button.secondary{background:#eef2ef;color:var(--fs-ink)!important}
.button.danger{background:#7a3d3d}
.confidence{background:var(--fs-cream)}
.advert{display:grid;grid-template-columns:55% 45%;padding:0;overflow:hidden}
.advert-hero{min-height:430px}
.advert>div:last-child{padding:40px}
.price{font-size:2rem;font-weight:800;color:var(--fs-green);margin-top:24px}
.large{grid-template-columns:repeat(4,1fr)}
.admin-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--fs-line);vertical-align:top}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--fs-muted)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.form-grid.three{grid-template-columns:repeat(3,1fr)}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-weight:700;font-size:.9rem}
.field input,.field select,.field textarea{font:inherit;padding:11px 12px;border:1px solid #ccd6d1;border-radius:8px;background:#fff;color:var(--fs-ink)}
.field textarea{min-height:130px;resize:vertical}
.help{font-size:.78rem;color:var(--fs-muted)}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.notice{padding:13px 15px;border-radius:9px;background:#edf4ef;border:1px solid #d6e5da;margin-bottom:18px}
.notice.error{background:#f5eaea;border-color:#e7d2d2;color:#713f3f}
.image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.image-card{border:1px solid var(--fs-line);border-radius:10px;overflow:hidden;background:#fff}
.image-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#eef1ef}
.image-card .image-meta{padding:12px}
.image-card .image-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
footer{text-align:center;padding:25px;color:var(--fs-muted);font-size:.85rem}
code{background:#eef2ef;padding:2px 5px;border-radius:4px}
@media(max-width:760px){
 .fs-header-inner{height:auto;min-height:135px;gap:15px}.fs-logo{max-width:190px}.fs-contact{font-size:13px}
 .fs-nav-inner{justify-content:flex-start;gap:18px}.fs-nav a{padding:14px 0}
 .vehicle-card,.advert{grid-template-columns:1fr}.vehicle-image,.advert-hero{min-height:240px}
 .spec-grid,.large,.form-grid,.form-grid.three{grid-template-columns:repeat(2,1fr)}
 .image-grid{grid-template-columns:1fr 1fr}.fs-intro h1,.panel h1{font-size:1.8rem}
}
@media(max-width:480px){
 .fs-header-inner{align-items:flex-start;flex-direction:column}.fs-contact{text-align:left}
 .spec-grid,.large,.form-grid,.form-grid.three,.image-grid{grid-template-columns:1fr}
 .panel,.fs-intro{padding:22px}.vehicle-copy,.advert>div:last-child{padding:24px}
}


/* =========================================================
   HOMEPAGE-STYLE BOND HEADER
   ========================================================= */

header {
    padding: 20px;
    background: #fff;
}

.header-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.logo {
    display: block;
    max-width: 280px;
    width: 100%;
    height: auto;
}

.header-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    padding: 10px 18px;
    background: #427953;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    transition: all .3s ease;
}

.header-btn:hover {
    color: #f0c040;
    transform: translateX(-2px);
}

.header-btn:last-child {
    background: #555;
}

nav {
    background: #393939;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .8px;
    transition: all .25s ease;
}

nav a:hover {
    color: #f0c040;
}

/* For Sale gets its own destination colour and a little more visual weight. */
nav a.fs-nav-link {
    background: #d79b24;
    color: #fff;
    padding: 7px 16px;
    margin: -7px 0;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(0,0,0,.22);
}

nav a.fs-nav-link:hover,
nav a.fs-nav-link.active {
    background: #f0b52f;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
}

@media (max-width: 768px) {
    header {
        padding: 20px 15px;
    }

    .header-content {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .logo {
        max-width: 340px;
    }

    .header-contact {
        width: 100%;
        align-items: center;
    }

    .header-btn {
        padding: 10px 18px;
        min-width: 250px;
        font-size: .88rem;
    }

    nav {
        gap: 10px;
    }

    nav a.fs-nav-link {
        margin: -5px 0;
    }
}

/* Match the main Bond Conversions site's normal header typography */
header,
header .header-content,
header .header-contact {
    font-weight: 400;
}

header .header-contact a:not(.header-btn) {
    font-weight: 400;
}

header .header-btn {
    font-weight: 600;
}

nav a {
    font-weight: 600;
}