/* ============================================================
   Daisy Jane Healing — Design V2 "Botanical Sanctuary"
   Overrides aesthetic layer. Loaded after style.css.
   ============================================================ */

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

/* ── Colour Tokens ─────────────────────────────────────────── */
:root {
  --dj-plum:     #3a1535;   /* deep, rich plum */
  --dj-plum-mid: #6b3565;   /* mid plum for hover */
  --dj-gold:     #9a7228;   /* warm antique gold accent */
  --dj-cream:    #faf7f1;   /* warm ivory surface */
  --dj-ink:      #1c1018;   /* near-black reading text */
  --dj-muted:    #5c4460;   /* muted secondary text */
  --dj-rule:     #d0c0cc;   /* divider / border colour */
  --dj-surface:  #f7f1f4;   /* card / box background */
}

/* ── Body ──────────────────────────────────────────────────── */
body {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 17px !important;
  line-height: 1.85 !important;
  color: var(--dj-ink) !important;
}

/* ── Body text inside the content panel ────────────────────── */
#wrap p,
#wrap li,
#wrap td {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 17px !important;
  line-height: 1.85 !important;
}

/* ── Content heading typography ─────────────────────────────── */
/* h2/h3 in content use Cormorant Garamond — editorial & italic */
#wrap h2,
#wrap h3,
#wrap h4 {
  font-family: 'Cormorant Garamond', 'Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
  letter-spacing: 0.02em !important;
  color: var(--dj-plum) !important;
}

/* h3 section headings — slightly heavier */
#wrap h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
}

/* Section subtitles */
.healing-section-subtitle,
.healing-sub-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-size: 22px !important;
  letter-spacing: 0.03em !important;
  color: var(--dj-muted) !important;
}

/* Page titles stay in Fredericka — deep plum, not mid-purple */
.healing-section-title,
.healing-main-title,
h1.healing-section-title,
h1.healing-main-title,
.blog h1.page-title,
.harp-featured h2 {
  color: var(--dj-plum) !important;
}

/* ── Navigation ─────────────────────────────────────────────── */
.nav-menu a {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--dj-plum) !important;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--dj-gold) !important;
}

.nav-menu a.active::after {
  background: var(--dj-gold) !important;
}

/* ── Buttons ────────────────────────────────────────────────── */
/* Primary button: deep plum, inverts on hover */
.healing-cta-button,
#wrap .healing-cta-button,
#wrap a.healing-cta-button,
.harp-featured .healing-cta-button {
  background: var(--dj-plum) !important;
  color: var(--dj-cream) !important;
  border: 1.5px solid var(--dj-plum) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  padding: 14px 36px !important;
  box-shadow: none !important;
  transition: background 0.25s ease, color 0.25s ease !important;
}

.healing-cta-button:hover,
#wrap .healing-cta-button:hover {
  background: transparent !important;
  color: var(--dj-plum) !important;
  border-color: var(--dj-plum) !important;
  transform: none !important;
}

/* Outlined secondary button */
.healing-cta-secondary,
#wrap .healing-cta-secondary {
  background: transparent !important;
  color: var(--dj-plum) !important;
  border: 1.5px solid var(--dj-plum) !important;
}

.healing-cta-secondary:hover,
#wrap .healing-cta-secondary:hover {
  background: var(--dj-plum) !important;
  color: var(--dj-cream) !important;
}

/* ── Service cards (services.html) ─────────────────────────── */
.services .service-card {
  background: #ffffff !important;
  border: 1px solid var(--dj-rule) !important;
  border-radius: 2px !important;
  padding: 32px 24px !important;
  box-shadow: none !important;
}

.services .service-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 24px !important;
  font-style: italic !important;
  color: var(--dj-plum) !important;
}

/* ── Healing cards (prices.html) ────────────────────────────── */
.healing-card {
  background: #ffffff !important;
  border: 1px solid var(--dj-rule) !important;
  border-radius: 2px !important;
  padding: 28px !important;
  box-shadow: none !important;
}

.healing-card h3,
.healing-card h4 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 22px !important;
  font-style: italic !important;
  color: var(--dj-plum) !important;
}

