/* ============================================================
 * Resonate Circle Image UI Component
 * (moved from theme stylesheet)
 * ============================================================ */
/* ============================================================
 * Resonate Circle Image UI Component
 * ============================================================ */
a.resonate-image-card {
  display: flex;
  text-decoration: none !important;
}

a.resonate-image-card:hover {
  text-decoration: none !important;
}

.resonate-image-card .resonate-circle-image {
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.resonate-image-card:hover .resonate-circle-image {
  transform: scale(1.05);
}

.resonate-image-card .resonate-image-title {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5) !important;
  color: #fff !important;
  font-size: 1.1em;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  padding: 10px;
}

/* ============================================================
 * RH Action Menu UI Component (hard overrides)
 * ============================================================ */
.rh-actionmenu{
  position: absolute; /* parent should be position:relative */
  right: 10px;
  bottom: 10px;
  z-index: 10;
}

.rh-am-hidden{
  position: absolute !important;
  clip: rect(1px,1px,1px,1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Single “+” toggle */
.rh-am-trigger{
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* keep it readable even if theme styles buttons oddly */
.rh-am-trigger,
.rh-am-trigger:visited{
  color: #08334c !important;
}

/* Menu container (portalized to body at runtime, so keep colors explicit) */
.rh-am-menu{
  background: #fff !important;
  color: #08334c !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 45px rgba(0,0,0,.14) !important;
  padding: 6px !important;
}

.rh-am-menu[hidden]{ display:none !important; }

/* Menu items: override theme global button styles */
.rh-am-menu button{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  border: 0 !important;
  background: transparent !important;

  padding: 10px 10px !important;
  border-radius: 10px !important;

  cursor: pointer;
  font-size: 14px;
  line-height: 1.2;
  text-align: left;

  color: #08334c !important;          /* IMPORTANT */
  font-weight: 600;
  text-transform: none !important;
}

.rh-am-menu button:hover,
.rh-am-menu button:focus{
  outline: none !important;
  background: rgba(8,51,76,.12) !important; /* darker hover for contrast */
}

.rh-am-chevron{
  opacity: .65;
}

@media (max-width: 520px){
  .rh-am-trigger{ width: 38px; height: 38px; }
}
