/* ==========================================================================

   OVERRIDE STRATEGY — read this before editing



   On theinsightclinic.ca, 25 stylesheets load AFTER this one (the Elementor

   global kit post-10902.css, the Hipno parent theme, ElementsKit, and the

   Elementor widget CSS). At the default enqueue priority every tie on

   specificity was therefore lost on source order, which is why the previous

   build looked unstyled.



   Three things fix that, and all three must stay in place:



   1. LOAD LAST   functions.php enqueues this at priority 9999.

   2. SCOPE       Every selector is prefixed with `.tic-scope`. That class is

                  on <body> (body_class filter) and on a wrapper around each

                  therapist block, so either one alone is enough. It also buys

                  one extra class of specificity.

   3. !important  Every declaration carries it. The old therapist CSS used

                  !important too, and a WP Rocket minified copy of it may still

                  be cached, so nothing weaker is guaranteed to win.



   Two properties are deliberately NOT declared here because the templates set

   them inline and must keep control: `background-image` on

   .therapist-page-header and `width` on .progress-fill.



   AFTER UPLOADING: purge the WP Rocket cache. The site serves this file from

   wp-content/cache/min/1/..., so the old copy keeps being served until you do.

   ========================================================================== */



/* ==========================================================================

   THE INSIGHT CLINIC — Therapist listing

   Matched to the Home 2 design system.



   Values below were read off the live Home 2 page, not invented:

     Cards      white · 0.8px hairline border in a light tint · 15px radius

                NO box-shadow · 15–18px padding

     Buttons    #E6AC5F on #000 · 6px radius · Inter 14px/600 uppercase

     Eyebrow    Inter 16px/600 uppercase, letter-spacing NORMAL

     Sub-head   Inter 15px/600 sentence case, #2E5061

     Headings   DM Serif Display 400

     Body       Figtree 400/500, line-height 1.6



   Home 2 is flat and quiet — hairline borders do the separating, not shadows,

   and letter-spacing stays at normal almost everywhere. Both matter: adding

   shadows, large radii or wide tracking is what makes it read as a toy.



   Tokens here are shared with therapist-single.css.

   ========================================================================== */



:root{

  /* brand */

  --tic-teal:#2E5061;

  --tic-teal-dark:#24404E;

  --tic-ink:#060727;

  --tic-amber:#E6AC5F;

  --tic-amber-dark:#D7974A;

  --tic-amber-ink:#9A6B22;



  /* surfaces */

  --tic-white:#FFFFFF;

  --tic-blue-50:#F6F9FC;

  --tic-blue-100:#EAEFF9;

  --tic-cream:#F8F6F3;

  --tic-cream-50:#FDF9F4;



  /* hairlines — Home 2 uses 0.8px in light tints */

  --tic-line:#DBE7FB;

  --tic-line-warm:#E0D2C0;

  --tic-line-strong:#CBDBE4;

  --tic-hair:0.8px;



  /* text */

  --tic-muted:#49567D;

  --tic-body-col:#3A4256;



  /* type */

  --tic-display:"DM Serif Display", Georgia, "Times New Roman", serif;

  --tic-ui:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --tic-body:"Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;



  /* shape */

  --tic-r-card:15px;

  --tic-r-btn:6px;

  --tic-r-tag:4px;



  --tic-ease:cubic-bezier(.4,0,.2,1);

}



/* --------------------------------------------------------------------------

   LAYOUT — sidebar + a grid that is exactly three cards wide

   -------------------------------------------------------------------------- */

.tic-scope .tic-therapists{

  display:grid !important;

  grid-template-columns:minmax(0,290px) minmax(0,1fr) !important;

  gap:clamp(20px,2.4vw,34px) !important;

  align-items:start !important;

  font-family:var(--tic-body) !important;

  color:var(--tic-ink) !important;

}



/* The old rule forced `display:initial` here; the grid owns it now. */

.tic-scope #therapist-list{

  display:block !important;

  min-width:0 !important;

}



.tic-scope .tic-grid,

.tic-scope #therapist-list .therapist-list{

  display:grid !important;

  grid-template-columns:repeat(3,minmax(0,1fr)) !important;

  /* gap:clamp(14px,1.5vw,20px) !important; */

  width:100% !important;

  max-width:100% !important;

}



