/*
Theme Name: AGR Floors
Theme URI: https://agrfloors.com/
Author: GoLogic Media
Author URI: https://gologicmedia.com/
Description: A clean, fast, mobile-first WordPress theme for AGR Floors — hardwood, tile, vinyl and laminate floor installation across northern New Jersey. Design language inspired by a modern architect-studio aesthetic: generous whitespace, strong typography, hairline dividers.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agr-floors
Tags: custom-menu, featured-images, threaded-comments, translation-ready, blog, full-width-template
*/

/* ============================================================
   AGR FLOORS THEME
   Design language: near-black ink on white, warm off-white
   section washes, hairline dividers, uppercase micro-labels,
   generous whitespace. System font stack for speed.
   ============================================================ */

:root{
  --ink:#111;
  --gray:#6b6b6b;
  --line:#e5e5e5;
  --paper:#fff;
  --wash:#f7f7f5;
  --accent:#8a6d3b; /* warm bronze accent for CTAs, used sparingly */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--paper);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  font-size:16px;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:1440px;margin:0 auto;padding:0 48px}

/* Accessibility: skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:12px 20px;z-index:200;text-decoration:none;font-size:14px;
}
.skip-link:focus{left:12px;top:12px}

/* ---------------- header ---------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
}
.bar{
  display:flex;justify-content:space-between;align-items:center;
  height:72px;max-width:1440px;margin:0 auto;padding:0 48px;gap:24px;
}
.wordmark{
  font-weight:700;font-size:17px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
}
.wordmark span{font-weight:400}
.wordmark img{max-height:44px;width:auto}

/* Text-based AGR monogram lockup: AGR on top, FLOORS underneath.
   Matches the AGR Builders logo style. Replaced automatically
   if a custom logo image is uploaded in the Customizer. */
.site-logo{
  text-decoration:none;line-height:1;display:flex;
  flex-direction:column;align-items:flex-start;color:var(--ink);
}
.logo-mono{
  font-weight:800;font-size:27px;letter-spacing:.1em;
}
.logo-div{
  font-weight:400;font-size:12px;letter-spacing:.5em;
  text-transform:uppercase;color:var(--gray);margin-top:4px;
}
nav.main{display:flex;gap:34px;align-items:center}
nav.main a{
  text-decoration:none;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);
}
nav.main a:hover{color:var(--gray)}
.header-phone{
  text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.06em;
  border:1px solid var(--ink);padding:10px 20px;white-space:nowrap;
  transition:background .25s ease,color .25s ease;
}
.header-phone:hover{background:var(--ink);color:#fff}

/* Mobile nav toggle */
.nav-toggle{
  display:none;background:none;border:1px solid var(--ink);
  padding:10px 14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;font-family:inherit;
}
.mobile-nav{
  display:none;border-top:1px solid var(--line);background:#fff;
  padding:12px 22px 20px;
}
.mobile-nav.open{display:block}
.mobile-nav a{
  display:block;padding:12px 0;border-bottom:1px solid var(--line);
  text-decoration:none;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
}
.mobile-nav .header-phone{
  display:inline-block;margin-top:14px;
}

/* ---------------- hero ---------------- */
.hero{margin-top:72px;position:relative;background:var(--ink)}
.hero img{width:100%;height:min(86vh,860px);object-fit:cover;opacity:.94}
.hero-text{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 48px 56px;max-width:1440px;margin:0 auto;color:#fff;
}
.hero-text h1{
  font-size:clamp(2.6rem,5.4vw,4.6rem);line-height:1.04;
  font-weight:500;letter-spacing:-.01em;max-width:16ch;
}
.hero-text p{
  margin-top:18px;font-size:17px;max-width:52ch;
  color:rgba(255,255,255,.85);font-weight:400;
}
.hero-cta{margin-top:28px;display:flex;gap:16px;flex-wrap:wrap}
.btn{
  display:inline-block;background:var(--ink);color:#fff;text-decoration:none;
  padding:18px 44px;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;border:1px solid var(--ink);
  transition:background .25s ease,color .25s ease;
}
.btn:hover{background:#333}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{background:transparent;color:#fff}
.btn-outline{background:transparent;color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}

/* ---------------- statement ---------------- */
.statement{padding:110px 0 90px}
.statement p{
  font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.42;
  font-weight:400;max-width:34ch;letter-spacing:-.01em;
}
.statement p strong{font-weight:600}

/* ---------------- section head ---------------- */
.sec-head{
  display:flex;justify-content:space-between;align-items:baseline;
  border-top:2px solid var(--ink);padding-top:18px;margin-bottom:48px;
}
.sec-head h2{
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
}
.sec-head a{
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--gray);
}
.sec-head a:hover{color:var(--ink)}

/* ---------------- services grid ---------------- */
.services-home{padding:20px 0 110px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.card{text-decoration:none}
.card .ph{overflow:hidden;background:var(--wash);aspect-ratio:4/3}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.card:hover img{transform:scale(1.04)}
.card h3{font-size:20px;font-weight:600;margin:18px 0 4px;letter-spacing:-.01em}
.card p{font-size:14px;color:var(--gray)}

/* ---------------- service list rows (interior pages) ---------------- */
.svc-list{border-top:1px solid var(--line)}
.svc{
  display:grid;grid-template-columns:80px 1fr 1.2fr;gap:32px;
  padding:38px 0;border-bottom:1px solid var(--line);
  text-decoration:none;align-items:baseline;
}
.svc .n{font-size:14px;color:var(--gray);letter-spacing:.1em}
.svc h3{font-size:clamp(1.4rem,2.2vw,2rem);font-weight:500;letter-spacing:-.01em}
.svc p{color:var(--gray);font-size:15px;max-width:52ch}
.svc:hover h3{text-decoration:underline;text-underline-offset:6px}

/* ---------------- why us / features ---------------- */
.why{background:var(--wash);padding:110px 0}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.feature{border-top:1px solid var(--ink);padding-top:22px}
.feature .k{
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gray);margin-bottom:14px;
}
.feature h3{font-size:22px;font-weight:600;margin-bottom:10px;letter-spacing:-.01em}
.feature p{font-size:15px;color:var(--gray)}

/* ---------------- process ---------------- */
.process{padding:110px 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.step{border-top:1px solid var(--ink);padding-top:22px}
.step .k{
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gray);margin-bottom:14px;
}
.step h3{font-size:22px;font-weight:600;margin-bottom:10px;letter-spacing:-.01em}
.step p{font-size:15px;color:var(--gray)}

/* ---------------- service area ---------------- */
.service-area{background:var(--ink);color:#fff;padding:110px 0}
.service-area h2{
  font-size:clamp(1.8rem,3vw,2.6rem);font-weight:500;
  letter-spacing:-.01em;line-height:1.2;margin-bottom:24px;
}
.service-area > .wrap > p{
  color:rgba(255,255,255,.72);font-size:16px;margin-bottom:48px;max-width:60ch;
}
.counties{display:grid;grid-template-columns:repeat(5,1fr);gap:32px}
.county{border-top:1px solid rgba(255,255,255,.25);padding-top:18px}
.county h3{
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;margin-bottom:14px;
}
.county ul{list-style:none}
.county li{font-size:14px;color:rgba(255,255,255,.65);padding:3px 0}

/* ---------------- testimonials ---------------- */
.testimonials{padding:110px 0}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.quote{
  border-top:1px solid var(--ink);padding-top:22px;
  display:flex;flex-direction:column;gap:16px;
}
.quote blockquote{font-size:17px;line-height:1.55;letter-spacing:-.005em}
.quote cite{
  font-style:normal;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gray);
}

/* ---------------- CTA band ---------------- */
.cta-band{padding:130px 0;text-align:left;border-top:1px solid var(--line)}
.cta-band h2{
  font-size:clamp(2.4rem,5vw,4.2rem);font-weight:500;
  letter-spacing:-.015em;line-height:1.06;max-width:18ch;margin-bottom:28px;
}
.cta-band p{color:var(--gray);font-size:17px;max-width:54ch;margin-bottom:40px}
.cta-band .phone-big{
  display:block;margin-top:32px;font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:600;letter-spacing:.02em;text-decoration:none;
}
.cta-band .phone-big:hover{text-decoration:underline;text-underline-offset:6px}

/* ---------------- page / post content ---------------- */
.page-hero{
  margin-top:72px;padding:90px 0 60px;border-bottom:1px solid var(--line);
}
.page-hero h1{
  font-size:clamp(2.2rem,4.6vw,3.8rem);font-weight:500;
  letter-spacing:-.01em;line-height:1.08;max-width:20ch;
}
.page-hero .lede{margin-top:18px;font-size:18px;color:var(--gray);max-width:56ch}
.content-area{padding:80px 0 110px}
.content-area .wrap-narrow{max-width:780px}
.entry-content{font-size:17px}
.entry-content > * + *{margin-top:1.4em}
.entry-content h2{
  font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;
  letter-spacing:-.01em;margin-top:2em;
}
.entry-content h3{font-size:1.25rem;font-weight:600;margin-top:1.8em}
.entry-content ul,.entry-content ol{padding-left:1.4em}
.entry-content li + li{margin-top:.5em}
.entry-content a{text-decoration:underline;text-underline-offset:3px}
.entry-content a:hover{color:var(--gray)}
.entry-content blockquote{
  border-left:3px solid var(--ink);padding-left:24px;
  font-size:1.25rem;color:var(--gray);font-style:italic;
}
.entry-meta{
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray);margin-bottom:32px;
}
.post-list{border-top:1px solid var(--line)}
.post-row{
  display:block;padding:32px 0;border-bottom:1px solid var(--line);
  text-decoration:none;
}
.post-row h2{
  font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:500;letter-spacing:-.01em;
}
.post-row:hover h2{text-decoration:underline;text-underline-offset:6px}
.post-row .post-date{
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gray);margin-top:8px;display:block;
}
.post-row p.excerpt{color:var(--gray);margin-top:10px;max-width:60ch}

