/* ===========================================
   ICON DIVIDER SECTION STYLES (baseline)
   =========================================== */
.divider-section{
  display:flex; align-items:center; justify-content:center;
  width:95%; margin:40px auto;
}
.divider-section hr{
  flex:1; border:none; border-top:1px solid #222222;
  margin:0 20px; position:relative; top:1px; transition:border-top-color .3s ease;
}
.divider-section .icon-wrapper{ display:inline-block; transition:transform .3s ease; }
.divider-section i{ font-size:36px; color:#00ccff; transition:color .3s ease; }
/* wrapper no longer scales to avoid double-scaling */
/* .divider-section:hover .icon-wrapper{ transform:scale(1.2); } */
.divider-section:hover i{ color:#0077aa; }
.divider-section:hover hr{ border-top-color:#444444; }

/* Icon Spin Effect (utility if you apply .icon-spin elsewhere) */
@keyframes spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
.icon-spin{ animation: spin .8s linear; }

/* ===========================================
   Custom Tooltip Shortcode with Styled Hover
   =========================================== */
.custom-tooltip{ position:relative; display:inline-block; cursor:help; }
.custom-tooltip::after{
  content: attr(data-tooltip);
  position:absolute; bottom:125%; left:50%; transform:translateX(-50%);
  background:#111; color:#00ccff; padding:6px 10px; border-radius:4px; white-space:nowrap;
  opacity:0; transition:opacity .3s ease; pointer-events:none; z-index:9999; font-size:14px;
}
.custom-tooltip:hover::after{ opacity:1; }

/* ===========================================
   Icon divider + year specificity fix
   =========================================== */
.icon-divider .year{
  color:inherit; text-shadow: var(--overlay-text-shadow, none) !important;
  font-weight:700; letter-spacing:.02em;
}
.icon-divider.icon-divider .year{
  text-shadow: var(--overlay-text-shadow, none) !important;
}

/* ===========================================
   Container-driven hover (no child i:hover differences)
   =========================================== */
.divider-section .icon-wrapper,
.divider-section .icon-wrapper *,
.divider-section i{
  pointer-events: none; /* prevents rogue i:hover from other components */
}
.divider-section .icon-wrapper i{
  transition: transform .35s ease, color .35s ease, filter .35s ease;
}
.divider-section:hover .icon-wrapper i{
  transform: rotate(360deg) scale(1.12);
  color: #0077aa; /* darker brand blue */
  filter: drop-shadow(0 0 4px rgba(0,0,0,.2));
}

/* ICON LIST — force brand cyan at rest, darker blue on hover */
.section-wrapper .icon-list li i.fa-solid,
.icon-list li i.fa-solid{
  color: var(--brand-cyan, #00ccff) !important;
  transition: color .25s ease;
}

.section-wrapper .icon-list li:hover i.fa-solid,
.icon-list li:hover i.fa-solid,
.section-wrapper .icon-list li a:hover i.fa-solid,
.icon-list li a:hover i.fa-solid{
  color: #0077aa !important; /* darker brand blue */
}