/* --------------------------------------------------------------------------

   THERAPIST CARD

   -------------------------------------------------------------------------- */

.tic-scope .tic-card{

  display:flex !important;

  flex-direction:column !important;

  overflow:hidden !important;

  background:var(--tic-white) !important;

  border:var(--tic-hair) solid var(--tic-line) !important;

  border-radius:var(--tic-r-card) !important;

  text-decoration:none !important;

  color:inherit !important;

  transition:border-color .25s var(--tic-ease), background-color .25s var(--tic-ease) !important;

}

.tic-scope .tic-card:hover,

.tic-scope .tic-card:focus-visible{

  border-color:var(--tic-teal) !important;

  background:var(--tic-blue-50) !important;

}

.tic-scope .tic-card:focus-visible{

  outline:2px solid var(--tic-teal) !important;

  outline-offset:2px !important;

}



.tic-scope .tic-card__media{

  display:block !important;

  overflow:hidden !important;

  background:var(--tic-blue-100) !important;

}

.tic-scope .tic-card__img{

  display:block !important;

  width:100% !important;

  aspect-ratio:4/5 !important;

  height:auto !important;

  object-fit:cover !important;

  object-position:top center !important;

}

.tic-scope .tic-card__img--placeholder{

  aspect-ratio:4/5 !important;

  background:var(--tic-blue-100) !important;

}



.tic-scope .tic-card__body{

  display:flex !important;

  flex-direction:column !important;

  align-items:flex-start !important;

  gap:7px !important;

  padding:18px !important;

  flex:1 1 auto !important;

}



.tic-scope .tic-card__name{

  margin:0 !important;

  font-family:var(--tic-display) !important;

  font-weight:400 !important;

  font-size:21px !important;

  line-height:1.22 !important;

  letter-spacing:normal !important;

  color:var(--tic-ink) !important;

  text-transform:none !important;

}



.tic-scope .tic-card__cred{

  display:block !important;

  font-family:var(--tic-body) !important;

  font-size:14px !important;

  font-weight:400 !important;

  line-height:1.5 !important;

  color:var(--tic-muted) !important;

}



/* Lead Therapist — a hairline tag, directly under the credentials.

   Deliberately not a filled pill: Home 2 has no filled badges anywhere. */

.tic-scope .tic-card__lead{

  display:inline-block !important;

  margin-top:2px !important;

  padding:4px 9px !important;

  border:var(--tic-hair) solid var(--tic-line-warm) !important;

  border-radius:var(--tic-r-tag) !important;

  background:var(--tic-cream-50) !important;

  font-family:var(--tic-ui) !important;

  font-size:10.5px !important;

  font-weight:600 !important;

  line-height:1.4 !important;

  letter-spacing:normal !important;

  text-transform:uppercase !important;

  color:var(--tic-amber-ink) !important;

  white-space:nowrap !important;

}



.tic-scope .tic-card__cta{

  display:inline-flex !important;

  align-items:center !important;

  gap:7px !important;

  margin-top:auto !important;

  padding-top:14px !important;

  font-family:var(--tic-ui) !important;

  font-size:13.5px !important;

  font-weight:600 !important;

  letter-spacing:normal !important;

  color:var(--tic-teal) !important;

}

.tic-scope .tic-card__cta svg{

  width:14px !important;

  height:9px !important;

  flex:none !important;

  fill:none !important;

  stroke:currentColor !important;

  stroke-width:1.6 !important;

  transition:transform .25s var(--tic-ease) !important;

}

.tic-scope .tic-card:hover .tic-card__cta svg{

  transform:translateX(3px) !important;

}



/* --------------------------------------------------------------------------

   FILTER SIDEBAR

   -------------------------------------------------------------------------- */

.tic-scope .tic-filters{

  position:sticky !important;

  top:110px !important;

  padding:20px !important;

  background:var(--tic-white) !important;

  border:var(--tic-hair) solid var(--tic-line) !important;

  border-radius:var(--tic-r-card) !important;

  max-height:calc(100vh - 140px) !important;

  overflow-y:auto !important;

  scrollbar-width:thin !important;

  scrollbar-color:var(--tic-line-strong) transparent !important;

}

.tic-scope .tic-filters::-webkit-scrollbar{

  width:5px !important;

}

.tic-scope .tic-filters::-webkit-scrollbar-thumb{

  background:var(--tic-line-strong) !important;

  border-radius:100px !important;

}