/* ---------------- comments ---------------- */
.comments-area{margin-top:80px;border-top:1px solid var(--line);padding-top:48px}
.comments-area h2{font-size:1.4rem;margin-bottom:32px}
.comment-list{list-style:none}
.comment{margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.comment .fn{font-weight:600}
.comment-meta{font-size:13px;color:var(--gray);margin:6px 0 12px}
.comment-respond h3{font-size:1.3rem;margin-bottom:20px}
.comment-form label{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea{
  width:100%;border:1px solid var(--line);padding:14px;font:inherit;margin-bottom:20px;
}
.comment-form input[type=submit]{
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  padding:16px 40px;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;cursor:pointer;font-family:inherit;
}
.comment-form input[type=submit]:hover{background:#333}

/* ---------------- footer ---------------- */
.site-footer{border-top:1px solid var(--line);padding:56px 0 36px}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;margin-bottom:48px;
}
.footer-brand .wordmark,
.footer-brand .site-logo{margin-bottom:16px;display:inline-block}
.footer-brand p{font-size:14px;color:var(--gray);max-width:36ch}
.footer-col h3{
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;margin-bottom:18px;
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:10px}
.footer-col a{text-decoration:none;font-size:14px;color:var(--gray)}
.footer-col a:hover{color:var(--ink)}
.footer-col .f-phone{
  font-size:20px;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:.04em;
}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:28px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  color:var(--gray);font-size:13px;
}

/* ---------------- 404 ---------------- */
.fourohfour{margin-top:72px;padding:130px 0;text-align:left}
.fourohfour h1{
  font-size:clamp(3rem,8vw,6rem);font-weight:500;letter-spacing:-.02em;line-height:1;
}
.fourohfour p{color:var(--gray);font-size:18px;margin:24px 0 40px;max-width:46ch}

/* ---------------- reveal on scroll ---------------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------------- responsive ---------------- */
@media(max-width:1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .counties{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:960px){
  .wrap,.bar{padding:0 22px}
  nav.main{display:none}
  .nav-toggle{display:block}
  .hero-text{padding:0 22px 36px}
  .cards{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr;gap:8px}
  .steps{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .counties{grid-template-columns:repeat(2,1fr)}
  .statement,.why,.process,.service-area,.testimonials{padding:72px 0}
  .cta-band{padding:80px 0}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .header-phone{font-size:14px;padding:8px 14px}
}