/* ================================
   Blue Collar Concrete — Styles
   (concrete.jpg bg, semi-transparent boxes, lighter paint)
   ================================ */

/* Theme */
:root{
  --ink:#121417;
  --muted:#6b7280;
  --blue:#1F3B73;
  --ring:#d9dde4;

  /* translucent panel color for every box */
  --box: rgba(255,255,255,0.86);

  --max:1080px;
}

/* Base */
*{ box-sizing:border-box }
html,body{ margin:0 }
body{
  font:16px/1.6 'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);

  /* Concrete background */
  background-image: image-set(
    url('/img/concrete.avif') type('image/avif'),
    url('/img/concrete.jpg')  type('image/jpeg')
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  position: relative; /* keep this */
}

/* Soften the page; keep it light enough to see texture through boxes */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: rgba(255,255,255,0.25); /* tweak 0.2–0.35 to taste */
}

h1,h2,h3,h4,h5,h6{ font-family:'Bitter',serif }
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }

/* Helpers */
.container{ max-width:var(--max); margin:auto; padding:0 1rem }
.row-between{ display:flex; align-items:center; justify-content:space-between }
.mt2{ margin-top:1.25rem }

.content-box{
  background: var(--box);
  border:1px solid var(--ring);
  border-radius:16px;
  padding:1.25rem;
  box-shadow:0 8px 24px rgba(0,0,0,.04);
}
.content-box.center{ text-align:center }

/* Header */
.site-header{
  position:sticky; top:0; z-index:30;
  background: rgba(255,255,255,0.50);
  backdrop-filter:saturate(1.05) blur(8px);
  border-bottom:1px solid var(--ring);
  transition: box-shadow .25s ease;
}
.site-header.scrolled{ box-shadow:0 6px 20px rgba(0,0,0,.06) }
.brand{ display:flex; gap:.6rem; align-items:center; font-weight:700; color:var(--ink) }
.brand img{ border-radius:999px }
.nav-toggle{ font-size:1.4rem; background:none; border:0; display:none; padding:.25rem .5rem; cursor:pointer }
.nav-links{ display:flex; gap:1rem; align-items:center }
.nav-links a{ font-weight:700; color:var(--ink) }

