/* Keep legacy theme accents aligned with the redesigned cyan palette.
   .btn-primary is deliberately left out here: critical.css already owns
   its full rest/hover styling (gradient background, text color) and
   redeclaring a flat color for only some of its states caused the
   button to visibly snap between two different looks on hover/unhover. */
a:hover,
a:focus,
.text-primary,
.icon-primary,
.icon-primary.icon-hover:hover,
.icon-primary.icon-hover:focus {
  color: #2fb6e5;
}

.bg-primary,
.icon-primary.icon-filled,
.icon-primary.icon-hover:hover,
.icon-primary.icon-hover:focus {
  background-color: #2fb6e5;
}

/* Hobbies & Interests icons: no color change on hover/focus, just the
   existing lift + shake/bounce/swing motion. The legacy theme forces a
   white-background + recolored-icon swap here (with !important), so it
   has to be cancelled explicitly rather than just left undeclared. */
#resume .list-inline .icon-circle.icon-hover:hover,
#resume .list-inline .icon-circle.icon-hover:focus {
  background: linear-gradient(145deg, #3bb4e3, #258fbe) !important;
  color: #effbff !important;
}
#resume .list-inline .icon-circle.icon-hover:hover .st0,
#resume .list-inline .icon-circle.icon-hover:focus .st0 {
  fill: #fff !important;
  stroke: #fff !important;
}

/* Mobile nav close button: the legacy .icon-circle centering trick
   (absolute + translate(-50%,-50%) on the child) leaves the fa-times
   glyph visibly off-center at this small icon-xs size. Flexbox centers
   the icon's actual box reliably regardless of size. */
#mobile-nav .mobile-nav-close.icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
}
#mobile-nav .mobile-nav-close.icon-circle > * {
  position: static;
  transform: none;
}

/* The legacy theme forces a white circle background on any .icon-circle
   hover (theme.css: .icon-circle.icon-hover:hover { background-color:
   #fff !important }), which would leave the white "x" invisible. Keep
   the blue circle on hover and swap the affordance for a lift + glow
   and a quarter-turn of the "x" instead. */
#mobile-nav .mobile-nav-close.icon-circle {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#mobile-nav .mobile-nav-close.icon-circle.icon-hover.icon-primary:hover,
#mobile-nav .mobile-nav-close.icon-circle.icon-hover.icon-primary:focus {
  background-color: #2fb6e5 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(47, 182, 229, 0.45);
}
#mobile-nav .mobile-nav-close.icon-circle:hover i,
#mobile-nav .mobile-nav-close.icon-circle:focus i {
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

/* Prevent the deferred legacy theme from collapsing contact actions into a stack. */
.contact-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) !important;
  gap: 8px !important;
  align-items: stretch !important;
}
.contact-actions a.btn {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px 5px !important;
  min-height: 42px !important;
  font-size: 11px !important;
  gap: 4px !important;
}
#headline .btn-primary {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
#headline .btn-primary span,
#headline .btn-primary i {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  transform: none !important;
  white-space: nowrap !important;
}
/* Move the contact card to the right side of the map instead of the left. */
#contact .contact-box {
  margin-left: auto !important;
  margin-right: 10%;
}
@media only screen and (max-width: 1480px) {
  #contact .contact-box {
    margin-right: 5%;
  }
}
@media only screen and (max-width: 1199px) {
  #contact .contact-box {
    margin-right: 1%;
  }
}
@media only screen and (max-width: 468px) {
  #contact .contact-box {
    margin-left: 1% !important;
    margin-right: 1%;
  }
}

@media only screen and (max-width: 480px) {
  .contact-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) !important;
    gap: 6px !important;
  }
  .contact-actions a.btn {
    min-height: 40px !important;
    padding: 9px 5px !important;
  }
}