/*
Theme Name:   MadCity Hello Child
Theme URI:    https://melissagregorysimon.com
Description:  Hello Elementor child theme for MadCity Viola & Violin Studio.
              Design: "Warm Craftsman Studio" — forest green, warm cream, amber gold.
              Emotional goal: Every section answers the parent's unspoken question:
              "Will this person genuinely like my child?"
Author:       Melissa Gregory-Simon
Author URI:   https://melissagregorysimon.com
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  madcity-hello-child
*/

/* ============================================================
   BRAND COLOR PALETTE
   --mc-forest:        #2d5a3d  (Deep forest green — trust, Wisconsin, growth)
   --mc-forest-light:  #3d7a53  (Lighter forest — labels, accents)
   --mc-forest-dark:   #1a3826  (Darkest forest — headings, contact bg)
   --mc-cream:         #faf6ed  (Warm ivory — page background)
   --mc-cream-dark:    #f2ead8  (Slightly deeper cream — alternate sections)
   --mc-amber:         #c8883a  (Rosin gold — CTAs, highlights, warmth)
   --mc-amber-light:   #e8b870  (Lighter amber — labels on dark backgrounds)
   --mc-charcoal:      #2e2a22  (Dark brown-gray — body text)
   ============================================================ */

:root {
  --mc-forest:       #2d5a3d;
  --mc-forest-light: #3d7a53;
  --mc-forest-dark:  #1a3826;
  --mc-cream:        #faf6ed;
  --mc-cream-dark:   #f2ead8;
  --mc-amber:        #c8883a;
  --mc-amber-light:  #e8b870;
  --mc-charcoal:     #2e2a22;
  --mc-border:       #e0d8c8;
}

/* ── GLOBAL BASE ─────────────────────────────────────────── */
body {
  background-color: var(--mc-cream);
  color: var(--mc-charcoal);
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--mc-forest-dark);
  line-height: 1.25;
}

a {
  color: var(--mc-forest);
  transition: color 0.2s ease;
}
a:hover {
  color: var(--mc-amber);
}

/* ── ELEMENTOR GLOBAL OVERRIDES ──────────────────────────── */
.elementor-widget-heading .elementor-heading-title {
  font-family: 'Playfair Display', Georgia, serif;
}

.elementor-widget-text-editor {
  font-family: 'DM Sans', system-ui, sans-serif;
  line-height: 1.75;
}

/* ── UTILITY CLASSES (usable in Elementor Custom CSS fields) ── */

/* Amber CTA button */
.mc-btn-amber {
  display: inline-block;
  background-color: var(--mc-amber);
  color: var(--mc-charcoal) !important;
  padding: 14px 36px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  border-radius: 2px;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.mc-btn-amber:hover {
  opacity: 0.9;
  transform: scale(1.02);
  color: var(--mc-charcoal) !important;
}

/* Forest CTA button */
.mc-btn-forest {
  display: inline-block;
  background-color: var(--mc-forest);
  color: #ffffff !important;
  padding: 14px 36px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  border-radius: 2px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.mc-btn-forest:hover {
  opacity: 0.88;
  color: #ffffff !important;
}

/* Ghost button (white border, for dark backgrounds) */
.mc-btn-ghost {
  display: inline-block;
  background-color: transparent;
  color: #ffffff !important;
  padding: 13px 35px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 2px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.mc-btn-ghost:hover {
  background-color: rgba(255,255,255,0.10);
  color: #ffffff !important;
}

/* Section eyebrow label */
.mc-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--mc-forest-light);
}
.mc-eyebrow-light {
  color: var(--mc-amber-light);
}

/* Pull quote / accent text */
.mc-pullquote {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--mc-forest);
  border-left: 3px solid var(--mc-amber);
  padding-left: 1.25rem;
  line-height: 1.6;
}

/* Trust bar stat */
.mc-stat-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--mc-forest);
}
.mc-stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #7a7060;
}

/* Credential card */
.mc-credential-card {
  background-color: var(--mc-cream);
  border: 1px solid var(--mc-border);
  border-radius: 2px;
  padding: 20px;
}
.mc-credential-card .mc-eyebrow {
  margin-bottom: 10px;
}

/* Quote card (dark bg) */
.mc-quote-card {
  background-color: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  padding: 24px;
}
.mc-quote-card p {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.65;
}
.mc-quote-card .mc-attribution {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 16px;
}

