/*
Theme Name: Carolina Refacers Child
Theme URI: https://carolinarefacers.com
Description: Astra child theme for Carolina Refacers. Cabinet refacing, Columbia & Lexington SC.
Author: Cut Throat Marketing
Author URI: https://cutthroatmarketing.com
Template: astra
Version: 1.5.0
Text Domain: carolina-refacers-child
*/

/* =========================================================
   DESIGN TOKENS
   Palette drawn from the CR logo: steel blue + warm grey.
   ========================================================= */
:root {
  --cr-blue:        #1c6ba3;   /* logo blue */
  --cr-blue-dark:   #14507c;   /* hover / depth */
  --cr-ink:         #2b2f36;   /* headings, from logo grey */
  --cr-body:        #4a4f57;   /* body text */
  --cr-grey:        #6b7178;   /* muted / captions */
  --cr-line:        #e2e5e9;   /* hairlines, borders */
  --cr-mist:        #f4f6f8;   /* section tint */
  --cr-white:       #ffffff;
  --cr-wood:        #8a5a34;   /* warm accent, sparingly */

  --cr-radius:      6px;
  --cr-shadow:      0 8px 30px rgba(20,80,124,0.10);
  --cr-maxw:        1140px;
}

/* =========================================================
   BASE
   ========================================================= */
body {
  color: var(--cr-body);
  font-size: 17px;
  line-height: 1.7;
}
h1, h2, h3, h4 {
  color: var(--cr-ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
a { color: var(--cr-blue); }
a:hover { color: var(--cr-blue-dark); }

.cr-wrap { max-width: var(--cr-maxw); margin: 0 auto; padding: 0 20px; }

/* =========================================================
   BUTTONS  (scoped so Astra defaults don't override)
   ========================================================= */
.cr-btn,
.cr-btn:visited {
  display: inline-block;
  background: var(--cr-blue);
  color: var(--cr-white) !important;
  font-weight: 600;
  font-size: 17px;
  padding: 15px 34px;
  border-radius: var(--cr-radius);
  text-decoration: none;
  line-height: 1.2;
  transition: background 0.15s ease, transform 0.15s ease;
}
.cr-btn:hover {
  background: var(--cr-blue-dark);
  color: var(--cr-white) !important;
  transform: translateY(-1px);
}
.cr-btn--ghost,
.cr-btn--ghost:visited {
  background: transparent;
  color: var(--cr-white) !important;
  border: 2px solid rgba(255,255,255,0.85);
  padding: 13px 32px;
}
.cr-btn--ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
}
.cr-btn--dark,
.cr-btn--dark:visited { background: var(--cr-ink); color:#fff !important; }
.cr-btn--dark:hover { background:#000; }

/* =========================================================
   HERO  (solid background, text left + image right)
   ========================================================= */
.cr-hero {
  position: relative;
  padding: 72px 20px;
  background: var(--cr-ink);
  color: #fff;
}
.cr-hero__inner {
  position: relative;
  max-width: var(--cr-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.cr-hero__box { max-width: 560px; }
.cr-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4.4vw, 3rem);
  margin: 0 0 18px;
}
.cr-hero p {
  font-size: 1.18rem;
  color: rgba(255,255,255,0.92);
  margin: 0 0 30px;
}
.cr-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.cr-hero__tag {
  display:inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #cfe3f2;
  margin-bottom: 16px;
}
.cr-hero__media { }
.cr-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cr-radius);
  box-shadow: var(--cr-shadow);
}

/* =========================================================
   SECTION SHELL
   ========================================================= */
.cr-section { padding: 76px 20px; }
.cr-section--tint { background: var(--cr-mist); }
.cr-section__head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.cr-section__head h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin: 0 0 14px; }
.cr-section__head p { font-size: 1.12rem; color: var(--cr-grey); margin: 0; }

/* =========================================================
   INTRO / VALUE ROW
   ========================================================= */
.cr-value { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cr-value__item {
  background: #fff;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  padding: 30px 26px;
}
.cr-value__item h3 { font-size: 1.22rem; margin: 0 0 10px; }
.cr-value__item p { margin: 0; color: var(--cr-body); }

/* =========================================================
   SERVICES / MAKEOVER LIST
   ========================================================= */
.cr-make { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 34px; max-width: 820px; margin: 0 auto; }
.cr-make__row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cr-line);
  font-size: 1.06rem;
}
.cr-make__row::before {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  margin-top: 9px;
  border-radius: 2px;
  background: var(--cr-blue);
}

