/* ==========================================================================
   REFRESH.CSS — "UI 2.0" override layer
   Additive only. Loaded LAST, right before </head>, on every page.
   Does not edit css/style.css or css/navbar.css. Same palette, same fonts.
   Goal: calmer, airier, more premium. No bounce, no spring — everything settles.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. NEW TOKENS (appended to :root — existing tokens untouched)
   -------------------------------------------------------------------------- */
:root {
  /* Easing */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Durations */
  --dur-fast: 260ms;
  --dur: 460ms;
  --dur-slow: 700ms;

  /* Tinted elevation scale (navy-tinted, soft — replaces harsh black shadows) */
  --shadow-sm: 0 1px 2px rgba(50, 74, 87, .05), 0 2px 6px rgba(50, 74, 87, .04);
  --shadow-md: 0 4px 10px -2px rgba(50, 74, 87, .06), 0 12px 28px -8px rgba(50, 74, 87, .10);
  --shadow-lg: 0 8px 20px -6px rgba(50, 74, 87, .08), 0 28px 60px -16px rgba(50, 74, 87, .16);

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Hairline border for softened surfaces */
  --hairline: 1px solid rgba(50, 74, 87, .07);
}


/* --------------------------------------------------------------------------
   2. TYPOGRAPHY REFINEMENT
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.15;
  letter-spacing: -0.015em;
}

body {
  line-height: 1.75;
}

/* Larger, fluid heading scale on big screens; same fonts, same weights */
h1 {
  font-size: clamp(2.8rem, 2.3rem + 1.8vw, 3.6rem);
}

h2 {
  font-size: clamp(2.2rem, 1.9rem + 1.2vw, 2.7rem);
}

/* Cap prose measure for readability */
.page-content p,
.page-content li,
.info-text,
.blog-post-body p {
  max-width: 68ch;
}


/* --------------------------------------------------------------------------
   3. AIRIER SPACING
   -------------------------------------------------------------------------- */
section {
  padding: 5rem 1.25rem;
}

@media (max-width: 768px) {
  section {
    padding: 3.5rem 1rem;
  }
}

.hero + section {
  margin-top: 5rem;
}


/* --------------------------------------------------------------------------
   4. SOFTEN SURFACES — tinted shadows, larger radii, hairline borders
   -------------------------------------------------------------------------- */
.service-swiper .card,
.swiper-slide.card,
.testimonial,
.fees-box,
.blog-post-card,
.profile-card {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  border: var(--hairline);
  transition: transform var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}

.testimonial {
  border-left: 5px solid var(--accent-secondary, var(--slate-blue));
}


/* --------------------------------------------------------------------------
   5. BUTTONS — pill shape, soft lift + glow, smooth transitions, focus ring
   -------------------------------------------------------------------------- */
.btn,
button,
.btn-appointment,
.btn-contact {
  border-radius: var(--r-pill);
  transition: all var(--dur-fast) var(--ease-soft);
}

.btn:hover,
button:hover,
.btn-appointment:hover,
.btn-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(76, 110, 129, .45);
}

.btn:focus-visible,
button:focus-visible,
.btn-appointment:focus-visible,
a:focus-visible {
  outline: 2px solid var(--compass-blue);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}


/* --------------------------------------------------------------------------
   6. CARDS — gentle lift + shadow bloom on hover (calm, not bouncy)
   -------------------------------------------------------------------------- */
.service-swiper .card:hover,
.swiper-slide.card:hover,
.blog-post-card:hover,
.profile-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}


/* --------------------------------------------------------------------------
   7. NAVBAR — translucent blur on scroll (class added by motion.js),
      animated underline timing refinement
   -------------------------------------------------------------------------- */
.navbar {
  transition: background-color var(--dur) var(--ease-soft),
              box-shadow var(--dur) var(--ease-soft),
              padding var(--dur) var(--ease-soft);
}