.tic-scope .tic-filters__head{

  display:flex !important;

  align-items:center !important;

  justify-content:space-between !important;

  gap:10px !important;

  padding-bottom:14px !important;

  border-bottom:var(--tic-hair) solid var(--tic-line) !important;

}

.tic-scope .tic-filters__head h2{

  margin:0 !important;

  font-family:var(--tic-ui) !important;

  font-weight:600 !important;

  font-size:15px !important;

  line-height:1.3 !important;

  letter-spacing:normal !important;

  color:var(--tic-teal) !important;

  text-transform:none !important;

}

.tic-scope .tic-filters__actions{

  display:flex !important;

  align-items:center !important;

  gap:8px !important;

  flex:none !important;

}



/* Collapse control — desktop keeps the panel open, so it is hidden there. */

.tic-scope .tic-filters__toggle{

  display:none !important;

  align-items:center !important;

  gap:7px !important;

  padding:7px 12px !important;

  background:var(--tic-teal) !important;

  border:var(--tic-hair) solid var(--tic-teal) !important;

  border-radius:var(--tic-r-btn) !important;

  font-family:var(--tic-ui) !important;

  font-size:11.5px !important;

  font-weight:600 !important;

  letter-spacing:normal !important;

  text-transform:uppercase !important;

  color:var(--tic-white) !important;

  cursor:pointer !important;

  transition:background-color .25s var(--tic-ease) !important;

}

.tic-scope .tic-filters__toggle:hover{

  background:var(--tic-teal-dark) !important;

}

.tic-scope .tic-filters__toggle svg{

  width:9px !important;

  height:6px !important;

  flex:none !important;

  fill:none !important;

  stroke:currentColor !important;

  stroke-width:1.8 !important;

  transition:transform .25s var(--tic-ease) !important;

}

.tic-scope .tic-filters__toggle[aria-expanded="true"] svg{

  transform:rotate(180deg) !important;

}



.tic-scope .tic-filters__reset{

  flex:none !important;

  padding:7px 12px !important;

  background:transparent !important;

  border:var(--tic-hair) solid var(--tic-line-strong) !important;

  border-radius:var(--tic-r-btn) !important;

  font-family:var(--tic-ui) !important;

  font-size:11.5px !important;

  font-weight:600 !important;

  letter-spacing:normal !important;

  text-transform:uppercase !important;

  color:var(--tic-teal) !important;

  cursor:pointer !important;

  transition:background-color .25s var(--tic-ease), border-color .25s var(--tic-ease), color .25s var(--tic-ease) !important;

}

.tic-scope .tic-filters__reset:hover{

  background:var(--tic-teal) !important;

  border-color:var(--tic-teal) !important;

  color:var(--tic-white) !important;

}



.tic-scope .tic-filter-group{

  padding:16px 0 !important;

  border-bottom:var(--tic-hair) solid var(--tic-line) !important;

}

.tic-scope .tic-filter-group:last-of-type{

  border-bottom:0 !important;

  padding-bottom:2px !important;

}



.tic-scope .tic-filter-group h3{

  margin:0 0 10px !important;

  font-family:var(--tic-ui) !important;

  font-size:15px !important;

  font-weight:600 !important;

  line-height:1.35 !important;

  letter-spacing:normal !important;

  color:var(--tic-teal) !important;

  text-transform:none !important;

}



.tic-scope .checkbox-group{

  display:flex !important;

  flex-direction:column !important;

  gap:1px !important;

}



/* Custom checkbox: the native input keeps the state, .check_bx is the visual. */

.tic-scope .checkbox-group label{

  display:flex;

  align-items:flex-start !important;

  gap:10px !important;

  padding:6px 6px !important;

  margin:0 !important;

  border-radius:var(--tic-r-tag) !important;

  font-family:var(--tic-body) !important;

  font-size:14.5px !important;

  font-weight:400 !important;

  line-height:1.45 !important;

  color:var(--tic-ink) !important;

  cursor:pointer !important;

  transition:background-color .2s var(--tic-ease) !important;

}

.tic-scope .checkbox-group label:hover{

  background:var(--tic-blue-50) !important;

}



.tic-scope .checkbox-group label input[type="checkbox"]{

  position:absolute !important;

  opacity:0 !important;

  width:1px !important;

  height:1px !important;

  margin:0 !important;

}



