/*
 * Theme Name:   Healing HeArtwork Child
 * Theme URI:    https://healingheartwork.com
 * Description:  Divi Child Theme for Healing HeArtwork
 * Author:       Kim Critz
 * Template:     Divi
 * Version:      1.0
 */

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

/* ============================================================
   CSS CUSTOM PROPERTIES (Brand tokens)
   ============================================================ */
:root {
  --gold:       #F2C84B;
  --terra:      #E8734A;
  --terra-dk:   #C85A2A;
  --teal:       #5BAAA0;
  --teal-dk:    #2D7A6F;
  --lavender:   #8A7EA8;
  --lav-lt:     #C8BEDC;
  --pink:       #E8448A;
  --linen:      #FBF7F1;
  --cream:      #FFF8E8;
  --mint:       #EAF5F3;
  --brown-dk:   #3D2A1E;
  --brown-md:   #6B5244;
  --brown-lt:   #8A7060;
  --footer-bg:  #2D7A6F;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Jost', sans-serif;
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  background-color: var(--linen) !important;
  color: var(--brown-dk) !important;
}

h1, h2, h3, h4, h5, h6,
.et_pb_text h1, .et_pb_text h2,
.et_pb_text h3, .et_pb_blurb_title {
  font-family: var(--font-serif) !important;
  font-weight: 300 !important;
  color: var(--brown-dk) !important;
}

p, li, span, div {
  font-family: var(--font-sans) !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
#main-header,
#main-header .et_pb_menu,
.et-fixed-header {
  background-color: var(--linen) !important;
  border-bottom: 1.5px solid var(--gold) !important;
}

#main-header .nav li a,
#main-header .et_mobile_menu li a {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--brown-lt) !important;
}

#main-header .nav li a:hover {
  color: var(--terra-dk) !important;
}

#main-header .nav li.current-menu-item > a {
  color: var(--terra-dk) !important;
  border-bottom: 1.5px solid var(--gold) !important;
}

#logo img { max-height: 50px !important; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hh-hero-section {
  background-color: transparent !important;
  min-height: 420px !important;
}

.hh-hero-left {
  background-color: rgba(237, 229, 218, 0.72) !important;
  padding: 60px 48px !important;
}

.hh-hero-eyebrow {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--terra-dk) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.hh-hero-eyebrow::before {
  content: '' !important;
  display: inline-block !important;
  width: 24px !important;
  height: 2px !important;
  background: var(--gold) !important;
  border-radius: 2px !important;
}

.hh-hero-title {
  font-family: var(--font-serif) !important;
  font-size: 48px !important;
  font-weight: 300 !important;
  line-height: 1.15 !important;
  color: var(--brown-dk) !important;
  margin-bottom: 20px !important;
}

.hh-hero-title em {
  font-style: italic !important;
  color: var(--teal) !important;
}

.hh-hero-title strong {
  font-weight: 400 !important;
  color: var(--terra-dk) !important;
}

