/*
Theme Name: Jos Renewables
Theme URI: https://jossolutions.co.uk
Author: Built for Jos Solutions
Author URI: https://jossolutions.co.uk
Description: A lightweight, fully editable block theme for Jos Solutions (renewable heating, air conditioning and solar). Built from the approved design concept. All content is editable in the WordPress block editor. Starter theme intended for a partner to finalise and activation-test.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jos-renewables
*/

/* ===========================================================================
   Jos Solutions - design system ported from the approved concept mockup.
   Fonts (Cormorant Garamond + Jost) are enqueued in functions.php.
   Colours/sizes also live in theme.json; this file holds the bespoke polish
   the block settings cannot express (chips, pills, hero grid, dark reviews,
   sticky header, card hover, sharp corners).
   =========================================================================== */

:root{
  --olive-900:#343a2a;
  --olive-700:#4d5640;
  --olive-600:#5c6650;
  --sage-100:#eceee3;
  --cream:#f7f5ee;
  --ink:#23261d;
  --muted:#5e6452;
  --brass:#c0892f;
  --brass-dark:#9c6d1e;
  --line:#dedccf;
  --white:#ffffff;
}

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-weight:300;
}

/* Headings: tighten the serif display face */
h1, h2, h3, h4, .wp-block-heading{
  letter-spacing:.005em;
  line-height:1.08;
}

/* Links inside content get the brass treatment */
.entry-content a, .wp-block-post-content a{
  color:var(--brass-dark);
}

/* ---------- BUTTONS ---------- */
.wp-block-button__link{
  border-radius:2px !important;
  font-weight:500;
  letter-spacing:.02em;
  transition:background .2s ease, transform .15s ease, opacity .2s ease;
}
.wp-block-button__link:hover{
  transform:translateY(-1px);
}
.wp-block-button.is-style-outline .wp-block-button__link{
  border-color:rgba(255,255,255,.5);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:rgba(255,255,255,.12);
}

/* ---------- INNER WRAP (1180 max, like the mockup .wrap) ---------- */
.jos-wrap{ max-width:1180px; margin-inline:auto; }

/* ---------- EYEBROW ---------- */
.jos-eyebrow{
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:.78rem;
  font-weight:500;
  color:var(--brass-dark);
}

/* Section heading block */
.jos-sechead h2{ font-size:clamp(2rem,4vw,2.6rem); margin-top:.3rem; }
.jos-sechead p{ color:var(--muted); margin-top:.6rem; }

/* ---------- UTILITY BAR (top dark strip) ---------- */
.jos-utility-bar{
  font-size:.82rem;
  letter-spacing:.04em;
}
.jos-utility-bar a{ color:inherit; text-decoration:none; }
.jos-utility-bar a:hover{ text-decoration:underline; }