.navbar.nav-scrolled {
  background-color: rgba(255, 255, 255, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-links a:not(.btn-appointment)::after {
  transition: width var(--dur) var(--ease-soft);
}


/* --------------------------------------------------------------------------
   8. HERO — legibility gradient overlay, copy fade + rise + blur-out on load
   -------------------------------------------------------------------------- */
.overlay {
  background: linear-gradient(to bottom right, rgba(50, 74, 87, .55), rgba(50, 74, 87, .25));
}

.hero-video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.hero-content h1,
.hero-content p,
.hero-content .btn,
.hero-content .services-highlight {
  animation: hero-settle var(--dur-slow) var(--ease-soft) both;
}

.hero-content p {
  animation-delay: 120ms;
}

.hero-content .btn {
  animation-delay: 220ms;
}

@keyframes hero-settle {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}


/* --------------------------------------------------------------------------
   9. SCROLL REVEAL — contract with js/motion.js. Keep names EXACT.
   -------------------------------------------------------------------------- */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  transition: opacity var(--dur-slow) var(--ease-soft),
              transform var(--dur-slow) var(--ease-soft),
              filter var(--dur-slow) var(--ease-soft);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
  will-change: opacity, transform;
}

.js-motion [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}


/* --------------------------------------------------------------------------
   10. PAGE TRANSITIONS — body fades/rises in on load; fades out on leave
   -------------------------------------------------------------------------- */
.js-motion body {
  animation: page-enter var(--dur-slow) var(--ease-soft) both;
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body.is-leaving {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-soft);
}


/* --------------------------------------------------------------------------
   11. DEPTH WITHOUT NEW ASSETS — subtle CSS-only radial-gradient washes
   -------------------------------------------------------------------------- */
.therapy-info,
.fees,
.services,
.testimonials {
  background-image: radial-gradient(circle at 15% 20%, rgba(93, 122, 140, .05) 0%, transparent 45%),
                     radial-gradient(circle at 85% 80%, rgba(50, 74, 87, .04) 0%, transparent 45%);
}


/* --------------------------------------------------------------------------
   12. STRAPLINE — "COACHING · COUNSELLING · PSYCHOTHERAPY" separators recede
   -------------------------------------------------------------------------- */
/* The two straplines live in very different boxes: the hero one spans the full
   page, the "Nick Perkins" one sits in a ~500px grid column. Sized separately
   so neither wraps -- a wrapped line strands a "·" at its end, which looks
   sloppy. Below 600px they're allowed to wrap (the font would otherwise get
   too small to read). */
.services-highlight h2 {
  letter-spacing: 2px;
  line-height: 1.5;
  white-space: nowrap;
}

.hero .services-highlight h2 {
  font-size: clamp(0.85rem, 1.6vw, 1.5rem);
}

#services-title-np h2 {
  font-size: clamp(0.75rem, 1.05vw, 1rem);
}

/* The umbrella model. COACHING · COUNSELLING · PSYCHOTHERAPY are the three
   modalities that sit under it, so this is set ~20% larger and heavier than
   them — but well below the name above, to read as the middle of three tiers. */
#personal-consultancy-title {
  font-family: var(--font-family-headings);
  font-size: clamp(0.9rem, 1.3vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 2px;
  text-align: center;
  color: var(--text-headings);
  margin: 0.3em 0;
}

@media (max-width: 600px) {
  .services-highlight h2 {
    white-space: normal;      /* readability wins over the orphaned dot */
    letter-spacing: 1px;
  }
  .services-highlight .sep { margin: 0 .25em; }
}

.services-highlight .sep {
  color: var(--slate-blue);
  opacity: .5;
  margin: 0 .4em;
  font-size: .85em;
}

/* Hero instance sits on the dark video. The WORDS must be light and dominant;
   the dots recede. Without this the h2 inherits the global deep-navy heading
   colour and becomes near-illegible against the video. */
.hero .services-highlight h2 {
  color: var(--white);
}

.hero .services-highlight .sep {
  color: var(--white);
  opacity: .45;
}