/* ── Session info / related services boxes ──────────────────── */
.session-info,
.related-services,
.practitioner-info,
.qualifications-section {
  background: #ffffff !important;
  border: 1px solid var(--dj-rule) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

.session-info h3,
.related-services h3 {
  color: var(--dj-plum) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-size: 26px !important;
}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-item {
  background: var(--dj-surface) !important;
  border: 1px solid var(--dj-rule) !important;
  border-left: 3px solid var(--dj-plum) !important;
  border-radius: 2px !important;
}

.faq-section h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-size: 28px !important;
  color: var(--dj-plum) !important;
  border-bottom: 1px solid var(--dj-rule) !important;
}

/* ── Harp featured callout ──────────────────────────────────── */
.harp-featured {
  background: var(--dj-surface) !important;
  border: 1px solid var(--dj-rule) !important;
  border-radius: 2px !important;
}

/* ── Price badges — deep plum, no gradient ──────────────────── */
#wrap div[style*="background: linear-gradient(135deg, #b347a5"],
#wrap span[style*="background: linear-gradient(135deg, #b347a5"],
#wrap a[style*="background: linear-gradient(135deg, #b347a5"] {
  background: var(--dj-plum) !important;
  color: var(--dj-cream) !important;
  box-shadow: none !important;
}

/* ── Links ───────────────────────────────────────────────────── */
#wrap a:not(.healing-cta-button):not(.healing-cta-secondary):not(.blog-back-link):not(.nav-menu a) {
  color: var(--dj-plum-mid) !important;
}

#wrap a:not(.healing-cta-button):not(.healing-cta-secondary):hover {
  color: var(--dj-gold) !important;
}

/* ── Blog cards ─────────────────────────────────────────────── */
.blog-post-card {
  background: #ffffff !important;
  border: 1px solid var(--dj-rule) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

/* ── Back link pill ─────────────────────────────────────────── */
.blog-back-link {
  background: var(--dj-surface) !important;
  border: 1px solid var(--dj-rule) !important;
  border-radius: 2px !important;
  color: var(--dj-plum) !important;
}

/* ── Footer headings ─────────────────────────────────────────── */
footer h3,
footer h4 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
}

/* ── Thin gold rule under first page heading ────────────────── */
#wrap h1::after {
  content: '';
  display: block;
  width: 48px;
  height: 1.5px;
  background: var(--dj-gold);
  margin: 14px auto 0;
}

/* ── Qualifications headings ─────────────────────────────────── */
.qualifications-section h3,
.qualifications-section h4,
.practitioner-info h3 {
  color: var(--dj-plum) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
}

/* ── About page feature boxes ────────────────────────────────── */
#wrap div[style*="background: rgba(255, 255, 255, 0.2)"][style*="border: 2px solid #ffffff"] {
  background: var(--dj-surface) !important;
  border: 1px solid var(--dj-rule) !important;
}

/* ── Loyalty section outer wrapper ─────────────────────────── */
#wrap div[style*="background: linear-gradient(135deg, rgba(179, 71, 165"] {
  background: var(--dj-surface) !important;
  border: 1px solid var(--dj-rule) !important;
  border-radius: 2px !important;
}

/* Loyalty section heading — was white on purple, now dark */
#wrap div[style*="background: linear-gradient(135deg, rgba(179, 71, 165"] h2 {
  color: var(--dj-plum) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
}

/* Inline #b347a5 text (discount figures, 50% OFF, 10% OFF etc.) */
#wrap [style*="color: #b347a5"] {
  color: var(--dj-plum) !important;
}

/* ── Blog card article title size ───────────────────────────── */
.blog-posts-grid h3,
.blog-posts-grid a h3 {
  font-size: 20px !important;
  line-height: 1.3 !important;
}

/* ── Blog card date/meta text ───────────────────────────────── */
.blog-posts-grid p[style*="font-size: 13px"] {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 13px !important;
  color: var(--dj-muted) !important;
  font-style: italic !important;
}

