/* styles.css - SH Cleaning Services landing page
   Easy to edit - change colors, spacing, fonts as needed
*/

:root{
  --brand-blue: #1e6fb9;
  --brand-light: #eaf4ff;
  --accent: #00a3a3;
  --text: #1f2937;
  --muted: #6b7280;
  --rounded: 10px;
  --container-w: 1100px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: light;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:#ffffff;
  color:var(--text);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

/* Layout container */
.container{
  width:90%;
  max-width:var(--container-w);
  margin:0 auto;
}

/* Header / top */
.site-header{
  background: linear-gradient(180deg, rgba(30,111,185,0.06), rgba(250,252,255,0));
  padding:18px 0 30px 0;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo{ width:78px; height:auto; border-radius:6px; object-fit:contain; background:#fff; padding:6px;}
.brand-text h1{ margin:0; font-size:18px; letter-spacing:0.2px;}
.brand-text .tagline{ margin:0; font-size:13px; color:var(--muted);}

/* Nav */
.top-nav{ display:flex; gap:16px; align-items:center; font-size:14px;}
.top-nav a{ color:var(--text); text-decoration:none; padding:8px 6px; border-radius:6px;}
.top-nav a:hover{ background:rgba(30,111,185,0.06); }

.top-nav .phone{ background:var(--brand-blue); color:#fff; padding:8px 12px; font-weight:600; border-radius:8px; }

/* Hero */
.hero{
  display:flex;
  gap:28px;
  align-items:stretch;
  padding:36px 0 18px 0;
}

.hero-left{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:16px; }
.hero-right{ width:360px; display:flex; align-items:center; justify-content:center; }

.hero h2{ margin:0; font-size:28px; color:var(--brand-blue); }
.lead{ color:var(--muted); margin:0 0 6px 0; font-size:15px; }

.postcode-form{ margin-top:6px; }
.postcode-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.postcode-row input[type="text"]{
  flex:1 1 220px;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid #e6eef9;
  box-shadow:0 1px 2px rgba(17,24,39,0.03);
  font-size:15px;
}
.postcode-row select{
  width:230px;
  max-width:40%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #e6eef9;
  background:#fff;
}
.btn-primary{
  background:var(--brand-blue);
  color:#fff;
  border:1px solid var(--brand-blue);
  padding:12px 16px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  white-space:nowrap;
}
.btn-primary:hover{ filter:brightness(0.95); transform:translateY(-1px); transition:all .15s ease; }

.small-note{ font-size:13px; color:var(--muted); margin:6px 0 0 0; }

/* trust list */
.trust-list{ display:flex; gap:12px; list-style:none; padding:0; margin:10px 0 0 0; flex-wrap:wrap; color:var(--muted); }
.trust-list li{ background:var(--brand-light); padding:8px 10px; border-radius:8px; font-size:13px; }

/* Services */
.services{ padding:28px 0; }
.services h3{ margin:0 0 6px 0; color:var(--brand-blue); }
.section-lead{ color:var(--muted); margin:0 0 16px 0; }

.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:12px; }
.service-card{ padding:18px; background:#fff; border-radius:10px; border:1px solid #f1f5f9; box-shadow:0 6px 18px rgba(15,23,42,0.02); }
.service-card h4{ margin:0 0 8px 0; font-size:16px; color:var(--text); }
.service-card p{ margin:0 0 12px 0; color:var(--muted); font-size:14px; }
.btn-ghost{ display:inline-block; padding:8px 12px; border-radius:8px; border:1px solid #e2e8f0; background:#fff; text-decoration:none; color:var(--brand-blue); font-weight:600; }

/* How it works */
.how{ padding:18px 0; background:#fbfdff; border-top:1px solid #f4f7fb; border-bottom:1px solid #f4f7fb; }
.how-grid{ display:flex; gap:12px; margin-top:12px; }
.how-step{ flex:1; padding:14px; background:#fff; border-radius:10px; box-shadow:0 6px 18px rgba(15,23,42,0.02); }
.step-num{ width:36px; height:36px; background:var(--brand-blue); color:#fff; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; font-weight:700; margin-bottom:8px; }

/* Reviews */
.reviews{ padding:28px 0; }
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:12px; }
.review{ background:#fff; padding:16px; border-radius:10px; border:1px solid #f2f6fb; }
.review p{ margin:0 0 8px 0; color:var(--muted); }
.review cite{ font-size:13px; color:var(--text); font-weight:600; }

/* Pricing */
.pricing{ padding:18px 0; }
.pricing-cards{ display:flex; gap:12px; margin-top:12px; }
.card{ flex:1; padding:14px; background:#fff; border-radius:10px; text-align:center; border:1px solid #eef6ff; }
.card strong{ display:block; margin-bottom:8px; color:var(--brand-blue); }

/* Footer */
.site-footer{ padding:28px 0 18px 0; background:#fafcff; margin-top:24px; border-top:1px solid #f1f7fb; }
.footer-grid{ display:grid; grid-template-columns:1fr 220px 1fr; gap:18px; align-items:start; }
.footer-logo{ width:88px; margin-bottom:8px; display:block; }
.footer-links ul{ list-style:none; padding:0; margin:0; }
.footer-links ul li{ margin-bottom:8px; }
.footer-links a{ color:var(--text); text-decoration:none; }
.map-placeholder{ background:#fff; border:1px dashed #e6eef9; padding:12px; border-radius:8px; color:var(--muted); text-align:center; }

/* Footer bottom */
.footer-bottom{ margin-top:16px; text-align:center; padding-top:12px; border-top:1px solid #eef6ff; font-size:13px; color:var(--muted); }

/* Responsive */
@media (max-width:980px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .reviews-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
  .hero{ flex-direction:column; gap:16px; }
  .hero-right{ width:100%; order:2; }
}

@media (max-width:640px){
  .services-grid{ grid-template-columns:1fr; }
  .reviews-grid{ grid-template-columns:1fr; }
  .postcode-row select{ width:100%; }
  .top-nav{ display:none; } /* mobile can use a hamburger if you add later */
  .brand-text h1{ font-size:16px; }
  .hero h2{ font-size:22px; }
  .logo{ width:60px; }
}
  
/* utility classes */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Secondary button (used on location pages + CTAs) */
.btn-secondary{
  background:#ffffff;
  color:var(--brand-blue);
  border:1px solid rgba(30,111,185,0.35);
  padding:12px 16px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  white-space:nowrap;
}
.btn-secondary:hover{
  border-color:rgba(30,111,185,0.6);
  background:rgba(30,111,185,0.06);
  transform:translateY(-1px);
  transition:all .15s ease;
}

/* Make CTA links look like buttons even if other classes are present */
a.btn-primary, a.btn-secondary{ text-decoration:none; }


/* --- CTA Button Visibility Fix --- */
.bg-slate-900 .btn-secondary,
.bg-dark .btn-secondary{
  background:transparent;
  color:#ffffff;
  border:2px solid #ffffff;
}
.bg-slate-900 .btn-primary,
.bg-dark .btn-primary{
  border:2px solid var(--brand-blue);
}