/* =========================================================
   PROCESS  (real sequence -> numbered is justified)
   ========================================================= */
.cr-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.cr-step {
  position: relative;
  padding: 30px 22px 26px;
  background: #fff;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
}
.cr-step::before {
  counter-increment: step;
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: var(--cr-blue);
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  border-radius: 50%;
  margin-bottom: 16px;
}
.cr-step h3 { font-size: 1.14rem; margin: 0 0 8px; }
.cr-step p { margin: 0; font-size: 0.99rem; color: var(--cr-body); }

/* =========================================================
   DOORS  (wood vs HPL)
   ========================================================= */
.cr-doors { display: grid; grid-template-columns: repeat(2,1fr); gap: 26px; max-width: 900px; margin: 0 auto; }
.cr-door {
  border: 1px solid var(--cr-line);
  border-top: 4px solid var(--cr-blue);
  border-radius: var(--cr-radius);
  padding: 32px 30px;
  background: #fff;
}
.cr-door h3 { font-size: 1.3rem; margin: 0 0 10px; }
.cr-door p { margin: 0; }

/* =========================================================
   AREA / CTA BAND
   ========================================================= */
.cr-band {
  background: var(--cr-blue);
  color: #fff;
  text-align: center;
  padding: 66px 20px;
}
.cr-band h2 { color: #fff; font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: 0 0 14px; }
.cr-band p { color: rgba(255,255,255,0.92); font-size: 1.14rem; margin: 0 0 28px; }
.cr-band a.cr-btn { background: #fff; color: var(--cr-blue) !important; }
.cr-band a.cr-btn:hover { background: var(--cr-mist); }
.cr-band__phone { display:block; margin-top:18px; color:#fff; font-size:1.35rem; font-weight:700; text-decoration:none; }
.cr-band__phone:hover { color:#fff; text-decoration:underline; }

/* =========================================================
   BEFORE / AFTER PAIRS
   ========================================================= */
.cr-ba { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 980px; margin: 0 auto; }
.cr-ba__set {
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  overflow: hidden;
  background: #fff;
}
.cr-ba__imgs { display: grid; grid-template-columns: 1fr 1fr; }
.cr-ba__fig { position: relative; margin: 0; }
.cr-ba__fig img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.cr-ba__fig + .cr-ba__fig { border-left: 2px solid #fff; }
.cr-ba__label {
  position: absolute;
  bottom: 10px; left: 10px;
  background: rgba(20,45,70,0.88);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.cr-ba__label--after { background: var(--cr-blue); }
.cr-ba__more { text-align: center; margin-top: 40px; }

/* Intro section with a supporting image */
.cr-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 46px; align-items: center; }
.cr-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  border-radius: var(--cr-radius);
}
.cr-intro__body h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: 0 0 16px; }
.cr-intro__body > p { font-size: 1.12rem; color: var(--cr-body); margin: 0 0 24px; }
.cr-intro__pts { list-style: none; margin: 0; padding: 0; }
.cr-intro__pts li {
  position: relative;
  padding: 8px 0 8px 26px;
  border-bottom: 1px solid var(--cr-line);
}
.cr-intro__pts li::before {
  content: "";
  position: absolute; left: 0; top: 15px;
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--cr-blue);
}

/* Makeover list with supporting image */
.cr-make-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; max-width: 980px; margin: 0 auto; }
.cr-make-wrap .cr-make { grid-template-columns: 1fr; max-width: none; }
.cr-make-wrap__media img {
  display: block; width: 100%; height: 100%;
  min-height: 320px; object-fit: cover;
  border-radius: var(--cr-radius);
}

/* =========================================================
   PRIMARY MENU  (.cr-menu added via functions.php filter)
   ========================================================= */
.cr-menu .menu-link,
.cr-menu a {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.cr-menu .current-menu-item > a,
.cr-menu .current-menu-item > .menu-link {
  color: var(--cr-blue) !important;
}
.cr-menu .menu-item > a:hover,
.cr-menu .menu-item > .menu-link:hover {
  color: var(--cr-blue-dark) !important;
}

/* =========================================================
   FOOTER  (paste HTML into a Footer widget / HTML block)
   ========================================================= */
.cr-footer {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--cr-ink);
  color: rgba(255,255,255,0.82);
  padding: 60px 20px 0;
  box-sizing: border-box;
}
.cr-footer a { color: rgba(255,255,255,0.82); text-decoration: none; }
.cr-footer a:hover { color: #fff; text-decoration: underline; }
.cr-footer__inner {
  max-width: var(--cr-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.cr-footer h4 {
  color: #fff;
  font-size: 1.05rem;
  margin: 0 0 16px;
  letter-spacing: 0.02em;
}
.cr-footer__brand p { margin: 0 0 16px; max-width: 340px; }
.cr-footer__list { list-style: none; margin: 0; padding: 0; }
.cr-footer__list li { padding: 6px 0; }
.cr-footer__phone {
  display: inline-block;
  color: #fff !important;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.cr-footer__phone:hover { text-decoration: none; }
.cr-footer__bar {
  max-width: var(--cr-maxw);
  margin: 44px auto 0;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: space-between; align-items: center;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
}

@media (max-width: 921px) {
  .cr-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .cr-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .cr-footer__inner { grid-template-columns: 1fr; }
  .cr-footer__bar { flex-direction: column; text-align: center; }
}

/* =========================================================
   FAQ  (native <details>/<summary> toggles)
   ========================================================= */
.cr-faq { max-width: 820px; margin: 0 auto; }
.cr-faq__item {
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  background: #fff;
  margin-bottom: 14px;
  overflow: hidden;
}
.cr-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cr-ink);
  position: relative;
}
.cr-faq__item summary::-webkit-details-marker { display: none; }
.cr-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 24px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--cr-blue);
  transition: transform 0.2s ease;
}
.cr-faq__item[open] summary::after { content: "–"; }
.cr-faq__item summary:hover { color: var(--cr-blue); }
.cr-faq__answer { padding: 0 24px 22px; color: var(--cr-body); }
.cr-faq__answer p { margin: 0 0 12px; }
.cr-faq__answer p:last-child { margin-bottom: 0; }

/* =========================================================
   INNER PAGE HERO  (Services / About / Contact)
   ========================================================= */
.cr-phero {
  background: var(--cr-ink);
  color: #fff;
  padding: 68px 20px;
  text-align: center;
}
.cr-phero__inner { max-width: 760px; margin: 0 auto; }
.cr-phero span.cr-hero__tag { color: #cfe3f2; }
.cr-phero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0 0 14px; }
.cr-phero p { color: rgba(255,255,255,0.9); font-size: 1.15rem; margin: 0; }

/* Contact layout: form + map/info */
.cr-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; max-width: var(--cr-maxw); margin: 0 auto; }
.cr-contact__map iframe { width: 100%; min-height: 320px; border: 0; border-radius: var(--cr-radius); display: block; }
.cr-contact__info { margin-top: 24px; }
.cr-contact__info h3 { font-size: 1.15rem; margin: 0 0 8px; }
.cr-contact__info p { margin: 0 0 6px; }
.cr-contact__info a { font-weight: 600; }