/* Buttons */
.btn{
  appearance:none; border:1px solid var(--ring); padding:.65rem 1rem;
  border-radius:999px; color:var(--ink); background:var(--box);
  font-weight:700; display:inline-flex; align-items:center; gap:.4rem;
  transition: transform .15s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn-primary{ background:var(--blue); border-color:var(--blue); color:#fff }
.btn-primary:hover{ background:#214686; border-color:#214686 }
.btn-ghost{ background:transparent }
.btn-ghost:hover{ background:rgba(255,255,255,.6) }

/* HERO */
.hero{ padding:2.6rem 0 1.6rem }
.hero-logo{ width:min(460px,75vw); height:auto; margin:0 auto .75rem auto; display:block }
.hero h1{ margin:.25rem 0; font-size:clamp(1.7rem,3.2vw,2.2rem) }
.hero p{ color:var(--muted); max-width:60ch; margin:0 auto }
.hero .cta{ display:flex; gap:.75rem; margin-top:.75rem; flex-wrap:wrap; justify-content:center }

/* Sections */
.section{ padding:2.2rem 0 }
.section h2{ font-size:1.6rem; margin:0 0 .50rem }

/* Services */
.grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem }
.card{
  padding:1rem; border:1px solid var(--ring); border-radius:14px; background:var(--box);
}
.card h3{ margin:.25rem 0 }

/* Scroll boxes (Before/After, Solo, Reviews) */
.scrollbox{
  border:1px solid var(--ring); border-radius:14px; background:var(--box);
  padding:.75rem; margin:.5rem 0 0 0; height:460px;
  overflow-y:auto; scroll-snap-type:y mandatory; scroll-behavior:smooth;
  /* Render heavy lists cheaper until scrolled into view */
  content-visibility:auto; contain-intrinsic-size: 460px;
}
.scrollbox.tall{ height:600px }
.scrollbox:focus{ outline:2px solid var(--blue); outline-offset:2px }

/* Make Reviews box shorter specifically */
#box-reviews{ height:230px }  /* adjust 340–400 as you like */

/* 2-up pairs */
.pair{
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
  scroll-snap-align:start; margin-bottom:.5rem;
}
.pair img{
  width:100%; height:220px; object-fit:cover;
  border-radius:12px; border:1px solid var(--ring);
  transition:transform .25s ease;
}
.pair img:hover{ transform:scale(1.02) }
/* single image row: center it */
.pair.single{ grid-template-columns:1fr; justify-items:center }
.pair.single img{ width:100%; max-width:900px }

/* Solo rows (one image per row) */
.solo-row{
  scroll-snap-align:start; margin-bottom:.5rem; display:grid; place-items:center;
}
.solo-row img{
  width:100%; max-width:1000px; height:440px; object-fit:cover;
  border-radius:12px; border:1px solid var(--ring);
  transition:transform .25s ease;
}
.solo-row img:hover{ transform:scale(1.02) }

/* Reviews rows */
.review-row{
  scroll-snap-align: start;
  margin-bottom: .5rem;
  display: grid;
  place-items: center;
}

.review-row img{
  display: block;
  width: min(100%, 720px);  /* cap the width so images don't blow up */
  height: auto;             /* no vertical stretching */
  border-radius: 12px;
  border: 1px solid var(--ring);
  background: var(--box);
}


/* About */
.about{ display:grid; grid-template-columns:220px 1fr; gap:1.25rem; align-items:center }
.owner img{ border-radius:16px; border:1px solid var(--ring); max-width:220px }

/* Footer */
.site-footer{
  padding:1rem 0; border-top:1px solid var(--ring);
  background: rgba(255,255,255,0.50);
}
.credit{ color:#000; font-size:.50rem; margin:0 }

/* Fullscreen panel (for image expand) */
.fs-panel{ position:fixed; inset:0; background:rgba(0,0,0,.92); display:grid; grid-template-rows:auto 1fr; z-index:60 }
.fs-panel[hidden]{ display:none }
.fs-close{ background:none; border:0; color:#fff; font-size:2rem; padding:.5rem 1rem; justify-self:end; cursor:pointer }
.fs-inner{
  padding:1rem; overflow:auto; scroll-snap-type:y mandatory;
}
.fs-inner .pair, .fs-inner .solo-row, .fs-inner .review-row{ margin-bottom:.75rem }
.fs-inner img{ border:0; height:70vh; object-fit:contain; background:#111; border-radius:10px }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease }
.reveal.visible{ opacity:1; transform:none }

/* Responsive */
@media (max-width: 860px){
  .nav-toggle{ display:block }
  .nav-links{
    position:absolute; right:1rem; top:64px;
    background: rgba(255,255,255,0.5);
    border:1px solid var(--ring);
    border-radius:12px; flex-direction:column; padding:.6rem; gap:.6rem; display:none
  }
  .nav-links.show{ display:flex }

  .grid{ grid-template-columns:1fr }
  .about{ grid-template-columns:1fr; text-align:center }
  .owner img{ margin:0 auto }
}

/* Reviews note style */
.reviews-note{
  font-size:1.25rem; font-weight:700; text-align:center; margin:1rem 0; color:var(--blue);
}
.reviews-note strong{ font-size:1.3rem; color:#24447f }
.reviews-note a{ color:#24447f; font-weight:700; text-decoration:underline }

/* Bigger logos in header & footer */
.brand img {
  width:60px !important;
  height:60px !important;
  border-radius:999px;
  object-fit:cover;
}
/* --- Mobile-safe concrete background --- */

/* Keep body transparent so the root background shows through */
body{ background: transparent !important; }

/* Apply the background to the root element instead */
html{
  background-color: #e5e7eb;                     /* soft fallback while image loads */
  background-image: url('/img/concrete.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;                  /* desktop OK */
}

/* On phones/tablets, avoid 'fixed' which is buggy */
@media (max-width: 900px), (hover: none) and (pointer: coarse){
  html{ background-attachment: scroll; }
}
/* Hours + Facebook strip in header */
.header-info{
  display:flex; align-items:center; gap:.5rem;
  font-size:.9rem; font-weight:600; color:var(--ink);
  background: rgba(255,255,255,0.65);
  border:1px solid var(--ring);
  padding:.3rem .6rem; border-radius:999px;
}
.header-info a{ color:var(--blue); font-weight:700; text-decoration:underline }
.header-info .sep{ opacity:.6 }
.header-info .hours{ white-space:nowrap }

@media (max-width:860px){
  .header-info{ font-size:.8rem; padding:.25rem .5rem }
  .header-info .hours{ display:none } /* hide hours on small screens */
}
/* Contact: stacked buttons + hours styling */
.contact .cta.cta-vertical{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.65rem;
  margin: .75rem 0 0 0;
}

/* Make the buttons full width but nicely capped for mobile ergonomics */
.contact .btn{
  width:100%;
  max-width:420px;
  justify-content:center;
}

/* Hours list */
.hours-list{
  list-style:none;
  margin:0 0 .75rem 0;
  padding:0;
  display:grid;
  gap:.2rem;
  text-align:center;
}

/* Visually hidden heading for a11y */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* --- Single-photo zoom inside the Before/After fullscreen only --- */
#fs-before-after .pair.is-zoom {
  grid-template-columns: 1fr;      /* collapse the pair to one column */
}
#fs-before-after .pair.is-zoom img {
  display: none;                   /* hide both by default */
}
#fs-before-after .pair.is-zoom img.selected {
  display: block;                  /* show only the tapped one */
  width: 100%;
  height: 80vh;
  object-fit: contain;
  border: 0;
  border-radius: 10px;
  background: #111;
}
/* Services: simple text list */
.service-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-list li{
  margin-bottom: 1rem;
}
.service-list h3{
  margin: 0 0 .25rem 0;
  font-weight: 700;      /* bold headings */
  font-size: 1.1rem;
}
.service-list p{
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}