/* Thinkahead — service-page content styling to match /psychological-assessments/.
   Applied only to a content element that JS has tagged `.svc-styled` (raw-content
   service pages). Accent colour comes from CSS vars set per-section by ta-service.js:
   Individuals=teal, Corporate=purple, Assessments=green. Reversible (remove link+script). */

.svc-styled {
  --svc: #17827f;
  --svc-bg: #eaf5f4;
  color: #333;
}

/* ---- intro callout (JS wraps the first paragraph in .svc-callout) ---- */
.svc-styled .svc-callout {
  background: var(--svc-bg);
  border-left: 5px solid var(--svc);
  padding: 20px 24px;
  margin: 0 0 32px;
  border-radius: 3px;
}
.svc-styled .svc-callout p { margin: 0 !important; font-size: 16px; line-height: 1.7; color: #1a1a1a; }

/* ---- section headings: uppercase, coloured, underlined ---- */
.svc-styled h2,
.svc-styled .inner-pages-box h3 {
  text-transform: uppercase;
  color: var(--svc) !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 2px solid var(--svc) !important;
  border-radius: 0 !important;
  padding: 0 0 8px !important;
  margin: 40px 0 16px !important;
  font-size: 21px;
  letter-spacing: .02em;
  line-height: 1.3;
}
.svc-styled h2::after, .svc-styled .inner-pages-box h3::after { display: none !important; content: none !important; }
/* flatten the theme's section boxes so headings read as clean underlined sections */
.svc-styled .inner-pages-box {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
}
/* sub-headings that aren't section boxes */
.svc-styled h3:not(.sidebar-title) { color: var(--svc); margin-top: 26px; }

/* theme accent heading classes (e.g. bplus purple .corporate-training) -> section colour */
.svc-styled .corporate-training,
.svc-styled h3.corporate-training,
.svc-styled p.corporate-training,
.svc-styled .leadership { color: var(--svc) !important; }

.svc-styled p { line-height: 1.75; margin-bottom: 1.05em; }

/* ---- tables ---- */
.svc-styled table {
  width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .05); border-radius: 4px; overflow: hidden;
}
.svc-styled table th { background: var(--svc) !important; color: #fff !important; text-align: left; padding: 12px 16px; font-weight: 700; }
.svc-styled table td { padding: 11px 16px; border-bottom: 1px solid #ececec; }
.svc-styled table tr:nth-child(even) td { background: var(--svc-bg); }

/* ---- lists as coloured left-border boxes (like the reference) ---- */
.svc-styled .wpb_text_column ul,
.svc-styled .textwidget ul,
.svc-styled .wpb_wrapper > ul { list-style: none; padding: 0; margin: 16px 0; }
.svc-styled .wpb_text_column ul > li,
.svc-styled .wpb_wrapper > ul > li {
  list-style: none;
  padding: 10px 16px;
  margin-bottom: 8px;
  background: var(--svc-bg);
  border-left: 4px solid var(--svc);
  color: #333;
  font-size: 15px;
  line-height: 1.6;
}
.svc-styled .wpb_text_column ul > li::before,
.svc-styled .wpb_wrapper > ul > li::before { content: none !important; display: none !important; }

/* ---- FAQ accordions ---- */
.svc-styled .ta-faqsec { margin-top: 24px; }
.svc-styled .ta-faq details {
  border: 1px solid #ece6df;
  border-radius: 8px;
  margin-bottom: 10px;
  background: #fff;
  overflow: hidden;
}
.svc-styled .ta-faq summary {
  cursor: pointer;
  padding: 15px 46px 15px 18px;
  font-weight: 700;
  color: var(--svc);
  list-style: none;
  position: relative;
  font-size: 15px;
  line-height: 1.4;
}
.svc-styled .ta-faq summary::-webkit-details-marker { display: none; }
.svc-styled .ta-faq summary::after {
  content: "+";
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--svc); font-size: 22px; font-weight: 400; line-height: 1;
}
.svc-styled .ta-faq details[open] summary::after { content: "\2212"; }
.svc-styled .ta-faq .ta-faq-a { padding: 0 18px 16px; }
.svc-styled .ta-faq .ta-faq-a p { margin: 0; color: #4a4f56; line-height: 1.7; font-size: 14px; }

/* ---- closing CTA box (JS appends .svc-cta) ---- */
.svc-styled .svc-cta {
  background: var(--svc);
  color: #fff;
  text-align: center;
  padding: 36px 24px;
  border-radius: 6px;
  margin: 44px 0 10px;
}
.svc-styled .svc-cta h3 {
  color: #fff !important; background: none !important; border: 0 !important;
  padding: 0 !important; margin: 0 0 8px !important; text-transform: none;
  font-size: 23px; letter-spacing: 0;
}
.svc-styled .svc-cta p { color: rgba(255, 255, 255, .92); margin: 0 0 20px; font-size: 15px; }
.svc-styled .svc-cta a {
  display: inline-block; background: #fff; color: var(--svc);
  padding: 12px 30px; border-radius: 30px; font-weight: 700; text-decoration: none; margin: 0 5px;
}
.svc-styled .svc-cta a.alt { background: rgba(255, 255, 255, .15); color: #fff; border: 1px solid rgba(255, 255, 255, .6); }

/* contact-form submit + theme buttons on service pages -> section colour */
.svc-styled .wpcf7-submit,
.svc-styled input[type="submit"],
.svc-styled .vc_btn3.vc_btn3-color-default {
  background: var(--svc) !important;
  border-color: var(--svc) !important;
  color: #fff !important;
}

/* ---- make the existing round "related services" cards SQUARE ---- */
body[class*="Servicestemplate"] .vc_box_border_circle,
body[class*="Servicestemplate"] .vc_box_border_circle img,
body[class*="Servicestemplate"] .vc_box_border_circle .vc_single_image-img { border-radius: 8px !important; }
body[class*="Servicestemplate"] .vc_box_border_circle img { aspect-ratio: 1 / 1; object-fit: cover; }
/* border colour follows the page's section accent, not the theme's orange */
.svc-styled .vc_box_border_circle,
.svc-styled .vc_box_border_circle .vc_single_image-wrapper { border-color: var(--svc) !important; }

/* ---- injected "Related Services" section (square cards) ---- */
.svc-styled .svc-linked { margin: 46px 0 10px; }
.svc-styled .svc-linked > h2 {
  text-transform: uppercase; color: var(--svc) !important; border: 0 !important;
  border-bottom: 2px solid var(--svc) !important; padding: 0 0 8px !important;
  margin: 0 0 24px !important; font-size: 21px; letter-spacing: .02em;
}
.svc-styled .svc-linked-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 820px) { .svc-styled .svc-linked-grid { grid-template-columns: repeat(2, 1fr); } }
.svc-styled .svc-linked-card { display: block; text-decoration: none; text-align: center; }
.svc-styled .svc-linked-img {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  background-size: cover; background-position: center;
  border: 4px solid var(--svc); border-radius: 8px; transition: .2s;
}
.svc-styled .svc-linked-card:hover .svc-linked-img { transform: translateY(-3px); filter: brightness(.93); }
.svc-styled .svc-linked-label { display: block; margin-top: 12px; font-weight: 700; color: #333; font-size: 15px; }
.svc-styled .svc-linked-card:hover .svc-linked-label { color: var(--svc); }

/* ---- sidebar testimonials: uniform cards, logo inside, expandable ---- */
.ta-testimonials .ta-tcard {
  background: #fbf7f2;
  border: 1px solid #f2e3d5;
  border-left: 3px solid #E87722;
  border-radius: 10px;
  padding: 16px;
  margin: 0 0 16px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .05);
  display: flex;
  flex-direction: column;
}
.ta-testimonials .ta-tlogo { height: 42px; display: flex; align-items: center; margin-bottom: 12px; }
.ta-testimonials .ta-tlogo img { max-height: 38px; max-width: 130px; width: auto; object-fit: contain; }
.ta-testimonials .ta-tlogo--text { font-weight: 800; color: #E87722; font-size: 15px; }
.ta-testimonials .ta-tquote {
  margin: 0;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.6;
  color: #4a4f56;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 120px;               /* keep every card the same height */
}
.ta-testimonials .ta-tcard.ta-expanded .ta-tquote { -webkit-line-clamp: unset; min-height: 0; }
.ta-testimonials .ta-tmore {
  background: none; border: 0; color: #E87722; font-weight: 700; font-size: 12px;
  cursor: pointer; padding: 8px 0 0; align-self: flex-start;
}
.ta-testimonials .ta-tmore:hover { text-decoration: underline; }
.ta-testimonials .ta-tauthor {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0e2d5; font-size: 12px; line-height: 1.4;
}
.ta-testimonials .ta-tauthor strong { display: block; color: #E87722; }
.ta-testimonials .ta-tauthor span { color: #7a7f86; }
.ta-testimonials .ta-tall {
  display: inline-block; background: #E87722; color: #fff !important; border-radius: 30px;
  padding: 9px 20px; font-size: 12px; font-weight: 700; text-decoration: none;
}
.ta-testimonials .ta-tall:hover { background: #d06a15; }