/* Thank-you note card */
.mc-note-card {
  background-color: var(--mc-cream);
  border: 1px solid var(--mc-border);
  border-radius: 2px;
  padding: 32px;
  box-shadow: 0 2px 16px rgba(22,38,28,0.06);
}
.mc-note-card blockquote {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--mc-forest-dark);
  line-height: 1.65;
  margin: 0 0 16px 0;
  padding: 0;
  border: none;
}
.mc-note-card-featured {
  background-color: var(--mc-forest);
  border: none;
  box-shadow: 0 8px 32px rgba(22,38,28,0.20);
}
.mc-note-card-featured blockquote {
  color: rgba(255,255,255,0.92);
}

/* Program card */
.mc-program-card {
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 2px;
  padding: 32px;
}
.mc-program-card-featured {
  border-color: var(--mc-amber);
  background-color: rgba(255,255,255,0.10);
}
.mc-program-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  color: #ffffff;
  font-size: 1.25rem;
  margin-bottom: 4px;
}
.mc-program-card .mc-age-badge {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-amber-light);
}
.mc-program-card p, .mc-program-card li {
  color: rgba(255,255,255,0.75);
  font-size: 0.9rem;
  line-height: 1.65;
}

/* How-to-start step card */
.mc-step-card {
  background-color: rgba(255,255,255,0.85);
  border: 1px solid rgba(22,38,28,0.12);
  border-radius: 2px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(22,38,28,0.06);
}
.mc-step-card-featured {
  background-color: var(--mc-forest);
  border: none;
  box-shadow: 0 8px 40px rgba(22,38,28,0.25);
}
.mc-step-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  color: var(--mc-amber);
  opacity: 0.6;
}
.mc-step-card-featured .mc-step-number {
  color: var(--mc-amber-light);
}
.mc-step-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  color: var(--mc-forest-dark);
}
.mc-step-card-featured h3 {
  color: #ffffff;
}
.mc-step-card p {
  font-size: 0.9rem;
  color: var(--mc-charcoal);
}
.mc-step-card-featured p {
  color: rgba(255,255,255,0.75);
}

/* Rate card */
.mc-rate-card {
  background-color: var(--mc-cream);
  border: 1px solid var(--mc-border);
  border-radius: 2px;
  padding: 32px;
  text-align: center;
}
.mc-rate-card-featured {
  background-color: var(--mc-forest);
  border: none;
  box-shadow: 0 8px 32px rgba(22,38,28,0.25);
  transform: scale(1.05);
}
.mc-rate-duration {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-forest-light);
}
.mc-rate-card-featured .mc-rate-duration {
  color: var(--mc-amber-light);
}
.mc-rate-price {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--mc-forest-dark);
}
.mc-rate-card-featured .mc-rate-price {
  color: #ffffff;
}
.mc-rate-note {
  font-size: 0.8rem;
  color: #7a7060;
}
.mc-rate-card-featured .mc-rate-note {
  color: rgba(255,255,255,0.65);
}

/* Contact info item */
.mc-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.mc-contact-item .mc-contact-icon {
  font-size: 1.25rem;
  margin-top: 2px;
}
.mc-contact-item .mc-contact-label {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-amber-light);
}
.mc-contact-item a, .mc-contact-item p {
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  margin: 0;
}
.mc-contact-item a:hover {
  color: #e8b870;
}

/* Contact card (cream box inside dark section) */
.mc-contact-card {
  background-color: var(--mc-cream);
  border-radius: 2px;
  padding: 40px;
}
.mc-contact-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  color: var(--mc-forest-dark);
  margin-bottom: 12px;
}
.mc-contact-card p {
  font-size: 0.9rem;
  color: var(--mc-charcoal);
  line-height: 1.7;
}

/* Wave SVG divider helper */
.mc-wave-top {
  overflow: hidden;
  line-height: 0;
  margin-top: -60px;
}
.mc-wave-bottom {
  overflow: hidden;
  line-height: 0;
  margin-bottom: -1px;
}

/* Amber horizontal rule */
.mc-amber-rule {
  height: 1px;
  background-color: var(--mc-amber-light);
  border: none;
  margin: 0 auto;
  max-width: 1280px;
}

/* Scroll-reveal (optional — Elementor Pro has its own entrance animations) */
.mc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.mc-reveal.mc-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── RESPONSIVE ADJUSTMENTS ──────────────────────────────── */
@media (max-width: 768px) {
  .mc-rate-card-featured {
    transform: none;
  }
}