/* water-damage-restoration-san-antonio.net — single stylesheet, mobile-first */

:root {
  --navy: #0e2f44;
  --navy-dark: #081f2e;
  --navy-light: #175a7d;
  --blue: #2b8ab8;
  --accent: #d93636;
  --accent-dark: #b32424;
  --text: #22303e;
  --text-light: #5a6b7c;
  --bg: #ffffff;
  --bg-alt: #f1f6f9;
  --border: #dbe5ec;
  --radius: 8px;
  --max: 1100px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  /* room for sticky call bar on mobile */
  padding-bottom: 64px;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy-light); }

.container { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* ---------- Header ---------- */

.site-header {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  max-width: var(--max);
  margin: 0 auto;
}

/* NOTE: this brand name is long ("Water Damage Restoration San Antonio").
   It must be allowed to shrink and wrap, or the header forces the whole
   document wider than the viewport on phones — which also stretches the
   position:fixed call bar past the screen edge. Do not restore flex-shrink:0. */
.logo {
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 1;
  min-width: 0;
}

.logo svg { width: 26px; height: 26px; fill: var(--blue); flex-shrink: 0; }

@media (max-width: 600px) {
  .logo { font-size: .95rem; }
  .header-inner { gap: 10px; padding: 10px 16px; }
}

.logo span small {
  display: block;
  font-weight: 500;
  font-size: .68rem;
  color: #b8cdd8;
  letter-spacing: .04em;
}

.nav-toggle {
  background: none;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 6px;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}

.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--navy-dark);
  padding: 8px 0;
}

.site-nav.open { display: block; }

.site-nav a {
  display: block;
  color: #e6eef4;
  text-decoration: none;
  padding: 10px 20px;
  font-weight: 600;
}

.site-nav a:hover { background: var(--navy-light); }

.header-call {
  display: none;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  padding: 10px 18px;
  border-radius: var(--radius);
  white-space: nowrap;
}

.header-call:hover { background: var(--accent-dark); }

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: flex;
    position: static;
    background: none;
    padding: 0;
    gap: 4px;
  }
  .site-nav a { padding: 8px 12px; border-radius: 6px; font-size: .95rem; }
  .header-call { display: inline-block; }
}

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-light) 100%);
  color: #fff;
  padding: 56px 0 64px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(1.7rem, 5vw, 2.7rem);
  line-height: 1.2;
  margin-bottom: 14px;
}

.hero p.sub {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: #c9dae4;
  max-width: 640px;
  margin: 0 auto 28px;
}

.btn-call {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 16px 34px;
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(217,54,54,.4);
}

.btn-call:hover { background: var(--accent-dark); }

.hero .hours { margin-top: 14px; font-size: .9rem; color: #9fb9c6; }

/* ---------- Urgency strip ---------- */

.urgency-strip {
  background: var(--accent);
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  font-weight: 700;
  font-size: .95rem;
}

.urgency-strip a { color: #fff; }

/* ---------- Trust bar ---------- */

.trust-bar { background: var(--bg-alt); border-bottom: 1px solid var(--border); }

.trust-bar ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  padding: 14px 20px;
  max-width: var(--max);
  margin: 0 auto;
  font-weight: 700;
  font-size: .88rem;
  color: var(--navy);
}

.trust-bar li { display: flex; align-items: center; gap: 7px; }

.trust-bar svg { width: 17px; height: 17px; fill: var(--blue); flex-shrink: 0; }

/* ---------- Sections ---------- */

section { padding: 52px 0; }

section.alt { background: var(--bg-alt); }

.section-title {
  text-align: center;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--navy);
  margin-bottom: 10px;
}

.section-lead {
  text-align: center;
  color: var(--text-light);
  max-width: 680px;
  margin: 0 auto 36px;
}

/* ---------- Service cards ---------- */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 600px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .cards { grid-template-columns: 1fr 1fr 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-decoration: none;
  color: var(--text);
  display: block;
  transition: box-shadow .15s ease, transform .15s ease;
}

.card:hover { box-shadow: 0 6px 18px rgba(14,47,68,.12); transform: translateY(-2px); }

.card svg { width: 38px; height: 38px; fill: var(--blue); margin-bottom: 12px; }

.card h3 { color: var(--navy); font-size: 1.08rem; margin-bottom: 6px; }

