/*
Theme Name: Dr Michelle Burger
Theme URI: https://drmichelleburger.elevatedev.co.za
Author: Elevate Dev
Description: Custom Elementor child theme for Dr Michelle Burger
Version: 1.0.0
Template: hello-elementor
License: GNU General Public License v2 or later
Text Domain: dr-michelle-burger
*/

/* =============================================
   GLOBAL VARIABLES & TYPOGRAPHY
   ============================================= */

:root {
  --color-teal:    #1c4a44;
  --color-teal-light: #235c55;
  --color-gold:    #f0b429;
  --color-gold-dark: #d99e1e;
  --color-white:   #ffffff;
  --color-dark:    #1a1a1a;
  --color-body:    #3d3d3d;
  --color-light-bg: #f8f7f4;

  --font-heading:  'Playfair Display', Georgia, serif;
  --font-script:   'Dancing Script', cursive;
  --font-body:     'Poppins', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--color-body);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

img { max-width: 100%; height: auto; }

/* =============================================
   NAVIGATION (Hello Elementor header overrides)
   ============================================= */

.site-header,
.site-header .site-branding,
.hfe-nav-menu__inner,
.elementor-nav-menu--main {
  background-color: var(--color-teal) !important;
}

/* Hello Elementor built-in header */
.site-header {
  padding: 0 40px;
}

.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
}

/* Primary nav menu */
.main-navigation ul li a,
.primary-menu li a,
.hfe-nav-menu .menu-item a,
.elementor-nav-menu--main .elementor-item {
  color: #ffffff !important;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.5px;
  text-decoration: none;
}

.main-navigation ul li a:hover,
.primary-menu li a:hover,
.hfe-nav-menu .menu-item a:hover,
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--color-gold) !important;
}

/* Dropdown menus */
.main-navigation ul ul,
.primary-menu ul ul {
  background-color: #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.main-navigation ul ul li a,
.primary-menu ul ul li a,
.elementor-nav-menu--dropdown .elementor-item {
  color: var(--color-dark) !important;
}

.main-navigation ul ul li a:hover,
.primary-menu ul ul li a:hover {
  color: var(--color-teal) !important;
  background-color: #f5f5f5;
}

/* =============================================
   BUTTONS
   ============================================= */

.elementor-button.btn-gold,
.btn-gold {
  background-color: var(--color-gold) !important;
  color: #ffffff !important;
  border: none !important;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 32px !important;
  border-radius: 4px !important;
  transition: background-color 0.2s ease;
}

.elementor-button.btn-gold:hover,
.btn-gold:hover {
  background-color: var(--color-gold-dark) !important;
}

/* =============================================
   SECTION: HERO
   ============================================= */

.section-hero {
  background-color: var(--color-teal);
  padding: 80px 60px;
}

.hero-heading {
  font-size: 52px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero-tagline {
  font-size: 24px;
  font-style: italic;
  color: var(--color-gold);
  font-family: var(--font-heading);
  margin-bottom: 16px;
}

.hero-subtitle {
  font-size: 18px;
  color: #ffffffcc;
  margin-bottom: 32px;
}

/* =============================================
   SECTION: STATS
   ============================================= */

.section-stats {
  background-color: #ffffff;
  padding: 70px 120px;
  text-align: center;
}

.stats-heading {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.3;
  margin-bottom: 20px;
}

.stats-heading em {
  font-style: italic;
}

.stats-divider {
  width: 60px;
  height: 3px;
  background: var(--color-gold);
  margin: 20px auto;
}

.stats-body {
  font-size: 16px;
  color: var(--color-body);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.8;
}

/* =============================================
   SECTION: DOES THIS SOUND FAMILIAR
   ============================================= */

.section-familiar {
  background-color: var(--color-teal);
  padding: 80px 120px;
  text-align: center;
}

.familiar-heading {
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  position: relative;
  display: inline-block;
}

.familiar-heading::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--color-gold);
  margin: 12px auto 32px;
}

.familiar-list {
  text-align: left;
  max-width: 600px;
  margin: 0 auto 32px;
  list-style: none;
  padding: 0;
}

.familiar-list li {
  color: #ffffffdd;
  font-size: 15px;
  padding: 6px 0 6px 24px;
  position: relative;
  line-height: 1.5;
}

.familiar-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--color-gold);
}

.familiar-callout {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 20px;
  color: var(--color-gold);
  margin-bottom: 16px;
}

.familiar-body {
  color: #ffffffcc;
  font-size: 16px;
  margin-bottom: 32px;
}

/* =============================================
   SECTION: WHAT IF
   ============================================= */

.section-whatif {
  background-color: #ffffff;
  padding: 80px 120px;
}

.whatif-heading {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.3;
  margin-bottom: 32px;
}

.whatif-body {
  font-size: 15px;
  color: var(--color-body);
  line-height: 1.8;
  margin-bottom: 16px;
}

.whatif-callout {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-dark);
  text-align: center;
  margin: 32px 0;
}

/* =============================================
   SECTION: BELIEVE
   ============================================= */

.section-believe {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px 60px;
}

.section-believe .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

.section-believe .believe-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
}

.believe-heading {
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.4;
}

.believe-heading .script {
  font-family: var(--font-script);
  font-size: 52px;
  font-weight: 400;
  display: inline;
}

/* =============================================
   ELEMENTOR GLOBAL OVERRIDES
   ============================================= */

.elementor-section.section-teal > .elementor-container {
  max-width: 1100px;
}

.elementor-widget-heading .elementor-heading-title {
  margin: 0 0 0.5em;
}

/* Remove default Elementor padding on mobile inner sections */
@media (max-width: 767px) {
  .section-stats,
  .section-familiar,
  .section-whatif {
    padding: 50px 24px;
  }

  .section-hero {
    padding: 50px 24px;
  }

  .hero-heading { font-size: 34px; }
  .hero-tagline { font-size: 20px; }
  .stats-heading { font-size: 24px; }
  .familiar-heading { font-size: 28px; }
  .believe-heading { font-size: 28px; }
  .believe-heading .script { font-size: 38px; }
}