.hh-hero-sub {
  font-size: 13px !important;
  line-height: 2 !important;
  color: var(--brown-md) !important;
  max-width: 300px !important;
  margin-bottom: 32px !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.et_pb_button,
.hh-btn-primary {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  background-color: var(--gold) !important;
  color: var(--brown-dk) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 30px !important;
}

.et_pb_button:hover,
.hh-btn-primary:hover {
  background-color: #e6bb38 !important;
  color: var(--brown-dk) !important;
}

.hh-btn-secondary {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background-color: var(--terra) !important;
  color: var(--linen) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 24px !important;
}

/* ============================================================
   BRUSHSTROKE DIVIDERS
   ============================================================ */
.hh-brush-gold {
  width: 100%;
  height: 6px;
  background: var(--gold);
  opacity: 0.55;
  border: none;
  margin: 0;
  /* Wavy edge via clip-path for brushstroke feel */
  clip-path: polygon(
    0% 20%, 2% 80%, 4% 30%, 6% 70%, 8% 25%,
    10% 75%, 12% 35%, 14% 65%, 16% 20%,
    18% 80%, 20% 40%, 22% 60%, 24% 25%,
    26% 75%, 28% 35%, 30% 65%, 32% 20%,
    34% 80%, 36% 40%, 38% 60%, 40% 25%,
    42% 75%, 44% 35%, 46% 65%, 48% 20%,
    50% 80%, 52% 40%, 54% 60%, 56% 25%,
    58% 75%, 60% 35%, 62% 65%, 64% 20%,
    66% 80%, 68% 40%, 70% 60%, 72% 25%,
    74% 75%, 76% 35%, 78% 65%, 80% 20%,
    82% 80%, 84% 40%, 86% 60%, 88% 25%,
    90% 75%, 92% 35%, 94% 65%, 96% 20%,
    98% 80%, 100% 40%,
    100% 100%, 0% 100%
  );
}

.hh-brush-teal {
  width: 100%;
  height: 5px;
  background: var(--teal);
  opacity: 0.40;
  border: none;
  margin: 0;
}

/* ============================================================
   ANNOUNCEMENT BANNER
   ============================================================ */
.hh-banner {
  background-color: var(--cream) !important;
  border-bottom: 0.5px solid var(--gold) !important;
  padding: 20px 48px !important;
}

.hh-banner .et_pb_text_inner {
  display: flex !important;
  gap: 18px !important;
  align-items: flex-start !important;
}

.hh-banner p {
  font-size: 13px !important;
  line-height: 1.85 !important;
  color: var(--brown-md) !important;
}

.hh-banner strong {
  color: var(--terra-dk) !important;
  display: block !important;
  margin-bottom: 3px !important;
  font-size: 14px !important;
}

/* ============================================================
   SECTION LABELS (eyebrows)
   ============================================================ */
.hh-section-label,
.hh-section-label p {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--terra-dk) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.hh-section-label::before,
.hh-section-label p::before {
  content: '' !important;
  display: inline-block !important;
  width: 24px !important;
  height: 2px !important;
  background: var(--gold) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   PULL QUOTE
   ============================================================ */
.hh-pull-quote,
.hh-pull-quote p {
  font-family: var(--font-serif) !important;
  font-size: 25px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.55 !important;
  color: var(--teal) !important;
  border-left: 3px solid var(--gold) !important;
  padding-left: 22px !important;
  margin-bottom: 22px !important;
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.hh-about-left {
  background-color: var(--mint) !important;
  padding: 56px 36px !important;
  text-align: center !important;
}

.hh-about-right {
  background-color: var(--linen) !important;
  padding: 56px 48px !important;
}

.hh-avatar-name {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  color: var(--brown-dk) !important;
  margin-bottom: 5px !important;
}

.hh-cert-badge,
.hh-cert-badge p {
  font-size: 10px !important;
  color: var(--brown-md) !important;
  border: 1px solid var(--gold) !important;
  padding: 7px 18px !important;
  background: rgba(255,255,255,0.7) !important;
  line-height: 1.7 !important;
}

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.hh-services-section {
  background-color: var(--linen) !important;
  padding: 56px 48px !important;
}

.hh-service-card {
  background-color: var(--cream) !important;
  padding: 26px 22px !important;
  border-top: 3px solid var(--gold) !important;
}

.hh-service-card.accent-gold  { border-top-color: var(--gold) !important; }
.hh-service-card.accent-terra { border-top-color: var(--terra) !important; }
.hh-service-card.accent-teal  { border-top-color: var(--teal) !important; }
.hh-service-card.accent-lav   { border-top-color: var(--lav-lt) !important; }
.hh-service-card.accent-pink  { border-top-color: var(--pink) !important; }

.hh-service-card .et_pb_blurb_title {
  font-family: var(--font-serif) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--brown-dk) !important;
  margin-bottom: 8px !important;
}

.hh-service-card p {
  font-size: 12px !important;
  line-height: 1.85 !important;
  color: var(--brown-md) !important;
}

/* ============================================================
   TESTIMONIAL SECTION
   ============================================================ */
.hh-testimonial-section {
  background-color: var(--lavender) !important;
  padding: 60px 80px !important;
  text-align: center !important;
}

.hh-testimonial-section blockquote,
.hh-testimonial-section .et_pb_text_inner {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.75 !important;
  color: #F4F0FA !important;
  max-width: 560px !important;
  margin: 0 auto 24px !important;
}

.hh-testimonial-attr,
.hh-testimonial-attr p {
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
}

/* ============================================================
   NEWSLETTER SECTION
   ============================================================ */
.hh-newsletter-section {
  background-color: var(--cream) !important;
  border-top: 3px solid var(--gold) !important;
  padding: 56px 48px !important;
  text-align: center !important;
}

.hh-newsletter-section h2 {
  font-family: var(--font-serif) !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  color: var(--brown-dk) !important;
}

.hh-newsletter-section p {
  font-size: 13px !important;
  color: var(--brown-md) !important;
  line-height: 1.8 !important;
}

/* Divi email optin field styling */
.hh-newsletter-section .et_pb_newsletter_form input[type="text"],
.hh-newsletter-section .et_pb_newsletter_form input[type="email"] {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  border: 1px solid var(--gold) !important;
  background: rgba(255,255,255,0.8) !important;
  border-radius: 0 !important;
  padding: 11px 16px !important;
}

.hh-newsletter-section .et_pb_newsletter_button {
  background-color: var(--terra) !important;
  color: var(--linen) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 11px 24px !important;
}

/* ============================================================
   SKETCHBOOK / BLOG PREVIEW SECTION
   ============================================================ */
.hh-sketchbook-section {
  background-color: var(--mint) !important;
  padding: 56px 48px !important;
}

.hh-sketchbook-section .et_pb_post_title {
  font-family: var(--font-serif) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--brown-dk) !important;
}

.hh-sketchbook-section .et_pb_post {
  background: rgba(255,255,255,0.75) !important;
  border: 0.5px solid #B5D8D4 !important;
  padding: 26px 22px !important;
}

/* Post card top accent — add custom classes via Divi row CSS */
.hh-post-card-1 { border-top: 3px solid var(--gold) !important; }
.hh-post-card-2 { border-top: 3px solid var(--lav-lt) !important; }
.hh-post-card-3 { border-top: 3px solid var(--terra) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
#main-footer,
#footer-bottom {
  background-color: var(--footer-bg) !important;
}

#main-footer .footer-widget h4,
#main-footer .footer-widget h3 {
  font-family: var(--font-serif) !important;
  font-size: 16px !important;
  color: #D4F0EC !important;
}