/* ---------- HEADER ---------- */
.jos-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(247,245,238,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.jos-header .wp-block-site-title{
  font-family:'Cormorant Garamond', Georgia, serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.jos-header .wp-block-site-title a{ text-decoration:none; color:var(--ink); }
.jos-header .wp-block-navigation a{
  color:var(--ink);
  text-decoration:none;
  font-weight:400;
}
.jos-header .wp-block-navigation a:hover{ color:var(--brass-dark); }
.jos-phone{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.25rem;
  font-weight:600;
  color:var(--olive-700);
}

/* ---------- HERO (two-column, solid olive) ---------- */
.jos-hero{ background:var(--olive-700); color:#f4f2e9; overflow:hidden; }
.jos-hero h1{ color:#fff; font-size:clamp(2.6rem,5vw,3.75rem); font-weight:600; line-height:1.02; }
.jos-hero .jos-eyebrow{ color:#e7d6a8; }
.jos-hero .jos-sub{ color:#e3e6d8; font-size:1.18rem; max-width:30em; }
.jos-hero p{ color:#e3e6d8; }
.jos-grant{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(192,137,47,.16);
  border:1px solid rgba(224,193,120,.5);
  color:#f0dcab !important;
  padding:9px 16px; border-radius:2px;
  font-size:.95rem; font-weight:500; letter-spacing:.02em;
}
.jos-grant strong{ color:#fff; }
.jos-hero-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:3px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  aspect-ratio:1/1;
}
.jos-hero-cap{
  margin-top:-3.4rem; position:relative; z-index:2;
  padding:26px 22px 16px;
  background:linear-gradient(to top, rgba(20,23,16,.82), transparent);
  color:#f1efe6; border-radius:0 0 3px 3px; font-size:.9rem;
}
.jos-hero-cap strong{ font-family:'Cormorant Garamond',Georgia,serif; font-size:1.2rem; display:block; }

/* ---------- TRUST STRIP (chips) ---------- */
.jos-trust{ background:var(--cream); border-bottom:1px solid var(--line); }
.jos-trust .jos-lead{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:1.15rem; color:var(--olive-700); }
.jos-chips{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center; }
.jos-chip{
  font-size:.8rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--olive-700); border:1px solid var(--line); background:#fff;
  padding:7px 13px; border-radius:2px;
}
.jos-chip.is-key{ border-color:var(--brass); color:var(--brass-dark); }

/* ---------- SERVICES (4 cards, hover lift) ---------- */
.jos-services{ background:var(--sage-100); }
.jos-card{
  background:#fff; border:1px solid var(--line); border-radius:3px;
  padding:30px 26px; height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.jos-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(52,58,42,.12); }
.jos-card h3{ font-size:1.5rem; margin-bottom:.4rem; }
.jos-card p{ color:var(--muted); font-size:.98rem; }
.jos-card .jos-more{
  display:inline-block; margin-top:1rem;
  font-size:.84rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  color:var(--brass-dark);
}
.jos-card.is-link:hover{ cursor:pointer; }

/* Image cards (service/about pages keep photos) */
.jos-imgcard{ border:1px solid var(--line); border-radius:3px; overflow:hidden; background:#fff; }
.jos-imgcard img{ width:100%; height:240px; object-fit:cover; display:block; }

/* ---------- ABOUT ---------- */
.jos-about-photo img{ width:100%; height:100%; object-fit:cover; border-radius:3px; aspect-ratio:4/5; box-shadow:0 18px 44px rgba(52,58,42,.18); }
.jos-leadq{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:1.4rem; color:var(--olive-700); line-height:1.3; }
.jos-sign{ font-family:'Cormorant Garamond',Georgia,serif; font-size:1.35rem; color:var(--ink); }

/* ---------- REVIEWS (dark olive band) ---------- */
.jos-reviews{ background:var(--olive-900); color:#eef0e6; }
.jos-reviews h2, .jos-reviews .jos-eyebrow{ color:#fff; }
.jos-reviews .jos-eyebrow{ color:#e9cd86; }
.jos-rcard{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:3px; padding:28px 26px; height:100%;
}
.jos-stars{ color:#e9cd86; letter-spacing:2px; }
.jos-rcard p{ font-family:'Cormorant Garamond',Georgia,serif; font-size:1.25rem; line-height:1.35; color:#f3f4ec; font-weight:400; }
.jos-who{ font-size:.8rem; letter-spacing:.05em; color:#b9bfa9; text-transform:uppercase; }
.jos-ggl{ color:#b9bfa9; } .jos-ggl strong{ color:#fff; }

/* ---------- AREAS (town pills) ---------- */
.jos-towns{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 14px; max-width:42em; margin-inline:auto; }
.jos-town{ font-size:.95rem; color:var(--olive-700); border:1px solid var(--line); background:#fff; padding:8px 18px; border-radius:30px; }

/* ---------- CTA BAND (brass) ---------- */
.jos-cta{ background:var(--brass); color:#fff; text-align:center; }
.jos-cta h2{ color:#fff; }
.jos-cta p{ color:#fdf3df; }
.jos-cta .wp-block-button__link{ background:#fff !important; color:var(--brass-dark) !important; }
.jos-cta .wp-block-button__link:hover{ background:#fff7e9 !important; }

/* ---------- FOOTER ---------- */
.jos-footer{ background:var(--olive-900); color:#c8cdba; }
.jos-footer h3, .jos-footer h4{ color:#fff; }
.jos-footer h4{ font-family:'Jost',sans-serif; font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; font-weight:500; }
.jos-footer a{ color:#c8cdba; text-decoration:none; }
.jos-footer a:hover{ color:#fff; }
.jos-footer .jos-footer-name{ font-family:'Cormorant Garamond',Georgia,serif; letter-spacing:.14em; color:#fff; text-transform:uppercase; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:781px){
  .jos-utility-bar{ font-size:.74rem; }
  .jos-imgcard img{ height:200px; }
}