/* ── h1::after gold rule — scope to page heading only ─────────── */
/* Remove the blanket h1::after rule and be more specific */
#wrap h1::after {
  content: none;
}

/* Only apply under the main page title heading */
#wrap h1.healing-section-title::after,
#wrap h1.healing-main-title::after,
#wrap h1.page-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 1.5px;
  background: var(--dj-gold);
  margin: 14px auto 0;
}

/* ── Prices discount callout text (10% OFF inline) ──────────── */
#wrap p[style*="color: #b347a5"],
#wrap strong[style*="color: #b347a5"],
#wrap span[style*="color: #b347a5"] {
  color: var(--dj-plum) !important;
}

/* ── Blog article page title ─────────────────────────────────── */
.blog-post h1,
.blog-post h1.page-title {
  font-family: 'Fredericka the Great', serif !important;
  color: var(--dj-plum) !important;
}

/* ── Contact page form fields ────────────────────────────────── */
#wrap input[type="text"],
#wrap input[type="email"],
#wrap textarea,
#wrap select {
  border: 1px solid var(--dj-rule) !important;
  border-radius: 2px !important;
  font-family: 'Lora', Georgia, serif !important;
  font-size: 16px !important;
  padding: 12px !important;
  color: var(--dj-ink) !important;
}

#wrap input[type="text"]:focus,
#wrap input[type="email"]:focus,
#wrap textarea:focus {
  border-color: var(--dj-plum) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(58, 21, 53, 0.12) !important;
}

/* ── Explicit Fredericka reinforcement on all page titles ─────── */
/* Without !important these can lose to body font-family inheritance */
.healing-main-title,
.healing-section-title,
h1.healing-main-title,
h1.healing-section-title,
h1.page-title,
span.healing-main-title {
  font-family: 'Fredericka the Great', serif !important;
}

/* ── Tagline subtitles — bigger and more authoritative ───────── */
/* Was 36px Arvo — reduced too far to 22px; restore prominence */
.healing-section-subtitle,
.healing-sub-title,
div.healing-sub-title,
div.healing-sub-title span {
  font-family: 'Cormorant Garamond', 'Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-size: 30px !important;
  letter-spacing: 0.05em !important;
  color: var(--dj-plum-mid) !important;
  font-weight: 400 !important;
}

/* ── h2 section headings — upright, not italic ────────────────── */
/* Italic Cormorant is too decorative for content section dividers */
#wrap h2 {
  font-style: normal !important;
  font-size: 24px !important;
}

/* But keep italic for specific refined contexts */
.session-info h3,
.related-services h3,
.faq-section h3 {
  font-style: italic !important;
}

/* ── Healing section heading Fredericka (harp featured etc) ───── */
.harp-featured h2 {
  font-family: 'Fredericka the Great', serif !important;
  font-style: normal !important;
}

/* ── Services page grid fix ──────────────────────────────────── */
/* max-width: 100% was overflowing the panel; restore 1000px cap  */
/* Also fix icon visibility: ☮ and ♪ were white on white         */

.services #wrap .services-grid {
  max-width: 680px !important;
  padding: 0 10px !important;
}

/* Service icons — override inline color: #ffffff (invisible on white cards) */
#wrap .service-icon {
  color: var(--dj-plum-mid) !important;
  font-size: 48px !important;
}

/* ── Services page grid fix ──────────────────────────────────── */
/* max-width: 100% was overflowing the panel; restore 1000px cap  */
/* Also fix icon visibility: ☮ and ♪ were white on white         */

.services #wrap .services-grid {
  max-width: 680px !important;
  padding: 0 10px !important;
}

/* Service icons — override inline color: #ffffff (invisible on white cards) */
#wrap .service-icon {
  color: var(--dj-plum-mid) !important;
  font-size: 48px !important;
}

/* ── Contact form submit button ─────────────────────────────── */
/* Higher specificity (element + 2 classes) ensures it overrides .wpcf7-form-control color rule */
button.wpcf7-form-control.wpcf7-submit,
.wpcf7-submit {
  background: #3a1535 !important;
  color: #ffffff !important;
  border: 1.5px solid #3a1535 !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  padding: 14px 36px !important;
  cursor: pointer !important;
  transition: background 0.25s ease, color 0.25s ease !important;
}

