/*
Theme Name: Storm Coatings
Theme URI: https://stormcoatings.co.uk
Author: Anglia Computer Solutions
Description: Blog/archive chrome for stormcoatings.co.uk. Renders the site's real Elementor header and footer around post content so the blog matches the Elementor Canvas pages.
Version: 1.0.1
*/

:root{
  --storm-blue:#1070c0;
  --storm-dark:#0a0a0a;
  --storm-body:#444;
  --storm-grey:#f2f6f9;
}

body{
  margin:0;
  font-family:'Source Sans 3',sans-serif;
  color:var(--storm-body);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--storm-blue)}

/* ---------- hero band (mirrors the Elementor page heroes) ---------- */
.storm-hero{
  position:relative;
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
  min-height:340px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:90px 20px;
}
.storm-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(8,20,28,.6);
}
.storm-hero-inner{position:relative;max-width:900px;margin:0 auto}
.storm-hero h1{
  font-family:Oswald,sans-serif;
  font-weight:700;
  font-size:52px;
  line-height:1.15;
  text-transform:uppercase;
  color:#fff;
  margin:0;
  letter-spacing:.5px;
}
.storm-hero p{
  font-family:'Source Sans 3',sans-serif;
  font-size:19px;
  color:#e9eef2;
  margin:14px 0 0;
}

/* ---------- content ---------- */
.storm-main{padding:66px 20px}
.storm-wrap{max-width:1000px;margin:0 auto}

.storm-article h2{
  font-family:Oswald,sans-serif;font-weight:600;font-size:30px;
  text-transform:uppercase;color:var(--storm-dark);
  line-height:1.25;margin:34px 0 14px;
}
.storm-article h3{
  font-family:Oswald,sans-serif;font-weight:600;font-size:20px;
  color:var(--storm-dark);margin:26px 0 8px;
}
.storm-article p,.storm-article li{
  font-family:'Source Sans 3',sans-serif;font-size:17px;
  color:var(--storm-body);line-height:1.75;
}
.storm-article ul{margin:0 0 18px 20px}
.storm-article li{margin-bottom:8px}
.storm-article img{border-radius:8px;margin:16px 0}
.storm-meta{
  font-family:'Source Sans 3',sans-serif;font-size:15px;color:#7a8284;
  margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px;
}

/* ---------- listing cards ---------- */
.storm-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:28px;
}
.storm-card{
  background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:flex;flex-direction:column;
}
.storm-card-img{display:block;height:210px;overflow:hidden;background:var(--storm-grey)}
.storm-card-img img{width:100%;height:210px;object-fit:cover;display:block;border-radius:0;margin:0}
.storm-card-body{padding:22px;display:flex;flex-direction:column;flex:1}
.storm-card h2{
  font-family:Oswald,sans-serif;font-weight:600;font-size:21px;
  text-transform:uppercase;line-height:1.25;margin:0 0 10px;
}
.storm-card h2 a{color:var(--storm-dark);text-decoration:none}
.storm-card h2 a:hover{color:var(--storm-blue)}
.storm-card p{font-size:16px;line-height:1.65;margin:0 0 18px}
.storm-btn{
  display:inline-block;background:var(--storm-blue);color:#fff!important;
  font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:14px;
  text-transform:uppercase;letter-spacing:1px;text-decoration:none;
  padding:13px 30px;border-radius:50px;align-self:flex-start;margin-top:auto;
}
.storm-btn:hover{background:#0c5599}

/* ---------- CTA band (matches the pages) ---------- */
.storm-cta{background:var(--storm-blue);text-align:center;padding:66px 20px;}
.storm-cta h2{
  font-family:Oswald,sans-serif;font-weight:700;font-size:32px;
  text-transform:uppercase;color:#fff;margin:0 0 12px;
}
.storm-cta p{color:#fff;font-size:19px;margin:0 auto 22px;max-width:720px}
.storm-cta .storm-btn{background:#fff;color:var(--storm-blue)!important;font-weight:700}
.storm-cta .storm-btn:hover{background:#e8f1f9}

.storm-pagination{margin-top:40px;text-align:center;font-family:'Source Sans 3',sans-serif}
.storm-pagination .page-numbers{
  display:inline-block;padding:9px 15px;margin:0 3px;border-radius:6px;
  border:1px solid #d8dee5;color:var(--storm-dark);text-decoration:none;
}
.storm-pagination .current{background:var(--storm-blue);color:#fff;border-color:var(--storm-blue)}

@media(max-width:767px){
  .storm-hero{background-attachment:scroll;min-height:240px;padding:60px 18px}
  .storm-hero h1{font-size:32px}
  .storm-hero p{font-size:16px}
  .storm-main{padding:44px 18px}
  .storm-article h2{font-size:25px}
  .storm-cta h2{font-size:26px}
}