/**
 * Paras Interiors — CRO layer, styled to MATCH the existing Palladio theme.
 * Design tokens mirror the theme: accent gold #ddb837 (hover #eec432), ink #1d1d1d,
 * gray #818181, SQUARE corners (theme uses no button radius), flat look (no hover
 * lift), button typography "Inconsolata" monospace 700, headings inherit the theme
 * heading font (Abril Fatface), body inherits Poppins. Prefixed .pi-* / scopes hero
 * classes only — removable to revert.
 */

:root {
  --pi-ink: #1d1d1d;            /* theme dark */
  --pi-ink-2: #5f5f5f;
  --pi-gray: #818181;           /* theme secondary text */
  --pi-accent: #ddb837;         /* theme brand gold */
  --pi-accent-h: #eec432;       /* theme gold hover (lighter) */
  --pi-wa: #25D366;
  --pi-wa-d: #1ebe5a;
  --pi-paper: #ffffff;
  --pi-mist: #f7f7f7;           /* theme light section bg */
  --pi-line: #e5e5e5;           /* theme border gray */
  --pi-shadow-sm: 0 2px 10px rgba(29,29,29,.08);
}

/* ============================ BUTTON SYSTEM ===========================
   Mirrors the theme's .sc_button: Inconsolata 700, square, flat.            */
.pi-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:"Inconsolata",monospace; font-weight:700; font-size:16px; line-height:1.5;
  padding:13px 26px; border-radius:0; border:2px solid transparent;
  text-decoration:none; cursor:pointer; text-align:center; letter-spacing:.2px;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.pi-btn svg{ width:1.05em; height:1.05em; flex:0 0 auto; }
