/* Cross Counties Counselling — stylesheet
   Redesign styled in the "alma therapy" visual language:
   Cormorant Garamond + Lato, cream/sage/charcoal palette, soft watercolour banners. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Lato:wght@300;400;700&display=swap');

:root {
  --cream: #f4f8f9;
  --cream-2: #e6eef1;
  --charcoal: #4a4a4d;
  --charcoal-dark: #333335;
  --grey-line: #b9b9b8;
  --sage: #93b0b3;
  --sage-dark: #5f8286;
  --terracotta: #b97f66;
  --white: #ffffff;
  --brand-grey: #6d6e71;
  --max-width: 1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

[id] { scroll-margin-top: var(--header-h, 64px); }

/* Home page card anchors (About Us / Locations): land with a small sliver of the fixed
   background visible above the card (not flush, not showing the previous card). The
   extra offset is kept safely under the 2.5rem gap between cards. Enough bottom padding
   is added after the last card (see index.html) so there's always room to scroll #find
   fully into position, even though it's the last section on the page. */
#about, #find { scroll-margin-top: calc(var(--header-h, 64px) + 34px); }

body {
  margin: 0;
  font-family: 'Lato', sans-serif;
  color: var(--charcoal-dark);
  background: var(--cream);
  line-height: 1.7;
  font-weight: 300;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  color: var(--charcoal-dark);
  letter-spacing: 0.02em;
  margin: 0 0 0.6em;
}

h1 { font-size: 2.8rem; color: var(--sage-dark); }
h2 { font-size: 2.2rem; color: var(--sage-dark); }
h3 { font-size: 1.5rem; }

p { margin: 0 0 1.2em; }
a { color: var(--sage-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header / Nav */
header {
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--grey-line);
}

.nav-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1.1;
}

.nav-logo .logo-mark { flex-shrink: 0; color: #2b5c64; }

/* Softens green/yellow cast in a specific photo (subtle colour correction only,
   not a full edit — reduces sallow tone, adds a touch of warmth back in). */
.photo-tone-correct {
  filter: saturate(0.8) hue-rotate(-8deg) brightness(1.04) contrast(1.03);
}

.nav-logo .logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  color: var(--charcoal-dark);
}
.nav-logo .logo-text .logo-sub {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-dark);
}

nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  align-items: center;
}

nav a, .nav-more-toggle {
  color: var(--charcoal-dark);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
nav a:hover { color: var(--sage-dark); text-decoration: none; border-bottom: 1px solid var(--sage-dark); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--charcoal-dark);
}

.nav-more { position: relative; }
.nav-more-toggle {
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}
.nav-more-toggle:hover { color: var(--sage-dark); }

.nav-more-menu {
  display: none;
  list-style: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin: 0;
  padding: 0.9rem 0 0.5rem;
  background: var(--cream);
  border: 1px solid var(--grey-line);
  min-width: 200px;
  z-index: 200;
}
.nav-more:hover .nav-more-menu,
.nav-more:focus-within .nav-more-menu,
.nav-more-menu.open { display: block; }
.nav-more-menu li { border: none; }
.nav-more-menu a {
  display: block;
  padding: 0.6rem 1.2rem;
  text-transform: none;
  font-size: 0.95rem;
}
.nav-more-menu a:hover { border-bottom: none; background: var(--cream-2); }

/* Home page — one continuous opaque card scrolling over a fixed watercolour background */
body.cc-home-bg {
  background-image: url('../images/budleigh-artwork.jpg');
  background-size: cover;
  background-position: center 70%;
  background-attachment: fixed;
}

/* Home page is one continuous scroll — no separate scroll containers — but visually
   reads as distinct opaque cards with the fixed background showing through the gaps. */
.home-sections { display: flex; flex-direction: column; align-items: stretch; gap: 2.5rem; }
.content-card.home-card { width: 100%; max-width: 900px; margin: 0 auto; box-sizing: border-box; }