#main-footer .footer-widget,
#main-footer .footer-widget p,
#main-footer .footer-widget a {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  color: #8FD4CC !important;
  letter-spacing: 0.05em !important;
}

#main-footer .footer-widget a:hover {
  color: var(--gold) !important;
}

/* Footer logo text "HeArtwork" in gold italic */
.hh-footer-logo span {
  font-style: italic !important;
  color: var(--gold) !important;
}

/* Footer social pill buttons */
.hh-social-pill {
  display: inline-block !important;
  padding: 5px 14px !important;
  border: 0.5px solid var(--gold) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  margin: 0 4px !important;
  text-decoration: none !important;
}

#footer-bottom .container {
  color: #8FD4CC !important;
  font-size: 10px !important;
}

/* ============================================================
   PAGE-SPECIFIC BACKGROUNDS
   ============================================================ */

/* Workshops hero */
.hh-workshops-hero { background-color: var(--mint) !important; }

/* Stories hero */
.hh-stories-hero { background-color: var(--cream) !important; }

/* Sketchbook blog hero */
.hh-sketchbook-hero { background-color: var(--mint) !important; }

/* Stories testimonial card grid */
.hh-story-card {
  background-color: var(--cream) !important;
  padding: 28px 24px !important;
}

/* Lavender "share your story" CTA */
.hh-share-cta {
  background-color: var(--lavender) !important;
  padding: 48px !important;
  text-align: center !important;
}