button.wpcf7-form-control.wpcf7-submit:hover,
.wpcf7-submit:hover {
  background: #3a1535 !important;
  color: #ffffff !important;
  border-color: #3a1535 !important;
  transform: none !important;
}

/* ── Blog card grid — equal-height cards with button pinned to bottom ─── */
.blog-posts-grid {
  align-items: stretch !important;
}
.blog-posts-grid > div {
  display: flex !important;
  flex-direction: column !important;
}
.blog-posts-grid > div > a.healing-cta-button {
  margin-top: auto !important;
  align-self: flex-start !important;
}

/* ── Blog card divs (glassmorphism → clean white cards) ── */
.blog-posts-grid > div[style*="rgba(255, 255, 255, 0.1)"] {
  background: #ffffff !important;
  border: 1px solid var(--dj-rule) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 12px rgba(60, 21, 53, 0.06) !important;
  backdrop-filter: none !important;
}

/* Fix near-invisible excerpt text (rgba(255,255,255,0.85) on white bg) */
.blog-posts-grid > div p[style*="rgba(255, 255, 255, 0.85)"] {
  color: #1c1018 !important;
}

/* Fix white h2 link colour inside blog cards */
.blog-posts-grid > div h2 a {
  color: var(--dj-plum) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

/* ── Blog mobile: stack to single column ────────────────────── */
@media (max-width: 768px) {
  .blog-posts-grid {
    flex-direction: column !important;
  }
  .blog-posts-grid > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── Header phone — match nav Cormorant Garamond style ───────── */
.header-phone {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 18px !important;
  letter-spacing: 0.1em !important;
}

/* ── Footer Arvo inline headings → Cormorant Garamond ─────────── */
footer p[style*="Arvo"] {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  letter-spacing: 0.08em !important;
  font-size: 17px !important;
}

/* ═══════════════════════════════════════════════════════════════
   BLOG GRID — complete rewrite, no inline-style dependencies
   ═══════════════════════════════════════════════════════════════ */

/* Remove all old blog-posts-grid overrides that fought inline styles */
.blog-posts-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  align-items: unset !important;
  flex-direction: unset !important;
}

.blog-card {
  background: #ffffff !important;
  border: 1px solid var(--dj-rule) !important;
  border-radius: 8px !important;
  padding: 28px !important;
  box-shadow: 0 2px 12px rgba(60, 21, 53, 0.07) !important;
  display: flex !important;
  flex-direction: column !important;
  /* No width/flex-basis needed — grid handles sizing */
}

.blog-card-meta {
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic !important;
  font-size: 13px !important;
  color: var(--dj-muted) !important;
  margin: 0 0 10px !important;
}

.blog-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--dj-plum) !important;
  margin: 0 0 14px !important;
}

.blog-card-title a {
  color: var(--dj-plum) !important;
  text-decoration: none !important;
}

.blog-card-title a:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.blog-card-excerpt {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--dj-ink) !important;
  margin: 0 0 20px !important;
  flex: 1 !important;
}

.blog-card-btn {
  align-self: flex-start !important;
  margin-top: auto !important;
}

/* Mobile: single column */
@media (max-width: 680px) {
  .blog-posts-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
}

/* ── Nav logo — increase from 60px to 85px ─────────────────── */
.logo-img,
.nav-logo img {
  height: 85px !important;
  max-height: 85px !important;
}

/* ── Main hero logo — increase from 262px to 360px ─────────── */
.main-logo,
.home .vc_single_image-img.main-logo,
.vc_single_image-img.main-logo,
img.main-logo {
  width: 360px !important;
  height: 360px !important;
  max-width: 360px !important;
  max-height: 360px !important;
}

.vc_single_image-wrapper.vc_box_border_circle {
  width: 400px !important;
  height: 400px !important;
}

