/* ============================================
   THE VISITOR'S GUIDE - Final Fixes
   ============================================ */

/* 1. Fix Nav Logo Size - MUCH LARGER */
.nav-logo {
  height: 90px !important;
}

.nav-wrapper {
  padding: 0 20px !important;
  height: auto !important;
  min-height: unset !important;
}

.nav-container {
  padding: 0 !important;
  height: auto !important;
}

/* Adjust nav menu alignment */
.nav-menu {
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Fix SVG Graphics in Light Mode */
.feature-bg-icon path,
.feature-bg-icon circle,
.feature-bg-icon rect,
.feature-bg-icon ellipse,
.feature-bg-icon line {
  stroke: var(--brand-primary) !important;
  stroke-width: 1.5px !important;
  opacity: 0.35 !important;
}

[data-theme="dark"] .feature-bg-icon path,
[data-theme="dark"] .feature-bg-icon circle,
[data-theme="dark"] .feature-bg-icon rect,
[data-theme="dark"] .feature-bg-icon ellipse,
[data-theme="dark"] .feature-bg-icon line {
  stroke: var(--brand-secondary) !important;
  stroke-width: 1px !important;
  opacity: 0.2 !important;
}

/* 3. Feature Cards with Beautiful Borders & Shadows */
.feature-card {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 107, 107, 0.15) !important;
  box-shadow: 
    0 2px 10px rgba(255, 107, 107, 0.08),
    0 8px 30px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[data-theme="dark"] .feature-card {
  background: rgba(30, 30, 30, 0.9) !important;
  border: 1px solid rgba(255, 183, 0, 0.15) !important;
  box-shadow: 
    0 2px 10px rgba(255, 183, 0, 0.08),
    0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

.feature-card:hover {
  transform: translateY(-8px) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 
    0 12px 40px rgba(255, 107, 107, 0.2),
    0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .feature-card:hover {
  border-color: var(--brand-secondary) !important;
  box-shadow: 
    0 12px 40px rgba(255, 183, 0, 0.2),
    0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

/* 4. Fix Master the Art Title - Beautiful Book Style */
#about .section-title {
  font-family: var(--font-display) !important;
  font-size: 3.5rem !important;
  font-weight: 900 !important;
  text-align: center !important;
  margin: 3rem auto !important;
  padding: 1rem 0 !important;
  background: var(--brand-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: 0 2px 20px rgba(255, 107, 107, 0.1);
  letter-spacing: 2px;
  position: relative;
}

/* Remove the weird lines */
#about .section-title::before,
#about .section-title::after {
  display: none !important;
}

/* Add elegant underline */
#about .section-title::after {
  content: '' !important;
  display: block !important;
  width: 200px !important;
  height: 2px !important;
  background: var(--brand-gradient) !important;
  margin: 1.5rem auto 0 !important;
  opacity: 0.3 !important;
}

/* 5. Fluid Gradient Backgrounds */
body {
  background: linear-gradient(180deg, 
    var(--bg-light) 0%,
    rgba(255, 107, 107, 0.02) 25%,
    rgba(255, 183, 0, 0.02) 50%,
    rgba(255, 107, 107, 0.02) 75%,
    var(--bg-light) 100%) !important;
}

[data-theme="dark"] body {
  background: linear-gradient(180deg, 
    var(--bg-dark) 0%,
    rgba(255, 107, 107, 0.05) 25%,
    rgba(255, 183, 0, 0.05) 50%,
    rgba(255, 107, 107, 0.05) 75%,
    var(--bg-dark) 100%) !important;
}

.hero {
  background: linear-gradient(135deg, 
    rgba(255, 107, 107, 0.03) 0%,
    rgba(255, 183, 0, 0.03) 100%);
}

[data-theme="dark"] .hero {
  background: linear-gradient(135deg, 
    rgba(255, 107, 107, 0.08) 0%,
    rgba(255, 183, 0, 0.08) 100%);
}

.features {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 183, 0, 0.02) 50%,
    transparent 100%) !important;
}