.hh-share-cta h2,
.hh-share-cta p {
  color: #F4F0FA !important;
}

/* ============================================================
   DIVI BLOG MODULE (Sketchbook page)
   ============================================================ */
.hh-blog-index .et_pb_post {
  background-color: var(--cream) !important;
  border: 0.5px solid #D9CEBE !important;
  padding: 0 !important;
}

.hh-blog-index .et_pb_post .entry-title a {
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--brown-dk) !important;
}

.hh-blog-index .et_pb_post .post-meta {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--teal) !important;
}

.hh-blog-index .et_pb_post .post-content p {
  font-size: 12px !important;
  line-height: 1.85 !important;
  color: var(--brown-md) !important;
}

.hh-blog-index .et_pb_post .more-link {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--terra-dk) !important;
  border-bottom: 1px solid var(--gold) !important;
  text-decoration: none !important;
  padding-bottom: 2px !important;
}

/* Featured blog post (add class hh-featured-post to module) */
.hh-featured-post {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
}

.hh-featured-post .entry-title a {
  font-size: 30px !important;
}

/* ============================================================
   STEP NUMBERS (Workshops — What to Expect)
   ============================================================ */
.hh-step-number,
.hh-step-number p {
  font-family: var(--font-serif) !important;
  font-size: 48px !important;
  font-weight: 300 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
  opacity: 0.8 !important;
}

.hh-step-title,
.hh-step-title p {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--brown-dk) !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
}

.hh-step-body,
.hh-step-body p {
  font-size: 12px !important;
  line-height: 1.85 !important;
  color: var(--brown-md) !important;
}

/* ============================================================
   WIDE BLOG POST CARDS (Sketchbook page horizontal layout)
   ============================================================ */
.hh-wide-card {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  background-color: var(--cream) !important;
  border: 0.5px solid #D9CEBE !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}

.hh-wide-card-reversed {
  grid-template-columns: 1fr 280px !important;
}

.hh-wide-card-body {
  padding: 28px 32px !important;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.hh-text-teal     { color: var(--teal) !important; }
.hh-text-terra    { color: var(--terra-dk) !important; }
.hh-text-gold     { color: var(--gold) !important; }
.hh-text-lavender { color: var(--lavender) !important; }
.hh-italic        { font-style: italic !important; }
.hh-serif         { font-family: var(--font-serif) !important; }
.hh-sans          { font-family: var(--font-sans) !important; }
.hh-uppercase     { text-transform: uppercase !important; letter-spacing: 0.14em !important; }
.hh-bg-mint       { background-color: var(--mint) !important; }
.hh-bg-cream      { background-color: var(--cream) !important; }
.hh-bg-linen      { background-color: var(--linen) !important; }
.hh-bg-lavender   { background-color: var(--lavender) !important; }
.hh-bg-footer     { background-color: var(--footer-bg) !important; }

/* ============================================================
   RESPONSIVE — MOBILE ADJUSTMENTS
   ============================================================ */
@media (max-width: 980px) {
  .hh-hero-title { font-size: 36px !important; }
  .hh-hero-left  { padding: 40px 28px !important; }
  .hh-testimonial-section { padding: 40px 28px !important; }
  .hh-newsletter-section  { padding: 40px 28px !important; }
  .hh-wide-card { grid-template-columns: 1fr !important; }
}

@media (max-width: 767px) {
  .hh-hero-title { font-size: 30px !important; }
  .hh-pull-quote, .hh-pull-quote p { font-size: 20px !important; }
  .hh-testimonial-section blockquote,
  .hh-testimonial-section .et_pb_text_inner { font-size: 18px !important; }
}