/* --------------------------------------------------------------------------
   13. PREFERS-REDUCED-MOTION — accessibility, non-negotiable
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }

  .btn:hover,
  button:hover,
  .btn-appointment:hover,
  .btn-contact:hover,
  .service-swiper .card:hover,
  .swiper-slide.card:hover,
  .blog-post-card:hover,
  .profile-card:hover {
    transform: none !important;
  }

  .js-motion [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  body.is-leaving {
    opacity: 1 !important;
  }
}


/* --------------------------------------------------------------------------
   14. MOBILE — reduced motion distances/padding, keep 768px hamburger intact
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .js-motion [data-reveal] {
    transform: translateY(14px);
  }

  .hero-content h1,
  .hero-content p,
  .hero-content .btn,
  .hero-content .services-highlight {
    animation-duration: var(--dur);
  }

  .service-swiper .card:hover,
  .swiper-slide.card:hover,
  .blog-post-card:hover,
  .profile-card:hover {
    transform: translateY(-2px);
  }
}


/* --------------------------------------------------------------------------
   FOOTER OVERRIDES — footer.php has an in-body <style> that comes AFTER this
   file in document order. Use body-prefixed selectors to win on specificity.
   -------------------------------------------------------------------------- */
body .footer {
  padding: 2.5rem 0;
  transition: none;
}

body .footer .social-icons a {
  transition: transform var(--dur-fast) var(--ease-soft);
}

/* --------------------------------------------------------------------------
   15. CTA BUTTONS DECLARED WITH ID SELECTORS
   --------------------------------------------------------------------------
   index.php's in-body <style> styles its primary CTAs by ID
   (#contact-me-btn-hero, #contact-me-btn-bottom, ...). An ID (0,1,0,0) beats
   this file's .btn rule (0,0,1,0) no matter the load order, so without this
   block the site's MOST prominent buttons silently keep their old 8px corners
   and old black shadow.

   The `body ` prefix is load-bearing: a bare `#contact-me-btn-hero` here would
   tie with the in-body rule on specificity and then LOSE on source order,
   because that <style> block sits further down the document than this file.
   -------------------------------------------------------------------------- */
body #contact-me-btn-hero,
body #contact-me-btn-bottom,
body #contact-button-meeting,
body #backBtn {
  border-radius: var(--r-pill);
  transition: background-color var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}

body #contact-me-btn-hero:hover,
body #contact-me-btn-bottom:hover,
body #contact-button-meeting:hover,
body #backBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(50, 74, 87, 0.45);
}

body #contact-me-btn-hero:focus-visible,
body #contact-me-btn-bottom:focus-visible,
body #contact-button-meeting:focus-visible,
body #backBtn:focus-visible {
  outline: 2px solid var(--compass-blue);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body #contact-me-btn-hero:hover,
  body #contact-me-btn-bottom:hover,
  body #contact-button-meeting:hover,
  body #backBtn:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   16. HERO CONTAINMENT  — fixes video/overlay escaping the hero
   --------------------------------------------------------------------------
   css/style.css:96 gives header.hero `height:100vh` but NO `position`.
   .hero-video and .overlay (style.css:106/117) are `position:absolute;
   height:100%`. With no positioned ancestor they resolve against the initial
   containing block, so `height:100%` meant 100% of the WHOLE DOCUMENT -- the
   video and its navy overlay stretched ~8300px down the entire page instead
   of sitting in the 886px hero, and the poster got stretched (hence "blurry").

   Making the hero the containing block is the actual intent of that markup.
   -------------------------------------------------------------------------- */
body header.hero,
body .hero {
  position: relative;
  overflow: hidden;
}

/* index.php's in-body <style> carries two hacks that CANCELLED EACH OTHER out
   while the hero was broken:
       .hero        { margin-bottom: -40% !important }   -> pulls next section UP ~691px
       #first-section { padding-top: 42rem }             -> pushes its content DOWN 672px
   Net effect was roughly zero. They only existed to work around the video and
   overlay covering the whole page.

   Both must be neutralised TOGETHER. Removing only one leaves either a huge
   empty void below the hero (drop the margin, keep the padding) or the next
   section slammed over the hero (drop the padding, keep the margin).

   `-40%` is a percentage of viewport WIDTH, so it also scaled unpredictably
   across screen sizes -- replacing it with normal section spacing is both
   correct and far more robust. */