.quick-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.6rem;
}
.quick-links a {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sage-dark);
  border: 1px solid var(--grey-line);
  border-radius: 20px;
  padding: 0.35rem 0.9rem;
}
.quick-links a:hover { background: var(--cream-2); text-decoration: none; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: var(--charcoal-dark);
  margin-bottom: 0.6rem;
}

.lead {
  max-width: 680px;
  margin: 0 auto 1.2em;
  font-size: 1.45rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--charcoal);
}

.hero-title {
  font-size: 3.6rem;
  line-height: 1.08;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  color: var(--sage-dark);
}

@media (max-width: 800px) {
  .hero-title { font-size: 2.5rem; }
  .lead { font-size: 1.2rem; }
}

.btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  background: var(--sage-dark);
  color: var(--white);
  border-radius: 2px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-top: 1.5rem;
  transition: background 0.2s ease;
  border: none;
  cursor: pointer;
}
.btn:hover { background: var(--charcoal-dark); text-decoration: none; color: var(--white); }
.btn-outline {
  background: transparent;
  border: 1px solid var(--sage-dark);
  color: var(--sage-dark);
}
.btn-outline:hover { background: var(--sage-dark); color: var(--white); }
.btn-small { padding: 0.5rem 1.2rem; font-size: 0.78rem; margin-top: 0; }

/* Sections */
.section { padding: 4rem 0; }
.section.alt { background: var(--cream-2); }
.section.tight { padding: 2.5rem 0; }

.section-head { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }

.about-text { max-width: 760px; margin: 0 auto; text-align: center; }

.divider { width: 60px; height: 1px; background: var(--grey-line); margin: 0 auto 2rem; }

/* Two column info blocks */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }

.info-card {
  background: var(--white);
  padding: 2rem;
  border: 1px solid var(--grey-line);
  border-radius: 4px;
}
.info-card h3 { margin-bottom: 0.8rem; }
.info-card img { transition: opacity 0.15s ease; }
.info-card a:hover img { opacity: 0.75; }

.logo-btn {
  display: inline-block;
  border: 1px solid rgba(95, 130, 134, 0.35);
  border-radius: 6px;
  padding: 0.7rem 1.1rem;
  margin-top: 0.3rem;
}
.logo-btn img { max-width: 130px; width: 100%; height: auto; display: block; margin: 0 auto; }
.info-card-booking p { font-size: 0.92rem; }

/* Illustrative "where we work" map on home page */
.uk-map {
  position: relative;
  max-width: 520px;
  margin: 1.5rem auto 0.5rem;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--grey-line);
}
.uk-map-frame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  /* Faded out, same treatment as the accreditation badges — the map is atmosphere,
     the pins are the actual point of interaction. */
  opacity: 0.6;
  filter: grayscale(0.3);
  pointer-events: none;
}
.map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  padding: 6px;
}
.pin-dot {
  width: 20px;
  height: 20px;
  border-radius: 50% 50% 50% 0;
  background: var(--sage-dark);
  border: 2.5px solid var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transform: rotate(-45deg);
  transition: background 0.15s ease, transform 0.15s ease;
}
.pin-label {
  position: absolute;
  top: -0.3rem;
  transform: translateY(-100%);
  white-space: nowrap;
  background: var(--charcoal-dark);
  color: var(--white);
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.map-pin:hover .pin-dot { background: var(--terracotta); transform: rotate(-45deg) scale(1.15); }
.map-pin:hover .pin-label { opacity: 1; }

@media (max-width: 800px) {
  .uk-map { max-width: 100%; }
  .pin-label { font-size: 0.65rem; padding: 0.15rem 0.4rem; }
}

/* Location grid on home */
.location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.location-chip {
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
}
.location-chip a { color: var(--charcoal-dark); }
.location-chip a:hover { color: var(--sage-dark); }

/* Therapist directory grid */
.therapist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}