.card p { font-size: .92rem; color: var(--text-light); }

.card .more { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--accent-dark); font-size: .9rem; }

/* ---------- Content / prose ---------- */

.content-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 6px 0 20px;
}

/* Low-resolution sources. These files are smaller than the 760px content
   column, so they carry an inline max-width of roughly their true size —
   displaying them full width would upscale them into visible blur.
   When higher-resolution replacements are sourced, drop both this class and
   the inline max-width. See IMAGES.md. */
.content-img--sm { margin-left: auto; margin-right: auto; display: block; }

.prose h2 { color: var(--navy); font-size: 1.45rem; margin: 34px 0 12px; }
.prose h3 { color: var(--navy); font-size: 1.15rem; margin: 24px 0 8px; }
.prose p { margin-bottom: 14px; }
.prose ul, .prose ol { margin: 0 0 14px 22px; }
.prose li { margin-bottom: 6px; }
.prose .max-prose { max-width: 760px; margin-left: auto; margin-right: auto; }
.max-prose { max-width: 760px; margin-left: auto; margin-right: auto; }

.highlight-box {
  background: var(--bg-alt);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 20px;
  margin: 20px 0;
}

.byline { font-size: .85rem; color: var(--text-light); margin-bottom: 18px; }

/* ---------- Cost table ---------- */

.cost-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .95rem; }
.cost-table th, .cost-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.cost-table th { background: var(--navy); color: #fff; }
.cost-table tr:nth-child(even) td { background: var(--bg-alt); }

/* ---------- Steps ---------- */

.steps { display: grid; gap: 18px; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: 1fr 1fr 1fr; } }

.step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}

.step .num {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}

.step h3 { color: var(--navy); margin-bottom: 6px; font-size: 1.05rem; }
.step p { font-size: .92rem; color: var(--text-light); }

/* ---------- Areas ---------- */

.area-links { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 700px) { .area-links { grid-template-columns: repeat(5, 1fr); } }

.area-links a {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-decoration: none;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
}

.area-links a:hover { border-color: var(--accent); color: var(--accent-dark); }

/* ---------- FAQ ---------- */

.faq-list { max-width: 760px; margin: 0 auto; }

.faq-list details {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  padding: 0;
}

.faq-list summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
  padding: 16px 18px;
  list-style: none;
  position: relative;
  padding-right: 40px;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 800;
}

.faq-list details[open] summary::after { content: "\2212"; }

.faq-list details p { padding: 0 18px 16px; color: var(--text-light); }

/* ---------- CTA band ---------- */

.cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  text-align: center;
  padding: 48px 20px;
}

.cta-band h2 { font-size: clamp(1.3rem, 4vw, 1.9rem); margin-bottom: 10px; }
.cta-band p { color: #c9dae4; margin-bottom: 22px; }

/* ---------- Breadcrumb ---------- */

.breadcrumb { font-size: .85rem; color: var(--text-light); padding: 14px 0 0; }
.breadcrumb a { color: var(--text-light); }

/* ---------- Related links ---------- */

.related-links { list-style: none; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .related-links { grid-template-columns: 1fr 1fr; } }

.related-links a {
  display: block;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  text-decoration: none;
  font-weight: 600;
  color: var(--navy);
}

.related-links a:hover { border-color: var(--accent); }

/* ---------- Footer ---------- */

.site-footer { background: var(--navy-dark); color: #b8cdd8; padding: 44px 0 24px; font-size: .9rem; }

.footer-grid { display: grid; gap: 28px; grid-template-columns: 1fr; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.site-footer h2 { color: #fff; margin-bottom: 12px; font-size: 1rem; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: #b8cdd8; text-decoration: none; }
.site-footer a:hover { color: #fff; }

.footer-phone { color: #ff6b6b; font-weight: 800; font-size: 1.1rem; text-decoration: none; }

.disclosure {
  max-width: var(--max);
  margin: 28px auto 0;
  padding: 18px 20px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .78rem;
  color: #8aa0ae;
  line-height: 1.55;
}

/* ---------- Sticky mobile call bar ---------- */

.mobile-call-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--accent);
  text-align: center;
}

.mobile-call-bar a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 16px;
}

@media (min-width: 860px) {
  .mobile-call-bar { display: none; }
  body { padding-bottom: 0; }
}