/*
Theme Name: QC Surface Shield
Theme URI: https://qcsurfaceshield.com
Author: QC Surface Shield
Author URI: https://qcsurfaceshield.com
Description: A custom one-page WordPress theme for QC Surface Shield, an epoxy flooring contractor offering metallic, flake, and concrete finishes. Includes sections for products, projects, quote requests, reviews, and contact.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: qc-surface-shield
Tags: one-column, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   RESET / BASE
   ========================================================= */
:root{
  --stone-050:#F7F5F0;
  --stone-100:#EDEAE1;
  --stone-300:#C7C1B3;
  --stone-500:#8C8577;
  --stone-800:#2A2722;
  --stone-900:#191713;
  --ink:#171512;
  --amber:#A87C3F;
  --amber-light:#C79A5C;
  --teal:#2E4C47;
  --teal-light:#4A716A;
  --copper:#B5522A;
  --copper-light:#D06A3F;
  --line: rgba(23,21,18,0.12);
  --line-dark: rgba(247,245,240,0.14);
  --radius: 2px;
  --maxw: 1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color: var(--stone-900);
  background: var(--stone-050);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{ font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.01em; color: var(--stone-900); }
.mono{ font-family:'JetBrains Mono', monospace; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width: var(--maxw); margin:0 auto; padding:0 32px; }
section{ padding:96px 0; }
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--amber); margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:24px; height:1px; background: var(--amber); }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; font-family:'Space Grotesk', sans-serif; font-weight:600;
  font-size:14px; letter-spacing:0.02em; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer; transition: all .25s ease;
}
.btn-primary{ background: var(--copper); color:#fff; }
.btn-primary:hover{ background: var(--copper-light); transform: translateY(-1px); }
.btn-outline{ border-color: var(--stone-900); color: var(--stone-900); background:transparent; }
.btn-outline:hover{ background: var(--stone-900); color:#fff; }
.btn-outline-light{ border-color: rgba(255,255,255,0.4); color:#fff; background:transparent; }
.btn-outline-light:hover{ background:#fff; color: var(--stone-900); }

/* =========================================================
   NAV / HEADER
   ========================================================= */
header.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background: rgba(247,245,240,0.88); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
nav.main-nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width: var(--maxw); margin:0 auto; }
.logo{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; }
.logo-img{ height:52px; width:auto; display:block; flex-shrink:0; }
.logo-text{ font-size:17px; letter-spacing:0.02em; white-space:nowrap; }
@media(max-width:520px){ .logo-text{ display:none; } }
.navlinks{ display:flex; gap:36px; font-size:14px; font-weight:500; list-style:none; }
.navlinks li{ display:flex; }
.navlinks a{ position:relative; padding:4px 0; }
.navlinks a::after{ content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--copper); transition:width .25s ease; }
.navlinks a:hover::after{ width:100%; }
.navcta{ display:flex; align-items:center; gap:24px; }
.navcta .phone{ font-family:'JetBrains Mono',monospace; font-size:13px; display:none; }
@media(min-width:900px){ .navcta .phone{ display:block; } }
.hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:0; }
.hamburger span{ width:22px; height:2px; background:var(--stone-900); }
@media(max-width:860px){
  .navlinks{ display:none; }
  .navcta .btn{ display:none; }
  .hamburger{ display:flex; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  min-height:100vh; display:flex; align-items:center;
  background: var(--stone-900); color:#fff;
  padding-top:88px;
}
.pour{
  position:absolute; inset:0; z-index:0; opacity:0.9;
  background:
    radial-gradient(ellipse 60% 50% at 78% 30%, rgba(168,124,63,0.35), transparent 60%),
    radial-gradient(ellipse 50% 45% at 30% 75%, rgba(46,76,71,0.45), transparent 60%),
    radial-gradient(ellipse 40% 40% at 60% 85%, rgba(181,82,42,0.25), transparent 65%);
  animation: swirl 24s ease-in-out infinite alternate;
}
@keyframes swirl{
  0%{ transform: scale(1) rotate(0deg); }
  100%{ transform: scale(1.15) rotate(6deg); }
}
.pour-sheen{
  position:absolute; inset:0; z-index:0;
  background: repeating-linear-gradient(115deg, transparent 0 40px, rgba(255,255,255,0.02) 40px 41px);
}
@media (prefers-reduced-motion: reduce){ .pour{ animation:none; } }
.hero-inner{ position:relative; z-index:1; width:100%; }
.hero-grid{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap:64px; align-items:end; }
@media(max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{
  font-size: clamp(40px, 6vw, 76px); line-height:1.02; color:#fff; margin-bottom:28px;
}
.hero h1 em{ font-style:normal; color: var(--amber-light); }
.hero p.lead{ font-size:18px; color: rgba(255,255,255,0.72); max-width:44ch; margin-bottom:36px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats{ display:flex; flex-direction:column; gap:22px; border-left:1px solid var(--line-dark); padding-left:32px; }
@media(max-width:900px){ .hero-stats{ border-left:none; padding-left:0; border-top:1px solid var(--line-dark); padding-top:24px; flex-direction:row; flex-wrap:wrap; gap:32px;} }
.stat-num{ font-family:'Space Grotesk',sans-serif; font-size:34px; font-weight:700; color:#fff; }
.stat-label{ font-size:13px; color: rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:0.06em; }
.scroll-cue{ position:absolute; bottom:32px; left:32px; z-index:1; font-family:'JetBrains Mono',monospace; font-size:11px; color:rgba(255,255,255,0.5); display:flex; align-items:center; gap:10px; }
.scroll-cue .line{ width:1px; height:36px; background: rgba(255,255,255,0.35); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:#fff; animation: drip 2.2s linear infinite; }
@keyframes drip{ 0%{top:-100%;} 100%{top:100%;} }
@media(max-width:860px){ .scroll-cue{ display:none; } }

/* =========================================================
   SECTION HEAD
   ========================================================= */
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:56px; flex-wrap:wrap; }
.sec-head h2{ font-size: clamp(28px,3.6vw,42px); max-width:16ch; }
.sec-head p{ max-width:38ch; color: var(--stone-500); font-size:15px; }

/* =========================================================
   FINISHES / PRODUCTS
   ========================================================= */
#finishes{ background: var(--stone-050); }
.finish-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:2px; background: var(--line); border:1px solid var(--line); }
@media(max-width:900px){ .finish-grid{ grid-template-columns:1fr; } }
.finish-card{
  background: var(--stone-050); padding:40px 32px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; min-height:460px; transition: background .3s ease;
}
.finish-card:hover{ background:#fff; }
.finish-swatch{ width:100%; height:150px; border-radius:var(--radius); margin-bottom:28px; position:relative; overflow:hidden; }
.swatch-metallic{ background: radial-gradient(circle at 30% 30%, #d9b98a, #a87c3f 40%, #5c4223 75%, #2c1f10); }
.swatch-metallic::after{ content:''; position:absolute; inset:0; background: radial-gradient(circle at 70% 70%, rgba(46,76,71,0.5), transparent 55%); }
.swatch-flake{ background-image: url('assets/images/flake-texture.jpg'); background-size:cover; background-position:center; }
.swatch-concrete{ background: linear-gradient(155deg,#c9c4b9,#8f8a7c); position:relative; }
.swatch-concrete::after{ content:''; position:absolute; inset:0; opacity:0.5; background: repeating-linear-gradient(100deg, transparent 0 18px, rgba(0,0,0,0.06) 18px 19px), repeating-linear-gradient(15deg, transparent 0 26px, rgba(255,255,255,0.08) 26px 27px); }
.finish-index{ font-family:'JetBrains Mono',monospace; font-size:12px; color: var(--stone-500); margin-bottom:10px; }
.finish-card h3{ font-size:24px; margin-bottom:12px; }
.finish-card p{ color: var(--stone-500); font-size:14.5px; margin-bottom:20px; flex-grow:1; }
.finish-meta{ display:flex; flex-direction:column; gap:6px; margin-bottom:24px; padding-top:20px; border-top:1px solid var(--line); }
.finish-meta div{ display:flex; justify-content:space-between; font-size:13px; }
.finish-meta span:first-child{ color: var(--stone-500); }
.finish-meta span:last-child{ font-family:'JetBrains Mono',monospace; }
.finish-card .btn{ align-self:flex-start; }

/* =========================================================
   PROCESS STRIP
   ========================================================= */
.process{ background: var(--stone-900); color:#fff; }
.process .sec-head h2, .process .sec-head p{ color:#fff; }
.process .sec-head p{ color: rgba(255,255,255,0.55); }
.process-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--line-dark); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
@media(max-width:800px){ .process-row{ grid-template-columns:1fr 1fr; } }
.process-step{ background: var(--stone-900); padding:32px 24px; }
.process-step .num{ font-family:'JetBrains Mono',monospace; color: var(--amber-light); font-size:13px; margin-bottom:14px; }
.process-step h4{ color:#fff; font-size:17px; margin-bottom:10px; }
.process-step p{ color: rgba(255,255,255,0.55); font-size:13.5px; }

/* =========================================================
   PROJECTS
   ========================================================= */
#projects{ background: var(--stone-050); }
.filters{ display:flex; gap:10px; margin-bottom:40px; flex-wrap:wrap; }
.filter-btn{
  font-family:'JetBrains Mono',monospace; font-size:12px; padding:9px 18px; border-radius:20px;
  border:1px solid var(--stone-300); background:transparent; cursor:pointer; transition:all .2s ease;
  text-transform:uppercase; letter-spacing:0.04em;
}
.filter-btn.active, .filter-btn:hover{ background: var(--stone-900); color:#fff; border-color:var(--stone-900); }
.project-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
@media(max-width:900px){ .project-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px){ .project-grid{ grid-template-columns: 1fr; } }
.project-card{ position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer; aspect-ratio:4/5; }
.project-thumb{ position:absolute; inset:0; transition: transform .5s ease; }
.project-card:hover .project-thumb{ transform: scale(1.06); }
.project-card .project-thumb img{ width:100%; height:100%; object-fit:cover; }
.p-metallic .project-thumb{ background: radial-gradient(circle at 35% 30%, #dabb8d, #a87c3f 45%, #45311b 80%); }
.p-flake .project-thumb{ background-image: url('assets/images/flake-texture.jpg'); background-size:cover; background-position:center; }
.p-concrete .project-thumb{ background: linear-gradient(155deg,#c9c4b9,#87816f); }
.project-overlay{
  position:absolute; inset:0; background: linear-gradient(to top, rgba(20,18,15,0.85) 0%, rgba(20,18,15,0.1) 55%, transparent 70%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff;
}
.project-tag{ font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; color: var(--amber-light); margin-bottom:6px; letter-spacing:0.06em; }
.project-overlay h4{ color:#fff; font-size:17px; margin-bottom:4px; }
.project-overlay span{ font-size:12.5px; color: rgba(255,255,255,0.65); }
.ba-badge{ position:absolute; top:16px; right:16px; background: rgba(255,255,255,0.15); backdrop-filter: blur(6px); color:#fff; font-family:'JetBrains Mono',monospace; font-size:10.5px; padding:5px 10px; border-radius:20px; }
.projects-empty{ padding:48px 0; color: var(--stone-500); font-size:14.5px; border:1px dashed var(--stone-300); text-align:center; border-radius:var(--radius); }

/* =========================================================
   QUOTE
   ========================================================= */
#quote{ background: var(--stone-100); }
.quote-shell{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:0; border:1px solid var(--line); background:#fff; }
@media(max-width:900px){ .quote-shell{ grid-template-columns:1fr; } }
.quote-side{ background: var(--teal); color:#fff; padding:52px 44px; display:flex; flex-direction:column; justify-content:space-between; }
.quote-side h2{ color:#fff; font-size: clamp(26px,3vw,34px); margin-bottom:20px; }
.quote-side p{ color: rgba(255,255,255,0.72); font-size:14.5px; margin-bottom:32px; }
.quote-perks{ display:flex; flex-direction:column; gap:16px; list-style:none; }
.quote-perks li{ display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color: rgba(255,255,255,0.85); }
.quote-perks li::before{ content:'—'; color: var(--amber-light); flex-shrink:0; }
.quote-form{ padding:52px 44px; }
.progress-track{ display:flex; gap:6px; margin-bottom:36px; }
.progress-track div{ height:3px; flex:1; background: var(--line); border-radius:2px; overflow:hidden; }
.progress-track div.filled{ background: var(--copper); }
.step{ display:none; }
.step.active{ display:block; animation: fadeIn .35s ease; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none; } }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
@media(max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field label{ font-size:12.5px; font-weight:600; color: var(--stone-800); text-transform:uppercase; letter-spacing:0.04em; }
.field input, .field select, .field textarea{
  font-family:'Inter',sans-serif; font-size:14.5px; padding:12px 14px; border:1px solid var(--stone-300);
  border-radius:var(--radius); background: var(--stone-050); color: var(--stone-900); outline:none; transition:border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--copper); }
.option-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-bottom:8px; }
@media(max-width:520px){ .option-grid{ grid-template-columns: 1fr 1fr; } }
.option-card{
  border:1px solid var(--stone-300); border-radius:var(--radius); padding:14px 10px; text-align:center;
  cursor:pointer; font-size:13px; font-weight:500; transition: all .2s ease;
}
.option-card:hover{ border-color: var(--stone-900); }
.option-card.selected{ border-color: var(--copper); background: rgba(181,82,42,0.06); color: var(--copper); }
.step-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:28px; }
.step-back{ font-size:13px; color: var(--stone-500); cursor:pointer; background:none; border:none; font-family:inherit; }
.step-back:disabled{ visibility:hidden; }
.confirm{ text-align:center; padding:20px 0; }
.confirm .mark{ width:52px; height:52px; border-radius:50%; background: var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 20px; }
.confirm h3{ font-size:22px; margin-bottom:10px; }
.confirm p{ color: var(--stone-500); font-size:14px; max-width:36ch; margin:0 auto; }
.form-message{ margin-top:18px; font-size:13.5px; padding:12px 14px; border-radius:var(--radius); }
.form-message.success{ background: rgba(46,76,71,0.08); color: var(--teal); border:1px solid rgba(46,76,71,0.25); }
.form-message.error{ background: rgba(181,82,42,0.08); color: var(--copper); border:1px solid rgba(181,82,42,0.25); }

/* =========================================================
   REVIEWS
   ========================================================= */
#reviews{ background: var(--stone-050); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.review-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:32px; }
@media(max-width:900px){ .review-grid{ grid-template-columns:1fr; } }
.review-card{ padding:28px; background:#fff; border:1px solid var(--line); }
.review-stars{ color: var(--amber); font-size:13px; margin-bottom:16px; letter-spacing:2px; }
.review-card p{ font-size:14.5px; color: var(--stone-800); margin-bottom:20px; }
.review-name{ font-size:13px; font-weight:600; }
.review-loc{ font-size:12px; color: var(--stone-500); }
.reviews-empty{ padding:32px 0; color: var(--stone-500); font-size:14.5px; }

/* =========================================================
   CONTACT
   ========================================================= */
#contact{ background: var(--stone-900); color:#fff; }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:48px; } }
#contact .sec-head h2, #contact .sec-head p{ color:#fff; }
#contact .sec-head p{ color: rgba(255,255,255,0.55); }
.contact-list{ display:flex; flex-direction:column; gap:28px; margin-bottom:36px; list-style:none; }
.contact-item{ display:flex; gap:18px; align-items:flex-start; border-top:1px solid var(--line-dark); padding-top:22px; }
.contact-item .k{ font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--amber-light); text-transform:uppercase; letter-spacing:0.06em; width:90px; flex-shrink:0; padding-top:3px; }
.contact-item .v{ font-size:15.5px; }
.contact-item .v span{ display:block; color: rgba(255,255,255,0.55); font-size:13px; margin-top:3px; }
.map-block{ border:1px solid var(--line-dark); background: var(--stone-800); min-height:340px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.map-grid{ position:absolute; inset:0; background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px); background-size:32px 32px; }
.map-pin{ position:relative; z-index:1; text-align:center; }
.map-pin .dot{ width:14px; height:14px; border-radius:50%; background: var(--copper); margin:0 auto 12px; box-shadow:0 0 0 6px rgba(181,82,42,0.2); }
.map-pin span{ font-family:'JetBrains Mono',monospace; font-size:12px; color: rgba(255,255,255,0.6); }
.quick-form{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.quick-form input, .quick-form textarea{
  background: var(--stone-800); border:1px solid var(--line-dark); color:#fff; padding:12px 14px;
  border-radius:var(--radius); font-family:'Inter',sans-serif; font-size:14px; outline:none;
}
.quick-form input::placeholder, .quick-form textarea::placeholder{ color: rgba(255,255,255,0.4); }
.quick-form input:focus, .quick-form textarea:focus{ border-color: var(--copper); }

/* =========================================================
   FOOTER
   ========================================================= */
footer.site-footer{ background: var(--ink); color: rgba(255,255,255,0.5); padding:36px 0; font-size:12.5px; }
.foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.foot-row a{ color: rgba(255,255,255,0.5); }
.foot-row a:hover{ color:#fff; }
.foot-logo-img{ height:40px; width:auto; display:block; }
.foot-nav{ display:flex; gap:24px; list-style:none; }

/* =========================================================
   WORDPRESS CORE / ACCESSIBILITY
   ========================================================= */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute;
  width:1px; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background-color:#f1f1f1; border-radius:3px; box-shadow:0 0 2px 2px rgba(0,0,0,0.6);
  clip:auto !important; clip-path:none; color:#21759b; display:block;
  font-size:14px; font-weight:700; height:auto; left:5px; line-height:normal;
  padding:15px 23px 14px; text-decoration:none; top:5px; width:auto; z-index:100000;
}
.alignleft{ float:left; margin-right:1.5em; }
.alignright{ float:right; margin-left:1.5em; }
.aligncenter{ display:block; margin-left:auto; margin-right:auto; }

/* Fallback styling for standard WP content (blog index / single / page templates) */
.site-main{ padding:140px 0 96px; max-width: var(--maxw); margin:0 auto; padding-left:32px; padding-right:32px; }
.site-main article{ margin-bottom:48px; padding-bottom:48px; border-bottom:1px solid var(--line); }
.site-main .entry-title a{ font-size:28px; }
.site-main .entry-content{ margin-top:16px; }
.pagination{ display:flex; gap:16px; margin-top:32px; }