/* ============================================================================
   BIOSPHERE DYNAMICS CUSTOM STYLE – Appointment Green Theme
   Optimized for Affiliate Marketing · SEO · Emotional UX · Speed
   ========================================================================== */

/* ===== GLOBAL VARIABLES – COLOR PALETTE (Psychological Impact + Branding) ===== */
:root {
  --color-green: #3ac569;           /* Trust, growth, nature */
  --color-green-dark: #2a954b;      /* Stronger CTA hover */
  --color-orange: #f68e5f;          /* Attention, energy */
  --color-bg: #f7fdf9;              /* Clean background */
  --color-section-bg: #ecfdf3;      /* Section contrast */
  --color-text-main: #1e1e1e;       /* Body text */
  --color-text-subtle: #555555;     /* Secondary text */
}

/* ===== BODY & TYPOGRAPHY ===== */
body {
  background-color: var(--color-bg);
  color: var(--color-text-subtle);
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-main);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1em;
}

/* ===== NAVBAR FIX FOR Appointment Green ===== */
.navbar-default.navbar6 {
  background-color: var(--color-bg);
  border-bottom: 2px solid var(--color-green);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}

.navbar-default.navbar6 .navbar-nav > li > a {
  color: var(--color-text-main);
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.navbar-default.navbar6 .navbar-nav > li > a:hover,
.navbar-default.navbar6 .navbar-nav > li.active > a {
  color: var(--color-green);
  border-bottom: 2px solid var(--color-green);
}

/* ===== CTA BUTTONS & FORMS ===== */
button,
input[type="submit"],
.wp-block-button__link,
.appointment-button {
  background-color: var(--color-green);
  color: #ffffff;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: bold;
  border: none;
  transition: background-color 0.3s ease;
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.appointment-button:hover {
  background-color: var(--color-green-dark);
}

/* ===== SERVICE BOXES – Home Sections (Emotional & Interactive) ===== */
.Service-section.service6 .service-area {
  background-color: var(--color-green);
  border-radius: 10px;
  transition: 0.3s ease;
  padding: 30px 20px 45px;
  margin-bottom: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.Service-section.service6 .service-area:hover {
  background-color: var(--color-green-dark);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.Service-section.service6 .service-area h3,
.Service-section.service6 .service-icon i,
.Service-section.service6 .service-area p {
  color: #ffffff;
}

/* ===== AFFILIATE LINK HIGHLIGHTS ===== */
a.affiliate-link {
  color: var(--color-orange);
  font-weight: bold;
  text-decoration: underline;
}
a.affiliate-link:hover {
  color: var(--color-green-dark);
  text-decoration: none;
}

/* ===== SECTION WRAPPERS ===== */
section,
.widget-area {
  background-color: var(--color-section-bg);
  padding: 3em 2em;
  border-radius: 8px;
  margin-bottom: 2em;
}

/* ===== BLOG FEATURED IMAGES ===== */
.post-thumbnail img,
.wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  margin-bottom: 1em;
}

/* ===== RESPONSIVE FIXES ===== */
@media (max-width: 768px) {
  .navbar-header.index6 .navbar-brand {
    float: none;
    display: block;
    padding-bottom: 10px;
  }
  .navbar6 .nav.navbar-right {
    padding: 0 0 12px;
  }
  section {
    padding: 2em 1em;
  }
  h1 { font-size: 1.8em; }
  h2 { font-size: 1.5em; }
}