.therapist-card {
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.therapist-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.08); transform: translateY(-2px); }

.therapist-card .photo-wrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-2);
}
.therapist-card .photo-wrap img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%;
}

.therapist-card .card-body { padding: 1.4rem 1.4rem 1.6rem; flex: 1; display: flex; flex-direction: column; }
.therapist-card h3 { margin-bottom: 0.2rem; }
.therapist-card .quals { font-size: 0.82rem; color: var(--brand-grey); margin-bottom: 0.8rem; }
.therapist-card p.blurb { font-size: 0.92rem; flex: 1; }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 1rem; }
.tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--cream-2);
  color: var(--sage-dark);
  border: 1px solid var(--grey-line);
  border-radius: 20px;
  padding: 0.25rem 0.7rem;
}

.card-actions { display: flex; gap: 0.8rem; margin-top: auto; }
.card-actions .btn { margin-top: 0; }

/* Profile page */
.profile-hero {
  padding: 3.5rem 0 2.5rem;
  background: var(--cream-2);
  border-bottom: 1px solid var(--grey-line);
}
.profile-hero-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2.2rem;
  align-items: center;
}
.profile-hero img.profile-photo {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.1);
}
.profile-hero .quals { color: var(--brand-grey); font-size: 0.95rem; margin-bottom: 0.8rem; }

/* Professional body / accreditation badges on profile pages — sit beneath the
   photo, understated (faded) rather than competing with the therapist's own photo. */
.photo-col { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.photo-col .badge-row { display: flex; align-items: center; justify-content: center; gap: 0.7rem; flex-wrap: wrap; opacity: 0.55; }
.photo-col .badge-row img { height: 30px; width: auto; object-fit: contain; }

.badge-row { display: flex; align-items: center; gap: 1.3rem; margin: 0.9rem 0 1.1rem; flex-wrap: wrap; }
.badge-row img { height: 42px; width: auto; object-fit: contain; }
.therapist-card .photo-wrap + .badge-row,
.therapist-card .badge-row { margin: 0.5rem 0 0; gap: 0.7rem; justify-content: center; opacity: 0.55; }
.therapist-card .badge-row img { height: 24px; }
.back-link { display: inline-block; margin-bottom: 1.5rem; font-size: 0.9rem; }

.profile-body { padding: 3rem 0; }
.profile-body h3 { margin-top: 0; }
/* Bio subheadings (What to expect, Why choose me, etc.) get the accent colour;
   the sidebar info-card labels (Fees, Contact...) stay neutral to avoid overuse. */
.profile-grid > div:not(.profile-side) > h3 { color: var(--sage-dark); }
.profile-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; align-items: start; }
.profile-side { display: flex; flex-direction: column; gap: 1.5rem; }
.fee-amount { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; color: var(--sage-dark); margin: 0.2rem 0; }

/* Blog */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.blog-card { background: var(--white); border: 1px solid var(--grey-line); border-radius: 6px; overflow: hidden; }
.blog-card .thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--cream-2); }
.blog-card .thumb a { display: block; height: 100%; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.15s ease; }
.blog-card .thumb a:hover img { opacity: 0.85; }
.blog-card .blog-body { padding: 1.3rem 1.4rem 1.6rem; }
.blog-card .meta { font-size: 0.78rem; color: var(--brand-grey); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.03em; }
.blog-card h3 { font-size: 1.3rem; margin-bottom: 0.5rem; color: var(--sage-dark); }
.blog-card p { font-size: 0.92rem; }

.post-content { max-width: 720px; margin: 0 auto; }
.post-content h2 { margin-top: 1.6rem; }
.post-content blockquote {
  border-left: 2px solid var(--sage);
  margin: 1.6rem 0;
  padding-left: 1.2rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15rem;
}
.post-meta { font-size: 0.85rem; color: var(--brand-grey); margin-bottom: 2rem; text-transform: uppercase; letter-spacing: 0.03em; }
.post-refs { font-size: 0.85rem; color: var(--charcoal); }