/* Services list rows */
.cr-svc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: var(--cr-maxw); margin: 0 auto; }
.cr-svc__card {
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  padding: 28px 26px;
  background: #fff;
}
.cr-svc__card h3 { font-size: 1.2rem; margin: 0 0 10px; }
.cr-svc__card p { margin: 0; }

@media (max-width: 921px) {
  .cr-contact { grid-template-columns: 1fr; gap: 32px; }
  .cr-svc { grid-template-columns: 1fr; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 921px) {
  .cr-value { grid-template-columns: 1fr; }
  .cr-steps { grid-template-columns: repeat(2, 1fr); }
  .cr-ba { grid-template-columns: 1fr; }
  .cr-intro { grid-template-columns: 1fr; gap: 30px; }
  .cr-make-wrap { grid-template-columns: 1fr; gap: 30px; }
  .cr-make-wrap__media { order: -1; }
  .cr-hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .cr-hero__box { max-width: none; }
}
@media (max-width: 600px) {
  .cr-hero { padding: 64px 20px; }
  .cr-make { grid-template-columns: 1fr; }
  .cr-steps { grid-template-columns: 1fr; }
  .cr-doors { grid-template-columns: 1fr; }
  .cr-hero__cta { flex-direction: column; }
  .cr-hero__cta .cr-btn { text-align: center; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cr-btn { transition: none; }
}