body header.hero,
body .hero {
  margin-bottom: 0 !important;
}

body #first-section {
  padding-top: 5rem !important;   /* was 42rem (672px) of dead space */
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  body #first-section {
    padding-top: 3.5rem !important;
  }
}

/* ==========================================================================
   FLUID / RESPONSIVE LAYER — makes the site behave between the existing
   breakpoints (320px – 2560px) instead of only at them. No desktop (~1440px)
   change: every clamp() below has its MAX equal to today's desktop value.
   ========================================================================== */

/* --------------------------------------------------------------------------
   17. MEDIA SAFETY — nothing (image/video/embed) forces horizontal overflow
   -------------------------------------------------------------------------- */
img, video, svg, iframe, embed, object {
  max-width: 100%;
}
img, video {
  height: auto;
}

/* .hero-video (style.css:106) must keep filling the hero absolutely --
   height:auto above would otherwise collapse it to its intrinsic height. */
.hero-video {
  height: 100%;
}


/* --------------------------------------------------------------------------
   18. OVERFLOW CONTAINMENT
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Flex/grid children default to min-width:auto, which stops them shrinking
   below their content size and causes horizontal overflow at narrow widths. */
.blog-grid,
.info-grid,
.grid-container,
.fees-grid,
.about-me-expanded,
.fees-box,
.blog-post-card {
  min-width: 0;
}

p, h1, h2, h3, li, a, td {
  overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
   19. FLUID TYPOGRAPHY — replace stepped 768px jumps with clamp()
   -------------------------------------------------------------------------- */
/* style.css sets these inside `@media (min-width: 768px)`; equal specificity
   here, but this file loads after style.css, so the plain (non-media) rule
   below wins at every width without needing extra specificity. */
body .hero-content h1 {
  font-size: clamp(2rem, 6vw, 4rem); /* was 3rem mobile / 4rem desktop */
}

body .hero-content p {
  font-size: clamp(1rem, 2.2vw, 1.25rem); /* was 1.1rem mobile / 1.25rem desktop */
}

/* .services-highlight h2 fluid sizing is already handled above in section 12
   (clamp + wrap-at-600px rules) -- nothing further needed here. */


/* --------------------------------------------------------------------------
   20. FLUID SPACING
   -------------------------------------------------------------------------- */
/* Section 3 above already sets `section { padding: 5rem 1.25rem; }` with its
   own <=768px step-down to 3.5rem/1rem. Making that fluid instead of stepped,
   same max (5rem) as section 3, so nothing regresses at desktop. */
section {
  padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 1.25rem);
}


/* --------------------------------------------------------------------------
   21. TABLES
   --------------------------------------------------------------------------
   SKIPPED: no front-end .php page contains a <table> element (checked all
   non-admin pages) -- nothing to scope this rule to.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   22. TOUCH TARGETS — ensure interactive elements are >=44px tall on touch
   --------------------------------------------------------------------------
   .navbar .icon (the hamburger, navbar.php) is an <a class="icon">, not a
   .navbar-links a or a .btn/button, so it is untouched by this rule.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn, button, .navbar-links a, input[type="submit"] {
    min-height: 44px;
  }
}


/* --------------------------------------------------------------------------
   23. FIXED HEIGHTS THAT CLIP ON SMALL SCREENS
   --------------------------------------------------------------------------
   SKIPPED: the brief cites `.blog-post-card { height: 180px }` and
   `.blog-swiper .swiper-slide { height: 200px }` -- neither exists in
   style.css. The only fixed heights in this area are on `.blog-post-thumbnail`
   (an <img>, height:200px in the swiper context / height:180px in the
   .blog-grid context), which is image cropping (object-fit: cover), not text
   that can reflow taller. Converting an image's fixed height to min-height
   would change the uniform-thumbnail look at mobile without fixing any real
   clipping, so left alone rather than guessing at an unrequested visual
   change. `.blog-post-card` itself has no explicit height in either
   definition, so it already grows with its content.
   -------------------------------------------------------------------------- */