/* ============================================================
   TALKING THERAPIES UK — FRONTEND ENHANCEMENTS v1.2.4
   
   ZERO GLOBAL OVERRIDES GUARANTEE:
   Every rule in this file is scoped to a .ttuk-* prefixed
   class. No rule targets body, html, h1-h6, p, a, div,
   or any Elementor class. CSS custom properties are scoped
   inside .ttuk-wrap so they cannot bleed into global scope.
   
   Brand palette confirmed from live site CSS:
   Black #000000 | Cream #E9E0D3 | Orange #EB5F00
   Magenta #C43771 | Yellow #FAC805
   Fonts: Poppins (headings) Roboto (body) — loaded by Elementor
   ============================================================ */

/* ── Scoped CSS variables ────────────────────────────────────
   Defined inside .ttuk-wrap so they ONLY apply to plugin
   components and cannot affect any other element on the page.
   ─────────────────────────────────────────────────────────── */
.ttuk-wrap {
  --ttuk-black:        #000000;
  --ttuk-cream:        #E9E0D3;
  --ttuk-cream-dark:   #D4C8BA;
  --ttuk-cream-light:  #F5F0EA;
  --ttuk-orange:       #EB5F00;
  --ttuk-orange-dark:  #C84D00;
  --ttuk-orange-pale:  #FFF8E7;
  --ttuk-yellow:       #FAC805;
  --ttuk-yellow-dark:  #E8A317;
  --ttuk-magenta:      #C43771;
  --ttuk-magenta-dark: #9C1246;
  --ttuk-magenta-pale: #FCE8F0;
  --ttuk-white:        #FFFFFF;
  --ttuk-grey-light:   #f4f4f4;
  --ttuk-grey-mid:     #858585;
  --ttuk-text:         #000000;
  --ttuk-text-muted:   #4e4b66;
  --ttuk-border:       rgba(0,0,0,0.12);
  --ttuk-border-light: rgba(0,0,0,0.07);
  --ttuk-shadow-sm:    0 2px 10px rgba(0,0,0,0.08);
  --ttuk-shadow:       0 4px 22px rgba(0,0,0,0.12);
  --ttuk-shadow-lg:    0 10px 40px rgba(0,0,0,0.18);
  --ttuk-radius:       10px;
  --ttuk-radius-lg:    16px;
  --ttuk-ease:         cubic-bezier(0.4,0,0.2,1);
  --ttuk-transition:   all 0.28s var(--ttuk-ease);
  --ttuk-font-heading: 'Poppins', sans-serif;
  --ttuk-font-body:    'Roboto', sans-serif;
  /* Reset: ensure plugin components are not affected by
     any inherited global styles from the theme or Elementor */
  box-sizing: border-box;
}
.ttuk-wrap *, .ttuk-wrap *::before, .ttuk-wrap *::after {
  box-sizing: inherit;
}

/* ── Scroll reveal ───────────────────────────────────────────
   Applied to .ttuk-* elements inside .ttuk-wrap only.
   ─────────────────────────────────────────────────────────── */
.ttuk-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s var(--ttuk-ease), transform .6s var(--ttuk-ease);
}
.ttuk-reveal.ttuk-visible { opacity: 1; transform: translateY(0); }

.ttuk-reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity .6s var(--ttuk-ease), transform .6s var(--ttuk-ease);
}
.ttuk-reveal-left.ttuk-visible { opacity: 1; transform: translateX(0); }

.ttuk-reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .6s var(--ttuk-ease), transform .6s var(--ttuk-ease);
}
.ttuk-reveal-right.ttuk-visible { opacity: 1; transform: translateX(0); }

.ttuk-stagger > *:nth-child(1) { transition-delay: .00s; }
.ttuk-stagger > *:nth-child(2) { transition-delay: .08s; }
.ttuk-stagger > *:nth-child(3) { transition-delay: .16s; }
.ttuk-stagger > *:nth-child(4) { transition-delay: .24s; }
.ttuk-stagger > *:nth-child(5) { transition-delay: .32s; }
.ttuk-stagger > *:nth-child(6) { transition-delay: .40s; }
.ttuk-stagger > *:nth-child(7) { transition-delay: .48s; }
.ttuk-stagger > *:nth-child(8) { transition-delay: .56s; }

