/* =============================================
   THEME: Trusty Blue
   Professional, trustworthy — clinical hypnotherapy & counselling
   Font Pairing: Friendly (Poppins headings / Merriweather body)
   ============================================= */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Merriweather:wght@300;400;700&display=swap');

/* --- Theme Variables --- */
:root {
  /* Colour Palette */
  --color-primary: #3B6FA0;
  --color-primary-light: #5A8FBF;
  --color-primary-dark: #2A5178;
  --color-secondary: #D4956A;
  --color-secondary-light: #E2B08A;
  --color-secondary-dark: #A06B3E;
  --color-accent: #6B8E7B;
  --color-accent-light: #8FB3A0;

  --color-bg: #F8FAFB;
  --color-bg-alt: #ECF1F4;
  --color-bg-dark: #1E3A52;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F2F6F8;

  --color-text: #2D3748;
  --color-text-light: #64748B;
  --color-text-inverse: #F8FAFB;
  --color-text-heading: #1E3A52;

  --color-border: #D4DCE4;
  --color-border-light: #E8EDF2;

  --color-success: #3B8F6F;
  --color-error: #C45B5B;

  /* Typography */
  --font-heading: 'Poppins', 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Merriweather', Georgia, 'Times New Roman', serif;

  /* Heading size overrides (Poppins renders visually larger) */
  --text-h1-desktop: 2.5rem;
  --text-h2-desktop: 2rem;
  --text-h3-desktop: 1.3rem;
}

/* === Fees page tuning (site-specific) === */
/* Item titles are <h2> for correct heading order (H1 -> H2); keep them card-title sized, not the full 2rem H2 */
.fee-table h2 {
  font-size: var(--text-h3-desktop);
  margin-bottom: var(--space-lg);
}
/* Top-align the name and price so the price sits level with the item name, detail flows below */
.fee-item {
  align-items: flex-start;
}
/* Prices were oversized (text-xl/26px, larger than the title); bring them in line */
.fee-item__price {
  font-size: 1.25rem;
}

/* =============================================
   Site-scoped scroll-reveal polish
   Reuses the framework's .reveal / .reveal--visible trigger (set by js/main.js).
   Makes the section + box entrances clearly visible and graceful, and extends
   the staggered cascade to the icon lists (quals-list) and stacked fee tables.
   Everything is wrapped in (prefers-reduced-motion: no-preference) so visitors
   who ask their OS/browser for reduced motion get a clean, static page instead.
   No JS, no framework change.
   ============================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Stronger, smoother section entrance (framework default is a subtle 24px) */
  .reveal {
    transform: translateY(36px);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal--visible {
    transform: translateY(0);
  }

  /* Lift box-children further with a graceful decel — covers framework grids/steps
     PLUS the icon lists and fee tables that previously revealed as one block */
  .reveal .grid--2 > *,
  .reveal .grid--3 > *,
  .reveal .grid--4 > *,
  .reveal .steps > *,
  .reveal .pricing-grid > *,
  .reveal .quals-list > *,
  .reveal .fee-table {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal--visible .grid--2 > *,
  .reveal--visible .grid--3 > *,
  .reveal--visible .grid--4 > *,
  .reveal--visible .steps > *,
  .reveal--visible .pricing-grid > *,
  .reveal--visible .quals-list > *,
  .reveal--visible .fee-table {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger the fee tables (3 stacked boxes) */
  .reveal--visible .fee-table:nth-child(1) { transition-delay: 0s; }
  .reveal--visible .fee-table:nth-child(2) { transition-delay: 0.12s; }
  .reveal--visible .fee-table:nth-child(3) { transition-delay: 0.24s; }

  /* Stagger the icon lists (up to 10 items) */
  .reveal--visible .quals-list > *:nth-child(1)  { transition-delay: 0s; }
  .reveal--visible .quals-list > *:nth-child(2)  { transition-delay: 0.07s; }
  .reveal--visible .quals-list > *:nth-child(3)  { transition-delay: 0.14s; }
  .reveal--visible .quals-list > *:nth-child(4)  { transition-delay: 0.21s; }
  .reveal--visible .quals-list > *:nth-child(5)  { transition-delay: 0.28s; }
  .reveal--visible .quals-list > *:nth-child(6)  { transition-delay: 0.35s; }
  .reveal--visible .quals-list > *:nth-child(7)  { transition-delay: 0.42s; }
  .reveal--visible .quals-list > *:nth-child(8)  { transition-delay: 0.49s; }
  .reveal--visible .quals-list > *:nth-child(9)  { transition-delay: 0.56s; }
  .reveal--visible .quals-list > *:nth-child(10) { transition-delay: 0.63s; }
}

/* Reveal trigger: an element that fires its children's cascade when IT enters
   view, without animating itself. Use where the cascade content sits far below
   the section top (e.g. a list under a heading + intro), so the section-level
   reveal would otherwise fire the cascade while the items are still off-screen. */
.reveal-trigger {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}