/* ======================
   North Coast Pest Control – Shared Styles
   One stylesheet to rule them all.
   ====================== */

/* Design tokens */
:root{
  --bg:#000000;
  --cards:#111111;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#f97316;
  --accent-light:#fb923c;
}

/* Resets & base */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
}

/* Hex textured background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.9)) no-repeat,
    radial-gradient(circle at 30% 20%, rgba(249,115,22,0.05), transparent 70%) no-repeat,
    #000 url("background-fluid-hex.svg") repeat;
  background-size:100% 100%, 100% 100%, 100px 85px;
  background-position:0 0, 0 0, 0 0;
  background-repeat:no-repeat, no-repeat, repeat;
}

/* Layout container */
.wrap{ max-width:1280px; margin:0 auto; padding:28px; position:relative; z-index:1 }

/* Header */
header{ padding:12px 0; border-bottom:3px solid var(--accent); margin-bottom:12px; position:relative }
.brand{ display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit }
.brand img{ height:160px; max-width:100%; width:auto; display:block }

/* Buttons (nav + actions share this) */
.btn{
  padding:12px 16px;
  border-radius:12px;
  text-decoration:none;
  border:1px solid var(--accent-light);
  background:#111111;
  color:var(--text);
  transition:transform .05s ease, background .2s ease, border .2s ease;
  -webkit-tap-highlight-color:transparent;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn:hover{ transform:translateY(-1px); background:var(--accent); color:#000; border-color:var(--accent-light) }
.btn.primary{ background:var(--accent); border:1px solid var(--accent-light); color:#000 !important; font-weight:700 }
.btn.icon{ padding:10px 12px }
.btn.icon svg{ width:18px; height:18px; display:block; fill:currentColor }

/* Header row under the logo */
.header-actions{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:6px }
.nav-links{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; border:none; margin:0; padding:0 }
.contact-icons{ display:flex; gap:10px }
.sep{ width:2px; height:32px; background:var(--accent-light); border-radius:2px }

/* Hero */
.hero{
  display:grid;
  gap:18px;
  margin:36px 0;
  border-left:5px solid var(--accent);
  padding-left:16px;
}
.hero h2{
  font-size:28px;        /* fits on one line on typical laptops */
  line-height:1.2;
  margin:0;
  color:var(--accent-light);
  text-wrap:balance;
}
.hero .muted{ margin:0 }

/* Grid helpers */
.grid{ display:grid; gap:16px }
@media(min-width:900px){ .grid{ grid-template-columns:1.2fr .8fr } }
@media(min-width:1200px){
  .hero h2{ font-size:34px } /* bumps on larger screens */
  .grid{ gap:20px }
}

/* Cards */
.card{ background:rgba(17,17,17,0.8); border:1px solid var(--accent); border-radius:16px; padding:22px }
h3{ margin:0 0 10px 0; font-size:20px; color:var(--accent-light) }
ul{ margin:0; padding-left:18px }
li{ margin:6px 0 }
.muted{ color:var(--muted) }

/* Footer */
footer{ margin:28px 0; color:var(--muted); font-size:14px; border-top:2px solid var(--accent) }

/* Badge */
.badge{
  display:inline-block;
  padding:6px 10px;
  background:var(--accent);
  border-radius:999px;
  font-size:12px;
  color:#000;
  font-weight:600;
}

/* Page-specific helpers for Services */
.services-grid{ display:grid; gap:16px }
@media(min-width:900px){ .services-grid{ grid-template-columns:1fr 1fr } }
.svc-cta{ margin-top:10px }

/* Accessibility + mobile tweaks */
@media (prefers-reduced-motion: reduce){ #reviews-container{ transition:none !important } }
#reviews-container .body{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden }
.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 }

@media(max-width:480px){
  .btn{ padding:14px 18px }
  .brand img{ height:120px }
  .hero{ margin-top:12px }
  body::before{ background-size:100% 100%, 100% 100%, 72px 63px }
}

@media(max-width:600px){
  .header-actions{ gap:8px }
}