/* ==========================================================================
   Maylodge Country Cottages — main stylesheet
   Palette: charcoal / cream / pine green / clay
   ========================================================================== */

:root{
  --charcoal:#23241f;
  --cream:#f2ede3;
  --paper:#fbf9f5;
  --pine:#39492f;
  --pine-dark:#2c3924;
  --clay:#a35c3a;
  --mist:#c9d1c3;
  --ink:#2a2a24;
  --muted:#6b6b60;
  --line:#e2ddd0;
  --radius:8px;
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  font-size:16px;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4{font-family:'Fraunces', Georgia, serif; font-weight:500; line-height:1.15; margin:0 0 .5em;}
p{margin:0 0 1em;}
.container{max-width:var(--max); margin:0 auto; padding:0 32px;}
.btn{
  display:inline-block; padding:14px 30px; background:var(--pine); color:#fff !important;
  font-size:.83rem; letter-spacing:.05em; text-transform:uppercase; border-radius:3px;
  border:none; cursor:pointer; transition:background .2s ease;
}
.btn:hover{background:var(--pine-dark);}
.btn-outline{background:transparent; border:1px solid var(--charcoal); color:var(--charcoal) !important;}
.btn-outline:hover{background:var(--charcoal); color:#fff !important;}
.btn-book{background:var(--clay);}
.btn-book:hover{background:#8a4a2d;}

/* ---------- Booking CTAs ---------- */
.nav-book-btn{padding:10px 22px; margin-left:8px;}
.footer-book-btn{margin-top:18px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;}
.cottage-book-box{margin-top:28px; padding:24px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.cottage-book-box .book-note{flex-basis:100%; margin:8px 0 0; font-size:.85rem; color:var(--muted);}
@media (max-width:820px){
  .nav-book-btn{margin:14px 0 0; display:inline-block;}
}
.kicker{color:var(--clay); font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600; margin-bottom:14px;}

/* ---------- Header ---------- */
.site-header{background:var(--charcoal); color:var(--cream);}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding:22px 32px;}
.site-logo{font-family:'Fraunces', serif; font-size:1.35rem; font-weight:500; color:var(--cream); display:flex; flex-direction:column; align-items:flex-start;}
.site-logo-img{height:56px; width:auto; display:block;}
.site-logo span{color:var(--mist); font-weight:400; font-size:.78rem; display:block; letter-spacing:.05em; margin-top:2px;}
.footer-brand{display:flex; flex-direction:column; align-items:flex-start;}
.footer-logo-img{height:64px; width:auto; display:block; margin-bottom:14px;}
@media (max-width:820px){
  .site-logo-img{height:44px;}
}
.primary-nav{display:flex; align-items:center; gap:8px;}
.primary-nav ul{display:flex; gap:32px; align-items:center;}
.primary-nav a{font-size:.85rem; letter-spacing:.03em; opacity:.9; transition:opacity .2s;}
.primary-nav a:hover{opacity:1; color:var(--clay);}
.nav-toggle{display:none; background:none; border:none; color:var(--cream); font-size:1.6rem; cursor:pointer;}

@media (max-width:820px){
  .nav-toggle{display:block;}
  .primary-nav{display:none; width:100%;}
  .primary-nav.is-open{display:flex; flex-direction:column; align-items:flex-start;}
  .site-header .container{flex-wrap:wrap;}
  .primary-nav ul{flex-direction:column; gap:0; padding:16px 0 22px; width:100%;}
  .primary-nav a{display:block; padding:10px 0; border-bottom:1px solid rgba(242,237,227,.1);}
  .primary-nav .nav-book-btn{display:inline-block; border-bottom:none; padding:12px 26px; margin:6px 0 18px;}
}

/* ---------- Hero (front page) ---------- */
.hero{display:grid; grid-template-columns:1.05fr .95fr; background:var(--paper);}
.hero-copy{padding:80px 56px; display:flex; flex-direction:column; justify-content:center;}
.hero-copy h1{font-size:2.8rem; max-width:520px;}
.hero-copy p{color:var(--muted); max-width:440px; font-size:1.05rem;}
.hero-photo{min-height:460px; background-size:cover; background-position:center;}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;}
  .hero-copy{padding:56px 24px;}
  .hero-photo{min-height:320px; order:-1;}
}

/* ---------- Stats band ---------- */
.stats-band{background:var(--pine); color:var(--cream);}
.stats-band .container{display:flex; flex-wrap:wrap; gap:48px; padding:32px;}
.stats-band .stat b{font-family:'Fraunces', serif; font-size:1.3rem; display:block; font-weight:500;}
.stats-band .stat span{font-size:.85rem; opacity:.85;}

/* ---------- Section headings ---------- */
.section{padding:72px 0;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:36px; flex-wrap:wrap; gap:16px;}
.section-head h2{font-size:1.9rem;}
.section-head p{color:var(--muted); margin:0; max-width:480px;}

/* ---------- Cards grid (cottages) ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media (max-width:900px){.card-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.card-grid{grid-template-columns:1fr;}}
.card{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:0 8px 24px rgba(35,36,31,.07); transition:transform .2s ease, box-shadow .2s ease;}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 32px rgba(35,36,31,.12);}
.card .thumb{aspect-ratio:4/3; background-size:cover; background-position:center;}
.card .body{padding:20px 22px 24px;}
.card h3{font-size:1.15rem; margin-bottom:6px;}
.card .meta{font-size:.78rem; color:var(--clay); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; font-weight:600;}
.card p{font-size:.92rem; color:var(--muted); margin-bottom:14px;}
.card .card-link{font-size:.82rem; font-weight:600; color:var(--pine);}

/* ---------- Gallery strip ---------- */
.gallery-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
.gallery-strip .ph{aspect-ratio:1/1; background-size:cover; background-position:center;}
@media (max-width:700px){.gallery-strip{grid-template-columns:repeat(2,1fr);}}

/* ---------- Wedding band (homepage) ---------- */
.wedding-band{background-size:cover; background-position:center; position:relative; padding:90px 0;}
.wedding-band::before{content:''; position:absolute; inset:0; background:rgba(35,36,31,.6);}
.wedding-band .container{position:relative; max-width:620px; color:var(--cream);}
.wedding-band h2{color:var(--cream); font-size:2.1rem; margin:.2em 0 .5em;}
.wedding-band p{color:var(--mist); font-size:1.05rem;}
@media (max-width:700px){.wedding-band{padding:64px 0;}}

/* ---------- Blog preview / archive ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
@media (max-width:900px){.blog-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.blog-grid{grid-template-columns:1fr;}}
.post-card .thumb{aspect-ratio:16/10; background-size:cover; background-position:center; border-radius:var(--radius); margin-bottom:16px;}
.post-card .cat{font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--pine); font-weight:600; margin-bottom:8px; display:inline-block; background:var(--mist); padding:3px 10px; border-radius:999px;}
.post-card h3{font-size:1.2rem; margin:8px 0 6px;}
.post-card .date{font-size:.8rem; color:var(--muted);}

.archive-head{background:var(--charcoal); color:var(--cream); padding:64px 0 48px;}
.archive-head h1{color:var(--cream); font-size:2.3rem;}
.archive-head p{color:var(--mist);}
.cat-filter{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px;}
.cat-filter a{font-size:.8rem; padding:7px 16px; border:1px solid rgba(242,237,227,.35); border-radius:999px; color:var(--cream); opacity:.85;}
.cat-filter a:hover, .cat-filter a.active{background:var(--clay); border-color:var(--clay); opacity:1;}

/* ---------- Single post ---------- */
.single-post{padding:64px 0 90px;}
.post-header{max-width:760px; margin:0 auto 32px;}
.post-header .cat{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--pine); font-weight:600; background:var(--mist); padding:4px 12px; border-radius:999px; display:inline-block; margin-bottom:16px;}
.post-header h1{font-size:2.3rem;}
.post-header .date{color:var(--muted); font-size:.9rem;}
.post-hero{aspect-ratio:16/7; background-size:cover; background-position:center; border-radius:var(--radius); max-width:960px; margin:0 auto 40px;}
.post-content{max-width:720px; margin:0 auto; font-size:1.05rem;}
.post-content p{margin-bottom:1.3em;}
.post-content h2{font-size:1.5rem; margin-top:1.6em;}
.post-content h3{font-size:1.2rem; margin-top:1.4em;}
.post-content img{border-radius:var(--radius); margin:1.4em 0;}
.post-content blockquote{border-left:3px solid var(--clay); padding-left:20px; color:var(--muted); font-style:italic; margin:1.6em 0;}
.post-footer-nav{max-width:720px; margin:56px auto 0; display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:24px; font-size:.9rem;}