/* Primary CTA — transparent with black border; fills black on hover (CRO restyle). */
.pi-btn--primary,.pi-btn--accent{ background:transparent; border-color:#000; color:#000; }
.pi-btn--primary:hover,.pi-btn--primary:focus-visible,
.pi-btn--accent:hover,.pi-btn--accent:focus-visible{ background:#000; border-color:#000; color:#fff; }
.pi-btn--wa{ background:var(--pi-wa); color:#fff; }
.pi-btn--wa:hover,.pi-btn--wa:focus-visible{ background:var(--pi-wa-d); color:#fff; }
.pi-btn--ghost{ background:transparent; color:#fff; border-color:#fff; }
.pi-btn--ghost:hover{ background:#fff; color:#1d1d1d; }
.pi-btn--ghost-ink{ background:transparent; color:#1d1d1d; border-color:#1d1d1d; }
.pi-btn--ghost-ink:hover{ color:var(--pi-gray); border-color:var(--pi-gray); }
.pi-btn--lg{ font-size:17px; padding:15px 30px; }
.pi-btn--block{ width:100%; }

/* Hero subtitle styling lives in the theme's hero.css (grid-scaled 24px) so it
   scales with the slider; no overrides here to avoid conflicting with that model. */

/* ============================ TRUST BAR =============================== */
.pi-trust-bar{
  background:var(--pi-ink); color:#fff;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  border-top:3px solid var(--pi-accent);
}
.pi-trust-bar__item{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 14px; text-align:center; font-size:13px; font-weight:600;
  background:var(--pi-ink); min-height:62px;
}
.pi-trust-bar__item svg{ width:22px; height:22px; color:var(--pi-accent); flex:0 0 auto; }
.pi-trust-bar__item span{ line-height:1.25; }
@media (min-width:768px){
  .pi-trust-bar{ grid-template-columns:repeat(4,1fr); }
  .pi-trust-bar__item{ font-size:14px; padding:20px 16px; }
}
/* Carousel dots — base styles + hidden by default (declared BEFORE the mobile
   media query so the mobile `display:flex` override wins by source order). */
.pi-trust-dots{ display:none; justify-content:center; align-items:center; gap:8px; padding:11px 0; background:var(--pi-ink); }
.pi-trust-dots button{ width:7px; height:7px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.35); cursor:pointer; transition:width .2s ease, background .2s ease; }
.pi-trust-dots button.is-active{ width:18px; border-radius:4px; background:var(--pi-accent); }
/* Mobile (≤767px): swipeable carousel — one badge per view, scroll-snap + dots. */
@media (max-width:767px){
  .pi-trust-bar{
    display:flex; grid-template-columns:none; gap:0;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .pi-trust-bar::-webkit-scrollbar{ display:none; }
  .pi-trust-bar__item{ flex:0 0 100%; scroll-snap-align:center; min-height:72px; }
  .pi-trust-dots{ display:flex; }
}

/* ============================ CTA BANDS ============================== */
.pi-cta-band{
  background:var(--pi-mist); border:1px solid var(--pi-line); border-radius:0;
  padding:28px 20px; margin:34px auto; max-width:1100px; text-align:center;
}
.pi-cta-band__title{ font-size:24px; margin:0 0 8px; line-height:1.25; color:var(--pi-ink); }
.pi-cta-band__sub{ font-size:15px; color:var(--pi-ink-2); margin:0 0 20px; line-height:1.55; }
.pi-cta-band__btns{ display:flex; flex-direction:column; gap:12px; align-items:stretch; max-width:330px; margin:0 auto; }
@media (min-width:768px){
  .pi-cta-band{ padding:38px 32px; }
  .pi-cta-band__title{ font-size:30px; }
  .pi-cta-band__btns{ flex-direction:row; justify-content:center; max-width:none; }
}
.pi-gallery-cta{ margin:30px auto 10px; }

/* FAQ CTA */
.pi-faq-cta{
  display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center;
  background:var(--pi-mist); border:1px solid var(--pi-line); padding:24px 18px; margin:26px 0;
}
.pi-faq-cta__t{ color:var(--pi-ink); font-size:18px; line-height:1.3; }
@media (min-width:600px){ .pi-faq-cta{ flex-direction:row; justify-content:center; gap:16px; } }

/* Final CTA banner (flat dark, matches theme) */
.pi-final-cta{ background:var(--pi-ink); color:#fff; text-align:center; padding:48px 20px; }
.pi-final-cta__title{ font-size:26px; margin:0 0 10px; line-height:1.25; color:#fff; }
.pi-final-cta__sub{ font-size:15px; color:rgba(255,255,255,.78); margin:0 0 24px; line-height:1.55; }
.pi-final-cta__btns{ display:flex; flex-direction:column; gap:12px; max-width:330px; margin:0 auto; }
@media (min-width:768px){
  .pi-final-cta{ padding:64px 24px; }
  .pi-final-cta__title{ font-size:36px; }
  .pi-final-cta__btns{ flex-direction:row; justify-content:center; max-width:none; }
}

/* ====================== STICKY MOBILE ACTION BAR ===================== */
.pi-mobile-bar{ display:none; }
@media (max-width:767px){
  .pi-mobile-bar{
    display:grid; grid-template-columns:repeat(3,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:99999990;
    background:var(--pi-paper); border-top:2px solid var(--pi-accent);
    box-shadow:0 -3px 14px rgba(29,29,29,.14);
    padding-bottom:env(safe-area-inset-bottom,0);
    transform:translateY(0); transition:transform .25s ease;
  }
  .pi-mobile-bar.pi-hidden{ transform:translateY(110%); }
  .pi-mobile-bar__btn{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:9px 4px 10px; text-decoration:none; color:var(--pi-ink);
    font-family:"Inconsolata",monospace; font-size:12px; font-weight:700; letter-spacing:.3px;
    border:0; border-right:1px solid var(--pi-line); background:transparent; cursor:pointer; min-height:56px;
  }
  .pi-mobile-bar__btn:last-child{ border-right:0; }
  .pi-mobile-bar__btn svg{ width:21px; height:21px; }
  .pi-mobile-bar__btn--call svg{ color:var(--pi-ink); }
  .pi-mobile-bar__btn--wa{ color:#0b8a3e; }
  .pi-mobile-bar__btn--wa svg{ color:var(--pi-wa); }
  .pi-mobile-bar__btn--enq{ background:var(--pi-accent); color:#1d1d1d; }
  body{ padding-bottom:64px !important; }
  #ht-ctc-chat{ display:none !important; }
}

/* ---- QA fix: blog-post content responsiveness ----
 * A wide fixed-size child (table/embed/image) was stretching .blog-content to ~1709px,
 * clipping the post title + body on mobile. Constrain post content + wide children to
 * their container so the title wraps and nothing is cut off. Scoped to .blog-content. */
.blog-content{ max-width:100%; overflow-wrap:break-word; word-wrap:break-word; }
.blog-content img,.blog-content video,.blog-content iframe,.blog-content figure,.blog-content embed,.blog-content object{ max-width:100%; height:auto; }
.blog-content table,.blog-content pre{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.blog-content h1,.blog-content h2,.blog-content h3,.blog-content p,.blog-content ul,.blog-content ol{ max-width:100%; }

/* Reassurance microcopy under the contact form */
.pi-form-reassure{
  display:flex; align-items:center; gap:8px; margin-top:12px;
  font-size:13.5px; color:var(--pi-gray); line-height:1.4;
}
.pi-form-reassure svg{ width:18px; height:18px; color:var(--pi-accent); flex:0 0 auto; }

@media (prefers-reduced-motion:reduce){ .pi-mobile-bar{ transition:none; } }