/* ==========================================================
   skin_Eco.css — Halogen-Free Green Theme (Final merged)
   ========================================================== */

:root {
  --accent-color: #18a15f;
  --accent-dark: #0b7a3a;
  --leaf-light: #e8f7ef;
  --shadow: rgba(0,0,0,.05);
}

/* ============================
   Hero section
============================ */
.eco-hero {
  background: linear-gradient(135deg, #eaf9f0, #ffffff);
  border-left: 6px solid var(--accent-color);
  border-radius: 12px;
  padding: 34px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}
.eco-hero::after {
  content:""; /* removed decorative icon */
}

/* ============================
   Section Heading Glow
============================ */
.module.card h2 {
  text-shadow: 0 0 0.5px var(--accent-dark);
}

/* ============================
   Buttons
============================ */
.btn-primary {
  background: var(--accent-color);
  border-color: var(--accent-dark);
}
.btn-primary:hover {
  background: var(--accent-dark);
}
.btn-outline {
  border-color: var(--accent-dark);
  color: var(--accent-dark);
}
.btn-outline:hover {
  background: var(--accent-dark);
  color: #fff;
}

/* ============================
   Eco checklist bullets
============================ */
ul.checklist {
  list-style: none !important;
  padding-left: 0 !important;
}
ul.checklist li {
  margin: 6px 0;
  padding-left: 14px;
  position: relative;
}
ul.checklist li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent-color);
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0.55em;
}

/* ============================
   Image styling (HF content)
============================ */

/* First image — right side, controlled width */
.first-img img {
  width: 240px;
  height: 165px;
  object-fit: cover;
  float: right;
  margin: 0 0 8px 15px;
  border-radius: 12px;
  box-shadow: 0 2px 8px var(--shadow);
}

/* === Second image container fix === */
.hf-img-col {
  float: right;
  width: 260px;
  margin-left: 20px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hf-img-col img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 8px var(--shadow);
}

.hf-img-col .img-caption {
  font-size: 12px;
  color: #555;
  margin-top: 6px;
  white-space: nowrap;
  align-self: flex-end;
}

/* Ensure card grows to fit floated image + caption */
.hf-flex-block::after {
  content: "";
  display: table;
  clear: both;
}

/* ============================
   Floater overrides
============================ */
.floater-section-title {
  display:none !important;
}

/* Eco hover for floater links */
.halogen-page .left-nav a:hover {
  background: #e8f7ef;
  border-left-color: var(--accent-color);
  transform: translateX(2px);
}

/* Fix spacing below last card */
.module.card:last-of-type {
  margin-bottom: 48px !important;
}