.tic-scope .checkbox-group .check_bx{

  position:relative !important;

  flex:none !important;

  width:17px !important;

  height:17px !important;

  /* margin-top:2px !important; */

  /* border:var(--tic-hair) solid var(--tic-line-strong) !important; */

  border-radius:var(--tic-r-tag) !important;

  background:var(--tic-white) !important;

  transition:background-color .18s var(--tic-ease), border-color .18s var(--tic-ease) !important;

}

.tic-scope .checkbox-group .check_bx::after{

  content:"" !important;

  position:absolute !important;

  left:5.5px !important;

  top:2px !important;

  width:4px !important;

  height:8px !important;

  border:solid var(--tic-white) !important;

  border-width:0 1.8px 1.8px 0 !important;

  transform:rotate(45deg) !important;

  opacity:0 !important;

  transition:opacity .15s var(--tic-ease) !important;

}

.tic-scope .checkbox-group label input:checked ~ .check_bx{

  background:var(--tic-teal) !important;

  border-color:var(--tic-teal) !important;

}

.tic-scope .checkbox-group label input:checked ~ .check_bx::after{

  opacity:1 !important;

}

.tic-scope .checkbox-group label input:focus-visible ~ .check_bx{

  outline:2px solid var(--tic-teal) !important;

  outline-offset:2px !important;

}

.tic-scope .checkbox-group .check_lbl{

  flex:1 1 auto !important;

  min-width:0 !important;

}



.tic-scope .show-more-btn{

  align-self:flex-start !important;

  margin-top:6px !important;

  padding:4px 0 !important;

  background:none !important;

  border:0 !important;

  font-family:var(--tic-ui) !important;

  font-size:13px !important;

  font-weight:600 !important;

  letter-spacing:normal !important;

  color:var(--tic-teal) !important;

  text-decoration:underline !important;

  text-underline-offset:3px !important;

  text-decoration-thickness:1px !important;

  cursor:pointer !important;

  transition:color .2s var(--tic-ease) !important;

}

.tic-scope .show-more-btn:hover{

  color:var(--tic-amber-dark) !important;

}



/* --------------------------------------------------------------------------

   BUTTONS (shared with the detail page)

   -------------------------------------------------------------------------- */

.tic-scope .tic-btn{

  display:inline-flex !important;

  align-items:center !important;

  justify-content:center !important;

  gap:9px !important;

  min-height:50px !important;

  padding:16px 22px !important;

  border:var(--tic-hair) solid transparent !important;

  border-radius:var(--tic-r-btn) !important;

  background:var(--tic-amber) !important;

  color:#000 !important;

  font-family:var(--tic-ui) !important;

  font-size:14px !important;

  font-weight:600 !important;

  letter-spacing:normal !important;

  line-height:1.2 !important;

  text-transform:uppercase !important;

  text-align:center !important;

  text-decoration:none !important;

  cursor:pointer !important;

  transition:background-color .25s var(--tic-ease), color .25s var(--tic-ease), border-color .25s var(--tic-ease) !important;

}

.tic-scope .tic-btn:hover{

  background:var(--tic-amber-dark) !important;

  color:#000 !important;

}

.tic-scope .tic-btn:focus-visible{

  outline:2px solid var(--tic-teal) !important;

  outline-offset:2px !important;

}



.tic-scope .tic-btn--teal{

  background:var(--tic-teal) !important;

  color:var(--tic-white) !important;

}

.tic-scope .tic-btn--teal:hover{

  background:var(--tic-teal-dark) !important;

  color:var(--tic-white) !important;

}



.tic-scope .tic-btn--ghost{

  background:transparent !important;

  border-color:var(--tic-teal) !important;

  color:var(--tic-teal) !important;

}

.tic-scope .tic-btn--ghost:hover{

  background:var(--tic-teal) !important;

  color:var(--tic-white) !important;

}



/* --------------------------------------------------------------------------

   EMPTY STATE

   -------------------------------------------------------------------------- */

.tic-scope .tic-empty{

  grid-column:1/-1 !important;

  padding:clamp(26px,3.6vw,46px) !important;

  background:var(--tic-white) !important;

  border:var(--tic-hair) solid var(--tic-line) !important;

  border-radius:var(--tic-r-card) !important;

  text-align:center !important;

  font-family:var(--tic-body) !important;

}

