/* ======================
   Bogged Down Septic Pits – Shared Styles
   One stylesheet to rule them all.
   ====================== */

/* Design tokens */
:root{
  --bg:#1A1A1A;
  --cards:#2D2416;
  --text:#E8DCC8;
  --muted:#9ca3af;
  --accent:#C9A868;
  --accent-light:#D9B878;
  --secondary:#5C4632;
  --hero-bg:#3D3020;
}

/* 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);
  background:var(--bg);
}

/* Subtle textured background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(to bottom, rgba(61,48,32,0.3), transparent 40%) no-repeat,
    radial-gradient(circle at 30% 20%, rgba(201,168,104,0.08), transparent 60%) no-repeat,
    radial-gradient(circle at 70% 80%, rgba(92,70,50,0.15), transparent 50%) no-repeat,
    var(--bg);
  background-size:100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position:0 0, 0 0, 0 0, 0 0;
}

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

/* Header */
header{ 
  padding:0; 
  border:none; 
  margin-bottom:0; 
  position:relative;
  background:linear-gradient(to bottom, var(--hero-bg) 0%, var(--hero-bg) 70%, transparent 100%);
  border-radius:16px 16px 0 0;
}
.brand{ 
  display:flex; 
  gap:12px; 
  align-items:center; 
  justify-content:center;
  text-decoration:none; 
  color:inherit;
  padding:24px 20px 20px 20px;
}
.brand img{ height:180px; 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);
  background:var(--secondary);
  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;
  min-height:44px;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); background:var(--accent); color:#1A1A1A; border-color:var(--accent) }
.btn:active{ transform:translateY(0) }
.btn.primary{ background:var(--accent); border:1px solid var(--accent); color:#1A1A1A !important; font-weight:700 }
.btn.primary:hover{ background:var(--accent-light); border-color:var(--accent-light) }
.btn.icon{ padding:10px 12px; min-height:44px }
.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); border-radius:2px }

/* Hero */
.hero{
  display:grid;
  gap:14px;
  margin:0;
  border-left:none;
  padding:24px;
  background:var(--hero-bg);
  border-radius:0 0 16px 16px;
  border-top:3px solid var(--accent);
}
.hero h1,
.hero h2{
  font-size:28px;
  line-height:1.2;
  margin:0;
  color:var(--text);
  text-wrap:balance;
}
.hero .muted{ margin:0 }
main{ margin-top:24px }

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

/* Cards */
.card{ background:var(--cards); border:1px solid var(--secondary); border-radius:16px; padding:18px }
h3{ margin:0 0 8px 0; font-size:18px; color:var(--text) }
ul{ margin:0; padding-left:18px }
li{ margin:4px 0 }
p{ margin:0 0 8px 0 }
.muted{ color:var(--muted) }
a:not(.btn){ color:var(--accent); text-decoration:underline; text-decoration-color:rgba(201,168,104,0.4); transition:text-decoration-color .2s ease }
a:not(.btn):hover{ text-decoration-color:var(--accent); text-decoration-thickness:2px }

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

/* Badge */
.badge{
  display:inline-block;
  padding:6px 10px;
  background:var(--accent);
  border-radius:999px;
  font-size:12px;
  color:#1A1A1A;
  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 }

/* Reviews styling */
.reviews-grid{ display:grid; gap:20px; grid-template-columns:1fr }
@media(min-width:900px){ .reviews-grid{ grid-template-columns:1fr 1fr } }
.review-card{ background:rgba(61,48,32,0.6); border:1px solid rgba(201,168,104,0.3); border-radius:12px; padding:18px }
.stars-container{ font-size:20px; line-height:1; margin-bottom:12px; color:var(--accent) }
.stars-filled{ color:var(--accent) }
.stars-empty{ color:rgba(201,168,104,0.3) }
.review-body{ color:var(--text); line-height:1.6; margin-bottom:10px; font-style:italic }
.review-meta{ color:var(--muted); font-size:14px; margin-top:8px }
.reviews-loading, .reviews-error{ color:var(--muted); padding:20px; text-align:center }

/* Accessibility + mobile tweaks */
@media (prefers-reduced-motion: reduce){ 
  #reviews-container{ transition:none !important }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.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 }

/* Focus indicators for accessibility */
.btn:focus-visible,
a:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:12px;
}
.btn:focus-visible {
  background:var(--accent);
  color:#1A1A1A;
}

@media(max-width:480px){
  .btn{ padding:14px 18px; min-height:48px }
  .brand img{ height:120px }
  .brand{ padding:20px 16px 16px 16px }
  .header-actions{ padding:0 16px 20px 16px }
  .reviews-grid{ grid-template-columns:1fr }
  .header-actions{ flex-direction:column; gap:12px }
  .nav-links{ width:100%; justify-content:stretch }
  .nav-links .btn{ flex:1; text-align:center }
}

@media(max-width:600px){
  .header-actions{ gap:8px }
  .grid{ grid-template-columns:1fr !important }
}

/* Smooth scroll */
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }