/*
Theme Name: Havensworth Estates
Theme URI: https://havensworthestates.co.uk
Author: Havensworth Estates
Description: An investor-facing property portfolio theme built around a Property custom post type. Add properties from the WordPress admin under "Properties" and they appear automatically in the portfolio grid.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: havensworth
*/

:root{
  --navy:#1B2A2F;
  --navy-2:#24373D;
  --navy-3:#2E4249;
  --ivory:#F4EFE6;
  --ivory-2:#EAE3D4;
  --brass:#A67C46;
  --brass-light:#C9A672;
  --sage:#7C8F82;
  --text-dark:#1B2A2F;
  --text-muted-dark:#6B6355;
  --text-light:#F4EFE6;
  --text-muted-light:#9FB0AC;
  --serif:'Fraunces', Georgia, serif;
  --sans:'Inter', -apple-system, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:var(--sans); background:var(--ivory); color:var(--text-dark); line-height:1.6;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

/* --- Nav --- */
nav.hw-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 56px; background:var(--navy); position:sticky; top:0; z-index:10;
}
.brand{display:flex; align-items:center; gap:14px;}
.brand-mark{width:34px; height:34px; flex-shrink:0;}
.brand-text{font-family:var(--serif); font-size:19px; letter-spacing:1.5px; color:var(--ivory); font-weight:500;}
.brand-text span{display:block; font-family:var(--sans); font-size:9px; letter-spacing:4px; color:var(--brass-light); margin-top:2px; font-weight:600;}
.nav-links{display:flex; gap:40px;}
.nav-links a{font-size:13px; letter-spacing:0.5px; color:var(--text-muted-light); font-weight:500; transition:color 0.2s;}
.nav-links a:hover{color:var(--ivory);}

/* --- Hero --- */
.hero{background:var(--navy); position:relative; overflow:hidden; padding:90px 56px 110px; text-align:center;}
.hero-arch{position:absolute; top:0; left:50%; transform:translateX(-50%); opacity:0.15; pointer-events:none;}
.eyebrow{font-size:12px; letter-spacing:4px; color:var(--brass-light); font-weight:600; margin-bottom:22px; position:relative;}
.hero h1{font-family:var(--serif); font-size:clamp(32px,5vw,52px); font-weight:500; color:var(--ivory); max-width:780px; margin:0 auto 20px; line-height:1.2; position:relative;}
.hero p{font-size:16px; color:var(--text-muted-light); max-width:520px; margin:0 auto; position:relative;}