/* ── Harp page — shorter title fits single line ─────────────── */
body.harp .healing-section-title {
  font-size: 48px !important;
}
@media (max-width: 767px) {
  body.harp .healing-section-title {
    font-size: 34px !important;
  }
}

/* ── FAQ page — contain full-width row within white panel ─────── */
body.faq .wpex-vc-full-width-row {
  width: auto !important;
  margin-left: 0 !important;
}
body.faq .vc_custom_healing_contact_inner {
  padding: 10px 0 !important;
}
body.faq .vc_custom_healing_contact_inner > .wpb_wrapper {
  padding: 0 !important;
}
body.faq .faq-section h3 {
  color: #7b2878 !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 22px !important;
  font-style: italic !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid #e8d5e8 !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}
body.faq .faq-item {
  background: #fdf5fc !important;
  border: 1px solid #e8d5e8 !important;
  border-radius: 8px !important;
}
body.faq .faq-item h4 {
  color: #5a1e58 !important;
}
body.faq .faq-item p {
  color: #4a3248 !important;
}

/* ── Service card buttons — reduce letter-spacing so text fits in one line ── */
.service-card .healing-cta-button {
  letter-spacing: 0.06em !important;
  font-size: 16px !important;
  padding: 12px 20px !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Mobile responsive fixes ─────────────────────────────── */
@media (max-width: 600px) {
  /* Hero logo — prevent overflow on narrow screens */
  .main-logo,
  .home .vc_single_image-img.main-logo,
  .vc_single_image-img.main-logo,
  img.main-logo {
    width: 240px !important;
    height: 240px !important;
    max-width: 240px !important;
    max-height: 240px !important;
  }
  .vc_single_image-wrapper.vc_box_border_circle {
    width: 280px !important;
    height: 280px !important;
  }

  /* Subtitle — prevent "LOVE ● LIGHT ●" / "HOPE" split */
  .healing-section-subtitle,
  .healing-sub-title,
  div.healing-sub-title,
  div.healing-sub-title span {
    font-size: 18px !important;
    letter-spacing: 0.02em !important;
  }

  /* Services grid — single column on mobile */
  .services #wrap .services-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  /* All CTA buttons — reduce letter-spacing on mobile */
  .healing-cta-button {
    letter-spacing: 0.06em !important;
    font-size: 15px !important;
    padding: 12px 20px !important;
  }

  /* Nav logo — don't let it overwhelm narrow headers */
  .logo-img,
  .nav-logo img {
    height: 55px !important;
    max-height: 55px !important;
  }
}

/* ── Very small screen fixes — reduce stacked padding ─────── */
@media (max-width: 480px) {
  /* Reduce inner wrapper padding so content gets more horizontal room */
  .wpb_wrapper {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .vc_custom_healing_home_inner,
  .vc_custom_healing_services_inner,
  .vc_custom_healing_reiki_inner,
  .vc_custom_healing_harp_inner,
  .vc_custom_healing_crystal_inner,
  .vc_custom_healing_contact_inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Subtitle — use viewport-relative font size so it always fits */
  .healing-section-subtitle,
  .healing-sub-title,
  div.healing-sub-title,
  div.healing-sub-title span {
    font-size: clamp(14px, 4.5vw, 20px) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Buttons — smaller so they fit on one line */
  .healing-cta-button {
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    padding: 11px 16px !important;
  }
}

/* ── Fix 5th card orphan rule on mobile ───────────────────── */
@media (max-width: 600px) {
  .services #wrap .services-grid .service-card:nth-child(5) {
    grid-column: span 1 !important;
    max-width: 100% !important;
    justify-self: auto !important;
  }
}

/* ── Button text — force single line on mobile ────────────── */
@media (max-width: 600px) {
  .healing-cta-button {
    white-space: nowrap !important;
  }
}

/* ── Revert button white-space (nowrap causes overflow clipping) ─ */
@media (max-width: 600px) {
  .healing-cta-button {
    white-space: normal !important;
    overflow: visible !important;
  }
}

/* ── Service card buttons — tighter side padding so text fits one line ─ */
.service-card .healing-cta-button {
  padding-left: 10px !important;
  padding-right: 10px !important;
}