.pull-quote {
  margin: 1.6rem 0 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--sage);
}
.pull-quote p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--charcoal-dark);
  margin: 0 0 0.4rem;
}
.pull-quote cite { display: block; font-style: normal; font-size: 0.85rem; color: var(--charcoal); }

/* Banner strips reused from alma art */
.banner-strip {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 5rem 0;
}
.banner-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(250, 248, 244, 0.55);
  z-index: 0;
}
.banner-strip > .container { position: relative; z-index: 1; }
.banner-strip.qualifications { background-image: url('../images/hero-painting.jpg'); background-position: center bottom; padding: 6rem 0; }
/* Privacy page uses the original Cross Counties "external hard drive" photo (data/device
   visual) rather than a watercolour, to keep the data-protection page grounded and literal. */
.banner-strip.privacy { background-image: url('https://static.wixstatic.com/media/11062b_b3267157832f45398d8f7953e2b1ffda~mv2.jpeg/v1/fill/w_1600,h_900,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/11062b_b3267157832f45398d8f7953e2b1ffda~mv2.jpeg'); background-position: center; }
.banner-strip.about-hero { background-image: url('../images/filey-head-artwork.jpg'); background-position: 70% 55%; }

.content-card {
  background: rgba(250, 248, 244, 0.85);
  border-radius: 10px;
  padding: 2.5rem;
  margin: 0 auto;
  box-shadow: 0 12px 34px rgba(0,0,0,0.1);
  max-width: 820px;
}

/* Privacy page */
.privacy-content h2 { margin-top: 2.2rem; }
.privacy-content ul, .privacy-content ol { padding-left: 1.4rem; }
.privacy-content li { margin-bottom: 0.6rem; }
.brand-grey { color: var(--brand-grey); }

/* Footer */
footer {
  background: var(--cream-2);
  color: var(--charcoal-dark);
  padding: 3rem 0 2rem;
  text-align: center;
  border-top: 1px solid var(--grey-line);
}
footer .footer-mark { display: flex; justify-content: center; margin-bottom: 1.2rem; color: var(--sage-dark); }
footer p { font-size: 0.85rem; color: var(--charcoal); margin: 0.3em 0; }
footer a { color: var(--sage-dark); }
.footer-disclaimer { max-width: 640px; margin: 1rem auto 0; font-size: 0.78rem; color: var(--brand-grey); }

/* Responsive */
@media (max-width: 800px) {
  html, body { overflow-x: hidden; }
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.7rem; }

  .nav-wrap { padding: 1.1rem 1.2rem; }
  body.cc-home-bg { background-attachment: scroll; }
  .content-card.home-card { padding: 1.6rem; }
  .home-sections { gap: 1.6rem; }

  .two-col, .profile-grid, .profile-hero-grid { grid-template-columns: 1fr; }
  .profile-hero img.profile-photo { max-width: 220px; margin: 0 auto; }

  .nav-toggle { display: block; }
  nav ul {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--grey-line);
  }
  nav ul.open { display: flex; }
  nav ul li { border-top: 1px solid var(--grey-line); width: 100%; }
  nav a { display: block; padding: 1rem 1.5rem; }

  .nav-more-toggle { display: block; width: 100%; text-align: left; padding: 1rem 1.5rem; pointer-events: none; }
  .nav-more-menu { display: block; position: static; background: none; border: none; margin: 0; padding: 0; }
  .nav-more-menu a { padding: 0.9rem 1.5rem 0.9rem 2.5rem; }
  .nav-more-menu li { border-top: 1px solid var(--grey-line); }
}

/* Preview banner (removed before going live) */
.preview-banner {
  background: var(--sage-dark);
  color: var(--cream);
  text-align: center;
  font-size: 0.82rem;
  padding: 0.55rem 1rem;
  letter-spacing: 0.02em;
}
.preview-banner strong { color: var(--white); }