/*
Theme Name: CP Drainage Pro V3
Theme URI: https://www.blockeddrains-kent.co.uk/
Author: Chris Peters / OpenAI
Description: Lightweight reusable drainage business theme with a sticky header, fixed Call and WhatsApp actions, wider content, polished service links, and no automatic directory of every WordPress page.
Version: 3.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: cp-drainage-pro
*/

:root {
  --cp-navy: #10263f;
  --cp-navy-2: #173b61;
  --cp-orange: #e9572a;
  --cp-orange-dark: #c8421d;
  --cp-green: #1f9d55;
  --cp-green-dark: #167b42;
  --cp-ink: #17202a;
  --cp-muted: #5d6874;
  --cp-line: #dfe5ea;
  --cp-bg: #f4f7f9;
  --cp-white: #ffffff;
  --cp-width: 1320px;
  --cp-content: 1180px;
  --cp-radius: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--cp-ink);
  background: var(--cp-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cp-navy-2); text-underline-offset: 3px; }
a:hover { color: var(--cp-orange-dark); }
img { max-width: 100%; height: auto; }

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; width: 1px; word-wrap: normal !important;
}

.cp-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--cp-white);
  background: linear-gradient(135deg, #10263f 0%, #163a5e 100%);
  box-shadow: 0 3px 18px rgba(0,0,0,.2);
}
.admin-bar .cp-site-header { top: 32px; }
.cp-header-inner {
  max-width: var(--cp-width);
  margin: 0 auto;
  padding: 13px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.cp-brand { flex: 1; min-width: 250px; }
.cp-brand a { color: #fff; text-decoration: none; }
.cp-site-title { margin: 0; font-size: 24px; line-height: 1.12; font-weight: 900; letter-spacing: -.015em; }
.cp-trust-strip { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; color: #e7f0f7; font-size: 13px; line-height: 1.25; font-weight: 650; }
.cp-trust-item::before { content: "✓"; color: #ffb59f; margin-right: 4px; font-weight: 900; }
.cp-header-nav ul { display: flex; gap: 18px; align-items: center; margin: 0; padding: 0; list-style: none; }
.cp-header-nav a { color: #fff; text-decoration: none; font-size: 15px; font-weight: 800; }
.cp-header-nav a:hover { color: #ffd5c8; }
.cp-header-actions { display: flex; gap: 10px; align-items: center; }

.cp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 50px;
  padding: 10px 18px;
  border: 0;
  border-radius: 9px;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 850;
  line-height: 1.08;
  box-shadow: 0 3px 9px rgba(0,0,0,.18);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.cp-button:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.22); filter: brightness(.97); }
.cp-button-call { background: var(--cp-orange); }
.cp-button-call:hover { background: var(--cp-orange-dark); }
.cp-button-whatsapp { background: var(--cp-green); }
.cp-button-whatsapp:hover { background: var(--cp-green-dark); }
.cp-button-text { display: flex; flex-direction: column; align-items: center; }
.cp-button-text small { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; opacity: .95; }

.cp-main { min-height: 65vh; }
.cp-page-shell {
  max-width: var(--cp-content);
  margin: 32px auto 56px;
  padding: 0 22px;
}
.cp-entry {
  background: var(--cp-white);
  border: 1px solid var(--cp-line);
  border-radius: 16px;
  padding: clamp(25px, 3.5vw, 46px);
  box-shadow: 0 9px 30px rgba(16,38,63,.075);
}
.cp-entry-header { margin: 0 0 24px; }
.cp-entry-title {
  margin: 0;
  color: var(--cp-navy);
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.07;
  letter-spacing: -.028em;
}
.cp-entry-content > :first-child { margin-top: 0; }
.cp-entry-content h1,
.cp-entry-content h2,
.cp-entry-content h3 { color: var(--cp-navy); line-height: 1.18; letter-spacing: -.012em; }
.cp-entry-content h2 { margin-top: 1.5em; margin-bottom: .55em; font-size: clamp(27px, 2.8vw, 35px); }
.cp-entry-content h3 { margin-top: 1.3em; margin-bottom: .45em; font-size: 24px; }
.cp-entry-content p { margin: 0 0 1.05em; }
.cp-entry-content ul, .cp-entry-content ol { padding-left: 1.45em; }
.cp-entry-content .wp-block-button__link { border-radius: 9px; }

/* Harmonise approved SEO Engine output. */
.cp-entry-content .cp-seo-v46,
.cp-entry-content .cp-seo-v50-service {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.68 !important;
}
.cp-entry-content .cp-seo-v46 > div,
.cp-entry-content .cp-seo-v50-service > div {
  max-width: 100%;
  border-radius: var(--cp-radius) !important;
}

/* Keep Chris's profile photograph at its proven clear size. */
.cp-entry-content img[alt*="Chris Peters"] {
  width: 125px !important;
  height: 125px !important;
  max-width: 125px !important;
  object-fit: cover;
  border-radius: 8px !important;
}

/* Turn the small service and nearby-area links into consistent useful buttons. */
.cp-entry-content a[href*="/blocked-drains/"],
.cp-entry-content a[href*="/blocked-toilets/"],
.cp-entry-content a[href*="/blocked-sinks/"],
.cp-entry-content a[href*="/outside-drains/"],
.cp-entry-content a[href*="/drain-cleaning/"],
.cp-entry-content a[href*="/cctv-drain-surveys/"],
.cp-entry-content a[href*="/drain-repairs/"],
.cp-entry-content a[href*="/blocked-drains-"] {
  border: 1px solid #ccd7e0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--cp-navy) !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(16,38,63,.06);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.cp-entry-content a[href*="/blocked-drains/"]:hover,
.cp-entry-content a[href*="/blocked-toilets/"]:hover,
.cp-entry-content a[href*="/blocked-sinks/"]:hover,
.cp-entry-content a[href*="/outside-drains/"]:hover,
.cp-entry-content a[href*="/drain-cleaning/"]:hover,
.cp-entry-content a[href*="/cctv-drain-surveys/"]:hover,
.cp-entry-content a[href*="/drain-repairs/"]:hover,
.cp-entry-content a[href*="/blocked-drains-"]:hover {
  transform: translateY(-1px);
  border-color: var(--cp-orange) !important;
  background: #fff8f5 !important;
  box-shadow: 0 4px 10px rgba(16,38,63,.10);
}

/* V3: force every in-content telephone CTA to use the same approved orange as the header Call button.
   The SEO Engine writes an older red colour inline, so this deliberate !important override keeps the branding consistent. */
.cp-entry-content .cp-seo-v46 a[href^="tel:"],
.cp-entry-content .cp-seo-v50-service a[href^="tel:"],
.cp-entry-content a[href^="tel:"] {
  background: var(--cp-orange) !important;
  border-color: var(--cp-orange) !important;
  color: #fff !important;
}
.cp-entry-content .cp-seo-v46 a[href^="tel:"]:hover,
.cp-entry-content .cp-seo-v50-service a[href^="tel:"]:hover,
.cp-entry-content a[href^="tel:"]:hover {
  background: var(--cp-orange-dark) !important;
  border-color: var(--cp-orange-dark) !important;
  color: #fff !important;
}

.cp-site-footer {
  color: #fff;
  background: linear-gradient(135deg, #10263f 0%, #163a5e 100%);
  padding: 38px 22px 90px;
}
.cp-footer-inner {
  max-width: var(--cp-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 34px;
  align-items: start;
}
.cp-footer-title { margin: 0 0 8px; font-size: 23px; }
.cp-footer-copy { margin: 0 0 6px; color: #d6e1eb; }
.cp-footer-menu ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: flex-end; }
.cp-footer-menu a { color: #fff; text-decoration: none; font-weight: 750; font-size: 15px; }
.cp-footer-bottom { max-width: var(--cp-width); margin: 25px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); color: #c9d6e1; font-size: 14px; }

.cp-mobile-actions {
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  gap: 8px;
  padding: 8px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 -4px 18px rgba(0,0,0,.18);
}
.cp-mobile-actions .cp-button { flex: 1; min-height: 56px; padding: 8px 7px; border-radius: 8px; font-size: 16px; }
.cp-empty { text-align: center; padding: 60px 20px; }
.cp-pagination { margin-top: 28px; display: flex; justify-content: space-between; }

@media (max-width: 1050px) {
  .cp-header-nav { display: none; }
  .cp-header-inner { padding: 12px 18px; }
}
@media (max-width: 900px) {
  .cp-header-actions .cp-button-whatsapp { display: none; }
  .cp-page-shell { margin-top: 22px; padding: 0 12px; }
  .cp-entry { padding: 25px 20px; border-radius: 11px; }
  .cp-footer-inner { grid-template-columns: 1fr; }
  .cp-footer-menu ul { justify-content: flex-start; }
}
@media (max-width: 700px) {
  body { font-size: 17px; padding-bottom: 70px; }
  .admin-bar .cp-site-header { top: 46px; }
  .cp-header-actions { display: none; }
  .cp-mobile-actions { display: flex; }
  .cp-site-footer { padding-bottom: 94px; }
  .cp-site-title { font-size: 20px; }
  .cp-trust-strip { gap: 3px 9px; font-size: 11px; }
  .cp-entry-title { font-size: 34px; }
  .cp-entry-content h2 { font-size: 27px; }
}
@media (max-width: 782px) {
  .admin-bar .cp-site-header { top: 46px; }
}