/*
Theme Name: Maesfields Final v23
Theme URI: https://maesfields.co.uk/
Author: Maesfields
Description: Custom theme for Maesfields Landscaping — elegant, professional, responsive.
Version: 1.2.4
License: GPL-2.0-or-later
Text Domain: maesfields
*/
:root{
  --stone:#e5e2d9;
  --ink:#1a1a1a;
  --subtle:#dcd8cf;
  --container:1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;max-width:100%;overflow-x:hidden;background:#fff;color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;line-height:1.6}
img{max-width:100%;height:auto;display:block}

/* Layout helpers */
.container{max-width:var(--container);width:100%;margin-left:auto;margin-right:auto;padding:0 24px}

/* Top (logo + nav) */
.top-wrap{background:var(--stone);width:100%;border-bottom:1px solid var(--subtle)}
.site-header{padding:28px 0 18px;text-align:center}
.brand img{width:68vw;max-width:980px;margin:0 auto;height:auto}
.site-nav{background:var(--stone)}
.nav-inner{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;align-items:center;padding:12px 0;margin:0 auto;max-width:var(--container);border-top:1px solid var(--subtle)}
.site-nav a{text-decoration:none;color:#222;font-weight:700;font-size:16px;letter-spacing:.02em}
.site-nav a:hover{color:#000;text-decoration:underline;text-underline-offset:4px}

/* Hero */
.hero{position:relative;min-height:60vh;width:100%;display:flex;align-items:center;justify-content:center;background:var(--stone)}
.hero .bg{position:absolute;inset:0;pointer-events:none}
.hero .bg img{width:100%;height:100%;object-fit:cover}
.hero .content{position:relative;z-index:2;width:100%}
.hero .inner{text-align:center;max-width:880px;margin:0 auto;padding:0 24px}
.hero h1{font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:30px;line-height:1.25;margin:0 0 10px;letter-spacing:.01em}
.hero p{margin:0 0 16px;opacity:.9;font-size:15.5px}
.cta{display:inline-block;background:transparent;color:var(--ink);padding:11px 18px;border-radius:6px;text-decoration:none;font-weight:700;border:1px solid #2a2a2a}
.cta:hover{background:#f6f4ef}
.fence-banner{margin-top:16px;border-radius:10px;overflow:hidden;border:1px solid var(--subtle)}
.fence-banner img{width:100%;height:46vh;object-fit:cover;object-position:center;display:block}

.section{padding:40px 0}
.section h2{font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:.01em;text-align:center;margin:0 0 14px}
.muted{color:#595959;font-size:15px;text-align:center;margin-bottom:18px}

.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:#fff;border-radius:8px;padding:18px;border:1px solid var(--subtle)}
.card h3{margin:6px 0 6px;font-weight:700;font-size:18px}
.placeholder{height:140px;border-radius:6px;background:linear-gradient(135deg,#f4f2ea,#fbfaf4);border:1px solid var(--subtle);display:flex;align-items:center;justify-content:center;color:#6b6b6b;font-weight:600}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.gallery .item{height:130px;border-radius:6px;overflow:hidden;border:1px solid var(--subtle)}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.quote{background:#fff;border:1px solid var(--subtle);border-radius:8px;padding:16px;font-style:italic}

.site-footer{padding:26px 0;border-top:1px solid var(--subtle);color:#4a4a4a;font-size:14px}
.site-footer .row{display:flex;justify-content:space-between;align-items:center;gap:10px;max-width:var(--container);margin:0 auto;padding:0 24px}

@media (max-width:760px){
  .brand img{width:86vw}
  .hero h1{font-size:26px}
  .fence-banner img{height:32vh}
}



/* === Top Contact Bar (sticky) === */
.top-contact-bar{position:sticky;top:0;z-index:9999;background:var(--stone);color:var(--ink);border-bottom:1px solid rgba(0,0,0,.06)}
.top-contact-bar .container{display:flex;justify-content:flex-end;align-items:center;gap:1rem;padding:6px 12px}
.top-contact-bar .contact-link{text-decoration:none;color:inherit;white-space:nowrap}
.top-contact-bar .contact-link:hover,.top-contact-bar .contact-link:focus{text-decoration:underline}
.top-contact-bar .sep{opacity:.5}
@media (max-width: 720px){
  .top-contact-bar .container{justify-content:center;flex-wrap:wrap;gap:.5rem;font-size:.95rem}
}



/* === Contact Page Template === */
.section{padding:48px 0}
.contact-hero .page-title{margin:0 0 8px}
.contact-grid{display:grid;grid-template-columns: 1.1fr 1fr;gap:32px;align-items:start}
.contact-details .contact-line{margin:.25rem 0}
.contact-details .btn-outline{display:inline-block;border:1px solid currentColor;padding:8px 12px;border-radius:4px;text-decoration:none}
.contact-map .map-embed-wrapper{position:relative;padding-top:56.25%;overflow:hidden;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.contact-map iframe{position:absolute;inset:0;width:100%;height:100%}
@media (max-width: 900px){
  .contact-grid{grid-template-columns:1fr}
}



/* === Contact link color normalization === */
.top-contact-bar a,
.top-contact-bar a:visited,
.site-footer .contact-block a,
.site-footer .contact-block a:visited,
.contact-details a,
.contact-details a:visited {
  color: inherit;
  text-decoration: none;
}
.top-contact-bar a:hover,
.site-footer .contact-block a:hover,
.contact-details a:hover {
  text-decoration: underline;
}



/* === Top Contact Bar Buttons Layout === */
.top-contact-bar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:6px 12px}
.topbar-left{display:flex;align-items:center;gap:.5rem}
.topbar-right{display:flex;align-items:center;gap:.5rem}
.top-contact-bar .btn{display:inline-block;padding:6px 12px;border:1px solid currentColor;border-radius:999px;text-decoration:none;line-height:1}
.top-contact-bar .btn:hover,.top-contact-bar .btn:focus{text-decoration:none;box-shadow:0 0 0 2px rgba(0,0,0,.06) inset}
.top-contact-bar .btn-call{}
.top-contact-bar .btn-whatsapp{}
.email-inline{text-decoration:none}
.email-inline:hover,.email-inline:focus{text-decoration:underline}
@media (max-width: 720px){
  .top-contact-bar .container{flex-wrap:wrap;gap:.75rem;justify-content:center}
  .topbar-right{width:100%;justify-content:center}
}



/* Ensure contact links and buttons inherit theme color */
.top-contact-bar a,
.top-contact-bar a:visited { color: inherit; }



/* === Primary nav cleanup (horizontal, no bullets) === */
.primary-nav .menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.primary-nav .menu li{list-style:none;margin:0;padding:0}
.primary-nav .menu a{text-decoration:none;color:inherit}
.primary-nav .menu a:hover,.primary-nav .menu a:focus{text-decoration:underline}
.branding .site-title{font-weight:600;text-decoration:none}
@media (max-width: 720px){
  .primary-nav .menu{gap:12px}
}



/* === Logo centered & responsive === */
.branding{margin:16px 0;text-align:center}
.branding .site-logo img{max-width:260px;height:auto;display:inline-block}
@media (max-width: 720px){
  .branding .site-logo img{max-width:200px}
}
/* Center nav under logo */
.primary-nav{display:flex;justify-content:center}



/* === Contact page: action buttons === */
.contact-actions{display:flex;gap:.5rem;align-items:center;margin:.5rem 0 1rem}
.contact-actions .btn{display:inline-block;padding:6px 12px;border:1px solid currentColor;border-radius:999px;text-decoration:none;line-height:1}
.contact-actions .btn:hover,.contact-actions .btn:focus{text-decoration:none;box-shadow:0 0 0 2px rgba(0,0,0,.06) inset}
@media (max-width: 600px){
  .contact-actions{flex-wrap:wrap;justify-content:flex-start}
}

/* Generic button fallback */
.btn{display:inline-block;padding:6px 12px;border:1px solid currentColor;border-radius:999px;text-decoration:none;line-height:1}
.btn:hover,.btn:focus{text-decoration:none;box-shadow:0 0 0 2px rgba(0,0,0,.06) inset}

#coverage-map{margin-left:auto;margin-right:auto;display:block}



/* === v15: tighten contact layout spacing === */
.contact-grid{gap:20px}
.section.contact-layout{padding-top:24px}






/* Static OSM image centered on Llandysul, zoom ~7 (Wales view) */

/* 35-mile circle overlay (approx radius at zoom 7 near 52°N) */

@media (max-width: 640px){
  
}






/* Circle touches edges with small padding */

@media (max-width: 720px){
  
}

/* v22 contact single column */
.section.contact-layout .container{max-width: 900px}
.contact-details h2{margin-top: 0}



/* === v23: Full-width logo bar === */
.logo-bar{background:#efe9de; /* keep existing beige tone */}
.logo-bar .branding{margin:0 auto; text-align:center; padding:16px 0;}
.logo-bar .site-logo img{max-width:260px;height:auto;display:inline-block}
/* Keep mobile logo slightly smaller as before */
@media (max-width: 720px){
  .logo-bar .site-logo img{max-width:200px}
  .logo-bar .branding{padding:14px 0}
}
/* Subtle separator under beige bar */
.logo-bar{box-shadow:0 1px 0 rgba(0,0,0,0.06)}

/* Auto-crop images inside placeholder boxes */
.placeholder.img-placeholder{overflow:hidden;padding:0}
.placeholder.img-placeholder img{width:100%;height:100%;object-fit:cover;display:block;object-position:center}

.services .card h3{text-align:center}
.services .card h3{text-align:center !important}

/* Full-bleed beige behind the logo only (keeps the original height) */
.logo-bar{position:relative;background:transparent}
.logo-bar::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0;
  width:100vw;
  height:100%;
  background:var(--stone);
  z-index:-1;
}

/* Ensure logo block uses the same beige as its box */
.brand{background:var(--stone)}