/* =====================================================================
   Paras Interiors — THE button system
   ---------------------------------------------------------------------
   One look for every button on the site. Three variants only:

     PRIMARY     solid clay, white label          (main conversion actions)
     GHOST-INK   1px ink outline on light bg      (secondary actions)
     GHOST-WHITE 1px white outline on photos/dark (hero, dark CTA bands)

   All: Poppins 12.5px · 600 · uppercase · .18em tracking · square corners
   · 15px/30px padding · fills clay on hover. WhatsApp buttons stay brand
   green (solid var(--pi-wa) → var(--pi-wa-dk)).

   This file MAPS the site's many legacy button classes onto those
   variants with !important (they carry their own inline/plugin styles):
     .sc_button (theme) · .vc_btn3 (builder) · .cta-button (blog)
     .pi-btn (CTA bands — base tokens live in cro.css)
   The form submits (forms.css) and gallery chips already match.
   ===================================================================== */

/* ---- shared base for every mapped button ------------------------------ */
.post_content a.sc_button,
.page_content_wrap a.sc_button,
a.vc_btn3,
.vc_btn3-container .vc_btn3,
.cta-section .cta-button{
  display:inline-block;
  background-image:none !important;
  border-radius:0 !important;
  font-family:'Poppins', 'Poppins-fallback', sans-serif !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  line-height:1.2 !important;
  padding:15px 30px !important;
  transition:background .2s ease, color .2s ease, border-color .2s ease !important;
  box-shadow:none !important;
}

/* ---- GHOST-INK: theme sc_button on light sections ---------------------- */
.post_content a.sc_button,
.page_content_wrap a.sc_button{
  background-color:transparent !important;
  border:1px solid var(--pi-text) !important;
  color:var(--pi-text) !important;
}
.post_content a.sc_button:hover,
.page_content_wrap a.sc_button:hover{
  background-color:var(--pi-accent) !important;
  border-color:var(--pi-accent) !important;
  color:var(--pi-on-accent) !important;
}
/* kill the theme's leftover underline/icon pseudo artifacts */
.post_content a.sc_button .sc_button_title::after,
.page_content_wrap a.sc_button .sc_button_title::after{ display:none !important; }

/* ---- GHOST-WHITE: SECONDARY buttons sitting on dark/photo bands --------- */
.CTA-SEC a.sc_button,
.scheme_dark a.sc_button,
[class*="overlay-color"] a.sc_button{
  border-color:rgba(255,255,255,.85) !important; /* white outline on photo/dark band — same in both themes */
  color:#fff !important;
  background-color:transparent !important;
}
.CTA-SEC a.sc_button:hover,
.scheme_dark a.sc_button:hover,
[class*="overlay-color"] a.sc_button:hover{
  background-color:var(--pi-accent) !important;
  border-color:var(--pi-accent) !important;
  color:var(--pi-on-accent) !important;
}
/* ---- PRIMARY hero CTA (design-review fix) -----------------------------
   The hero action is the single most important button on the site; a ghost
   outline made it the lowest-contrast element on the highest-value fold.
   Solid champagne fill, deepening to antique bronze on hover. (Size/padding
   /shadow come from assets/hero/hero.css.) This rule must out-specify the
   old ghost-white rule, so it keeps the .post_content ancestor. */
.post_content .paras-hero__btn a.sc_button{
  background-color:var(--pi-accent-fill) !important;
  border:1px solid var(--pi-accent-fill) !important;
  color:var(--pi-on-accent) !important;
}
.post_content .paras-hero__btn a.sc_button:hover{
  background-color:var(--pi-accent-dk) !important;
  border-color:var(--pi-accent-dk) !important;
  color:var(--pi-on-accent) !important;
}

/* ---- PRIMARY: builder + blog CTAs -------------------------------------- */
a.vc_btn3,
.vc_btn3-container .vc_btn3,
.cta-section .cta-button{
  background-color:var(--pi-accent) !important;
  border:1px solid var(--pi-accent) !important;
  color:var(--pi-on-accent) !important;
}
a.vc_btn3:hover,
.vc_btn3-container .vc_btn3:hover,
.cta-section .cta-button:hover{
  background-color:var(--pi-accent-dk) !important;
  border-color:var(--pi-accent-dk) !important;
  color:var(--pi-on-accent) !important;
}

/* ---- CTA-band buttons (.pi-btn, rendered by inc/cro.php) ----------------
   Base tokens live in assets/cro/cro.css; this locks the system typography
   and defends the label color against the theme's global link rules. */
a.pi-btn{
  border-radius:0 !important;
  font-family:'Poppins', 'Poppins-fallback', sans-serif !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  line-height:1.2 !important;
  padding:15px 30px !important;
}
/* Outline system (no solid colour blocks): label colours are asserted here
   because the theme's global link rules repaint every <a>. */
a.pi-btn--primary, a.pi-btn--accent{ color:var(--pi-on-accent) !important; }              /* solid champagne fill → on-accent label */
a.pi-btn--primary:hover, a.pi-btn--accent:hover{ color:var(--pi-on-accent) !important; }
a.pi-btn--wa{ color:var(--pi-wa-txt) !important; }        /* AA-contrast green — see scheme.css */
a.pi-btn--wa:hover{ color:var(--pi-wa-txt) !important; }
a.pi-btn--ghost{ color:#fff !important; } /* flagged: ghost variant lives on dark CTA bands — same in both themes */
a.pi-btn--ghost:hover{ color:#fff !important; } /* flagged: same — white on dark band */
a.pi-btn--ghost-ink{ color:var(--pi-text) !important; }
a.pi-btn--ghost-ink:hover{ color:var(--pi-ivory) !important; }