/* =====================================================================
   Paras Interiors — unified FAQ design
   ---------------------------------------------------------------------
   The site has TWO FAQ markups: WPBakery vc_toggle (home, services hub)
   and vc_tta-accordion (service + area pages). This file restyles BOTH
   into one modern editorial pattern so every FAQ on the site looks the
   same:  hairline-divided list · tracked question · clay circle with a
   +/× indicator · calm sepia answer. No boxes, no gray bars.

   !important is required throughout: the questions carry inline styles
   from the builder and js_composer.min.css styles both components.
   ===================================================================== */

/* ---- shared: strip old chrome ----------------------------------------- */
.vc_toggle.faq-toggle,
.vc_toggle,
.vc_tta-accordion .vc_tta-panel{
  background:transparent !important;
  border:0 !important;
  margin:0 !important;
  border-bottom:1px solid var(--pi-line) !important;
  border-radius:0 !important;
}
.vc_tta-accordion .vc_tta-panel-heading{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
}

/* ---- the question row -------------------------------------------------- */
.vc_toggle .vc_toggle_title{
  position:relative;
  padding:20px 62px 20px 0 !important;
  cursor:pointer;
}
.vc_toggle .vc_toggle_title h6,
.vc_toggle .vc_toggle_title h4{
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  font-family:'Poppins', 'Poppins-fallback', sans-serif !important;
  font-size:16.5px !important;
  font-weight:600 !important;
  line-height:1.45 !important;
  color:var(--pi-text) !important;
  transition:color .2s ease;
}
.vc_tta-accordion .vc_tta-panel-title{
  font-size:16.5px !important;
  line-height:1.45 !important;
}
.vc_tta-accordion .vc_tta-panel-title > a{
  position:relative;
  display:block;
  padding:20px 62px 20px 0 !important;
  background:transparent !important;
  border:0 !important;
  font-family:'Poppins', 'Poppins-fallback', sans-serif !important;
  font-weight:600 !important;
  color:var(--pi-text) !important;
  transition:color .2s ease;
}
.vc_toggle.vc_toggle_active .vc_toggle_title h6,
.vc_toggle .vc_toggle_title:hover h6,
.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-title > a,
.vc_tta-accordion .vc_tta-panel-title > a:hover{
  /* champagne --pi-accent as TEXT on the cream FAQ is ~2.5:1 (AA fail on the
     one interactive label); sepia clears 5.8:1 while reading in the same
     warm family. The clay +/- indicator keeps the champagne. */
  color:var(--pi-sepia-txt) !important;
}

/* ---- the +/× indicator: clay circle ------------------------------------ */
.vc_toggle .vc_toggle_title .vc_toggle_icon,
.vc_tta-accordion .vc_tta-panel .vc_tta-controls-icon{
  all:unset;
  position:absolute !important;
  right:12px !important;
  top:50% !important;
  left:auto !important;
  transform:translateY(-50%) !important;
  width:36px !important; height:36px !important;
  border:1px solid var(--pi-line-mid) !important;
  border-radius:50% !important;
  display:block !important;
  background:transparent !important;
  transition:background .22s ease, border-color .22s ease, transform .22s ease !important;
}
.vc_toggle .vc_toggle_icon::before,
.vc_toggle .vc_toggle_icon::after,
.vc_tta-accordion .vc_tta-controls-icon::before,
.vc_tta-accordion .vc_tta-controls-icon::after{
  content:"" !important;
  position:absolute !important;
  top:50% !important; left:50% !important;
  right:auto !important; bottom:auto !important;
  margin:0 !important;
  background:var(--pi-sepia-txt) !important;
  border:0 !important;
  transition:background .22s ease, transform .22s ease;
}
.vc_toggle .vc_toggle_icon::before,
.vc_tta-accordion .vc_tta-controls-icon::before{
  width:14px !important; height:1.6px !important;
  transform:translate(-50%,-50%) !important;
}
.vc_toggle .vc_toggle_icon::after,
.vc_tta-accordion .vc_tta-controls-icon::after{
  width:1.6px !important; height:14px !important;
  transform:translate(-50%,-50%) !important;
}
/* open state: filled clay, the vertical stroke rotates away → minus/× feel */
.vc_toggle.vc_toggle_active .vc_toggle_title .vc_toggle_icon,
.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-controls-icon{
  background:var(--pi-accent) !important;
  border-color:var(--pi-accent) !important;
  transform:translateY(-50%) rotate(180deg) !important;
}
.vc_toggle.vc_toggle_active .vc_toggle_icon::before,
.vc_toggle.vc_toggle_active .vc_toggle_icon::after,
.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-controls-icon::before,
.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-controls-icon::after{
  background:var(--pi-on-accent) !important;
}
.vc_toggle.vc_toggle_active .vc_toggle_icon::after,
.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-controls-icon::after{
  transform:translate(-50%,-50%) scaleY(0) !important;   /* + becomes − */
}

/* ---- the answer --------------------------------------------------------- */
.vc_toggle .vc_toggle_content,
.vc_tta-accordion .vc_tta-panel-body{
  background:transparent !important;
  border:0 !important;
  margin:0 !important;
  padding:0 8px 24px 0 !important;
}
.vc_toggle .vc_toggle_content p,
.vc_tta-accordion .vc_tta-panel-body p{
  color:var(--pi-text-soft);
  max-width:68ch;
}

/* ---- the picture beside the accordion ----------------------------------- */
/* The service pages put a decorative image next to the questions, but not as
   an <img>: the builder paints it as a background on a column whose only
   content is an empty spacer (`.height_tiny`, forced to 34rem per page in
   pages.css). The builder wrote background-position and background-repeat but
   NO background-size, so it defaulted to `auto` — the 600x563 file painted at
   its intrinsic size, anchored top-left, inside a ~515x510 box, losing 85px
   off its right edge and 53px off its bottom. Cover it and centre it so the
   panel is a whole picture at any column width. */
.FAQ-section .vc_col-has-fill > .vc_column-inner{
  background-size:cover !important;
  background-position:center !important;
  border-radius:2px;
}

/* mobile: slightly tighter */
@media (max-width:767px){
  .vc_toggle .vc_toggle_title,
  .vc_tta-accordion .vc_tta-panel-title > a{ padding-right:52px !important; }
  .vc_toggle .vc_toggle_title .vc_toggle_icon,
  .vc_tta-accordion .vc_tta-panel .vc_tta-controls-icon{ width:32px !important; height:32px !important; right:6px !important; }
}