/* CladCraft theme custom styles (mirrors the live site's inline <style> block) */
body{ font-family:'Inter',sans-serif; }
h1,h2,h3,.font-display{ font-family:'Sora',sans-serif; }
html{ scroll-behavior:smooth; }

/* Subtle diagonal texture overlay for material swatch thumbnails -
   gives the gradient cards a bit of tactile depth without using any
   external image (zero licensing risk, swap for real photos later). */
.swatch-texture{ position:relative; }
.swatch-texture::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 10px);
  pointer-events:none;
}

/* Floating WhatsApp button (bottom-right, every page) */
.cc-wa-float{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:56px; height:56px; border-radius:9999px; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25); transition:transform .2s;
}
.cc-wa-float:hover{ transform:scale(1.08); }

/* Quote form inputs */
.cc-input{
  width:100%; border:1.5px solid #E4E7EC; border-radius:8px;
  padding:12px 14px; font-size:14px; color:#16202E; background:#fff;
}
.cc-input:focus{ outline:none; border-color:#D9A25C; box-shadow:0 0 0 3px rgba(217,162,92,.18); }
.cc-label{ display:block; font-size:12.5px; font-weight:600; color:#16202E; margin-bottom:6px; }

/* FAQ accordion (service pages) */
.cc-faq-a{ display:none; }
.cc-faq-item.open .cc-faq-a{ display:block; }
.cc-faq-item.open .cc-faq-chevron{ transform:rotate(180deg); }
.cc-faq-chevron{ transition:transform .2s; }

/* Blog post / legal page typography */
.post-content { color: #3A4350; font-size: 15.5px; line-height: 1.75; }
.post-content p { margin-bottom: 1.1em; }
.post-content h2 { font-family: 'Sora', sans-serif; font-weight: 700; color: #0F2645; font-size: 1.45rem; margin: 1.8em 0 .6em; line-height: 1.35; }
.post-content h3 { font-family: 'Sora', sans-serif; font-weight: 700; color: #0F2645; font-size: 1.15rem; margin: 1.5em 0 .5em; }
.post-content ul, .post-content ol { margin: 0 0 1.1em 1.3em; }
.post-content li { margin-bottom: .45em; }
.post-content ul li { list-style: disc; }
.post-content ol li { list-style: decimal; }
.post-content a { color: #B8823D; font-weight: 600; }
.post-content a:hover { text-decoration: underline; }
.post-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 14px; }
.post-content th, .post-content td { border: 1px solid #E4E7EC; padding: 10px 12px; text-align: left; }
.post-content th { background: #F5F7FA; color: #0F2645; font-weight: 700; }
.post-content blockquote { border-left: 3px solid #D9A25C; padding: .4em 0 .4em 1em; margin: 1.2em 0; color: #5B6572; font-style: italic; }
.post-content strong { color: #0F2645; }

/* Mobile menu */
#mobileMenu { transition: transform .3s ease; }
#mobileMenu.translate-x-full { transform: translateX(100%); }

/* Blog article components (same design language) */
.answer-box { background: #FBF6EC; border: 1px solid #EAD9B8; border-left: 4px solid #D9A25C; border-radius: 12px; padding: 18px 20px; margin: 0 0 1.6em; font-size: 15.5px; line-height: 1.7; color: #3A4350; }
.answer-box strong { color: #0F2645; }
.toc-box { background: #F5F7FA; border: 1px solid #E4E7EC; border-radius: 12px; padding: 18px 22px; margin: 0 0 2em; }
.toc-box > strong { display: block; font-family: 'Sora', sans-serif; color: #0F2645; font-size: 14px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
.toc-box ul { margin: 0; padding: 0; list-style: none; columns: 1; }
.toc-box li { margin-bottom: 7px; font-size: 14px; }
.toc-box a { color: #3A4350; font-weight: 500; text-decoration: none; }
.toc-box a:hover { color: #B8823D; }
.wa-cta-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: linear-gradient(135deg, #0F2645, #173563); border-radius: 14px; padding: 22px 24px; margin: 2em 0; color: #fff; }
.wa-cta-inline strong { display: block; font-family: 'Sora', sans-serif; font-size: 16.5px; margin-bottom: 4px; }
.wa-cta-inline span { font-size: 13.5px; color: #C9D4E2; }
.wa-cta-inline a { flex-shrink: 0; background: #25D366; color: #fff; font-weight: 700; font-size: 14.5px; padding: 13px 26px; border-radius: 8px; text-decoration: none; transition: opacity .2s; }
.wa-cta-inline a:hover { opacity: .88; text-decoration: none; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 1.6em 0; }
.stat-card { background: #fff; border: 1px solid #E4E7EC; border-top: 3px solid #D9A25C; border-radius: 10px; padding: 16px 14px; text-align: center; }
.stat-num { display: block; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.35rem; color: #0F2645; margin-bottom: 4px; }
.stat-label { display: block; font-size: 12px; color: #5B6572; line-height: 1.5; }
table.info-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.6em 0; font-size: 14px; border: 1px solid #E4E7EC; border-radius: 10px; overflow: hidden; }
.info-table thead th { background: #0F2645; color: #fff; font-family: 'Sora', sans-serif; font-size: 13px; padding: 12px 14px; text-align: left; border: none; }
.info-table tbody td { padding: 11px 14px; border-top: 1px solid #E4E7EC; vertical-align: top; color: #3A4350; }
.info-table tbody tr:nth-child(even) td { background: #F8FAFC; }
.info-table td:first-child { font-weight: 600; color: #0F2645; }
.procon { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 1.6em 0; }
@media (min-width: 640px) { .procon { grid-template-columns: 1fr 1fr; } }
.pros, .cons { border-radius: 10px; padding: 18px; border: 1px solid #E4E7EC; }
.pros { background: #F2FBF5; border-top: 3px solid #25D366; }
.cons { background: #FDF6F3; border-top: 3px solid #D9A25C; }
.pros h4, .cons h4 { font-family: 'Sora', sans-serif; font-size: 14px; color: #0F2645; margin: 0 0 10px; }
.pros ul, .cons ul { margin: 0 0 0 1.2em; font-size: 14px; }
.pros li, .cons li { margin-bottom: 6px; }
.callout { background: #0F2645; color: #E8EDF4; border-radius: 12px; padding: 20px 22px; margin: 1.8em 0; font-size: 15px; line-height: 1.7; }
.callout strong { color: #D9A25C; }
.faq-block { margin: 1.6em 0; }
.faq-item { background: #fff; border: 1px solid #E4E7EC; border-radius: 10px; padding: 18px 20px; margin-bottom: 12px; }
.faq-item h3 { font-family: 'Sora', sans-serif; font-size: 15.5px; color: #0F2645; margin: 0 0 8px; }
.faq-item p { margin: 0; font-size: 14.5px; color: #3A4350; }
ol.steps { counter-reset: step; list-style: none; margin: 1.6em 0; padding: 0; }
ol.steps li { position: relative; padding: 0 0 18px 46px; font-size: 14.5px; }
ol.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: #D9A25C; color: #0F2645; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
ol.steps li::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 2px; width: 2px; background: #E4E7EC; }
ol.steps li:last-child::after { display: none; }
.author-box { display: flex; gap: 16px; align-items: flex-start; background: #F5F7FA; border: 1px solid #E4E7EC; border-radius: 12px; padding: 20px; margin: 2.5em 0 0; }
.author-box .author-avatar { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #0F2645, #173563); color: #D9A25C; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.author-box strong { color: #0F2645; font-size: 14.5px; }
.author-box p { margin: 4px 0 0; font-size: 13px; color: #5B6572; }
.reading-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }

/* Sticky mobile CTA bar (mobile only, under 768px) */
.cc-mobile-cta{ display:none; }
@media (max-width:767px){
  .cc-mobile-cta{
    display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:55;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(15,38,69,.97); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border-top:1px solid rgba(217,162,92,.4);
  }
  .cc-mobile-cta a{
    flex:1; display:flex; align-items:center; justify-content:center;
    padding:13px 10px; border-radius:10px; font-family:'Sora',sans-serif;
    font-weight:800; font-size:14.5px; text-decoration:none; color:#fff;
  }
  .cc-mobile-cta-call{ background:#0F2645; border:1.5px solid #D9A25C; }
  .cc-mobile-cta-wa{ background:#25D366; }
  /* keep the floating WhatsApp bubble clear of the mobile bar */
  .cc-wa-float{ bottom:78px; }
  /* keep footer content clear of the mobile bar */
  body{ padding-bottom:64px; }
}

/* Quote form: instant WhatsApp fallback button after success */
.cc-wa-fallback{
  display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  background:#25D366; color:#fff; font-weight:700; font-size:14px;
  padding:12px 20px; border-radius:8px; text-decoration:none;
}
.cc-wa-fallback:hover{ opacity:.9; color:#fff; }

/* Cost Estimator page */
.est-card { cursor: pointer; position: relative; transition: border-color .2s, box-shadow .2s, background .2s; }
.est-card input { position: absolute; opacity: 0; pointer-events: none; }
.est-card:hover { border-color: #D9A25C; }
.est-card.est-selected { border-color: #D9A25C; box-shadow: 0 0 0 2px #D9A25C; background: #FBF6EC; }
.est-check { opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.est-card.est-selected .est-check { opacity: 1; transform: scale(1); }
.est-tab.est-active { background: #0F2645; color: #fff; }
.est-dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #E4E7EC; background: #fff; color: #5B6572; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; }
.est-step.est-current .est-dot { border-color: #D9A25C; background: #D9A25C; color: #0F2645; }
.est-step.est-done .est-dot { border-color: #0F2645; background: #0F2645; color: #fff; }

/* ---------- Homepage testimonial carousel ---------- */
.t-viewport { overflow: hidden; margin: 0 44px; }
@media (max-width: 640px) { .t-viewport { margin: 0 34px; } }
.t-track { display: flex; gap: 20px; transition: transform .5s ease; }
.t-slide { flex: 0 0 100%; min-width: 0; }
@media (min-width: 640px) { .t-slide { flex-basis: calc(50% - 10px); } }
@media (min-width: 1024px) { .t-slide { flex-basis: calc(33.333% - 14px); } }
.t-card {
  position: relative; background: #fff; border: 1px solid #e5e7eb;
  border-radius: 18px; padding: 30px 24px 26px; text-align: center;
  box-shadow: 0 10px 30px rgba(15, 38, 69, .08); height: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.t-sample {
  position: absolute; top: 12px; right: 14px; font-size: 10px;
  font-weight: 800; letter-spacing: .08em; color: #9aa3b2;
  background: #f1f3f6; padding: 3px 9px; border-radius: 999px;
}
.t-avatar {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  border: 3px solid #f0e6cf; margin-bottom: 16px;
}
.t-quote { font-size: 14.5px; color: #1f2a3a; line-height: 1.65; font-style: italic; margin-bottom: 14px; flex: 1; }
.t-stars { font-size: 17px; letter-spacing: 2px; margin-bottom: 10px; }
.t-name { font-size: 14.5px; font-weight: 800; color: #0F2645; }
.t-service { font-size: 12px; color: #8a93a3; margin-top: 3px; }
.t-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e5e7eb;
  background: #fff; color: #0F2645; font-size: 22px; line-height: 1;
  cursor: pointer; box-shadow: 0 4px 14px rgba(15,38,69,.10); z-index: 2;
}
.t-arrow:hover { background: #0F2645; color: #fff; border-color: #0F2645; }
.t-prev { left: 0; } .t-next { right: 0; }
.t-dots { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.t-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #cfd6e0;
  border: none; cursor: pointer; padding: 0;
}
.t-dot.active { background: #C9A227; width: 26px; border-radius: 999px; }