/* ── Layout utilities ────────────────────────────────────────
   All scoped inside .ttuk-wrap.
   ─────────────────────────────────────────────────────────── */
.ttuk-section-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.ttuk-eyebrow {
  display: inline-block;
  font-family: var(--ttuk-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ttuk-orange);
  margin-bottom: .6rem;
}
.ttuk-section-title {
  font-family: var(--ttuk-font-heading);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--ttuk-black);
  line-height: 1.18;
  margin-bottom: .75rem;
}
.ttuk-section-subtitle {
  font-family: var(--ttuk-font-body);
  font-size: 16px;
  color: var(--ttuk-text-muted);
  line-height: 1.75;
  max-width: 580px;
  margin-bottom: 2.5rem;
}

/* ── Buttons ─────────────────────────────────────────────────*/
.ttuk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ttuk-font-heading);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: var(--ttuk-radius);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: var(--ttuk-transition);
  line-height: 1;
}
.ttuk-btn-primary {
  background: var(--ttuk-orange);
  color: var(--ttuk-white);
  box-shadow: 0 4px 16px rgba(235,95,0,.30);
}
.ttuk-btn-primary:hover {
  background: var(--ttuk-orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(235,95,0,.40);
  color: var(--ttuk-white);
}
.ttuk-btn-secondary {
  background: transparent;
  color: var(--ttuk-black);
  border: 1.5px solid rgba(0,0,0,.22);
}
.ttuk-btn-secondary:hover {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.40);
  transform: translateY(-2px);
  color: var(--ttuk-black);
}
.ttuk-btn-dark {
  background: var(--ttuk-black);
  color: var(--ttuk-white);
}
.ttuk-btn-dark:hover {
  background: var(--ttuk-magenta);
  transform: translateY(-2px);
  color: var(--ttuk-white);
}
.ttuk-btn-magenta {
  background: var(--ttuk-magenta);
  color: var(--ttuk-white);
  box-shadow: 0 4px 14px rgba(196,55,113,.28);
}
.ttuk-btn-magenta:hover {
  background: var(--ttuk-magenta-dark);
  transform: translateY(-2px);
  color: var(--ttuk-white);
}

/* ── Cards ───────────────────────────────────────────────────*/
.ttuk-card {
  background: var(--ttuk-white);
  border: 1px solid var(--ttuk-border);
  border-radius: var(--ttuk-radius-lg);
  padding: 1.75rem;
  transition: var(--ttuk-transition);
}
.ttuk-card:hover {
  box-shadow: var(--ttuk-shadow);
  transform: translateY(-4px);
  border-color: rgba(196,55,113,.22);
}

/* ── Pills & accents ─────────────────────────────────────────*/
.ttuk-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ttuk-font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ttuk-orange);
  background: rgba(235,95,0,.08);
  border: 1px solid rgba(235,95,0,.20);
  padding: 5px 12px;
  border-radius: 999px;
}
.ttuk-accent {
  display: block;
  width: 44px;
  height: 3px;
  background: var(--ttuk-orange);
  border-radius: 2px;
  margin-bottom: 1.25rem;
}
.ttuk-accent-center  { margin-left: auto; margin-right: auto; }
.ttuk-accent-magenta { background: var(--ttuk-magenta); }
.ttuk-accent-yellow  { background: var(--ttuk-yellow); }

/* ── Mobile sticky CTA bar ───────────────────────────────────
   The fixed bar itself is positioned absolutely and does NOT
   add any padding to the body. Pages where it is used should
   have sufficient natural bottom padding from their content.
   The previous body padding-bottom rule has been removed.
   ─────────────────────────────────────────────────────────── */
#ttuk-mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
}
@media (min-width: 768px) {
  #ttuk-mobile-cta { display: none !important; }
}