[data-theme="dark"] .features {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 183, 0, 0.05) 50%,
    transparent 100%) !important;
}

/* 6. Newsletter Section Styling */
.newsletter {
  background: linear-gradient(135deg, 
    rgba(255, 107, 107, 0.05) 0%,
    rgba(255, 183, 0, 0.05) 100%) !important;
  border-top: 1px solid rgba(255, 107, 107, 0.1);
  border-bottom: 1px solid rgba(255, 183, 0, 0.1);
  padding: 60px 0 !important;
}

[data-theme="dark"] .newsletter {
  background: linear-gradient(135deg, 
    rgba(255, 107, 107, 0.08) 0%,
    rgba(255, 183, 0, 0.08) 100%) !important;
  border-top: 1px solid rgba(255, 107, 107, 0.2);
  border-bottom: 1px solid rgba(255, 183, 0, 0.2);
}

/* Hide duplicate EmailOctopus title */
.emailoctopus-form-wrapper h1,
.nurture-container h1,
div[eo-block="title"] {
  display: none !important;
}

/* Hide the redundant text */
div[eo-block="text"] {
  display: none !important;
}

/* Hide the logo in EmailOctopus */
div[eo-block="image"] {
  display: none !important;
}

/* 7. Fix EmailOctopus Theme Styles */
.emailoctopus-form-wrapper,
.emailoctopus-form-default {
  background: transparent !important;
  max-width: 500px !important;
  margin: 0 auto !important;
}

.emailoctopus-form-wrapper input[type="text"],
.emailoctopus-form-wrapper input[type="email"] {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 2px solid rgba(255, 107, 107, 0.2) !important;
  color: var(--text-primary) !important;
  padding: 12px 20px !important;
  border-radius: 50px !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  width: 100% !important;
  margin-bottom: 1rem !important;
  transition: all 0.3s ease !important;
}

[data-theme="dark"] .emailoctopus-form-wrapper input[type="text"],
[data-theme="dark"] .emailoctopus-form-wrapper input[type="email"] {
  background: rgba(30, 30, 30, 0.9) !important;
  border: 2px solid rgba(255, 183, 0, 0.2) !important;
  color: var(--text-primary-dark) !important;
}

.emailoctopus-form-wrapper input:focus {
  outline: none !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1) !important;
}

[data-theme="dark"] .emailoctopus-form-wrapper input:focus {
  border-color: var(--brand-secondary) !important;
  box-shadow: 0 0 0 3px rgba(255, 183, 0, 0.1) !important;
}

.emailoctopus-form-wrapper input[type="submit"],
.emailoctopus-form-wrapper .btn-primary {
  background: var(--brand-gradient) !important;
  color: white !important;
  border: none !important;
  padding: 14px 40px !important;
  border-radius: 50px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  width: auto !important;
  display: inline-block !important;
  margin: 1rem auto 0 !important;
}

.emailoctopus-form-wrapper input[type="submit"]:hover,
.emailoctopus-form-wrapper .btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3) !important;
}

/* Hide Powered by EmailOctopus */
.mastfoot,
div[eo-block="powered-by"] {
  display: none !important;
}

/* Center the form */
.emailoctopus-form {
  text-align: center !important;
}

.emailoctopus-form-row {
  margin-bottom: 0.75rem !important;
}

/* Newsletter section title with nice border */
#newsletter .section-title {
  font-family: var(--font-display) !important;
  font-size: 2.5rem !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 2px solid rgba(255, 107, 107, 0.2) !important;
  background: var(--brand-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Fix placeholder text color */
.emailoctopus-form-wrapper input::placeholder {
  color: var(--text-secondary) !important;
  opacity: 0.7 !important;
}

[data-theme="dark"] .emailoctopus-form-wrapper input::placeholder {
  color: var(--text-secondary-dark) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .nav-logo {
    height: 70px !important;
  }
  
  #about .section-title {
    font-size: 2.5rem !important;
  }
}