.icon {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
}

.icon::before,
.icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.icon::before {
  opacity: 1;
  background-image: var(--icon-thin);
}

.icon::after {
  opacity: 0;
  background-image: var(--icon-bold, var(--icon-thin));
}

a:hover .icon,
a:focus-visible .icon {
  transform: translateY(-1px);
}

a:hover .icon::before,
a:focus-visible .icon::before {
  opacity: 0;
}

a:hover .icon::after,
a:focus-visible .icon::after {
  opacity: 1;
}

.icon--left {
  margin-right: 0.5rem;
}

/* Phone icon (thin → bold on hover) */
.icon-phone {
  --icon-thin: url("../icon/circle-phone.svg");
  --icon-bold: url("../icon/circle-phone (1).svg");
}

/* Scroll chevron (only thin version available) */
.icon-scroll {
  --icon-thin: url("../icon/chevron-double-dots-down.svg");
  --icon-bold: url("../icon/chevron-double-dots-down.svg");
}

/* Header nav icons */
.icon-nav {
  width: 26px;
  height: 26px;
}

/* Home */
.icon-home {
  --icon-thin: url("../icon/home.svg");
  --icon-bold: url("../icon/home (1).svg");
}

/* About (about.svg thin → about (1).svg bold) */
.icon-about {
  --icon-thin: url("../icon/about.svg");
  --icon-bold: url("../icon/about (1).svg");
}

/* Services (mug-hot-alt thin → (1) bold) */
.icon-services {
  --icon-thin: url("../icon/mug-hot-alt.svg");
  --icon-bold: url("../icon/mug-hot-alt (1).svg");
}

/* Contact (circle-phone thin → (1) bold) */
.icon-contact {
  --icon-thin: url("../icon/circle-phone.svg");
  --icon-bold: url("../icon/circle-phone (1).svg");
}

/* Portfolio (inbox-in thin → (1) bold) */
.icon-portfolio {
  --icon-thin: url("../icon/inbox-in.svg");
  --icon-bold: url("../icon/inbox-in (1).svg");
}

/* Blog (blog-text thin → (1) bold) */
.icon-blog {
  --icon-thin: url("../icon/blog-text.svg");
  --icon-bold: url("../icon/blog-text (1).svg");
}