/* ---------- Single cottage ---------- */
.cottage-hero{aspect-ratio:16/8; background-size:cover; background-position:center;}
.cottage-body{max-width:820px; margin:0 auto; padding:56px 32px;}
.cottage-body h1{font-size:2.4rem;}
.cottage-body .meta{color:var(--clay); font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:.85rem; margin-bottom:20px;}

/* ---------- Page / generic content ---------- */
.page-hero{background:var(--charcoal); color:var(--cream); padding:60px 0 44px;}
.page-hero h1{color:var(--cream); font-size:2.2rem;}
.page-hero.has-image{background-size:cover; background-position:center; padding:110px 0 60px; position:relative;}
.page-hero.has-image::before{content:''; position:absolute; inset:0; background:rgba(35,36,31,.55);}
.page-hero.has-image .container{position:relative;}
.page-content{max-width:760px; margin:0 auto; padding:56px 32px; font-size:1.05rem;}
.page-content h2{font-size:1.5rem; margin-top:1.4em;}

/* ---------- Footer ---------- */
.site-footer{background:var(--charcoal); color:var(--mist);}
.site-footer .container{padding:56px 32px 30px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;}
.site-footer h4{color:var(--cream); font-family:'Fraunces', serif; font-weight:500; font-size:1.05rem; margin-bottom:14px;}
.site-footer p, .site-footer a{font-size:.9rem; color:var(--mist);}
.site-footer ul li{margin-bottom:8px;}
.site-footer .sub-foot{border-top:1px solid rgba(242,237,227,.12); padding:20px 32px; display:flex; justify-content:space-between; font-size:.8rem; opacity:.7; flex-wrap:wrap; gap:10px;}
@media (max-width:700px){.site-footer .container{grid-template-columns:1fr;}}

/* ---------- Widgets / forms basics ---------- */
input, textarea{font-family:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:4px; width:100%;}
.pagination{display:flex; gap:10px; justify-content:center; margin-top:50px;}
.pagination a, .pagination span{padding:8px 14px; border:1px solid var(--line); border-radius:4px; font-size:.85rem;}
.pagination .current{background:var(--pine); color:#fff; border-color:var(--pine);}