.tic-scope .tic-empty h3{

  margin:0 0 8px !important;

  font-family:var(--tic-display) !important;

  font-weight:400 !important;

  font-size:24px !important;

  line-height:1.2 !important;

  color:var(--tic-ink) !important;

  text-transform:none !important;

}

.tic-scope .tic-empty p{

  margin:0 0 18px !important;

  font-size:15px !important;

  line-height:1.6 !important;

  color:var(--tic-muted) !important;

}

.tic-scope .tic-empty a{

  color:var(--tic-teal) !important;

  text-decoration:underline !important;

  text-underline-offset:3px !important;

}



/* --------------------------------------------------------------------------

   RESPONSIVE

   Three across is the desktop layout; below 1200px there is not enough room

   beside the sidebar for a third card to stay readable.

   -------------------------------------------------------------------------- */

@media (max-width:1199px){



  .tic-scope .tic-therapists{

  grid-template-columns:minmax(0,260px) minmax(0,1fr) !important;

}

  .tic-scope .tic-grid,

.tic-scope #therapist-list .therapist-list{

  grid-template-columns:repeat(2,minmax(0,1fr)) !important;

}



}



/* Stacked layout: eight open filter groups would bury the therapists, so the

   panel collapses and the groups flow into columns once reopened. */

@media (max-width:900px){



  .tic-scope .tic-therapists{

  grid-template-columns:minmax(0,1fr) !important;

}

  .tic-scope .tic-filters{

  position:static !important;

  max-height:none !important;

  overflow:visible !important;

}

  /* `is-collapsible` is added by the script. Without it nothing collapses,

     so a blocked script leaves the panel open and fully usable. */

  .tic-scope .tic-filters.is-collapsible .tic-filters__toggle{

  display:inline-flex !important;

}

  .tic-scope .tic-filters.is-collapsible .tic-filters__head{

  padding-bottom:0 !important;

  border-bottom:0 !important;

}

  .tic-scope .tic-filters.is-collapsible.is-open .tic-filters__head{

  padding-bottom:14px !important;

  border-bottom:var(--tic-hair) solid var(--tic-line) !important;

}



  .tic-scope .tic-filters.is-collapsible #therapist-filter-form{

  display:none !important;

}

  .tic-scope .tic-filters.is-collapsible.is-open #therapist-filter-form{

  display:grid !important;

  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)) !important;

  gap:0 24px !important;

  align-items:start !important;

}

  .tic-scope .tic-filters.is-collapsible.is-open .tic-filter-group:last-of-type{

  border-bottom:var(--tic-hair) solid var(--tic-line) !important;

  padding-bottom:16px !important;

}



  .tic-scope .tic-grid,

.tic-scope #therapist-list .therapist-list{

  grid-template-columns:repeat(3,minmax(0,1fr)) !important;

}



}



@media (max-width:700px){



  .tic-scope .tic-grid,

.tic-scope #therapist-list .therapist-list{

  grid-template-columns:repeat(2,minmax(0,1fr)) !important;

}

  .tic-scope .tic-card__name{

  font-size:19px !important;

}

  .tic-scope .tic-card__body{

  padding:15px !important;

}



}



@media (max-width:520px){



  /* Title and the two controls do not fit on one line at phone widths. */

  .tic-scope .tic-filters__head{

  flex-wrap:wrap !important;

  gap:12px !important;

}

  .tic-scope .tic-filters__head h2{

  flex:1 1 100% !important;

}

  .tic-scope .tic-filters__actions{

  flex:1 1 100% !important;

  justify-content:space-between !important;

}



  .tic-scope .tic-grid,

.tic-scope #therapist-list .therapist-list{

  grid-template-columns:minmax(0,1fr) !important;

}

  .tic-scope .tic-card__img,

.tic-scope .tic-card__img--placeholder{

  aspect-ratio:3/2 !important;

}

  .tic-scope .tic-card__name{

  font-size:21px !important;

}

  .tic-scope .tic-btn{

  width:100% !important;

}



}



@media (prefers-reduced-motion:reduce){



  .tic-scope .tic-card,

.tic-scope .tic-card__cta svg,

.tic-scope .tic-btn,

.tic-scope .checkbox-group .check_bx{

  transition:none !important;

}



}