/* --- Stats strip --- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); background:var(--navy-2); border-top:1px solid rgba(244,239,230,0.08);}
.stat{padding:36px 24px; text-align:center; border-right:1px solid rgba(244,239,230,0.08);}
.stat:last-child{border-right:none;}
.stat-num{font-family:var(--serif); font-size:30px; color:var(--brass-light); font-weight:500;}
.stat-label{font-size:11px; letter-spacing:1.5px; color:var(--text-muted-light); margin-top:6px; text-transform:uppercase;}

/* --- Portfolio section --- */
.portfolio{padding:80px 56px 100px; max-width:1280px; margin:0 auto;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; flex-wrap:wrap; gap:16px;}
.section-head h2{font-family:var(--serif); font-size:28px; font-weight:500; color:var(--text-dark);}
.section-head p{font-size:13px; color:var(--text-muted-dark); max-width:340px;}
.empty-state{padding:60px 24px; text-align:center; color:var(--text-muted-dark); font-size:14px; border:1px dashed #D8CFB8; border-radius:4px;}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:32px;}

.card{background:#fff; border:1px solid #E4DCC9; border-radius:4px; overflow:hidden; transition:transform 0.25s ease, box-shadow 0.25s ease;}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(27,42,47,0.1);}

.card-visual{height:200px; background:var(--navy-3); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.card-visual img{width:100%; height:100%; object-fit:cover;}
.card-visual svg{width:120px; height:90px; opacity:0.9;}
.badge{position:absolute; top:16px; left:16px; padding:5px 12px; border-radius:20px; font-size:10px; letter-spacing:1px; font-weight:600; text-transform:uppercase; z-index:2;}
.badge.available{background:rgba(124,143,130,0.9); color:#fff;}
.badge.under-offer{background:rgba(166,124,70,0.9); color:#fff;}
.badge.off-market{background:rgba(107,99,85,0.85); color:#fff;}

.card-body{padding:24px 24px 26px;}
.card-loc{display:flex; align-items:center; gap:6px; font-size:11px; letter-spacing:0.5px; color:var(--text-muted-dark); text-transform:uppercase; margin-bottom:8px;}
.card-loc svg{width:12px; height:12px; stroke:var(--brass); flex-shrink:0;}
.card-title{font-family:var(--serif); font-size:19px; font-weight:500; color:var(--text-dark); margin-bottom:14px;}
.card-title a{color:inherit;}

.card-metrics{display:flex; gap:0; border-top:1px solid #EDE7D9; padding-top:16px; margin-top:4px;}
.metric{flex:1;}
.metric-label{font-size:10px; letter-spacing:0.5px; color:var(--text-muted-dark); text-transform:uppercase; margin-bottom:3px;}
.metric-val{font-family:var(--serif); font-size:16px; color:var(--text-dark); font-weight:500;}
.metric-val.brass{color:var(--brass);}

.card-cta{display:block; text-align:center; margin-top:20px; padding:11px; border:1px solid var(--navy); font-size:12px; letter-spacing:1px; color:var(--navy); font-weight:600; border-radius:3px; transition:background 0.2s, color 0.2s;}
.card-cta:hover{background:var(--navy); color:var(--ivory);}

/* --- Single property --- */
.single-property{max-width:900px; margin:0 auto; padding:70px 24px 100px;}
.single-property .card-visual{height:340px; border-radius:4px; margin-bottom:32px;}
.single-property h1{font-family:var(--serif); font-size:34px; font-weight:500; margin-bottom:8px;}
.single-property .card-loc{font-size:12px; margin-bottom:28px;}
.single-property .card-metrics{border-top:1px solid #E4DCC9; border-bottom:1px solid #E4DCC9; padding:20px 0; margin-bottom:32px;}
.single-property .entry-content{font-size:15px; color:var(--text-muted-dark);}
.back-link{display:inline-block; margin-bottom:24px; font-size:12px; letter-spacing:0.5px; color:var(--brass); font-weight:600;}

/* --- Process --- */
.process{background:var(--ivory-2); padding:80px 56px;}
.process-inner{max-width:1000px; margin:0 auto;}
.process h2{font-family:var(--serif); font-size:28px; font-weight:500; text-align:center; margin-bottom:50px;}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
.step-num{font-family:var(--serif); font-size:32px; color:var(--brass); margin-bottom:14px;}
.step h3{font-size:15px; font-weight:600; margin-bottom:8px; letter-spacing:0.3px;}
.step p{font-size:13px; color:var(--text-muted-dark);}

/* --- Footer / CTA --- */
footer.hw-footer{background:var(--navy); padding:70px 56px 40px; text-align:center;}
footer.hw-footer h2{font-family:var(--serif); font-size:26px; color:var(--ivory); font-weight:500; margin-bottom:14px;}
footer.hw-footer p{font-size:14px; color:var(--text-muted-light); margin-bottom:28px;}
.footer-cta{display:inline-block; padding:14px 36px; background:var(--brass); color:var(--navy); font-size:12px; letter-spacing:1.5px; font-weight:700; border-radius:3px; text-transform:uppercase;}
.footer-meta{margin-top:60px; padding-top:24px; border-top:1px solid rgba(244,239,230,0.1); font-size:11px; color:var(--text-muted-light); letter-spacing:0.5px;}

@media (max-width:720px){
  nav.hw-nav{padding:20px 24px;}
  .nav-links{display:none;}
  .hero{padding:60px 24px 80px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat{border-bottom:1px solid rgba(244,239,230,0.08);}
  .portfolio{padding:56px 24px 70px;}
  .steps{grid-template-columns:1fr; gap:32px;}
  .process{padding:56px 24px;}
  footer.hw-footer{padding:56px 24px 32px;}
}