/* Import Poppins font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root {
  --brand: #5da6cf;
  --text:  #121212;
  --muted: #5a5a5a;
  /* Dark overlay tint used on background images. A lower alpha value allows more of the underlying photo to show through. */
  --overlay: rgba(0,0,0,0.4);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { font-family:'Poppins', sans-serif; color:var(--text); background:#fff; }

/* ===== Global page backgrounds (now on EVERY page) ===== */
body::before, body::after {
  content:""; position:fixed; inset:0; z-index:-2;
}
body::before { background-size:cover; background-position:center; }
body::after  { background:var(--overlay); z-index:-1; }

/* Page-specific background images */
/* Use a local background image for all pages. The same image is applied but overlaid with varying dark tints, giving each page a consistent, sleek look. */
body.home::before {
  background-image:url('assets/bg.png');
}
body.services::before {
  background-image:url('assets/bg.png');
}
body.contact::before {
  background-image:url('assets/bg.png');
}

/* ===== Layout ===== */
.max { max-width:1120px; margin:auto; padding:0 24px; }
header {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.82); backdrop-filter:blur(10px);
  border-bottom:1px solid #eee;
}
.nav { display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.logo-wrap { display:flex; align-items:center; gap:12px; }
.logo { height:44px; width:auto; }
.brand { font-weight:600; letter-spacing:.2px; }
nav a { margin-left:20px; color:var(--text); text-decoration:none; font-weight:500; }
nav a:hover { color:var(--brand); }

/* ===== Hero ===== */
.hero {
  min-height:58vh; display:grid; place-items:center; text-align:center; color:#fff;
  padding:72px 24px 48px;
}
.hero img.logo-large { height:96px; margin-bottom:20px; filter:drop-shadow(0 8px 20px rgba(0,0,0,.35)); }
.hero h1 { font-size:clamp(2.2rem,4vw,3rem); font-weight:600; }
.hero p { margin-top:10px; color:#eaeaea; font-size:1.1rem; }
.cta {
  display:inline-block; margin-top:26px; padding:12px 24px; border-radius:999px;
  background:var(--brand); color:#fff; text-decoration:none; font-weight:600;
}
.cta:hover { filter:brightness(.95); }

.section { padding:72px 24px; }
.section h2 { color:#fff; font-size:clamp(1.8rem,3vw,2.2rem); text-align:center; margin-bottom:16px; }
.section p.lead { color:#e9e9e9; text-align:center; max-width:760px; margin:0 auto; }

/* ===== Services Accordion ===== */
.accordion {
  max-width:1120px; margin:28px auto 0; display:grid; gap:18px;
}
details.service {
  background:rgba(255,255,255,0.92);
  border:1px solid #eee; border-radius:14px; overflow:hidden;
  box-shadow:0 6px 30px rgba(0,0,0,0.06);
  transition:transform .15s ease;
}
details.service[open] { transform:translateY(-1px); }

details.service > summary {
  list-style:none; cursor:pointer; padding:18px 20px; display:flex; align-items:center; gap:16px;
  font-weight:600; font-size:1.05rem; color:#222;
}
details.service > summary::-webkit-details-marker { display:none; }

.badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  background:#0f2537; color:#fff; font-weight:600;
}

.service-body {
  display:grid; gap:18px; grid-template-columns: 1fr 2fr;
  padding:0 20px 18px 20px;
}
.service-img {
  aspect-ratio:16/10; border-radius:10px; background:#ddd center/cover no-repeat;
  box-shadow:inset 0 0 0 1px #e9e9e9;
}
.service-copy { color:#444; }
.service-copy p { margin-bottom:8px; }
.service-copy ul { padding-left:18px; color:#555; }
.service-copy li { margin:6px 0; }

.highlight { color:var(--brand); font-weight:600; }

/* ===== Contact card ===== */
.contact-card {
  background:rgba(255,255,255,0.92); border:1px solid #eee; border-radius:14px;
  padding:24px; max-width:640px; margin:24px auto 72px;
  box-shadow:0 6px 30px rgba(0,0,0,0.06);
}
form { display:grid; gap:14px; }
input, textarea { width:100%; padding:14px 16px; border:1px solid #ddd; border-radius:10px; font:inherit; }
button { padding:12px 18px; border-radius:999px; border:0; background:var(--brand); color:#fff; font-weight:600; cursor:pointer; }
button:hover { filter:brightness(.95); }

footer { background:rgba(255,255,255,0.9); color:#555; text-align:center; padding:28px 0; border-top:1px solid #eee; }

/* ===== Responsive ===== */
@media (max-width:980px){
  .service-body { grid-template-columns:1fr; }
}
@media (max-width:600px){
  .nav { flex-direction:column; gap:10px; }
}

/* Service-specific backgrounds */
.service-card.clay { background: url('images/claybar.jpg') center/cover no-repeat; color: white; }
.service-card.ceramic { background: url('images/ceramic.jpg') center/cover no-repeat; color: white; }
.service-card.headlight { background: url('images/headlight.jpg') center/cover no-repeat; color: white; }
.service-card.interior { background: url('images/interior.jpg') center/cover no-repeat; color: white; }